30:T83b,dumbError = { 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; } const rows = directions[direction](data.width, data.height); for (const row of rows) { let error = [prefill, prefill, prefill]; for (const [x, y] of row) { let oldPixel = [ clone.data[px(x, y)] + error[0], clone.data[px(x, y) + 1] + error[1], clone.data[px(x, y) + 2] + error[2] ]; // If the old pixel was high enough, make it let newPixel = [ oldPixel[0] > 125 ? 255 : 0, oldPixel[1] > 125 ? 255 : 0, oldPixel[2] > 125 ? 255 : 0 ]; // how far off was this guess? add it to the next calculation. error[0] = oldPixel[0] - newPixel[0]; error[1] = oldPixel[1] - newPixel[1]; error[2] = oldPixel[2] - newPixel[2]; clone.data[px(x, y)] = newPixel[0]; clone.data[px(x, y) + 1] = newPixel[1]; clone.data[px(x, y) + 2] = newPixel[2]; } } for (let y = 0; y < data.height; y++) { let error = [prefill, prefill, prefill]; for (let x = 0; x < data.width; x++) { let oldPixel = [ clone.data[px(x, y)] + error[0], clone.data[px(x, y) + 1] + error[1], clone.data[px(x, y) + 2] + error[2] ]; // If the old pixel was high enough, make it let newPixel = [ oldPixel[0] > 125 ? 255 : 0, oldPixel[1] > 125 ? 255 : 0, oldPixel[2] > 125 ? 255 : 0 ]; // how far off was this guess? add it to the next calculation. error[0] = oldPixel[0] - newPixel[0]; error[1] = oldPixel[1] - newPixel[1]; error[2] = oldPixel[2] - newPixel[2]; clone.data[px(x, y)] = newPixel[0]; clone.data[px(x, y) + 1] = newPixel[1]; clone.data[px(x, y) + 2] = newPixel[2]; } } ctx.putImageData(clone, 0, 0); yield ctx.canvas; }31:Tecf,directions = { return { xScan: (width, height) => { const xScan = []; for (let y = 0; y < data.height; y++) { let row = []; for (let x = 0; x < data.width; x++) { row.push([x, y]); } xScan.push(row); } return xScan; }, xScanSkip: (width, height) => { const xScan = []; for (let y = 0; y < data.height; y++) { let row1 = []; let row2 = []; for (let x = 0; x < data.width; x++) { if (x % 5 === 0) { row1.push([x, y]); } else { row2.push([x, y]); } } xScan.push(row1); xScan.push(row2); } return xScan; }, xScanZigZag: (width, height) => { const xScan = []; for (let y = 0; y < data.height; y++) { let row = []; if (y % 2 === 0) { for (let x = 0; x < data.width; x++) { row.push([x, y]); } } else { for (let x = data.width - 1; x > 0; x--) { row.push([x, y]); } } xScan.push(row); } return xScan; }, xScanChunks: (width, height) => { const xScan = []; for (let y = 0; y < data.height; y++) { let row = []; for (let x = 0; x < data.width; x++) { row.push([x, y]); if (x % 32 === 0) { xScan.push(row); row = []; } } if (row.length) { xScan.push(row); } } return xScan; }, xScanReverse: (width, height) => { const xScan = []; for (let y = 0; y < data.height; y++) { let row = []; for (let x = data.width - 1; x > 0; x--) { row.push([x, y]); } xScan.push(row); } return xScan; }, spiralScan: (width, height) => { const xScan = []; let jumps = [ [1, 0], // go right one [0, -1], // go up [-1, 0], // do left [0, 1] // go down ]; let side = 1; let x = Math.floor(width / 2); let y = Math.floor(height / 2); let i = 0; let row = []; row.push([x, y]); while (x >= 0 && x < width && y >= 0 && y < height) { i++; if (i % 2 == 0) { side++; } switch (i % 4) { case 0: { for (let s = 0; s < side; s++) { x++; row.push([x, y]); } break; } case 1: { for (let s = 0; s < side; s++) { y++; row.push([x, y]); } break; } case 2: { for (let s = 0; s < side; s++) { x--; row.push([x, y]); } break; } case 3: { for (let s = 0; s < side; s++) { y--; row.push([x, y]); } break; } } } return [row]; }, yScan: (width, height) => { const xScan = []; for (let x = 0; x < data.width; x++) { let row = []; for (let y = 0; y < data.height; y++) { row.push([x, y]); } xScan.push(row); } return xScan; }, diagonalScan: (width, height) => { const xScan = []; function getRow(x, y) { let row = []; row.push([x, y]); while (x <= width && y <= height) { row.push([x, y]); x++; y++; } return row; } for (let x = 0; x < data.width; x++) { xScan.push(getRow(x, 0)); } for (let y = 1; y < data.height; y++) { xScan.push(getRow(0, y)); } return xScan; } }; }32:T4c9,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++) { for (let i = 0; i < 3; i++) { let oldPixel = clone.data[px(x, y) + i]; let grayNew = THRESHOLD[oldPixel]; let grayErr = (oldPixel - grayNew) >> 3; let newPixel = oldPixel > 125 ? 255 : 0; clone.data[px(x, y) + i] = newPixel; let quantError = oldPixel - newPixel; clone.data[px(x, y) + i] = grayNew; [ [1, 0], [2, 0], [-1, 1], [0, 1], [1, 1], [0, 2] ].forEach(([dx, dy]) => { clone.data[px(x + dx, y + dy) + i] += grayErr; }); } } } ctx.putImageData(clone, 0, 0); yield ctx.canvas; }33:[{"id":"c360323eb170bee5a9e9b25b3cad25455d6097cb2607513f1b6af52200580f66b79dfceb57623c5d553d946d183742e64e261b411626ca4823d50e3afad5a947","href":"https://static.observableusercontent.com/files/c360323eb170bee5a9e9b25b3cad25455d6097cb2607513f1b6af52200580f66b79dfceb57623c5d553d946d183742e64e261b411626ca4823d50e3afad5a947","name":"cat-medium.png","type":"image/png","lastModified":1771454381128.802,"size":133837},{"id":"f9fd5f451f002fb9b1b9fd99c860f5eab848de940ee87b552dad18134f3e867c3d9ee5d12eeac1e44b4d8aa8fe9b95186692a91178360dd15c2d4b3c2a1f36ae","href":"https://static.observableusercontent.com/files/f9fd5f451f002fb9b1b9fd99c860f5eab848de940ee87b552dad18134f3e867c3d9ee5d12eeac1e44b4d8aa8fe9b95186692a91178360dd15c2d4b3c2a1f36ae","name":"sunflower-tiny.jpg","type":"image/jpeg","lastModified":1771454216353.484,"size":10562},{"id":"da18e3ccfc64bf8cbea33f6bf71b6a97d87f281f71ac7cea718c1ea38d8da1ce49271c97b0a2bcd53c94dd035675372f5b86fda31ba403d5983016174c6d222a","href":"https://static.observableusercontent.com/files/da18e3ccfc64bf8cbea33f6bf71b6a97d87f281f71ac7cea718c1ea38d8da1ce49271c97b0a2bcd53c94dd035675372f5b86fda31ba403d5983016174c6d222a","name":"500px-Sunflower_sky_backdrop.jpg","type":"image/jpeg","lastModified":1771453442220.733,"size":71014},{"id":"cce0f90dafffa14536bd3e1932da7093280f716f8e37c9796fb5e62894e263d3196f054ac67ac2db9d35c45330eab500e99d4394911bc087b91ff47fe4b28666","href":"https://static.observableusercontent.com/files/cce0f90dafffa14536bd3e1932da7093280f716f8e37c9796fb5e62894e263d3196f054ac67ac2db9d35c45330eab500e99d4394911bc087b91ff47fe4b28666","name":"sunflower.jpg","type":"image/jpeg","lastModified":1771454065417.863,"size":27206}] 2e:{"title":"Color error dithering","cells":[{"id":0,"value":"# Color error dithering\n\nAddendum to my [Dithering](https://observablehq.com/@tmcw/dithering) notebook from 2019ish, I thought, what about _color_ error dithering. Straightforwardly applying the idea of error dithering to color: looks pretty neat.","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"viewof image = Inputs.select([\"large\", \"small\", \"tiny\", \"cat\"], {\n label: \"Image\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"viewof direction = Inputs.select(Object.keys(directions), {\n label: \"Direction\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"viewof animate = Inputs.checkbox([\"Animate\"], {\n label: \"Animate\",\n value: []\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"directions.spiralScan(10, 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"prefill","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"animate","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"prefill = {\n if (!animate.includes(\"Animate\")) {\n yield 0;\n } else {\n let i = 0;\n while (true) {\n i += 2;\n if (i > 255) i = 0;\n yield i;\n await new Promise((resolve) => setTimeout(resolve, 1));\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"data = {\n let img = images[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":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"images = {\n return {\n large: await FileAttachment(\"500px-Sunflower_sky_backdrop.jpg\").image(),\n small: await FileAttachment(\"sunflower.jpg\").image(),\n tiny: await FileAttachment(\"sunflower-tiny.jpg\").image(),\n cat: await FileAttachment(\"cat-medium.png\").image()\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"## Atkinson color dithering","pinned":false,"hidden":false,"mode":"md"},{"id":222,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}