30:T571,floydSteinberg = { let ctx = DOM.canvas(data.width, data.height).getContext('2d'); ctx.canvas.style.width = `${data.width * 2}px`; let clone = new ImageData( new Uint8ClampedArray(data.data.data), data.width, data.height ); function px(x, y) { return x * 4 + y * data.width * 4; } for (let y = 0; y < data.height; y++) { for (let x = 0; x < data.width; x++) { let oldPixel = clone.data[px(x, y)]; let newPixel = oldPixel > 125 ? 255 : 0; clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[ px(x, y) + 2 ] = newPixel; let quantError = oldPixel - newPixel; clone.data[px(x + 1, y)] = clone.data[px(x + 1, y) + 1] = clone.data[ px(x + 1, y) + 2 ] = clone.data[px(x + 1, y)] + (quantError * 7) / 16; clone.data[px(x - 1, y + 1)] = clone.data[ px(x - 1, y + 1) + 1 ] = clone.data[px(x - 1, y + 1) + 2] = clone.data[px(x - 1, y + 1)] + (quantError * 3) / 16; clone.data[px(x, y + 1)] = clone.data[px(x, y + 1) + 1] = clone.data[ px(x, y + 1) + 2 ] = clone.data[px(x, y + 1)] + (quantError * 5) / 16; clone.data[px(x + 1, y + 1)] = clone.data[ px(x + 1, y + 1) + 1 ] = clone.data[px(x + 1, y + 1) + 2] = clone.data[px(x + 1, y + 1)] + (quantError * 1) / 16; } } ctx.putImageData(clone, 0, 0); yield ctx.canvas; }31:T4a2,atkinson = { let GRAYS = 256; let THRESHOLD = []; for (let i = 0; i < GRAYS; i++) { THRESHOLD.push(i < (GRAYS >> 1) ? 0 : GRAYS - 1); } let ctx = DOM.canvas(data.width, data.height).getContext('2d'); ctx.canvas.style.width = `${data.width * 2}px`; ctx.canvas.style.imageRendering = 'pixelated'; let clone = new ImageData(new Uint8ClampedArray(data.data.data), data.width, data.height); function px(x, y) { return (x * 4) + (y * data.width * 4); } for (let y = 0; y < data.height; y++) { for (let x = 0; x < data.width; x++) { let oldPixel = clone.data[px(x, y)]; let grayNew = THRESHOLD[oldPixel]; let grayErr = (oldPixel - grayNew) >> 3; let newPixel = oldPixel > 125 ? 255 : 0; clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = newPixel; let quantError = oldPixel - newPixel; clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = grayNew; [[1, 0], [2, 0], [-1, 1], [0, 1], [1, 1], [0, 2]].forEach(([dx, dy]) => { clone.data[px(x + dx, y + dy)] += grayErr; }); } } ctx.putImageData(clone, 0, 0); yield ctx.canvas; }32:T490,viewof kernel = { let ui = html`

`; let inputs = ui.querySelectorAll('input'); function valid() { let sum = 0; for (let k of kernel) sum += k; console.log(sum); return sum === 16; } let kernel = [7, 3, 5, 1]; kernel.forEach((k, i) => { inputs[i].value = k; inputs[i].addEventListener('input', evt => { let change = kernel[i] - +evt.target.value; kernel[i] = +evt.target.value; for (let j = 0; j < 4; j++) { if (j !== i && (kernel[j] + change) > 0 && (kernel[j] + change) < 16) { kernel[j] += change; inputs[j].value = kernel[j]; break; } } ui.style.background = 'white'; ui.value = kernel; ui.dispatchEvent(new CustomEvent('change')); }); }); ui.value = kernel; ui.dispatchEvent(new CustomEvent('change')); return ui; }33:T595,floydDIY = { let ctx = DOM.canvas(data.width, data.height).getContext('2d'); ctx.canvas.style.width = `${data.width * 2}px`; ctx.canvas.style.imageRendering = 'pixelated'; let clone = new ImageData(new Uint8ClampedArray(data.data.data), data.width, data.height); function px(x, y) { return (x * 4) + (y * data.width * 4); } for (let y = 0; y < data.height; y++) { for (let x = 0; x < data.width; x++) { let oldPixel = clone.data[px(x, y)]; let newPixel = oldPixel > 125 ? 255 : 0; clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = newPixel; let quantError = oldPixel - newPixel; clone.data[px(x + 1, y )] = clone.data[px(x + 1, y ) + 1] = clone.data[px(x + 1, y ) + 2] = clone.data[px(x + 1, y )] + quantError * kernel[0] / 16 clone.data[px(x - 1, y + 1)] = clone.data[px(x - 1, y + 1) + 1] = clone.data[px(x - 1, y + 1) + 2] = clone.data[px(x - 1, y + 1)] + quantError * kernel[1] / 16 clone.data[px(x , y + 1)] = clone.data[px(x , y + 1) + 1] = clone.data[px(x , y + 1) + 2] = clone.data[px(x , y + 1)] + quantError * kernel[2] / 16 clone.data[px(x + 1, y + 1)] = clone.data[px(x + 1, y + 1) + 1] = clone.data[px(x + 1, y + 1) + 2] = clone.data[px(x + 1, y + 1)] + quantError * kernel[3] / 16 } } ctx.putImageData(clone, 0, 0); return ctx.canvas; }34:[{"id":"d0c2fd73bfe6be937efbd8d3dfbd298c896a7170d53c2b4f17f7df43b8eaca4bb237617d1d43e2f64c99db2bb275ed70a5104ced86cf20b5dfcc6bb1075c2fad","href":"https://static.observableusercontent.com/files/d0c2fd73bfe6be937efbd8d3dfbd298c896a7170d53c2b4f17f7df43b8eaca4bb237617d1d43e2f64c99db2bb275ed70a5104ced86cf20b5dfcc6bb1075c2fad","name":"michelangelo.png","type":"image/png","lastModified":1572395738415.035,"size":27218}] 2e:{"title":"Dithering","cells":[{"id":0,"value":"md`# Dithering\n\nPlaying with implementations of the various ways to do this.\n\nNote about technique: I load the image data once, and then modify it a bunch of times. To avoid just mutably modifying the same image data over and over again, I clone it, like this:\n\n\\`\\`\\`js\nlet clone = new ImageData(new Uint8ClampedArray(data.data.data), data.width, data.height);\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"{\n let ctx = DOM.canvas(180 * 4 * 2, 215 + 20).getContext('2d');\n ctx.font = '12px monospace';\n ctx.fillText('Threshold', 5, 15);\n ctx.drawImage(thresholdDither, 0, 20);\n ctx.translate(180, 0);\n ctx.fillText('Random', 5, 15);\n ctx.drawImage(randomDither, 0, 20);\n ctx.translate(180, 0);\n ctx.fillText('Dumb Error', 5, 15);\n ctx.drawImage(dumbError, 0, 20);\n ctx.translate(180, 0);\n ctx.fillText('Floyd Steinberg', 5, 15);\n ctx.drawImage(floydSteinberg, 0, 20);\n ctx.translate(180, 0);\n ctx.fillText('Atkinson', 5, 15);\n ctx.drawImage(atkinson, 0, 20);\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`## Threshold\n\nSlide the slider to adjust the... threshold.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"viewof threshold = DOM.range(0, 255 * 3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"thresholdDither = {\n let ctx = DOM.canvas(data.width, data.height).getContext('2d');\n ctx.canvas.style.width = `${data.width * 2}px`;\n let clone = new ImageData(\n new Uint8ClampedArray(data.data.data),\n data.width,\n data.height\n );\n for (let x = 0; x < clone.data.length; x += 4)\n clone.data[x] = clone.data[x + 1] = clone.data[x + 2] =\n clone.data[x] + clone.data[x + 1] + clone.data[x + 2] > threshold\n ? 255\n : 0;\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`## Random dithering\n\nPopular in the 50s, reportedly. No longer popular for pretty clear reasons.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"randomDither = {\n let ctx = DOM.canvas(data.width, data.height).getContext(\"2d\");\n ctx.canvas.style.width = `${data.width * 2}px`;\n let clone = new ImageData(\n new Uint8ClampedArray(data.data.data),\n data.width,\n data.height\n );\n for (let x = 0; x < clone.data.length; x += 4)\n clone.data[x] = clone.data[x + 1] = clone.data[x + 2] =\n clone.data[x] + clone.data[x + 1] + clone.data[x + 2] >\n Math.random() * 255 * 3\n ? 255\n : 0;\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`Looks neat if you do it constantly, though.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"{\n let ctx2 = DOM.canvas(data.width, data.height).getContext(\"2d\");\n let ctx = DOM.canvas(data.width, data.height).getContext(\"2d\");\n ctx.canvas.style.width = `${data.width * 2}px`;\n ctx.globalAlpha = opacity;\n while (true) {\n let clone = new ImageData(\n new Uint8ClampedArray(data.data.data),\n data.width,\n data.height\n );\n for (let x = 0; x < clone.data.length; x += 4)\n clone.data[x] = clone.data[x + 1] = clone.data[x + 2] =\n clone.data[x] + clone.data[x + 1] + clone.data[x + 2] >\n Math.random() * 255 * 3\n ? 255\n : 0;\n ctx2.putImageData(clone, 0, 0);\n ctx.drawImage(ctx2.canvas, 0, 0);\n yield ctx.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"viewof opacity = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`## Dumb error diffusion\n\nReally not very practical, but kind of a good learning example. Cribbed from [Image Dithering](http://www.tannerhelland.com/4660/dithering-eleven-algorithms-source-code/) (the rest of these are written from the idea).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"dumbError = {\n let ctx = DOM.canvas(data.width, data.height).getContext('2d');\n ctx.canvas.style.width = `${data.width * 2}px`;\n let clone = new ImageData(\n new Uint8ClampedArray(data.data.data),\n data.width,\n data.height\n );\n function px(x, y) {\n return x * 4 + y * data.width * 4;\n }\n for (let y = 0; y < data.height; y++) {\n let error = 0;\n for (let x = 0; x < data.width; x++) {\n let oldPixel = clone.data[px(x, y)] + error;\n let newPixel = oldPixel > 125 ? 255 : 0;\n // how far off was this guess? add it to the next calculation.\n error = oldPixel - newPixel;\n clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[\n px(x, y) + 2\n ] = newPixel;\n }\n }\n ctx.putImageData(clone, 0, 0);\n yield ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"md`## Dumb errors on a different axis\n\nHow about that from the top down? Kind of neat.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"dumbErrorY = {\n let ctx = DOM.canvas(data.width, data.height).getContext('2d');\n ctx.canvas.style.width = `${data.width * 2}px`;\n let clone = new ImageData(\n new Uint8ClampedArray(data.data.data),\n data.width,\n data.height\n );\n function px(x, y) {\n return x * 4 + y * data.width * 4;\n }\n for (let x = 0; x < data.width; x++) {\n let error = 0;\n for (let y = 0; y < data.height; y++) {\n let oldPixel = clone.data[px(x, y)] + error;\n let newPixel = oldPixel > 125 ? 255 : 0;\n // how far off was this guess? add it to the next calculation.\n error = oldPixel - newPixel;\n clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[\n px(x, y) + 2\n ] = newPixel;\n }\n }\n ctx.putImageData(clone, 0, 0);\n yield ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`## Floyd-Steinberg\n\nA totally decent totally fine dithering algorithm.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"md`## Atkinson dithering\n\nMy personal favorite dithering algorithm! So classy.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`## Customizable kernel Floyd-Steinberg dithering\n\nTinkering around, really have some fun, don't dither.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = {\n let img = await FileAttachment(\"michelangelo.png\").image();\n let ctx = DOM.canvas(img.width, img.height).getContext('2d');\n ctx.drawImage(img, 0, 0);\n return {\n data: ctx.getImageData(0, 0, img.width, img.height),\n width: img.width,\n height: img.height\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"FileAttachment(\"michelangelo.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}