2b:null 2c:["$","title",null,{"children":"Dithering | Job van der Zwan | Observable"}] 31:T4b6,{ let ctx = DOM.canvas(180 * 5 * 2, (215 + 20)*2).getContext('2d'); ctx.canvas.style.imageRendering = 'pixelated'; ctx.font = '12px monospace'; ctx.fillText('(Original)', 5, 15); ctx.drawImage(Original, 0, 20); ctx.translate(0, 235); ctx.fillText('Threshold', 5, 15); ctx.drawImage(thresholdDither, 0, 20); ctx.translate(180, -235); ctx.fillText('Random', 5, 15); ctx.drawImage(randomDither, 0, 20); ctx.translate(0, 235); ctx.fillText('Random (noise version)', 5, 15); ctx.drawImage(randomNoise, 0, 20); ctx.translate(180, -235); ctx.fillText('Dumb Error', 5, 15); ctx.drawImage(dumbError, 0, 20); ctx.translate(0, 235); ctx.fillText('Dumb Error Y', 5, 15); ctx.drawImage(dumbErrorY, 0, 20); ctx.translate(180, -235); ctx.fillText('Floyd Steinberg', 5, 15); ctx.drawImage(floydSteinberg, 0, 20); ctx.translate(0, 235); ctx.fillText('Floyd Steinberg Serp.', 5, 15); ctx.drawImage(floydSteinbergSerpentine, 0, 20); ctx.translate(180, -235); ctx.fillText('Minimal 2D', 5, 15); ctx.drawImage(minimal2D, 0, 20); ctx.translate(0, 235); ctx.fillText('Minimal 2D Serpentine', 5, 15); ctx.drawImage(minimal2DSerpentine, 0, 20); return ctx.canvas; }32:T58e,floydSteinberg = { 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 * 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; } }33:T9f6,floydSteinbergSerpentine = { 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++) { if (y&1) { 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 } } else { // go from right to left for (let x = data.width - 1; x >= 0; 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; } }34: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; }35: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; }36:Ta0b,floydDIYSerpentine = { 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++) { if (y&1) { 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 } } else { for (let x = data.width - 1; x >= 0 ; 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; }37:T4c7,dumbErrorSerpentine = { 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); } let error = 0; for (let y = 0; y < data.height; y++) { if (y&1) { for (let x = 0; x < data.width; x++) { let oldPixel = clone.data[px(x, y)] + error; let newPixel = oldPixel > 125 ? 255 : 0; // how far off was this guess? add it to the next calculation. error= oldPixel - newPixel; clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = newPixel; } } else { for (let x = data.width-1; x >= 0; x--) { let oldPixel = clone.data[px(x, y)] + error; let newPixel = oldPixel > 125 ? 255 : 0; // how far off was this guess? add it to the next calculation. error= oldPixel - newPixel; clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = newPixel; } } ctx.putImageData(clone, 0, 0); yield ctx.canvas; } }38:T50a,dumbErrorYSerpentine = { 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); } let error = 0; for (let x = 0; x < data.width; x++) { if (x&1) { for (let y = 0; y < data.height; y++) { let oldPixel = clone.data[px(x, y)] + error; let newPixel = oldPixel > 125 ? 255 : 0; // how far off was this guess? add it to the next calculation. error= oldPixel - newPixel; clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = newPixel; } ctx.putImageData(clone, 0, 0); yield ctx.canvas; } else { for (let y = data.height-1; y >= 0; y--) { let oldPixel = clone.data[px(x, y)] + error; let newPixel = oldPixel > 125 ? 255 : 0; // how far off was this guess? add it to the next calculation. error= oldPixel - newPixel; clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = newPixel; } ctx.putImageData(clone, 0, 0); yield ctx.canvas; } } }39:T832,minimal2D = { let ctx = DOM.canvas(data.width, data.height).getContext('2d'); ctx.canvas.style.width = `${data.width * 2}px`; ctx.canvas.style.imageRendering = 'pixelated'; // We need the extra bits so our error doesn't get lost in the modulo overflow // Same with storing intermediate negative values const data16 = Int16Array.from(data.data.data); for (let y = 0; y < data.height - 1; y++) { let error = 0; for (let x = 0; x < data.width - 1; x++) { const idx = x*4 + y * data.width*4; let oldPixel = data16[idx]; let newPixel = oldPixel > 127 ? 255 : 0; // how far off was this guess? add it to the next calculation. error = oldPixel - newPixel; data16[idx] = data16[idx+1] = data16[idx+2] = newPixel; // round up for the pixel to the right, round down for the pixel below data16[idx + 4] += (error+1)>>1; data16[idx + data.width*4] += error>>1; } // last column only diffuses downwards const idx = ((y+1)*data.width - 1)*4; let oldPixel = data16[idx]; let newPixel = oldPixel > 127 ? 255 : 0; error = oldPixel - newPixel; data16[idx] = data16[idx+1] = data16[idx+2] = newPixel; data16[idx + data.width*4] += error; } // bottom row, move all error to the right for(let x = 0; x < data.width - 1; x++) { const idx = (x + (data.height-1) * data.width)*4; let oldPixel = data16[idx]; let newPixel = oldPixel > 127 ? 255 : 0; // how far off was this guess? add it to the next calculation. let error = oldPixel - newPixel; data16[idx] = data16[idx+1] = data16[idx+2] = newPixel; // round up for the pixel to the right, round down for the pixel below data16[idx + 4] += error; } // bottom right pixel; data16[data.width * data.height - 1] = data16[data.width * data.height - 1] > 127 ? 255 : 0; let clone = new ImageData(new Uint8ClampedArray(data.data.data.length), data.width, data.height); for (let i = 0; i < clone.data.length; i++) { clone.data[i] = data16[i]; } ctx.putImageData(clone, 0, 0); yield ctx.canvas; }3a:Tb25,minimal2DSerpentine = { let ctx = DOM.canvas(data.width, data.height).getContext('2d'); ctx.canvas.style.width = `${data.width * 2}px`; ctx.canvas.style.imageRendering = 'pixelated'; const data16 = Int16Array.from(data.data.data); let error = 0; for (let y = 0; y < data.height - 1; y++) { if (y&1){ for (let x = 0; x < data.width - 1; x++) { const idx = x*4 + y * data.width*4; let oldPixel = data16[idx]; let newPixel = oldPixel > 127 ? 255 : 0; // how far off was this guess? add it to the next calculation. error = oldPixel - newPixel; data16[idx] = data16[idx+1] = data16[idx+2] = newPixel; // round up for the pixel to the right, round down for the pixel below data16[idx + 4] += (error+1)>>1; data16[idx + data.width*4] += error>>1; } // last column only diffuses downwards const idx = ((y+1)*data.width - 1)*4; let oldPixel = data16[idx]; let newPixel = oldPixel > 127 ? 255 : 0; error = oldPixel - newPixel; data16[idx] = data16[idx+1] = data16[idx+2] = newPixel; data16[idx + data.width*4] += error; } else { for (let x = data.width - 1; x > 1; x--) { const idx = x*4 + y * data.width*4; let oldPixel = data16[idx]; let newPixel = oldPixel > 127 ? 255 : 0; // how far off was this guess? add it to the next calculation. error = oldPixel - newPixel; data16[idx] = data16[idx+1] = data16[idx+2] = newPixel; // round up for the pixel to the left, round down for the pixel below data16[idx - 4] += (error+1)>>1; data16[idx + data.width*4] += error>>1; } // first column only diffuses downwards const idx = y * data.width * 4; let oldPixel = data16[idx]; let newPixel = oldPixel > 127 ? 255 : 0; error = oldPixel - newPixel; data16[idx] = data16[idx+1] = data16[idx+2] = newPixel; data16[idx + data.width*4] += error; } } // bottom row, move all error to the right for(let x = 0; x < data.width - 1; x++) { const idx = (x + (data.height-1) * data.width)*4; let oldPixel = data16[idx]; let newPixel = oldPixel > 127 ? 255 : 0; // how far off was this guess? add it to the next calculation. error = oldPixel - newPixel; data16[idx] = data16[idx+1] = data16[idx+2] = newPixel; // round up for the pixel to the right, round down for the pixel below data16[idx + 4] += error; } // bottom right pixel; data16[data.width * data.height - 1] = data16[data.width * data.height - 1] > 127 ? 255 : 0; let clone = new ImageData(new Uint8ClampedArray(data.data.data.length), data.width, data.height); for (let i = 0; i < clone.data.length; i++) { clone.data[i] = data16[i]; } ctx.putImageData(clone, 0, 0); yield ctx.canvas; }3b:Ta20,// Note: the non-serpentine version is symmetric for scanning in the X- and Y-direction minimal2DYSerpentine = { let ctx = DOM.canvas(data.width, data.height).getContext('2d'); ctx.canvas.style.width = `${data.width * 2}px`; ctx.canvas.style.imageRendering = 'pixelated'; const data16 = Int16Array.from(data.data.data); let error = 0; for (let x = 0; x < data.width - 1; x++) { if (x&1) { for (let y = 0; y < data.height - 1; y++) { const idx = (x + y * data.width)*4; let oldPixel = data16[idx]; let newPixel = oldPixel > 127 ? 255 : 0; // how far off was this guess? add it to the next calculation. error = oldPixel - newPixel; data16[idx] = data16[idx+1] = data16[idx+2] = newPixel; // round up for the pixel to the right, round down for the pixel below data16[idx + 4] += (error+1)>>1; data16[idx + data.width*4] += error>>1; } } else { for (let y = data.height; y > 0; y--) { const idx = (x + y * data.width)*4; let oldPixel = data16[idx]; let newPixel = oldPixel > 127 ? 255 : 0; // how far off was this guess? add it to the next calculation. error = oldPixel - newPixel; data16[idx] = data16[idx+1] = data16[idx+2] = newPixel; // round up for the pixel to the right, round down for the pixel below data16[idx + 4] += (error+1)>>1; data16[idx - data.width*4] += error>>1; } } // last row only diffuses to the right const idx = (x + (data.height-1)*data.width) * 4; let oldPixel = data16[idx]; let newPixel = oldPixel > 127 ? 255 : 0; error = oldPixel - newPixel; data16[idx] = data16[idx+1] = data16[idx+2] = newPixel; data16[idx + data.width+4] += error; } // rightmost column, move all error to the bottom for(let y = 0; y < data.height - 1; y++) { const idx = (data.width - 1 + y * data.width)*4; let oldPixel = data16[idx]; let newPixel = oldPixel > 127 ? 255 : 0; // how far off was this guess? add it to the next calculation. error = oldPixel - newPixel; data16[idx] = data16[idx+1] = data16[idx+2] = newPixel; data16[idx + data.width * 4] += error; } // bottom right pixel; data16[data.width * data.height - 1] = data16[data.width * data.height - 1] > 127 ? 255 : 0; let clone = new ImageData(new Uint8ClampedArray(data.data.data.length), data.width, data.height); for (let i = 0; i < clone.data.length; i++) { clone.data[i] = data16[i]; } ctx.putImageData(clone, 0, 0); yield ctx.canvas; }3c:T55f,dumbErrorDiagonal = { 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++) { let error = 0; // Note: this assumes height > width for (let x = 0; x <= Math.min(y, data.width-1); x++) { const idx = px(x, y-x); let oldPixel = clone.data[idx] + error; let newPixel = oldPixel > 125 ? 255 : 0; // how far off was this guess? add it to the next calculation. error= oldPixel - newPixel; clone.data[idx] = clone.data[idx + 1] = clone.data[idx + 2] = newPixel; } ctx.putImageData(clone, 0, 0); yield ctx.canvas; } // bottom-right triangle for(let i = 1; i < data.width; i++) { for(let x = i, error = 0; x < data.width; x++) { const idx = px(x, data.height- 1 - x + i); let oldPixel = clone.data[idx] + error; let newPixel = oldPixel > 125 ? 255 : 0; // how far off was this guess? add it to the next calculation. error = oldPixel - newPixel; clone.data[idx] = clone.data[idx + 1] = clone.data[idx + 2] = newPixel; ctx.putImageData(clone, 0, 0); } yield ctx.canvas; } }3d:T916,dumbErrorDiagonalSerpentine = { 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); } let error = 0; for (let y = 0; y < data.height; y++) { // Note: this assumes height > width if (y&1) { for (let x = Math.min(y, data.width)-1; x >= 0; x--) { const idx = px(x, y-x); let oldPixel = clone.data[idx] + error; let newPixel = oldPixel > 125 ? 255 : 0; // how far off was this guess? add it to the next calculation. error= oldPixel - newPixel; clone.data[idx] = clone.data[idx + 1] = clone.data[idx + 2] = newPixel; } } else { for (let x = 0; x <= Math.min(y, data.width-1); x++) { const idx = px(x, y-x); let oldPixel = clone.data[idx] + error; let newPixel = oldPixel > 125 ? 255 : 0; // how far off was this guess? add it to the next calculation. error= oldPixel - newPixel; clone.data[idx] = clone.data[idx + 1] = clone.data[idx + 2] = newPixel; } } ctx.putImageData(clone, 0, 0); yield ctx.canvas; } // bottom-right triangle for(let i = 1; i < data.width; i++) { if ((data.height+i-1)&1) { for(let x = data.width-1; x >= i; x--) { const idx = px(x, data.height- 1 - x + i); let oldPixel = clone.data[idx] + error; let newPixel = oldPixel > 125 ? 255 : 0; // how far off was this guess? add it to the next calculation. error = oldPixel - newPixel; clone.data[idx] = clone.data[idx + 1] = clone.data[idx + 2] = newPixel; ctx.putImageData(clone, 0, 0); } } else { for(let x = i; x < data.width; x++) { const idx = px(x, data.height- 1 - x + i); let oldPixel = clone.data[idx] + error; let newPixel = oldPixel > 125 ? 255 : 0; // how far off was this guess? add it to the next calculation. error = oldPixel - newPixel; clone.data[idx] = clone.data[idx + 1] = clone.data[idx + 2] = newPixel; ctx.putImageData(clone, 0, 0); } } yield ctx.canvas; } }3e:T48e,viewof kernel2 = { 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 = [2,3,4,7]; 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; }3f:Tf3f,diagonal2D3 = { 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); // We need the extra bits so our diffused error doesn't get lost in the modulo overflow // Same with storing intermediate negative values const data16 = Int32Array.from(data.data.data); // pre-multiply values to use fixed-point calculations to reduce rounding error const FIXED_POINT = (1<<16); for (let i = 0; i < data16.length; i+= 4) { data16[i] *= FIXED_POINT; } function px(x, y) { return (x * 4) + (y * data.width * 4); } const div = kernel2[0] + kernel2[1] + kernel2[2] + kernel2[3]; let error = 0; for (let y = 0; y < data.height; y++) { if (y&1) { for (let x = Math.min(y, data.width)-1; x >= 0; x--) { const idx = px(x, y-x); let oldPixel = data16[idx]; let newPixel = oldPixel > 127*FIXED_POINT ? 255*FIXED_POINT : 0; // how far off was this guess? add it to the next calculation. error = oldPixel - newPixel; data16[idx] = newPixel; data16[px(x-1, y-x+1)] += error * kernel2[0] / 16; data16[px(x, y-x+1)] += error * kernel2[1] / 16; data16[px(x+1, y-x+1)] += error * kernel2[2] / 16; data16[px(x+1, y-x)] += error * kernel2[3] / 16; } } else { for (let x = 0; x <= Math.min(y, data.width-1); x++) { const idx = px(x, y-x); let oldPixel = data16[idx]; let newPixel = oldPixel > 127*FIXED_POINT ? 255*FIXED_POINT : 0; // how far off was this guess? add it to the next calculation. error = oldPixel - newPixel; data16[idx] = newPixel; data16[px(x+1, y-x-1)] += error * kernel2[0] / div; data16[px(x+1, y-x)] += error * kernel2[1] / div; data16[px(x+1, y-x+1)] += error * kernel2[2] / div; data16[px(x, y-x+1)] += error * kernel2[3] / div; } } } // bottom-right triangle for(let i = 1; i < data.width; i++) { if ((data.height+i-1)&1) { for(let x = data.width-1, y = data.height-1; x >= i; x--) { const idx = px(x, y - x + i); let oldPixel = data16[idx]; let newPixel = oldPixel > 127*FIXED_POINT ? 255*FIXED_POINT : 0; data16[idx] = newPixel; // how far off was this guess? add it to the next calculation. // round up for the pixel to the bottom-left, round down for the pixel below error = oldPixel - newPixel; data16[px(x-1, y-x+1+i)] += error * kernel2[0] / div; data16[px(x, y-x+1+i)] += error * kernel2[1] / div; data16[px(x+1, y-x+1+i)] += error * kernel2[2] / div; data16[px(x+1, y-x+i)] += error * kernel2[3] / div; } } else { for(let x = i, y = data.height-1; x < data.width; x++) { const idx = px(x, y - x + i); let oldPixel = data16[idx]; let newPixel = oldPixel > 127*FIXED_POINT ? 255*FIXED_POINT : 0; // how far off was this guess? add it to the next calculation. error = oldPixel - newPixel; data16[idx] = newPixel; // round up for the pixel to the top-right, round down for the pixel to the righ data16[px(x+1, y-x-1+i)] += error * kernel2[0] / div; data16[px(x+1, y-x+i)] += error * kernel2[1] / div; data16[px(x+1, y-x+1+i)] += error * kernel2[2] / div; data16[px(x, y-x+1+i)] += error * kernel2[3] / div; } } } // bottom right pixel; data16[data.width * data.height - 1] = data16[data.width * data.height - 1] > 127*FIXED_POINT ? 255*FIXED_POINT : 0; for (let i = 0; i < clone.data.length; i+= 4) { clone.data[i] = clone.data[i+1] = clone.data[i+2] = data16[i] / FIXED_POINT | 0; } ctx.putImageData(clone, 0, 0); return ctx.canvas; }40:[] 2f:{"id":"0ea21afaa60e53fa","slug":"dithering","title":"Dithering","thumbnail":"ff49cb35342f853435bdb82304b6169ee290ed21abf2df44d87524b3c8b2fd93","access_level":"public","create_time":"$D2019-09-04T12:40:32.860Z","update_time":"$D2019-12-01T10:24:06.226Z","view_time":null,"first_public_time":"$D2019-09-04T14:43:54.231Z","fork":{"id":"836adf1d9c041cac","slug":"dithering","title":"Dithering","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"stars":2,"starred":false,"owner":{"type":"team","id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":"starter_2024"},"version":668,"publish_version":668,"role":null,"authored":false,"authors":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}],"members":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"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\n*(I just forked Tom MacWright's notebook and added a few extra implementations for fun - Job)*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"md`## Threshold\n\nSlide the slider to adjust the... threshold.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"viewof threshold = DOM.range(0, 255 * 3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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 ctx.canvas.style.imageRendering = 'pixelated';\n let clone = new ImageData(new Uint8ClampedArray(data.data.data), data.width, data.height);\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 ? 255 : 0;\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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 ctx.canvas.style.imageRendering = 'pixelated';\n let clone = new ImageData(new Uint8ClampedArray(data.data.data), data.width, data.height);\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]) > (Math.random() * 255 * 3) ? 255 : 0;\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"md`Looks neat if you do it constantly, though.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"randomNoise = {\n now;\n let ctx = DOM.canvas(data.width, data.height).getContext('2d');\n ctx.canvas.style.width = `${data.width * 2}px`;\n ctx.canvas.style.imageRendering = 'pixelated';\n let clone = new ImageData(new Uint8ClampedArray(data.data.data), data.width, data.height);\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]) > (Math.random() * 255 * 3) ? 255 : 0;\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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 ctx.canvas.style.imageRendering = 'pixelated';\n let clone = new ImageData(new Uint8ClampedArray(data.data.data), data.width, data.height);\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[px(x, y) + 2] = newPixel;\n }\n ctx.putImageData(clone, 0, 0);\n yield ctx.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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 ctx.canvas.style.imageRendering = 'pixelated';\n let clone = new ImageData(new Uint8ClampedArray(data.data.data), data.width, data.height);\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[px(x, y) + 2] = newPixel;\n }\n ctx.putImageData(clone, 0, 0);\n yield ctx.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"md`## Floyd-Steinberg\n\nA totally decent totally fine dithering algorithm.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":403,"value":"md`## Floyd-Steinberg, serpentine\n\nOne alternative version of FS dithering changes the scan direction every row (so one row goes left to right, the next right to left). Supposedly this tends to reduce artefacts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":379,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"md`## Customizable kernel Floyd-Steinberg dithering\n\nTinkering around, really have some fun, don't dither. Serpentine version included`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":455,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":445,"value":"md`## Dumb error serpentine\n\n*Hey, maybe that Serpentine trick makes the dumb error diffusion less bad too?*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":443,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":447,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":329,"value":"md`## Minimal 2D error diffusion\n*A little experiment: diffuse half the error to the right, half to the bottom. Can't get more minimal in 2D diffusion than that! Note that this makes it symmetrical for scanning in the X- or Y-direction. The serpentine versions look surprisingly decent given how simple it is. Still has some weird artifacts on the cheek though - Job*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":331,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":395,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":481,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":488,"value":"md`## Dumb diagonal\n\n*What if instead of left to right or top to bottom, we do a dumb scan diagonally? What if we do that with serpentine zig-zagging as well?*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":493,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":524,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":545,"value":"md`## 2D Diagonal Serpentine\n\nSo let's combine all ideas so far: we scan diagonally and diffuse the error into the four adjacent pixels that have not been visited so far, going back and forth every other diagonal line (\"serpentine\"),`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":617,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":585,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"data = {\n let img = new Image();\n img.crossOrigin = '*';\n img.src = 'https://file-hamhdaleym.now.sh/';\n await new Promise(resolve => img.addEventListener('load', resolve));\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","author":"$undefined","summary":"$undefined"},{"id":436,"value":"Original = {\n let ctx = DOM.canvas(data.width, data.height).getContext('2d');\n let clone = new ImageData(new Uint8ClampedArray(data.data.data), data.width, data.height);\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W40","stdlib":"1","titling":"auto"}} 30:"$2f:body"