1d:{"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":"$1f","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":"$20","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":"$21","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"$22","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":"$W23","stdlib":"1"}