31:T537,viewof ditheringSelection = select({ title: 'Error Diffusion method', options: [ { label: 'Threshold', value: 'Ordered' }, { label: 'Floyd-Steinberg', value: 'FS' }, { label: 'Floyd-Steinberg Serpentine', value: 'FSS' }, { label: 'Jarvis, Judice and Ninke', value: 'jajuni'}, { label: 'Atkinson', value: 'Atkinson' }, { label: 'Atkinson Serp.', value: 'AtkinsonSerp' }, { label: 'Atkinson Color Bleed', value: 'AtkinsonCB' }, { label: 'Atkinson Color Bleed Serp.', value: 'AtkinsonCBSerp' }, { label: 'Siera (three rows)', value: 'sierra3' }, { label: 'Sierra (three rows serp)', value: 'sierra3serp' }, { label: 'Sierra Lite', value: 'sierra1' }, { label: '"Skip Neighbours"', value: 'skipneighbours' }, { label: '"Skip 2 Neighbours"', value: 'skip2neighbours' }, { label: '"Skip 3 Neighbours"', value: 'skip3neighbours' }, { label: 'Diffuse Right', value: 'right' }, { label: 'Diffuse Down', value: 'down' }, { label: 'Down-Left', value: 'downleft' }, { label: 'Down-Right', value: 'downright' }, { label: 'Sierra Lite Skip 1', value: 'sierra1skip1' }, { label: 'Sierra Lite Skip 2', value: 'sierra1skip2' }, { label: 'Sierra Lite Skip 3', value: 'sierra1skip3' }, { label: 'Ostromoukhov', value: 'Ostromoukhov'}, ], value: 'Atkinson' })32:T63d,viewof thresholdSelection = select({ title: 'Threshold Map', options: [ { label: '1×1', value: '1×1' }, { label: '2×2', value: '2×2' }, { label: '3×3', value: '3×3' }, { label: '4×4', value: '4×4' }, { label: '8×8', value: '8×8' }, { label: '2×2 mirrored', value: '2×2mirrored' }, { label: '3×3 mirrored', value: '3×3mirrored' }, { label: '4×4 mirrored', value: '4×4mirrored' }, { label: '8×8 mirrored', value: '8×8mirrored' }, { label: '2×2 horizontal', value: '2×2h' }, { label: '2×2 vertical', value: '2×2v' }, { label: '4×4 horizontal', value: '4×4h' }, { label: '4×4 vertical', value: '4×4v' }, { label: '8×8 horizontal', value: '8×8h' }, { label: '8×8 vertical', value: '8×8v' }, { label: '2×2 variable width', value: '2×2variable' }, { label: '4×4 variable width', value: '4×4variable' }, { label: '8×8 variable width', value: '8×8variable' }, { label: 'Interleaved Gradient Noise', value: 'IntGrdNoise'}, { label: 'R2', value: 'R2'}, { label: 'Pseudo-blue', value: 'pseudoblue'}, { label: 'PB IGN', value: 'pseudoblueIGN'}, { label: 'PB R2', value: 'pseudoblueR2'}, { label: 'Triangulated IGN', value: 'IntGrdNoiseTriangle'}, { label: 'Triangulated R2', value: 'R2triangle'}, { label: 'Triangulated PB IGN', value: 'pseudoblueIGNtriangulated'}, { label: 'Triangualted PB R2', value: 'pseudoblueR2triangulated'}, { label: 'White Noise', value: 'whiteNoise'}, { label: 'Noisy Gray', value: 'noisyGray'}, ], value: '2×2mirrored' })33:T6a1,Introduction = md`So I had a realization the other day: 1. Ordered dithering works by varying the threshold for rounding based on the location of the pixel 2. Error-diffusion dithering works by diffusing rounding error that follows after rounding 3. There is nothing about error diffusion dithering that says that we should have a constant rounding threshold for every pixel, meaning we can combine these approaches! I haven't been able to find any examples of this, so I tried it out myself. Basically, we'll be writing an error diffusion function that takes a threshold matrix function, and out comes a new hybrid dither! *(For a quick refresher on ordered dithering, see [Appendix A](#AppendixA). Similarly, [Appendix B](#AppendixB) has a quick refresher on error diffusion dithering. For more details than that, try [the Wikipedia article on ordered dithering](https://en.wikipedia.org/wiki/Ordered_dithering) and [the Wikipedia article error diffusion dithering](https://en.wikipedia.org/wiki/Error_diffusion))* In terms of visual output these methods interact. Combining Atkinson dithering with 2×2 ordering demonstrates this very dramatically. Atkinson dithering reduces color bleed by not passing all eror. This results in blown out highlights and dark areas. Meanwhile, ordered 2×2 dithering can at most generate three shades of gray, and therefore also tends to have blown out highlights and dark areas. But the 2×2 Atkinson hybrid has less banding than either "parent" method, and more mimicked shades of gray, resulting in a very different image. We can get more insight into how this works if we make our 2×2 threshold map have a variable step size an play around with this:`34:T629,{ await visibility(); return md`A step size of zero results in the same threshold for each pixel: 127. A step size of 64 evenly spaces out thresholds, resulting in the "standard" 2×2 threshold matrix. In the hybrid dither we can see a transition from noise pattern to regular structures as our step size gets bigger. Another thing to notice is that (for reasonable step sizes) the hybrid dither seems to have less blown out highlights and less crushed shadows than either of the "parent" dithers. Let's figure out why that is. We start with the reason why the parent algorithms have blown highlight and crushed shadows to begin with. For ordered dither, if the lowest threshold in our map is 32 (for example) and all pixel values in a region are less than that, it will display that entire region as black. But in the hybrid case the rounding error this produces is diffused and we will eventually see a pixel flip. That is precisely how we expect error diffusion to work. In the case of Atkinson dithering, it has crushed shadows and blown highlights because it only propagates 6/8ths of the total rounding error of a pixel. For very dark or bright pixels, that means that it won't build up enough error compensation to reach the threshold value required for a pixel flip. But when we use a threshold map, *that threshold varies* - for a standard 2×2 threshold map, the threshold goes as low as 32 or as high as 223, so we only need to build up a quarter of error we normally do! The presence of a threshold map increased the error "sensitivity" of our algorithm.`; }35:T59b,{ await visibility(); return md`In our 1-bit 2×2 Atkinson example we can see how this fails when we push the step size beyond 64. In the far extreme of alternating 0 and 255 thresholds all middle gray values are destroyed, both in ordered and hybrid dithers. The reason is that only pixels that are black or white will not be rounded; anything else will be rounded up or down in alternating fashion. Since our input image does not have completely white or black pixels, the ordered dithering output is a checkerboard pattern. The hybrid dither only manages to build up enough diffused error in the darkest and brightest areas to correct for this. (For those interested in implementing this themselves: the error diffusion algorithms used in this notebook do not clip, and rounding out the error itself is postponed as long as possible - many classic implementations use saturating 8-bit arithmetic and apply integer division to the error before propagating it, which effectively clips the error and adds extra rounding down errors. If that was done here it would likely also result in a complete checkerboard pattern) In short: when the thresholds don't stray far from the middle value of 127, their effect on increased error "sensitivity" is small. When they are pushed into extremes (0 and 254), the checkerboard effect dominates. Let's see how all of this works for larger threshold maps at a slightly higher bit depth:`; }36:T4ed,{ await visibility(); return md`One last thing to notice is that for the 2 bit case all (non-hybrid) error diffusion methods have visible banding issues in areas where gradients transition through values close to a shade of gray. For our David image this is visible in the hair, the ear, the nose, and the chin. There are two reasons for this. First, when values are close to a shade they are being rounded to, there is less error to diffuse, and thus it takes longer to accumulated error to change a shade. The second one is essentially an "anti-edge enhancing" effect that happens when we have a gradient transitioning through a shade of gray. Lets say we're close but below one shade of gray and our gradient is increasing. At this point we round up and are building up a negative error. Then the pixel value increases above the shade of gray. Now our round down and start building up a positive error, _but_ we already have a negative error built up, so it takes even longer to accumulate enough error for a change in shade! In the hybrid case this banding is mostly gone due to the greater error sensitivity, and if we push the threshold map a little bit we even reveal fine details in the hair and ears that were lost in either parent algorithm:`; }37:T42a,{ await visibility(); return md`As you can see, the "normal" version of it has a lumpy wavy underwater look, has lots of banding issues and loses a ton of detail. The hybrid avoids most of these issues and gets a cross-hatching texture that I can imagine to have some artistic use in some cases. Similarly, I added various ordering matrices for horizontal and vertical lines, again leading to different hybrids. There might be more salvageable "bad" error diffusion methods and threshold maps that produce something useful together. Anyway, this is fun new territory to explore! For example, we have only looked at still images, but what about video and animated GIFs? Traditinally, ordered dithering has the advantage in those cases because it has higher the stability from frame to frame. The open question is what the frame-to-frame stability is of the hybrid dithers. What about using colors? And is there really no prior art for this? Because I can't find any and it feels too obvious with hindsight to not have been discovered in the last fifty years.`; }38:T5a6,AppendixA = { await visibility(); return md`

## Appendix A: A Quick Refresher on Ordered Dithering with Threshold Maps [🔙 *return to opening paragraph*](#Introduction) Ordered dithering is basically threshold dithering, but with varying thresholds depending on the input pixel location to create patterns that simulate varying levels of gray. We divide the image into patches of ${tex`N{\times}N`}, then determine the ${tex`N^2`} steps in which those patches go from black to white. We call this a threshold map. For example, apparently the ideal order for pixels to go from black to white for 2×2 and 4×4 threshold maps has been determined to be: ${table([ [1, 4], [3, 2] ])}
${table([ [1, 9, 3, 11], [13, 5, 15, 7], [4, 12, 2, 10], [16, 8, 14, 6] ])}
(source for that claim: [www.visgraf.impa.br](https://www.visgraf.impa.br/Courses/ip00/proj/Dithering1/ordered_dithering.html)) When we convert that to our pixel range of 0-255, this produces the following threshold maps: ${table([ [32, 224], [160, 96] ])}
${table([ [8, 120, 40, 168], [200, 72, 232, 104], [56, 184, 24, 152], [248, 120, 216, 88] ])}
What this means is that if we look within a patch at the second pixel from the top, second from the left, any pixel value equal or less than 72 is rounded down to black, and any value higher is rounded up to white. Let's see how this works out in practice ## Input Image `; }39:T541,function ditherAllBits(ditheringMethod, getThreshold) { let scale = 1; //width/(img.width*3); if (scale >= 1) { scale = scale | 0; const w = img.width*scale; const h = img.height*scale; let ctx = DOM.canvas(w*3, h).getContext('2d'); ctx.imageSmoothingEnabled = false; ctx.canvas.style = 'image-rendering: crisp-edges; image-rendering: pixelated'; const ordered = ditheringMethod(getPixel1bit, getThreshold); const hybrid = ditheringMethod(getPixel2bit, getThreshold); const error = ditheringMethod(getPixel4bit, getThreshold); ctx.drawImage(ordered, 0, 0, w, h); ctx.drawImage(hybrid, w, 0, w, h); ctx.drawImage(error, w*2, 0, w, h); return ctx.canvas; } else { scale = Math.max(1, width/img.width | 0); const w = img.width*scale; const h = img.height*scale; let ctx = DOM.canvas(w, h*3).getContext('2d'); ctx.imageSmoothingEnabled = false; ctx.canvas.style = 'image-rendering: crisp-edges; image-rendering: pixelated'; const ordered = ditheringMethod(getPixel1bit, getThreshold); const hybrid = ditheringMethod(getPixel2bit, getThreshold); const error = ditheringMethod(getPixel4bit, getThreshold); ctx.drawImage(ordered, 0, 0, w, h); ctx.drawImage(hybrid, 0, h, w, h); ctx.drawImage(error, 0, h*2, w, h); return ctx.canvas; } }3a:T89f,function ditherHybrid(ditheringError, orderedThreshold) { let scale = 1; //width/(img.width*3); if (scale >= 1) { scale = scale | 0; const w = img.width*scale; const h = img.height*scale; let ctx = DOM.canvas(w*3, h*3 + scale*20).getContext('2d'); ctx.imageSmoothingEnabled = false; ctx.font = `${12*scale}px sans`; ctx.canvas.style = 'image-rendering: crisp-edges; image-rendering: pixelated'; ctx.fillText('Ordered ' + orderedThreshold.label, scale*5, scale*15); ctx.fillText("Hybrid", w + scale*5, scale*15); ctx.fillText(ditheringError.label, w*2 + scale*5, scale*15); for(let i = 0; i < 3; i++) { const ordered = ditheringOrdered(getPixels[i], orderedThreshold); const hybrid = ditheringError(getPixels[i], orderedThreshold); const error = ditheringError(getPixels[i], getPlainThreshold); ctx.drawImage(ordered, 0, i*h + scale*20, w, h); ctx.drawImage(hybrid, w, i*h + scale*20, w, h); ctx.drawImage(error, w*2, i*h + scale*20, w, h); } return ctx.canvas; } else { scale = Math.max(1, width/img.width|0); const w = img.width*scale; const h = img.height*scale; let ctx = DOM.canvas(w, h*9 + scale*180).getContext('2d'); ctx.imageSmoothingEnabled = false; ctx.font = `${12*scale}px sans`; ctx.canvas.style = 'image-rendering: crisp-edges; image-rendering: pixelated'; for(let i = 0; i < 3; i++) { const ordered = ditheringOrdered(getPixels[i], orderedThreshold); const hybrid = ditheringError(getPixels[i], orderedThreshold); const error = ditheringError(getPixels[i], getPlainThreshold); const bits = ` ${(1<= 1) { scale = scale | 0; const w = img.width*scale; const h = img.height*scale; let ctx = DOM.canvas(w*3, h + scale*20).getContext('2d'); ctx.imageSmoothingEnabled = false; ctx.font = `${12*scale}px sans`; ctx.canvas.style = 'image-rendering: crisp-edges; image-rendering: pixelated'; ctx.fillText('Ordered ' + orderedThreshold.label, scale*5, scale*15); ctx.fillText("Hybrid", w + scale*5, scale*15); ctx.fillText(ditheringError.label, w*2 + scale*5, scale*15); const ordered = ditheringOrdered(getPixel, orderedThreshold); const hybrid = ditheringError(getPixel, orderedThreshold); const error = ditheringError(getPixel, getPlainThreshold); ctx.drawImage(ordered, 0, scale*20, w, h); ctx.drawImage(hybrid, w, scale*20, w, h); ctx.drawImage(error, w*2, scale*20, w, h); return ctx.canvas; } else { scale = Math.max(1, width/img.width|0); const w = img.width*scale; const h = img.height*scale; let ctx = DOM.canvas(w, h*3 + scale*60).getContext('2d'); ctx.imageSmoothingEnabled = false; ctx.font = `${12*scale}px sans`; ctx.canvas.style = 'image-rendering: crisp-edges; image-rendering: pixelated'; ctx.fillText('Ordered ' + orderedThreshold.label, scale*5, scale*15); ctx.fillText("Hybrid", scale*5, h + scale*35); ctx.fillText(ditheringError.label, scale*5, 2*h + scale*55); const ordered = ditheringOrdered(getPixel, orderedThreshold); const hybrid = ditheringError(getPixel, orderedThreshold); const error = ditheringError(getPixel, getPlainThreshold); ctx.drawImage(ordered, 0, scale*20, w, h); ctx.drawImage(hybrid, 0, h + scale*40, w, h); ctx.drawImage(error, 0, 2*h + scale*60, w, h); return ctx.canvas; } }3c:T5aa,ditheringFloydSteinberg = { function ditheringFloydSteinberg(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height; y++) { for (let x = 0; x < img.width-1; x++) { let idx = px(x,y); for(let i = 0; i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<4) + (oldPixel>>>4) + errors[idx])/ 16; const newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += quantError * 7; errors[idx - 4 + line] += quantError * 3; errors[idx + line] += quantError * 5; errors[idx + 4 + line] += quantError * 1; idx++; } } // avoid wrapping error around let idx = px(img.width-1,y); for(let i = 0; i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<4) + (oldPixel>>>4) + errors[idx])/ 16; const newPixel = getPixel(oldPixel, img.width-1, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 4 + line] += quantError * 3; errors[idx + line] += quantError * 5; idx++; } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringFloydSteinberg.label = "Floyd-Steinberg"; return ditheringFloydSteinberg; }3d:Taa8,ditheringFloydSteinbergSerpentine = { function ditheringFloydSteinbergSerpentine(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height; y++) { if (y&1) { for (let x = img.width-1; x > 0; x--) { let idx = px(x,y); for(let i = 0; i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<4) + (oldPixel>>>4) + errors[idx])/ 16; const newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 4] += quantError * 7; errors[idx + 4 + line] += quantError * 3; errors[idx + line] += quantError * 5; errors[idx - 4 + line] += quantError * 1; idx++; } } // avoid wrapping error around let idx = px(0,y); for(let i = 0; i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<4) + (oldPixel>>>4) + errors[idx])/ 16; const newPixel = getPixel(oldPixel, 0, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4 + line] += quantError * 3; errors[idx + line] += quantError * 5; idx++; } } else { for (let x = 0; x < img.width-1; x++) { let idx = px(x,y); for(let i = 0; i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<4) + (oldPixel>>>4) + errors[idx])/ 16; const newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += quantError * 7; errors[idx - 4 + line] += quantError * 3; errors[idx + line] += quantError * 5; errors[idx + 4 + line] += quantError * 1; idx++; } } // avoid wrapping error around let idx = px(img.width-1,y); for(let i = 0; i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<4) + (oldPixel>>>4) + errors[idx])/ 16; const newPixel = getPixel(oldPixel, img.width-1, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 4 + line] += quantError * 3; errors[idx + line] += quantError * 5; idx++; } } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringFloydSteinbergSerpentine.label = "Floyd-Steinberg Serp."; return ditheringFloydSteinbergSerpentine; }3e:T80e,ditheringAtkinson = { function ditheringAtkinson(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height; y++) { for (let x = 0; x < img.width-2; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += quantError; errors[idx + 8] += quantError; errors[idx - 4 + line] += quantError; errors[idx + line] += quantError; errors[idx + 4 + line] += quantError; errors[idx + 2*line] += quantError; idx++; } } // avoid wrapping error for(let i = 0, idx = px(img.width-2,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, img.width-2, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += quantError; errors[idx - 4 + line] += quantError; errors[idx + line] += quantError; errors[idx + 4 + line] += quantError; errors[idx + 2*line] += quantError; idx++; } for(let i = 0, idx = px(img.width-1,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, img.width-1, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 4 + line] += quantError; errors[idx + line] += quantError; errors[idx + 2*line] += quantError; idx++; } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringAtkinson.label = "Atkinson"; return ditheringAtkinson; }3f:Tfb3,ditheringAtkinsonSerpentine = { function ditheringAtkinsonSerpentine(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height; y++) { if (y&1) { for (let x = img.width-1; x > 1; x--) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 4] += quantError; errors[idx - 8] += quantError; errors[idx + 4 + line] += quantError; errors[idx + line] += quantError; errors[idx - 4 + line] += quantError; errors[idx + 2*line] += quantError; idx++; } } // avoid wrapping error for(let i = 0, idx = px(1,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, 1, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 4] += quantError; errors[idx + 4 + line] += quantError; errors[idx + line] += quantError; errors[idx - 4 + line] += quantError; errors[idx + 2*line] += quantError; idx++; } for(let i = 0, idx = px(0,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, 0, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4 + line] += quantError; errors[idx + line] += quantError; errors[idx + 2*line] += quantError; idx++; } } else { for (let x = 0; x < img.width-2; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += quantError; errors[idx + 8] += quantError; errors[idx - 4 + line] += quantError; errors[idx + line] += quantError; errors[idx + 4 + line] += quantError; errors[idx + 2*line] += quantError; idx++; } } // avoid wrapping error for(let i = 0, idx = px(img.width-2,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, img.width-2, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += quantError; errors[idx - 4 + line] += quantError; errors[idx + line] += quantError; errors[idx + 4 + line] += quantError; errors[idx + 2*line] += quantError; idx++; } for(let i = 0, idx = px(img.width-1,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, img.width-1, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 4 + line] += quantError; errors[idx + line] += quantError; errors[idx + 2*line] += quantError; idx++; } } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringAtkinsonSerpentine.label = "Atkinson Serp."; return ditheringAtkinsonSerpentine; }40:T852,ditheringAtkinsonColorBleed = { function ditheringAtkinsonColorBleed(getPixel, getThreshold){ const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height; y++) { for (let x = 0; x < img.width-2; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += quantError * 2; errors[idx + 8] += quantError; errors[idx - 4 + line] += quantError; errors[idx + line] += quantError * 2; errors[idx + 4 + line] += quantError; errors[idx + 2*line] += quantError; idx++; } } // avoid wrapping error for(let i = 0, idx = px(img.width-2,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, img.width-2, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += 2*quantError; errors[idx - 4 + line] += quantError; errors[idx + line] += 2*quantError; errors[idx + 4 + line] += quantError; errors[idx + 2*line] += quantError; idx++; } for(let i = 0, idx = px(img.width-1,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, img.width-1, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 4 + line] += 2*quantError; errors[idx + line] += 2*quantError; errors[idx + 2*line] += quantError; idx++; } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringAtkinsonColorBleed.label = "Atkinson (color bleed)" return ditheringAtkinsonColorBleed; }41:Tff2,ditheringAtkinsonColorBleedSerpentine = { function ditheringAtkinsonColorBleedSerpentine(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height; y++) { if (y&1) { for (let x = img.width-1; x > 1; x--) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 4] += 2*quantError; errors[idx - 8] += quantError; errors[idx + 4 + line] += quantError; errors[idx + line] += 2*quantError; errors[idx - 4 + line] += quantError; errors[idx + 2*line] += quantError; idx++; } } // avoid wrapping error for(let i = 0, idx = px(1,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, 1, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 4] += 2*quantError; errors[idx + 4 + line] += quantError; errors[idx + line] += 2*quantError; errors[idx - 4 + line] += quantError; errors[idx + 2*line] += quantError; idx++; } for(let i = 0, idx = px(0,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, 0, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4 + line] += quantError; errors[idx + line] += 2*quantError; errors[idx + 2*line] += quantError; idx++; } } else { for (let x = 0; x < img.width-2; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += 2*quantError; errors[idx + 8] += quantError; errors[idx - 4 + line] += quantError; errors[idx + line] += 2*quantError; errors[idx + 4 + line] += quantError; errors[idx + 2*line] += quantError; idx++; } } // avoid wrapping error for(let i = 0, idx = px(img.width-2,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, img.width-2, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += 2*quantError; errors[idx - 4 + line] += quantError; errors[idx + line] += 2*quantError; errors[idx + 4 + line] += quantError; errors[idx + 2*line] += quantError; idx++; } for(let i = 0, idx = px(img.width-1,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, img.width-1, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 4 + line] += quantError; errors[idx + line] += 2*quantError; errors[idx + 2*line] += quantError; idx++; } } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringAtkinsonColorBleedSerpentine.label = "Atkinson CB Serp."; return ditheringAtkinsonColorBleedSerpentine; }42:Ta36,ditheringSierra3 = { function ditheringSierra3(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height; y++) { for (let x = 2; x < img.width-2; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<5) + (oldPixel>>>3) + errors[idx])/ 32; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += quantError * 5; errors[idx + 8] += quantError * 3; errors[idx - 8 + line] += quantError * 2; errors[idx - 4 + line] += quantError * 4; errors[idx + line] += quantError * 5; errors[idx + 4 + line] += quantError * 4; errors[idx + 8 + line] += quantError * 2; errors[idx - 4 + line*2] += quantError * 2; errors[idx + line*2] += quantError * 3; errors[idx + 4 + line*2] += quantError * 2; idx++; } } // avoid error wrapping around to next column for(let i = 0, idx = px(img.width-2,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<5) + (oldPixel>>>3) + errors[idx])/ 32; let newPixel = getPixel(oldPixel, img.width-2, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += quantError * 5; errors[idx - 8 + line] += quantError * 2; errors[idx - 4 + line] += quantError * 4; errors[idx + line] += quantError * 5; errors[idx + 4 + line] += quantError * 4; errors[idx - 4 + line*2] += quantError * 2; errors[idx + line*2] += quantError * 3; errors[idx + 4 + line*2] += quantError * 2; idx++; } for(let i = 0, idx = px(img.width-1,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<5) + (oldPixel>>>3) + errors[idx])/ 32; let newPixel = getPixel(oldPixel, img.width-1, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 8 + line] += quantError * 2; errors[idx - 4 + line] += quantError * 4; errors[idx + line] += quantError * 5; errors[idx - 4 + line*2] += quantError * 2; errors[idx + line*2] += quantError * 3; idx++; } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringSierra3.label = "Sierra (Three Rows)"; return ditheringSierra3; }43:T1420,ditheringSierra3Serpentine = { function ditheringSierra3Serpentine(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height; y++) { if (y&1) { for (let x = img.width-1; x > 1; x--) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<5) + (oldPixel>>>3) + errors[idx])/ 32; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 4] += quantError * 5; errors[idx - 8] += quantError * 3; errors[idx + 8 + line] += quantError * 2; errors[idx + 4 + line] += quantError * 4; errors[idx + line] += quantError * 5; errors[idx - 4 + line] += quantError * 4; errors[idx - 8 + line] += quantError * 2; errors[idx + 4 + line*2] += quantError * 2; errors[idx + line*2] += quantError * 3; errors[idx - 4 + line*2] += quantError * 2; idx++; } } // avoid error wrapping around to next column for(let i = 0, idx = px(1,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<5) + (oldPixel>>>3) + errors[idx])/ 32; let newPixel = getPixel(oldPixel, 1, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 4] += quantError * 5; errors[idx + 8 + line] += quantError * 2; errors[idx + 4 + line] += quantError * 4; errors[idx + line] += quantError * 5; errors[idx - 4 + line] += quantError * 4; errors[idx + 4 + line*2] += quantError * 2; errors[idx + line*2] += quantError * 3; errors[idx - 4 + line*2] += quantError * 2; idx++; } for(let i = 0, idx = px(0,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<5) + (oldPixel>>>3) + errors[idx])/ 32; let newPixel = getPixel(oldPixel, 0, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 8 + line] += quantError * 2; errors[idx + 4 + line] += quantError * 4; errors[idx + line] += quantError * 5; errors[idx + 4 + line*2] += quantError * 2; errors[idx + line*2] += quantError * 3; idx++; } } else { for (let x = 2; x < img.width-2; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<5) + (oldPixel>>>3) + errors[idx])/ 32; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += quantError * 5; errors[idx + 8] += quantError * 3; errors[idx - 8 + line] += quantError * 2; errors[idx - 4 + line] += quantError * 4; errors[idx + line] += quantError * 5; errors[idx + 4 + line] += quantError * 4; errors[idx + 8 + line] += quantError * 2; errors[idx - 4 + line*2] += quantError * 2; errors[idx + line*2] += quantError * 3; errors[idx + 4 + line*2] += quantError * 2; idx++; } } // avoid error wrapping around to next column for(let i = 0, idx = px(img.width-2,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<5) + (oldPixel>>>3) + errors[idx])/ 32; let newPixel = getPixel(oldPixel, img.width-2, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += quantError * 5; errors[idx - 8 + line] += quantError * 2; errors[idx - 4 + line] += quantError * 4; errors[idx + line] += quantError * 5; errors[idx + 4 + line] += quantError * 4; errors[idx - 4 + line*2] += quantError * 2; errors[idx + line*2] += quantError * 3; errors[idx + 4 + line*2] += quantError * 2; idx++; } for(let i = 0, idx = px(img.width-1,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<5) + (oldPixel>>>3) + errors[idx])/ 32; let newPixel = getPixel(oldPixel, img.width-1, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 8 + line] += quantError * 2; errors[idx - 4 + line] += quantError * 4; errors[idx + line] += quantError * 5; errors[idx - 4 + line*2] += quantError * 2; errors[idx + line*2] += quantError * 3; idx++; } } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringSierra3Serpentine.label = "Sierra (Three Rows Serp.)"; return ditheringSierra3Serpentine; }44:T52f,ditheringSierraLite = { function ditheringSierraLite(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height; y++) { for (let x = 0; x < img.width-1; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[idx])/ 4; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += quantError * 2; errors[idx - 4 + line] += quantError; errors[idx + line] += quantError; idx++; } } // avoid wrapping error for(let i = 0, idx = px(img.width-1,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[idx])/ 4; let newPixel = getPixel(oldPixel, img.width-1, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 4 + line] += quantError; errors[idx + line] += quantError; idx++; } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringSierraLite.label = "Sierra Lite"; return ditheringSierraLite; }45:Ta38,ditheringJaJuNi = { function ditheringJaJuNi(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height; y++) { for (let x = 0; x < img.width-2; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { const oldPixel = clone.data[idx] + errors[idx]/ 48; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += quantError * 7; errors[idx + 8] += quantError * 5; errors[idx - 8 + line] += quantError * 3; errors[idx - 4 + line] += quantError * 5; errors[idx + line] += quantError * 7; errors[idx + 4 + line] += quantError * 5; errors[idx + 8 + line] += quantError * 3; errors[idx - 8 + 2*line] += quantError; errors[idx - 4 + 2*line] += quantError * 3; errors[idx + 2*line] += quantError * 5; errors[idx + 4 + 2*line] += quantError * 3; errors[idx + 8 + 2*line] += quantError; idx++; } } // avoid wrapping error for(let i = 0, idx = px(img.width-2,y); i < 4; i++) { const oldPixel = clone.data[idx] + errors[idx]/ 48; let newPixel = getPixel(oldPixel, img.width-2, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4] += quantError * 7; errors[idx - 8 + line] += quantError * 3; errors[idx - 4 + line] += quantError * 5; errors[idx + line] += quantError * 7; errors[idx + 4 + line] += quantError * 5; errors[idx - 8 + 2*line] += quantError; errors[idx - 4 + 2*line] += quantError * 3; errors[idx + 2*line] += quantError * 5; errors[idx + 4 + 2*line] += quantError * 3; idx++; } for(let i = 0, idx = px(img.width-1,y); i < 4; i++) { const oldPixel = clone.data[idx] + errors[idx]/ 48; let newPixel = getPixel(oldPixel, img.width-1, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 8 + line] += quantError * 3; errors[idx - 4 + line] += quantError * 5; errors[idx + line] += quantError * 7; errors[idx - 8 + 2*line] += quantError; errors[idx - 4 + 2*line] += quantError * 3; errors[idx + 2*line] += quantError * 5; idx++; } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringJaJuNi.label = "JaJuNi"; return ditheringJaJuNi; }46:T701,ditheringSkipNeighbours = { function ditheringSkipNeighbours(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height; y++) { for (let x = 0; x < img.width-2; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[idx])/ 4; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 8] += quantError; errors[idx + 8 + line] += quantError; errors[idx + 2*line] += quantError; errors[idx + 4 + 2*line] += quantError; idx++; } } // avoid wrapping error for(let i = 0, idx = px(img.width-2,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[idx])/ 4; let newPixel = getPixel(oldPixel, img.width-2, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 2*line] += quantError; errors[idx + 4 + 2*line] += quantError; idx++; } for(let i = 0, idx = px(img.width-1,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[idx])/ 4; let newPixel = getPixel(oldPixel, img.width-1, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 2*line] += quantError; idx++; } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringSkipNeighbours.label = '"Skip Neighbours"'; return ditheringSkipNeighbours; }47:T93d,ditheringSkip2Neighbours = { function ditheringSkipNeighbours(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height; y++) { for (let x = 0; x < img.width-3; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 12] += quantError; errors[idx + 12 + line] += 2*quantError; errors[idx + 12 + 2*line] += quantError; errors[idx + 3*line] += quantError; errors[idx + 4 + 3*line] += 2*quantError; errors[idx + 8 + 3*line] += quantError; idx++; } } for(let i = 0, idx = px(img.width-3,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; let newPixel = getPixel(oldPixel, img.width-3, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 3*line] += quantError; errors[idx + 4 + 3*line] += 2*quantError; errors[idx + 8 + 3*line] += quantError; idx++; } for(let i = 0, idx = px(img.width-2,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; let newPixel = getPixel(oldPixel, img.width-2, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 3*line] += quantError; errors[idx + 4 + 3*line] += 2*quantError; idx++; } for(let i = 0, idx = px(img.width-1,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; let newPixel = getPixel(oldPixel, img.width-1, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 3*line] += quantError; idx++; } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringSkipNeighbours.label = '"Skip 2 Neighbours"'; return ditheringSkipNeighbours; }48:Tbb4,ditheringSkip3Neighbours = { function ditheringSkipNeighbours(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height; y++) { for (let x = 0; x < img.width-4; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 16] += quantError; errors[idx + 16 + line] += quantError; errors[idx + 16 + 2*line] += quantError; errors[idx + 16 + 3*line] += quantError; errors[idx + 4*line] += quantError; errors[idx + 4 + 4*line] += quantError; errors[idx + 8 + 4*line] += quantError; errors[idx + 12 + 4*line] += quantError; idx++; } } for(let i = 0, idx = px(img.width-4,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; let newPixel = getPixel(oldPixel, img.width-4, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4*line] += quantError; errors[idx + 4 + 4*line] += quantError; errors[idx + 8 + 4*line] += quantError; errors[idx + 12 + 4*line] += quantError; idx++; } for(let i = 0, idx = px(img.width-3,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; let newPixel = getPixel(oldPixel, img.width-3, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4*line] += quantError; errors[idx + 4 + 4*line] += quantError; errors[idx + 8 + 4*line] += quantError; idx++; } for(let i = 0, idx = px(img.width-2,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; let newPixel = getPixel(oldPixel, img.width-2, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4*line] += quantError; errors[idx + 4 + 4*line] += quantError; idx++; } for(let i = 0, idx = px(img.width-1,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; let newPixel = getPixel(oldPixel, img.width-1, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4*line] += quantError; idx++; } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringSkipNeighbours.label = '"Skip 3 Neighbours"'; return ditheringSkipNeighbours; }49:T401,ditheringStraightDown = { function ditheringStraightDown(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height-1; y++) { for (let x = 0; x < img.width; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { const oldPixel = clone.data[idx] + errors[idx]; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + line] += quantError; idx++; } } } const y = img.height-1; for (let x = 0; x < img.width; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { const oldPixel = clone.data[idx] + errors[idx]; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; idx++; } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringStraightDown.label = "Diffuse Down"; return ditheringStraightDown; }4a:T643,ditheringDownRight = { function ditheringDownRight(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height-1; y++) { for (let x = 0; x < img.width-1; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { const oldPixel = clone.data[idx] + errors[idx]; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4 + line] += quantError; idx++; } } for(let i = 0, idx = px(img.width-1,y); i < 4; i++) { const oldPixel = clone.data[idx] + errors[idx]; let newPixel = getPixel(oldPixel, img.width-1, y, getThreshold); clone.data[idx] = newPixel; idx++; } } const y = img.height-1; for (let x = 0; x < img.width-1; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { const oldPixel = clone.data[idx] + errors[idx]; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 4 + line] += quantError; idx++; } } for(let i = 0, idx = px(img.width-1,y); i < 4; i++) { const oldPixel = clone.data[idx] + errors[idx]; let newPixel = getPixel(oldPixel, img.width-1, y, getThreshold); clone.data[idx] = newPixel; idx++; } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringDownRight.label = "Diffuse Down-Right"; return ditheringDownRight; }4b:T428,ditheringDownLeft = { function ditheringDownLeft(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height-1; y++) { for (let x = 0; x < img.width; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { const oldPixel = clone.data[idx] + errors[idx]; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 4 + line] += quantError; idx++; } } } const y = img.height-1; for (let x = 0; x < img.width; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { const oldPixel = clone.data[idx] + errors[idx]; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; idx++; } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringDownLeft.label = "Diffuse Down-Left"; return ditheringDownLeft; }4c:T572,ditheringSierraLiteSkip1 = { function ditheringSierraLiteSkip1(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height; y++) { for (let x = 0; x < img.width-2; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[idx])/ 4; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 8] += quantError * 2; errors[idx - 8 + 2*line] += quantError; errors[idx + 2*line] += quantError; idx++; } } for (let x = img.width-2; x < img.width; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[idx])/ 4; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 8 + 2*line] += quantError; errors[idx + 2*line] += quantError; idx++; } } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringSierraLiteSkip1.label = "Sierra Lite skip 1"; return ditheringSierraLiteSkip1; }4d:T575,ditheringSierraLiteSkip2 = { function ditheringSierraLiteSkip2(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height; y++) { for (let x = 0; x < img.width-3; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[idx])/ 4; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 12] += quantError * 2; errors[idx - 12 + 3*line] += quantError; errors[idx + 3*line] += quantError; idx++; } } for (let x = img.width-3; x < img.width; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[idx])/ 4; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 12 + 3*line] += quantError; errors[idx + 3*line] += quantError; idx++; } } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringSierraLiteSkip2.label = "Sierra Lite skip 2"; return ditheringSierraLiteSkip2; }4e:T575,ditheringSierraLiteSkip3 = { function ditheringSierraLiteSkip3(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); for (let y = 0; y < img.height; y++) { for (let x = 0; x < img.width-4; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[idx])/ 4; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx + 16] += quantError * 2; errors[idx - 16 + 4*line] += quantError; errors[idx + 4*line] += quantError; idx++; } } for (let x = img.width-4; x < img.width; x++) { for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[idx])/ 4; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = oldPixel - newPixel; errors[idx - 16 + 4*line] += quantError; errors[idx + 4*line] += quantError; idx++; } } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringSierraLiteSkip3.label = "Sierra Lite skip 3"; return ditheringSierraLiteSkip3; }4f:T717,ditheringOstromoukhov = { function ditheringOstromoukhov(getPixel, getThreshold) { const {ctx, clone, errors, line} = getDitheringCtx(); const coeff = coefficients_ostromoukhov; for (let y = 0; y < img.height; y++) { for (let _x = 0; _x < img.width-1; _x++) { // serpentine algorithm const sign = 1;// (y&1) ? -1 : 1; const x = _x//(y&1) ? (img.width - 1 - _x) : _x; for(let i = 0, idx = px(x,y); i < 4; i++) { let oldPixel = clone.data[idx]; const o4 = oldPixel * 4; const right = coeff[o4]; const downleft = coeff[o4+1]; const down = coeff[o4+2]; const sum = right + downleft + down; const err = errors[idx]; oldPixel = (oldPixel + (oldPixel << 8) + err) / 256; let newPixel = getPixel(oldPixel, x, y, getThreshold); clone.data[idx] = newPixel; let quantError = (oldPixel - newPixel)*256; errors[idx + 4] += quantError * right / sum; errors[idx - sign*4 + line] += quantError * downleft / sum; errors[idx + line] += quantError * down / sum; idx++; } } // avoid wrapping error // for(let i = 0, idx = px(img.width-1,y); i < 4; i++) { // let oldPixel = clone.data[idx]; // oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[idx])/ 4; // let newPixel = getPixel(oldPixel, img.width-1, y, getThreshold); // clone.data[idx] = newPixel; // let quantError = oldPixel - newPixel; // errors[idx - 4 + line] += quantError; // errors[idx + line] += quantError; // idx++; // } } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringOstromoukhov.label = "Ostromoukhov"; return ditheringOstromoukhov; }50:T2d63,// Coefficients taken from Otromoukhov's sample code, which can be found at: // https://perso.liris.cnrs.fr/victor.ostromoukhov/publications/publications_abstracts.html#SIGGRAPH01_VarcoeffED // when moving left-to-right, the weights are for: // weights for: right, down-left, down, sum (see picture above) coefficients_ostromoukhov = Uint16Array.from([ 13, 0, 5, 18, /* 0 */ 13, 0, 5, 18, /* 1 */ 21, 0, 10, 31, /* 2 */ 7, 0, 4, 11, /* 3 */ 8, 0, 5, 13, /* 4 */ 47, 3, 28, 78, /* 5 */ 23, 3, 13, 39, /* 6 */ 15, 3, 8, 26, /* 7 */ 22, 6, 11, 39, /* 8 */ 43, 15, 20, 78, /* 9 */ 7, 3, 3, 13, /* 10 */ 501, 224, 211, 936, /* 11 */ 249, 116, 103, 468, /* 12 */ 165, 80, 67, 312, /* 13 */ 123, 62, 49, 234, /* 14 */ 489, 256, 191, 936, /* 15 */ 81, 44, 31, 156, /* 16 */ 483, 272, 181, 936, /* 17 */ 60, 35, 22, 117, /* 18 */ 53, 32, 19, 104, /* 19 */ 237, 148, 83, 468, /* 20 */ 471, 304, 161, 936, /* 21 */ 3, 2, 1, 6, /* 22 */ 459, 304, 161, 924, /* 23 */ 38, 25, 14, 77, /* 24 */ 453, 296, 175, 924, /* 25 */ 225, 146, 91, 462, /* 26 */ 149, 96, 63, 308, /* 27 */ 111, 71, 49, 231, /* 28 */ 63, 40, 29, 132, /* 29 */ 73, 46, 35, 154, /* 30 */ 435, 272, 217, 924, /* 31 */ 108, 67, 56, 231, /* 32 */ 13, 8, 7, 28, /* 33 */ 213, 130, 119, 462, /* 34 */ 423, 256, 245, 924, /* 35 */ 5, 3, 3, 11, /* 36 */ 281, 173, 162, 616, /* 37 */ 141, 89, 78, 308, /* 38 */ 283, 183, 150, 616, /* 39 */ 71, 47, 36, 154, /* 40 */ 285, 193, 138, 616, /* 41 */ 13, 9, 6, 28, /* 42 */ 41, 29, 18, 88, /* 43 */ 36, 26, 15, 77, /* 44 */ 289, 213, 114, 616, /* 45 */ 145, 109, 54, 308, /* 46 */ 291, 223, 102, 616, /* 47 */ 73, 57, 24, 154, /* 48 */ 293, 233, 90, 616, /* 49 */ 21, 17, 6, 44, /* 50 */ 295, 243, 78, 616, /* 51 */ 37, 31, 9, 77, /* 52 */ 27, 23, 6, 56, /* 53 */ 149, 129, 30, 308, /* 54 */ 299, 263, 54, 616, /* 55 */ 75, 67, 12, 154, /* 56 */ 43, 39, 6, 88, /* 57 */ 151, 139, 18, 308, /* 58 */ 303, 283, 30, 616, /* 59 */ 38, 36, 3, 77, /* 60 */ 305, 293, 18, 616, /* 61 */ 153, 149, 6, 308, /* 62 */ 307, 303, 6, 616, /* 63 */ 1, 1, 0, 2, /* 64 */ 101, 105, 2, 208, /* 65 */ 49, 53, 2, 104, /* 66 */ 95, 107, 6, 208, /* 67 */ 23, 27, 2, 52, /* 68 */ 89, 109, 10, 208, /* 69 */ 43, 55, 6, 104, /* 70 */ 83, 111, 14, 208, /* 71 */ 5, 7, 1, 13, /* 72 */ 172, 181, 37, 390, /* 73 */ 97, 76, 22, 195, /* 74 */ 72, 41, 17, 130, /* 75 */ 119, 47, 29, 195, /* 76 */ 4, 1, 1, 6, /* 77 */ 4, 1, 1, 6, /* 78 */ 4, 1, 1, 6, /* 79 */ 4, 1, 1, 6, /* 80 */ 4, 1, 1, 6, /* 81 */ 4, 1, 1, 6, /* 82 */ 4, 1, 1, 6, /* 83 */ 4, 1, 1, 6, /* 84 */ 4, 1, 1, 6, /* 85 */ 65, 18, 17, 100, /* 86 */ 95, 29, 26, 150, /* 87 */ 185, 62, 53, 300, /* 88 */ 30, 11, 9, 50, /* 89 */ 35, 14, 11, 60, /* 90 */ 85, 37, 28, 150, /* 91 */ 55, 26, 19, 100, /* 92 */ 80, 41, 29, 150, /* 93 */ 155, 86, 59, 300, /* 94 */ 5, 3, 2, 10, /* 95 */ 5, 3, 2, 10, /* 96 */ 5, 3, 2, 10, /* 97 */ 5, 3, 2, 10, /* 98 */ 5, 3, 2, 10, /* 99 */ 5, 3, 2, 10, /* 100 */ 5, 3, 2, 10, /* 101 */ 5, 3, 2, 10, /* 102 */ 5, 3, 2, 10, /* 103 */ 5, 3, 2, 10, /* 104 */ 5, 3, 2, 10, /* 105 */ 5, 3, 2, 10, /* 106 */ 5, 3, 2, 10, /* 107 */ 305, 176, 119, 600, /* 108 */ 155, 86, 59, 300, /* 109 */ 105, 56, 39, 200, /* 110 */ 80, 41, 29, 150, /* 111 */ 65, 32, 23, 120, /* 112 */ 55, 26, 19, 100, /* 113 */ 335, 152, 113, 600, /* 114 */ 85, 37, 28, 150, /* 115 */ 115, 48, 37, 200, /* 116 */ 35, 14, 11, 60, /* 117 */ 355, 136, 109, 600, /* 118 */ 30, 11, 9, 50, /* 119 */ 365, 128, 107, 600, /* 120 */ 185, 62, 53, 300, /* 121 */ 25, 8, 7, 40, /* 122 */ 95, 29, 26, 150, /* 123 */ 385, 112, 103, 600, /* 124 */ 65, 18, 17, 100, /* 125 */ 395, 104, 101, 600, /* 126 */ 4, 1, 1, 6, /* 127 */ 4, 1, 1, 6, /* 128 */ 395, 104, 101, 600, /* 129 */ 65, 18, 17, 100, /* 130 */ 385, 112, 103, 600, /* 131 */ 95, 29, 26, 150, /* 132 */ 25, 8, 7, 40, /* 133 */ 185, 62, 53, 300, /* 134 */ 365, 128, 107, 600, /* 135 */ 30, 11, 9, 50, /* 136 */ 355, 136, 109, 600, /* 137 */ 35, 14, 11, 60, /* 138 */ 115, 48, 37, 200, /* 139 */ 85, 37, 28, 150, /* 140 */ 335, 152, 113, 600, /* 141 */ 55, 26, 19, 100, /* 142 */ 65, 32, 23, 120, /* 143 */ 80, 41, 29, 150, /* 144 */ 105, 56, 39, 200, /* 145 */ 155, 86, 59, 300, /* 146 */ 305, 176, 119, 600, /* 147 */ 5, 3, 2, 10, /* 148 */ 5, 3, 2, 10, /* 149 */ 5, 3, 2, 10, /* 150 */ 5, 3, 2, 10, /* 151 */ 5, 3, 2, 10, /* 152 */ 5, 3, 2, 10, /* 153 */ 5, 3, 2, 10, /* 154 */ 5, 3, 2, 10, /* 155 */ 5, 3, 2, 10, /* 156 */ 5, 3, 2, 10, /* 157 */ 5, 3, 2, 10, /* 158 */ 5, 3, 2, 10, /* 159 */ 5, 3, 2, 10, /* 160 */ 155, 86, 59, 300, /* 161 */ 80, 41, 29, 150, /* 162 */ 55, 26, 19, 100, /* 163 */ 85, 37, 28, 150, /* 164 */ 35, 14, 11, 60, /* 165 */ 30, 11, 9, 50, /* 166 */ 185, 62, 53, 300, /* 167 */ 95, 29, 26, 150, /* 168 */ 65, 18, 17, 100, /* 169 */ 4, 1, 1, 6, /* 170 */ 4, 1, 1, 6, /* 171 */ 4, 1, 1, 6, /* 172 */ 4, 1, 1, 6, /* 173 */ 4, 1, 1, 6, /* 174 */ 4, 1, 1, 6, /* 175 */ 4, 1, 1, 6, /* 176 */ 4, 1, 1, 6, /* 177 */ 4, 1, 1, 6, /* 178 */ 119, 47, 29, 195, /* 179 */ 72, 41, 17, 130, /* 180 */ 97, 76, 22, 195, /* 181 */ 172, 181, 37, 390, /* 182 */ 5, 7, 1, 13, /* 183 */ 83, 111, 14, 208, /* 184 */ 43, 55, 6, 104, /* 185 */ 89, 109, 10, 208, /* 186 */ 23, 27, 2, 52, /* 187 */ 95, 107, 6, 208, /* 188 */ 49, 53, 2, 104, /* 189 */ 101, 105, 2, 208, /* 190 */ 1, 1, 0, 2, /* 191 */ 307, 303, 6, 616, /* 192 */ 153, 149, 6, 308, /* 193 */ 305, 293, 18, 616, /* 194 */ 38, 36, 3, 77, /* 195 */ 303, 283, 30, 616, /* 196 */ 151, 139, 18, 308, /* 197 */ 43, 39, 6, 88, /* 198 */ 75, 67, 12, 154, /* 199 */ 299, 263, 54, 616, /* 200 */ 149, 129, 30, 308, /* 201 */ 27, 23, 6, 56, /* 202 */ 37, 31, 9, 77, /* 203 */ 295, 243, 78, 616, /* 204 */ 21, 17, 6, 44, /* 205 */ 293, 233, 90, 616, /* 206 */ 73, 57, 24, 154, /* 207 */ 291, 223, 102, 616, /* 208 */ 145, 109, 54, 308, /* 209 */ 289, 213, 114, 616, /* 210 */ 36, 26, 15, 77, /* 211 */ 41, 29, 18, 88, /* 212 */ 13, 9, 6, 28, /* 213 */ 285, 193, 138, 616, /* 214 */ 71, 47, 36, 154, /* 215 */ 283, 183, 150, 616, /* 216 */ 141, 89, 78, 308, /* 217 */ 281, 173, 162, 616, /* 218 */ 5, 3, 3, 11, /* 219 */ 423, 256, 245, 924, /* 220 */ 213, 130, 119, 462, /* 221 */ 13, 8, 7, 28, /* 222 */ 108, 67, 56, 231, /* 223 */ 435, 272, 217, 924, /* 224 */ 73, 46, 35, 154, /* 225 */ 63, 40, 29, 132, /* 226 */ 111, 71, 49, 231, /* 227 */ 149, 96, 63, 308, /* 228 */ 225, 146, 91, 462, /* 229 */ 453, 296, 175, 924, /* 230 */ 38, 25, 14, 77, /* 231 */ 459, 304, 161, 924, /* 232 */ 3, 2, 1, 6, /* 233 */ 471, 304, 161, 936, /* 234 */ 237, 148, 83, 468, /* 235 */ 53, 32, 19, 104, /* 236 */ 60, 35, 22, 117, /* 237 */ 483, 272, 181, 936, /* 238 */ 81, 44, 31, 156, /* 239 */ 489, 256, 191, 936, /* 240 */ 123, 62, 49, 234, /* 241 */ 165, 80, 67, 312, /* 242 */ 249, 116, 103, 468, /* 243 */ 501, 224, 211, 936, /* 244 */ 7, 3, 3, 13, /* 245 */ 43, 15, 20, 78, /* 246 */ 22, 6, 11, 39, /* 247 */ 15, 3, 8, 26, /* 248 */ 23, 3, 13, 39, /* 249 */ 47, 3, 28, 78, /* 250 */ 8, 0, 5, 13, /* 251 */ 7, 0, 4, 11, /* 252 */ 21, 0, 10, 31, /* 253 */ 13, 0, 5, 18, /* 254 */ 13, 0, 5, 18 /* 255 */ ])51:[{"id":"041bfe45fe0ebd752dcac30807d3887bda90771e3080120e06cd79ac99b009fa0903e1d89e85b0e1d9c0655a0859eb566623eef9755d37d8aeb5bd6b98f6dc7e","href":"https://static.observableusercontent.com/files/041bfe45fe0ebd752dcac30807d3887bda90771e3080120e06cd79ac99b009fa0903e1d89e85b0e1d9c0655a0859eb566623eef9755d37d8aeb5bd6b98f6dc7e","name":"test card small@1.jpg","type":"image/jpeg","lastModified":1576284105739.376,"size":329798},{"id":"f9b82ace2b60e4ee668ec9b59ec3ae1a07cde3df24539fda977353a975ea4a0f5912a64e614bf02863ee06d7ddf542403fc2b4f43314e29f98c5eebf3c9bd643","href":"https://static.observableusercontent.com/files/f9b82ace2b60e4ee668ec9b59ec3ae1a07cde3df24539fda977353a975ea4a0f5912a64e614bf02863ee06d7ddf542403fc2b4f43314e29f98c5eebf3c9bd643","name":"doggo.jpeg","type":"image/jpeg","lastModified":1609931057753.488,"size":13601}] 2f:{"title":"Ordered Error Diffusion Dithering","cells":[{"id":1095,"value":"md`# Ordered Error Diffusion Dithering `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3206,"value":"*Note: If you wish to convert an image to black-and-white using one of the methods described here, [@iamgrahamallen](https://observablehq.com/@iamgrahamallen) modified the code in this notebook into a conventient tool that lets you do just that:* \n\nhttps://observablehq.com/@iamgrahamallen/convert-image-to-one-bit","pinned":false,"hidden":false,"mode":"md"},{"id":465,"value":"hybrid2x2 = {\n return ditherHybrid(ditheringMethods[ditheringSelection], thresholds[thresholdSelection])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1350,"value":"viewof imageSelection = select({\n title: 'Input Image',\n options: [\n { label: 'David', value: 'David' },\n { label: 'Horizontal Gradient', value: 'HorGr' },\n { label: 'Vertical Gradient', value: 'VertGr' },\n { label: 'Color Gradient', value: 'GrC' },\n { label: 'Test Card', value: 'TestCard' },\n { label: 'Doggo', value: 'Doggo' },\n { label: 'Gray', value: 'Gray'}\n ],\n value: 'David'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1073,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1682,"value":"hybridVariable1bit = {\n await visibility();\n return ditherHybridOneRow(\n ditheringAtkinson,\n get2x2variableWidthThreshold,\n getPixel1bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2427,"value":"table([\n [get2x2variableWidthThreshold(0,0), get2x2variableWidthThreshold(1, 0)],\n [get2x2variableWidthThreshold(0,1), get2x2variableWidthThreshold(1, 1)]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1649,"value":"viewof thresholdWidth = slider({\n min: 0, \n max: 256,\n step: 0.25, \n value: 0,\n description: \"2×2 threshold step size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2483,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3003,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringAtkinson,\n make2x2variableWidthThreshold(255),\n getPixel1bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2998,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1699,"value":"hybridVariable2bit = {\n await visibility();\n return ditherHybridOneRow(\n ditheringSierra3,\n make4x4variableWidthThreshold(thresholdWidth4x4),\n getPixel2bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2439,"value":"{\n await visibility();\n return table([\n [0, 1, 2, 3].map(v => get4x4variableWidthThreshold(v, 0)),\n [0, 1, 2, 3].map(v => get4x4variableWidthThreshold(v, 1)),\n [0, 1, 2, 3].map(v => get4x4variableWidthThreshold(v, 2)),\n [0, 1, 2, 3].map(v => get4x4variableWidthThreshold(v, 3))\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2435,"value":"viewof thresholdWidth4x4 = slider({\n min: 0, \n max: 256,\n step: 0.25, \n value: 16,\n description: \"4×4 threshold step size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1654,"value":"{\n await visibility();\n return md`Obviously, for a uniform 127 map the ordered dithering should regress to a plain threshold again, except at 2 bit grayscale this time. The hybrid similarly is, again, equal to the original error diffusion method in this case. The original Bayer 4×4 threshold map is recreated when we pick a step size of 16. What happens when we push beyond that is a bit more complicated this time.\n\nRecall our insight about checkerboard patterns in the 1 bit case. What is different now is that we are rounding between shades of grey. The result is that we force the image into checkerboard textures halfway between these shade of grey. Two-bit images have four \"colors\" - black, two shades of grey and white. Therefore we should expect to get three checkerboard texture precisely between them, which is exactly what we get in the ordered dithering case:`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3034,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringAtkinson,\n make4x4variableWidthThreshold(255),\n getPixel2bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3032,"value":"{\n await visibility();\n return md`Another way to think about it is this: when we have a low step size, we end up with many opaque shades of grey. When we have a high step size, we end up with many opaque shades of \"checkerboard grey\". Both cases are examples of banding. This is true for both the ordered and hybrid dithering.\n\nFor ordered dithering, the sweet spot with minimal banding would appear to be and equally distributed step size (16 in the 4×4 case).`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3029,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringSierra3,\n make4x4variableWidthThreshold(16),\n getPixel2bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3021,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringSierra3,\n make4x4variableWidthThreshold(17),\n getPixel2bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3025,"value":"{\n await visibility();\n return md`For hybrid dithering, the error diffusion gives a bit of wiggle room. This is most visible on the shoulder in the bottom right: for step sizes 17 and above - just one more than the even distribution case - the shoulder has false checkerboard patterns in the ordered dithering case. These never appear in the hybrid dithering example.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3017,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":3014,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringSierra3,\n make4x4variableWidthThreshold(28),\n getPixel2bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3010,"value":"{\n await visibility();\n return md`What is interesting however is that we end up with adjacent pixels that are two shades apart (most notable on the cheek). This kind of makes sense: the higher error sensitivity also means greater rounding error, which means more overcompensation in the *other* direction, so we can end up \"double rounding\" an extra shade away.\n\nFor the record, at 4 bits the effects get so subtle they are very hard to distinguish without zooming in:`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3006,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringSierra3,\n get8x8variableWidthThreshold,\n getPixel4bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2690,"value":"{\n await visibility();\n return table([\n [0, 1, 2, 3, 4, 5, 6, 7].map(v => get8x8variableWidthThreshold(v, 0)),\n [0, 1, 2, 3, 4, 5, 6, 7].map(v => get8x8variableWidthThreshold(v, 1)),\n [0, 1, 2, 3, 4, 5, 6, 7].map(v => get8x8variableWidthThreshold(v, 2)),\n [0, 1, 2, 3, 4, 5, 6, 7].map(v => get8x8variableWidthThreshold(v, 3)),\n [0, 1, 2, 3, 4, 5, 6, 7].map(v => get8x8variableWidthThreshold(v, 4)),\n [0, 1, 2, 3, 4, 5, 6, 7].map(v => get8x8variableWidthThreshold(v, 5)),\n [0, 1, 2, 3, 4, 5, 6, 7].map(v => get8x8variableWidthThreshold(v, 6)),\n [0, 1, 2, 3, 4, 5, 6, 7].map(v => get8x8variableWidthThreshold(v, 7))\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2679,"value":"viewof thresholdWidth8x8 = slider({\n min: 0, \n max: 256,\n step: 0.125, \n value: 4,\n description: \"8×8 threshold step size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2545,"value":"{\n await visibility();\n return md`Not all combinations of dithering, threshold matrices and bit depths produce equally satisfying results. As far as \"good\" dither algorithms and threshold matrices go, I just combined known methods. But the above examples suggest that there might be ways to fine-tune threshold matrices and error-diffusion methods to work better together.\n\nAnother fun thing to play with is experimenting with ordering matrices and dithering kernels that normally are pretty bad, and see what comes out when we combine them. To demonstrate, I made a *terrible* custom dither kernel that I call \"skip neighbours\", where the error jumps over the adjacent pixels to the pixels two, three or four steps ahead.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3041,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringSkipNeighbours,\n make2x2variableWidthThreshold(68),\n getPixel2bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3039,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2518,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"{\n await visibility();\n let ctx = DOM.canvas(img.width, img.height).getContext('2d');\n let clone = new ImageData(\n new Uint8ClampedArray(img.data),\n img.width,\n img.height\n );\n\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"{\n await visibility();\n return md`## Threshold\n\n*(Turns out that threshold \"dithering\" is technically ${tex`1{\\times}1`} ordered dithering!)*`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"{\n await visibility();\n return ditherAllBits(ditheringOrdered, getPlainThreshold);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"{\n await visibility();\n return md`## ${tex`2{\\times}2`} Ordered Dithering`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"{\n await visibility();\n return ditherAllBits(ditheringOrdered, get2x2threshold);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"{\n await visibility();\n return md`## ${tex`4{\\times}4`} Ordered Dithering`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"ditherAllBits(ditheringOrdered, get4x4threshold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"{\n await visibility();\n return md`## ${tex`8{\\times}8`} Ordered Dithering`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"{\n await visibility();\n return ditherAllBits(ditheringOrdered, get8x8threshold);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3163,"value":"{\n await visibility();\n return md`For the ${tex`2{\\times}2`} version, we can very easily see the different textures mimicking three levels of gray. For the ${tex`4{\\times}4`} we end up with 15 levels of gray and ${tex`8{\\times}8`} has 63 shades of crosshatches (plus black and white).\n\nFine detail, like the pupils in the eyes, is lost. Sharp outlines get fuzzier too. On the other hand, a benefit of ordered dithering is that it they are [point operations](https://observablehq.com/@jake-low/image-processing-point-operations) - the output of a pixel does not depend on the surrounding pixels. This makes it easy to parallelize, and also a more stable form of dithering: changing a pixel does not affect the others. This is why it is often used in (real) GIFs where there is little movement. The regularity of the textures can also aid compression.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"AppendixB = {\n await visibility();\n return md`

\n\n## Appendix B: A Quick Refresher on Error Diffusion Dithering\n\n[🔙 *return to opening paragraph*](#Introduction)\n\nError diffusion is based on a simple concept: when we round our pixel to the nearest available value, the rounding error gets divided among the surrounding pixels in some way to correct for it. The idea is to spread the rounding error un such a way that the average pixel value over a region of pixels is close to the undithered average.\n\nLet's nab some of the more famous error diffusion algorithms from [Image Dithering: Eleven Algorithms](http://www.tannerhelland.com/4660/dithering-eleven-algorithms-source-code/) and [Libcaca study: the science behind colour ASCII art ](http://caca.zoy.org/study/part3.html)\n\n## Floyd-Steinberg\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"{\n await visibility();\n return ditherAllBits(ditheringFloydSteinberg, getPlainThreshold);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1149,"value":"{\n await visibility();\n return md`## Jarvis, Judice and Ninke (a.k.a. JaJuNi)`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"{\n await visibility();\n return ditherAllBits(ditheringJaJuNi, getPlainThreshold);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"{\n await visibility();\n return md`## Atkinson`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"{\n await visibility();\n return ditherAllBits(ditheringAtkinson, getPlainThreshold);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"{\n await visibility();\n return md`## Atkinson-ish (no reduced color bleed)`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"{\n await visibility();\n return ditherAllBits(ditheringAtkinsonColorBleed, getPlainThreshold);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"{\n await visibility();\n return md` ## Three-row Sierra`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"{\n await visibility();\n return ditherAllBits(ditheringSierra3, getPlainThreshold);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1175,"value":"{\n await visibility();\n return md` ## Sierra Lite`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1173,"value":"{\n await visibility();\n return ditherAllBits(ditheringSierraLite, getPlainThreshold);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1161,"value":"{\n await visibility();\n return md`As we can see, a lot more fine detail is maintained. On top of that, edges are enhanced (especially with error diffusion methods with larger kernels, such as JaJuNi or Sierra). The distribution of points is closer to blue noise, which is a double-edged sword: on the one hand, our eyes prefer it. On the other, it is less compressible. Finally, when used in GIF animations, the dithering will be dramatically different from frame-to-frame, often resulting in much larger files.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1164,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1188,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1679,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"ditheringOrdered = {\n function ditheringOrdered(getPixel, getThreshold) {\n let {ctx, clone, errors, line} = getDitheringCtx();\n for (let y = 0; y < img.height; y++) {\n for (let x = 0; x < img.width; x++) {\n for (let i = 0, idx = px(x, y); i < 4; i++) {\n clone.data[idx] = getPixel(clone.data[idx], x, y, getThreshold);\n idx++;\n }\n }\n }\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n }\n ditheringOrdered.label = \"Ordered\"\n return ditheringOrdered;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":2938,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":2952,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":2965,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":2944,"value":"$43","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"$44","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"$45","pinned":false,"hidden":false,"mode":"ojs"},{"id":1210,"value":"$46","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"$47","pinned":false,"hidden":false,"mode":"ojs"},{"id":1232,"value":"$48","pinned":false,"hidden":false,"mode":"ojs"},{"id":1287,"value":"ditheringStraightRight = {\n function ditheringStraightRight(getPixel, getThreshold) {\n const {ctx, clone, errors, line} = getDitheringCtx();\n for (let y = 0; y < img.height; y++) {\n for (let x = 0; x < img.width-1; x++) {\n for(let i = 0, idx = px(x,y); i < 4; i++) {\n const oldPixel = clone.data[idx] + errors[idx];\n let newPixel = getPixel(oldPixel, x, y, getThreshold);\n clone.data[idx] = newPixel;\n let quantError = oldPixel - newPixel;\n errors[idx + 4] += quantError;\n idx++;\n }\n }\n for(let i = 0, idx = px(img.width-1,y); i < 4; i++) {\n const oldPixel = clone.data[idx] + errors[idx];\n let newPixel = getPixel(oldPixel, img.width-1, y, getThreshold);\n clone.data[idx] = newPixel;\n idx++;\n }\n }\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n }\n ditheringStraightRight.label = \"Diffuse Right\";\n return ditheringStraightRight;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1288,"value":"$49","pinned":false,"hidden":false,"mode":"ojs"},{"id":1291,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1572,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1574,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1576,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs"},{"id":3955,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs"},{"id":3952,"value":"$50","pinned":false,"hidden":false,"mode":"ojs"},{"id":1700,"value":"ditheringMethods = {\n return {\n Ordered: ditheringOrdered,\n FS: ditheringFloydSteinberg,\n FSS: ditheringFloydSteinbergSerpentine,\n jajuni: ditheringJaJuNi,\n Atkinson: ditheringAtkinson,\n AtkinsonSerp: ditheringAtkinsonSerpentine,\n AtkinsonCB: ditheringAtkinsonColorBleed,\n AtkinsonCBSerp: ditheringAtkinsonColorBleedSerpentine,\n sierra3: ditheringSierra3,\n sierra3serp: ditheringSierra3Serpentine,\n sierra1: ditheringSierraLite,\n skipneighbours: ditheringSkipNeighbours,\n skip2neighbours: ditheringSkip2Neighbours,\n skip3neighbours: ditheringSkip3Neighbours,\n right: ditheringStraightRight,\n down: ditheringStraightDown,\n downleft: ditheringDownLeft,\n downright: ditheringDownRight,\n sierra1skip1: ditheringSierraLiteSkip1,\n sierra1skip2: ditheringSierraLiteSkip2,\n sierra1skip3: ditheringSierraLiteSkip3,\n Ostromoukhov: ditheringOstromoukhov,\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"function px(x, y) {\n return (x * 4) + (y * img.width * 4);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"function getDitheringCtx() {\n let ctx = DOM.canvas(img.width, img.height).getContext('2d');\n ctx.canvas.style = `image-rendering: crisp-edges; image-rendering: pixelated`;\n\n return {\n ctx,\n clone: new ImageData(new Uint8ClampedArray(img.data), img.width, img.height),\n errors: new Int32Array(img.width * img.height * 4),\n line: img.width*4,\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"getPlainThreshold = {\n function getPlainThreshold(x, y){\n return 127;\n }\n getPlainThreshold.label = \"1×1\";\n return getPlainThreshold;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"get2x2threshold = {\n const thresholds2x2 = [\n 0,3,\n 2,1\n ].map(v => 32 + v*64);\n function get2x2threshold(x, y) {\n return thresholds2x2[(x&1) + ((y&1)<<1)];\n }\n get2x2threshold.label = \"2×2\"\n return get2x2threshold;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1547,"value":"get2x2mirroredthreshold = {\n const thresholds2x2mirrored = [\n 3,0,\n 1,2\n ].map(v => 32 + v*64);\n function get2x2mirroredthreshold(x, y) {\n return thresholds2x2mirrored[(x&1) + ((y&1)<<1)];\n }\n get2x2mirroredthreshold.label = \"2×2 mirrored\"\n return get2x2mirroredthreshold;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2560,"value":"function make2x2variableWidthThreshold(step) {\n const thresholds2x2variable = [-1.5, 1.5, 0.5, -0.5];\n function get2x2variableWidththreshold(x, y) {\n const t = 127.5 + step * thresholds2x2variable[(x&1) + ((y&1)<<1)]\n return Math.floor(t > 254 ? 254 : (t < 0 ? 0 : t));\n }\n get2x2variableWidththreshold.label = \"2×2 step \" + step;\n return get2x2variableWidththreshold;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1660,"value":"get2x2variableWidthThreshold = {\n return make2x2variableWidthThreshold(thresholdWidth);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1525,"value":"get3x3threshold = {\n const thresholds3x3 = [\n 0, 7, 3,\n 6, 5, 2,\n 4, 1, 8\n ].map(v => 14 + v*255/9 | 0);\n function get3x3threshold(x, y) {\n return thresholds3x3[(x%3) + ((y%3)*3)];\n }\n get3x3threshold.label = \"3×3\"\n return get3x3threshold;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1536,"value":"get3x3mirroredthreshold = {\n const thresholds3x3mirrored = [\n 3, 7, 0,\n 2, 5, 6,\n 8, 1, 4\n ].map(v => 14 + v*255/9 | 0);\n function get3x3mirroredthreshold(x, y) {\n return thresholds3x3mirrored[(x%3) + ((y%3)*3)];\n }\n get3x3mirroredthreshold.label = \"3×3 mirrored\";\n return get3x3mirroredthreshold;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2565,"value":"function make4x4variableWidthThreshold(step) {\n const thresholds4x4variable = [\n -7.5, 0.5, -5.5, 2.5,\n 4.5, -3.5, 6.5, -1.5,\n -4.5, 3.5, -6.5, 1.5,\n 7.5, -0.5, 5.5, -2.5\n ];\n function get4x4thresholdvariable(x, y) {\n let t = 127.5 + step * thresholds4x4variable[(x&3) + ((y&3)<<2)];\n return Math.floor(t < 0 ? 0 : (t > 254 ? 254 : t));\n }\n get4x4thresholdvariable.label = \"4×4 step \" + step;\n return get4x4thresholdvariable;\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2276,"value":"get4x4variableWidthThreshold = {\n return make4x4variableWidthThreshold(thresholdWidth4x4);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"get4x4threshold = {\n const thresholds4x4 = [\n 0,8,2,10,\n 12,4,14,6,\n 3,11,1,9,\n 15,7,13,4\n ].map(v => 8 + 16*v);\n function get4x4threshold(x, y) {\n return thresholds4x4[(x&3) + ((y&3)<<2)];\n }\n get4x4threshold.label = \"4×4\";\n return get4x4threshold;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1557,"value":"get4x4mirroredthreshold = {\n const thresholds4x4mirrored = [\n 11, 3, 8, 1,\n 7, 15, 5, 13,\n 10, 2, 12, 4,\n 6, 14, 8, 16\n ].map(v => 8 + 16*(v-1));\n function get4x4mirroredthreshold(x, y) {\n return thresholds4x4mirrored[(x&3) + ((y&3)<<2)];\n }\n get4x4mirroredthreshold.label = \"4×4 mirrored\";\n return get4x4mirroredthreshold;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"get8x8threshold = {\n const thresholds8x8 = [\n 0, 48, 12, 60, 3, 51, 15, 63,\n 32, 16, 44, 28, 35, 19, 47, 31,\n 8, 56, 4, 52, 11, 59, 7, 55,\n 40, 24, 36, 20, 43, 27, 39, 23,\n 2, 50, 14, 62, 1, 49, 13, 61,\n 34, 18, 46, 30, 33, 17, 45, 29,\n 10, 58, 6, 54, 9, 57, 5, 53,\n 42, 26, 38, 22, 43, 25, 37, 21\n ].map(v => 2 + 4*v);\n function get8x8threshold(x, y) {\n return thresholds8x8[(x&7) + ((y&7)<<3)];\n }\n get8x8threshold.label = \"8×8\"\n return get8x8threshold;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1601,"value":"get8x8mirroredthreshold = {\n const thresholds8x8mirrored = [\n 63, 15, 51, 3, 60, 12, 48, 0,\n 31, 47, 19, 35, 28, 44, 16, 32,\n 55, 7, 59, 11, 52, 4, 56, 8,\n 23, 39, 27, 43, 20, 36, 24, 40,\n 61, 13, 49, 1, 62, 14, 50, 2,\n 29, 45, 17, 33, 30, 46, 18, 34,\n 53, 5, 57, 9, 54, 6, 58, 10,\n 21, 37, 25, 43, 22, 38, 26, 42,\n ].map(v => 2 + 4*v);\n function get8x8mirroredthreshold(x, y) {\n return thresholds8x8mirrored[(x&7) + ((y&7)<<3)];\n }\n get8x8mirroredthreshold.label = \"8×8\"\n return get8x8mirroredthreshold;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2664,"value":"function make8x8variableWidthThreshold(step) {\n const thresholds8x8 = [\n 0, 48, 12, 60, 3, 51, 15, 63,\n 32, 16, 44, 28, 35, 19, 47, 31,\n 8, 56, 4, 52, 11, 59, 7, 55,\n 40, 24, 36, 20, 43, 27, 39, 23,\n 2, 50, 14, 62, 1, 49, 13, 61,\n 34, 18, 46, 30, 33, 17, 45, 29,\n 10, 58, 6, 54, 9, 57, 5, 53,\n 42, 26, 38, 22, 43, 25, 37, 21\n ].map(v => v - 31.5);\n function get8x8thresholdvariable(x, y) {\n const t = 127.5 + step * thresholds8x8[(x&7) + ((y&7)<<3)];\n return Math.floor(t < 0 ? 0 : (t > 254 ? 254 : t));\n }\n get8x8thresholdvariable.label = \"8×8 step \" + step;\n return get8x8thresholdvariable;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2683,"value":"get8x8variableWidthThreshold = {\n return make8x8variableWidthThreshold(thresholdWidth8x8);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"get2x2hlinethreshold = {\n const thresholds2x2hline = [0,1,3,2].map(v => 32 + v*64);\n function get2x2hlinethreshold(x, y) {\n return thresholds2x2hline[(x&1) + ((y&1)<<1)];\n }\n get2x2hlinethreshold.label = \"2×2 h. line\";\n return get2x2hlinethreshold;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"get2x2vlinethreshold = {\n const thresholds2x2vline = [0,3,1,2].map(v => 32 + v*64);\n function get2x2vlinethreshold(x, y) {\n return thresholds2x2vline[(x&1) + ((y&1)<<1)];\n }\n get2x2vlinethreshold.label = \"2×2 v. line\"\n return get2x2vlinethreshold;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1275,"value":"get4x4hlinethreshold = {\n const thresholds4x4hline = [\n 0,1,2,3,\n 11,10,9,8,\n 4,5,6,7,\n 15,14,13,12,\n ].map(v => 8 + 16*v);\n function get4x4hlinethreshold(x, y) {\n return thresholds4x4hline[(x&3) + ((y&3)<<2)];\n }\n get4x4hlinethreshold.label = \"4×4 h. line\";\n return get4x4hlinethreshold;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1276,"value":"get4x4vlinethreshold = {\n const thresholds4x4vline = [\n 0,11,4,15,\n 1,10,5,14,\n 2,9,6,13,\n 3,8,7,12 \n ].map(v => 8 + 16*v);\n function get4x4vlinethreshold(x, y) {\n return thresholds4x4vline[(x&3) + ((y&3)<<2)];\n }\n get4x4vlinethreshold.label = \"4×4 v. line\";\n return get4x4vlinethreshold;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1280,"value":"get8x8hlinethreshold = {\n const thresholds8x8hline = [\n 0, 1, 2, 3, 4, 5, 6, 7,\n 39, 38, 37, 36, 35, 34, 33, 32, \n 16, 17, 18, 19, 20, 21, 22, 23,\n 55, 54, 53, 52, 51, 50, 49, 48,\n 8, 9, 10, 11, 12, 13, 14, 15,\n 47, 46, 45, 44, 43, 42, 41, 40,\n 24, 25, 26, 27, 28, 29, 30, 31,\n 63, 62, 61, 60, 59, 58, 57, 56,\n ].map(v => 2 + 4*v);\n function get8x8hlinethreshold(x, y) {\n return thresholds8x8hline[(x&7) + ((y&7)<<3)];\n }\n get8x8hlinethreshold.label = \"8×8 h. line\"\n return get8x8hlinethreshold;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1279,"value":"get8x8vlinethreshold = {\n const thresholds8x8vline = [\n 0, 39, 16, 55, 8, 47, 24, 63,\n 1, 38, 17, 54, 9, 46, 25, 62,\n 2, 37, 18, 53, 10, 45, 26, 61,\n 3, 36, 19, 52, 11, 44, 27, 60,\n 4, 35, 20, 51, 12, 43, 28, 59,\n 5, 34, 21, 50, 13, 42, 29, 58,\n 6, 33, 22, 49, 14, 41, 30, 57,\n 7, 32, 23, 48, 15, 40, 31, 56,\n ].map(v => 2 + 4*v);\n function get8x8vlinethreshold(x, y) {\n return thresholds8x8vline[(x&7) + ((y&7)<<3)];\n }\n get8x8vlinethreshold.label = \"8×8 v. line\"\n return get8x8vlinethreshold;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3193,"value":"getIGN = {\n function getIGN(x, y) {\n // // http://www.iryoku.com/next-generation-post-processing-in-call-of-duty-advanced-warfare\n // // https://bartwronski.com/2016/10/30/dithering-part-three-real-world-2d-quantization-dithering/\n // // InterleavedGradientNoise[x_, y_] :=\n // // FractionalPart[52.9829189*FractionalPart[0.06711056*x + 0.00583715*y]]\n const v1 = 0.06711056 * x + 0.00583715 * y;\n const v2 = 52.9829189 * (v1 - (v1 | 0));\n return (256 * (v2 - (v2 | 0))) | 0;\n }\n getIGN.label = \"Intrlvd. Grdnt. Noise\";\n return getIGN;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3322,"value":"getIGNtriangulated = {\n const {abs} = Math;\n function getIGNtriangulated(x, y) {\n // // http://www.iryoku.com/next-generation-post-processing-in-call-of-duty-advanced-warfare\n // // https://bartwronski.com/2016/10/30/dithering-part-three-real-world-2d-quantization-dithering/\n // // InterleavedGradientNoise[x_, y_] :=\n // // FractionalPart[52.9829189*FractionalPart[0.06711056*x + 0.00583715*y]]\n let v = 0.06711056 * x + 0.00583715 * y;\n v = 52.9829189 * (v - (v|0));\n v = (v - (v|0));\n return (0.5 - abs(0.5 - v)) * 512 | 0;\n }\n getIGNtriangulated.label = \"Triangulated IGN\";\n return getIGNtriangulated;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3303,"value":"getR2ldg = {\n const g = 1.32471795724474602596;\n const a1 = 1/g;\n const a2 = 1/(g*g);\n\n function getR2ldg(x, y) {\n return (a1 * x + a2 * y) * 256 & 255;\n }\n getR2ldg.label = \"R2\";\n return getR2ldg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3306,"value":"getR2ldgTriangulated = {\n const g = 1.32471795724474602596;\n const a1 = 1/g;\n const a2 = 1/(g*g);\n const {abs} = Math;\n function getR2ldgTriangulated(x, y) {\n let v = (a1 * x + a2 * y) % 1;\n v = 1 - abs(1 - 2*v);\n return v * 256 & 255;\n }\n getR2ldgTriangulated.label = \"Triangulated R2\";\n return getR2ldgTriangulated;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3212,"value":"pseudoblueIGN = {\n\n function mix(x, y) {\n // let v = 0.06711056 * x + 0.00583715 * y;\n // return 7.92177803434839 * 52.9829189 * v;\n return 28.16757197436681 * x + 2.4499623121931213 * y;\n }\n \n const s = 4;\n let a, b;\n function pseudoblueIGN(x, y) {\n let v = 0;\n for (let i = 0; i < s; ++i) {\n b = y;\n a = 1 & (x ^ mix((x >>= 1), (y >>= 1)));\n b = 1 & (b ^ mix(y, x));\n v = (v << 2) | (a + (b << 1) + 1) % 4;\n }\n return v;\n };\n pseudoblueIGN.label = \"pb IGN\"\n return pseudoblueIGN\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3324,"value":"pseudoblueIGNtriangulated = {\n const {abs, PI, E} = Math;\n\n function mix(x, y) {\n // http://www.iryoku.com/next-generation-post-processing-in-call-of-duty-advanced-warfare\n // https://bartwronski.com/2016/10/30/dithering-part-three-real-world-2d-quantization-dithering/\n const v = (52.9829189 * (0.06711056 * x + 0.00583715 * y)) % 1;\n return (1 - abs(1 - 2*v))*19;\n }\n const s = 4;\n let a, b;\n function pseudoblueIGNtriangulated(x, y) {\n let v = 0;\n for (let i = 0; i < s; ++i) {\n b = y;\n a = 1 & (x ^ mix((x >>= 1), (y >>= 1)));\n b = 1 & (b ^ mix(y, x));\n v = (v << 2) | (a + (b << 1) + 1) % 4;\n }\n return v;\n };\n pseudoblueIGNtriangulated.label = \"pb triangulated IGN\"\n return pseudoblueIGNtriangulated\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3316,"value":"pseudoblueR2 = {\n const g = 1.32471795724474602596;\n const a1 = 1/g;\n const a2 = 1/(g*g);\n\n function mix(x, y) {\n return (a1 * x + a2 * y)*Math.E*0b11000100//(64+128+4);\n }\n const s = 4;\n let a, b;\n function pseudoblueR2(x, y) {\n let v = 0;\n for (let i = 0; i < s; ++i) {\n b = y;\n a = 1 & (x ^ mix((x >>= 1), (y >>= 1)));\n b = 1 & (b ^ mix(y, x));\n v = (v << 2) | (a + (b << 1) + 1) % 4;\n }\n return v;\n };\n pseudoblueR2.label = \"pb R2\";\n return pseudoblueR2;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3327,"value":"pseudoblueR2triangulated = {\n const g = 1.32471795724474602596;\n const a1 = 1/g;\n const a2 = 1/(g*g);\n\n const {abs, PI, E} = Math;\n function mix(x, y) {\n let v = 1 - abs(1 - 2*((a1 * x + a2 * y) % 1));\n return v*255*E;\n }\n\n const s = 4;\n let a, b;\n function pseudoblueR2triangulated(x, y) {\n let v = 0;\n for (let i = 0; i < s; ++i) {\n b = y;\n a = 1 & (x ^ mix((x >>= 1), (y >>= 1)));\n b = 1 & (b ^ mix(y, x));\n v = (v << 2) | (a + (b << 1) + 1) % 4;\n }\n return v;\n };\n pseudoblueR2triangulated.label = \"pb triangulated R2\";\n return pseudoblueR2triangulated;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3250,"value":"pseudoblue = {\n // Inspired by Job van der Zwan’s research https://observablehq.com/@jobleonard/pseudo-blue-noise\n // and NuSan’s shader https://www.shadertoy.com/view/7lV3Ry\n // shadertoy implementation: https://www.shadertoy.com/view/mtlSzn\n // The x and y axes are separated for better randomness\n // 1 / 307 == 0.003257328990228013\n // 1 / 499 == 0.002004008016032064 \n const xmix = (x, y) => ((x * 212281 + y * 384817) & 0x5555555) * 0.003257328990228013;\n const ymix = (x, y) => ((x * 484829 + y * 112279) & 0x5555555) * 0.002004008016032064;\n const pseudoblue = (x, y) => {\n let v = 0, a , b;\n for (let i = 0; i < 4; ++i) {\n b = y;\n a = 1 & (x ^ xmix((x >>= 1), (y >>= 1)));\n b = 1 & (b ^ ymix(x, y));\n v = (v << 2) | (a + (b << 1) + 1) % 4;\n }\n return v;\n };\n pseudoblue.label = \"pseudoblue\";\n return pseudoblue;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3420,"value":"whiteNoise = {\n const {random} = Math;\n const coordinates = new Map()\n const wn = (x, y) => {\n const key = ((x*0xFFFF & 0xFFFF0000) >>> 0) + (y & 0xFFFF);\n let v = coordinates.get(key);\n if (v === undefined) {\n coordinates.set(key, v = 256 * random() | 0);\n }\n return v;\n };\n wn.label = \"white noise\";\n return wn;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3946,"value":"noisyGray = {\n const {random} = Math;\n const coordinates = new Map()\n const wn = (x, y) => {\n const key = ((x*0xFFFF & 0xFFFF0000) >>> 0) + (y & 0xFFFF);\n let v = coordinates.get(key);\n if (v === undefined) {\n coordinates.set(key, v = 64 + 32 + 64 * random() | 0);\n }\n return v;\n };\n wn.label = \"noisy gray\";\n return wn;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1850,"value":"thresholds = {\n return {\n \"1×1\": getPlainThreshold,\n \"2×2\": get2x2threshold,\n \"3×3\": get3x3threshold,\n \"4×4\": get4x4threshold,\n \"8×8\": get8x8threshold,\n \"2×2mirrored\": get2x2mirroredthreshold,\n \"3×3mirrored\": get3x3mirroredthreshold,\n \"4×4mirrored\": get4x4mirroredthreshold,\n \"8×8mirrored\": get8x8mirroredthreshold,\n \"2×2h\": get2x2hlinethreshold,\n \"2×2v\": get2x2vlinethreshold,\n \"4×4h\": get4x4hlinethreshold,\n \"4×4v\": get4x4vlinethreshold,\n \"8×8h\": get8x8hlinethreshold,\n \"8×8v\": get8x8vlinethreshold,\n \"2×2variable\": get2x2variableWidthThreshold,\n \"4×4variable\": get4x4variableWidthThreshold,\n \"8×8variable\": get8x8variableWidthThreshold,\n IntGrdNoise: getIGN,\n IntGrdNoiseTriangle: getIGNtriangulated,\n R2: getR2ldg,\n R2triangle: getR2ldgTriangulated,\n pseudoblueIGN,\n pseudoblueIGNtriangulated,\n pseudoblueR2,\n pseudoblueR2triangulated,\n pseudoblue,\n whiteNoise,\n noisyGray\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"grayscale2bit = [0, 85, 170, 255]","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"grayscale4bit = [0,17,34,51,68,85,102,119,136,153,170,187,204,221,238,255]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"getPixels = [getPixel1bit, getPixel2bit, getPixel4bit];","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"function getPixel1bit(oldPixel, x, y, getThreshold) {\n const treshold = getThreshold(x, y);\n return oldPixel > treshold ? 255 : 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"function getPixel2bit(oldPixel, x, y, getThreshold) {\n const threshold = getThreshold(x, y)/256;\n let lpixel = grayscale2bit[0];\n let hpixel = lpixel;\n for (let i = 0; hpixel < oldPixel && i < grayscale2bit.length; i++) {\n lpixel = hpixel;\n hpixel = grayscale2bit[i];\n }\n let divisor = hpixel - lpixel;\n oldPixel -= lpixel;\n return (divisor === 0 || oldPixel / divisor < threshold) ? lpixel : hpixel;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"function getPixel4bit(oldPixel, x, y, getThreshold) {\n const threshold = getThreshold(x, y)/256;\n let lpixel = grayscale4bit[0];\n let hpixel = lpixel;\n for (let i = 0; hpixel < oldPixel && i < grayscale4bit.length; i++) {\n lpixel = hpixel;\n hpixel = grayscale4bit[i];\n }\n let divisor = hpixel - lpixel;\n oldPixel -= lpixel;\n return (divisor === 0 || oldPixel / divisor < threshold) ? lpixel : hpixel;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1340,"value":"img = {\n const images = {\n HorGr: imgHorGradient,\n VertGr: imgVertGradient,\n GrC: imgGradientColor,\n David: imgDavid,\n TestCard: imgTestCard,\n Doggo: imgDoggo,\n Gray: imgGray\n };\n return images[imageSelection];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"imgDavid = {\n let img = new Image();\n img.crossOrigin = '*';\n img.src = 'https://upload.wikimedia.org/wikipedia/commons/7/71/Michelangelo%27s_David_-_63_grijswaarden.png';\n img.style.width = `${img.width * 2}px`;\n img.style.imageRendering = 'crisp-edges';\n\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 img,\n data: ctx.getImageData(0, 0, img.width, img.height).data,\n width: img.width,\n height: img.height\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1327,"value":"imgHorGradient = {\n const data = new Uint8ClampedArray(256 * 256 * 4);\n data.fill(255);\n for (let y = 0; y < 256; y++) {\n const line = y * 256;\n for (let x = 0; x < 256; x++) {\n const idx = (x + line) * 4;\n const dx = x - 127.5;\n const dy = y - 127.5;\n\n const color = dx * dx + dy * dy >= 64 * 64 ? x : 255 - (dx * 2 + 127.5);\n data[idx] = data[idx + 1] = data[idx + 2] = color;\n }\n }\n let img = DOM.canvas(256, 256);\n let ctx = img.getContext('2d');\n img.style = `image-rendering: crisp-edges; image-rendering: pixelated`;\n ctx.putImageData(new ImageData(data, 256, 256), 0, 0);\n return {\n img,\n data,\n width: 256,\n height: 256\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1337,"value":"imgVertGradient = {\n const data = new Uint8ClampedArray(256 * 256 * 4);\n data.fill(255);\n for (let y = 0; y < 256; y++) {\n const line = y * 256;\n for (let x = 0; x < 256; x++) {\n const idx = (x + line) * 4;\n const dx = x - 127.5;\n const dy = y - 127.5;\n\n const color = dx * dx + dy * dy >= 64 * 64 ? y : 255 - (dy * 2 + 127.5);\n data[idx] = data[idx + 1] = data[idx + 2] = color;\n }\n }\n let img = DOM.canvas(256, 256);\n let ctx = img.getContext('2d');\n img.style = `image-rendering: crisp-edges; image-rendering: pixelated`;\n ctx.putImageData(new ImageData(data, 256, 256), 0, 0);\n return {\n img,\n data,\n width: 256,\n height: 256\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2759,"value":"imgGradientColor = {\n const data = new Uint8ClampedArray(256 * 256 * 4);\n data.fill(255);\n for (let y = 0; y < 256; y++) {\n const line = y * 256;\n for (let x = 0; x < 256; x++) {\n const idx = (x + line) * 4;\n let dx = x - 127.5;\n let dy = y - 127.5;\n const inCircle = dx * dx + dy * dy >= 64 * 64;\n dx = dx * 2 + 127.5;\n dy = dy * 2 + 127.5;\n\n const g = inCircle ? x : 255 - dx;\n const b = inCircle ? y : 255 - dy;\n const r = 255 - Math.max(g, b);\n data[idx] = r;\n data[idx + 1] = g;\n data[idx + 2] = b;\n }\n }\n let img = DOM.canvas(256, 256);\n let ctx = img.getContext('2d');\n img.style = `image-rendering: crisp-edges; image-rendering: pixelated`;\n ctx.putImageData(new ImageData(data, 256, 256), 0, 0);\n return {\n img,\n data,\n width: 256,\n height: 256\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4000,"value":"viewof imgGray = {\n const data = new Uint8ClampedArray(256 * 256 * 4);\n data.fill(127);\n for (let i = 3; i < data.length; i += 4) {data[i] = 255;}\n let img = DOM.canvas(256, 256);\n let ctx = img.getContext('2d');\n img.style = `image-rendering: crisp-edges; image-rendering: pixelated`;\n ctx.putImageData(new ImageData(data, 256, 256), 0, 0);\n ctx.canvas.value = {\n ctx,\n img,\n data,\n width: 256,\n height: 256\n }\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2373,"value":"function table(body) {\n let output = \"\";\n if (body) {\n for(let row of body) {\n output += \"\";\n for (let td of row) {\n output += `${td}`;\n }\n output += \"\";\n }\n }\n return output? html`${output}

` : html``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2815,"value":"imgTestCard = {\n let img = await FileAttachment(\"test card small@1.jpg\").image();\n img.style.width = `${img.width}px`;\n img.style.imageRendering = 'crisp-edges';\n\n let ctx = DOM.canvas(img.width, img.height).getContext('2d');\n ctx.drawImage(img, 0, 0);\n return {\n img,\n data: ctx.getImageData(0, 0, img.width, img.height).data,\n width: img.width,\n height: img.height\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2813,"value":"imgDoggo = {\n let img = await FileAttachment(\"doggo.jpeg\").image();\n img.style.width = `${img.width}px`;\n img.style.imageRendering = 'crisp-edges';\n\n let ctx = DOM.canvas(img.width, img.height).getContext('2d');\n ctx.drawImage(img, 0, 0);\n return {\n img,\n data: ctx.getImageData(0, 0, img.width, img.height).data,\n width: img.width,\n height: img.height\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"import {select, slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W51","stdlib":"1","titling":"auto"}