2e:null 2f:["$","title",null,{"children":"Parameterized Ordered Error Diffusion Dithering | Graham | Observable"}] 34:T502,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' }, ], value: 'Atkinson' })35:T579,function ditherAllBits(ditheringMethod, getThreshold, image) { let scale = width/(image.width*3); if (scale >= 1) { scale = scale | 0; const w = image.width*scale; const h = image.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, image); const hybrid = ditheringMethod(getPixel2bit, getThreshold, image); const error = ditheringMethod(getPixel4bit, getThreshold, image); 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/image.width | 0); const w = image.width*scale; const h = image.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, image); const hybrid = ditheringMethod(getPixel2bit, getThreshold, image); const error = ditheringMethod(getPixel4bit, getThreshold, image); 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; } }36:T8d3,function ditherHybrid(ditheringError, orderedThreshold, image) { let scale = width/(image.width*3); if (scale >= 1) { scale = scale | 0; const w = image.width*scale; const h = image.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,image); const hybrid = ditheringError(getPixels[i], orderedThreshold, image); const error = ditheringError(getPixels[i], getPlainThreshold, image); 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/image.width|0); const w = image.width*scale; const h = image.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,image); const hybrid = ditheringError(getPixels[i], orderedThreshold,image); const error = ditheringError(getPixels[i], getPlainThreshold,image); const bits = ` ${(1<= 1) { scale = scale | 0; const w = image.width*scale; const h = image.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,image); const hybrid = ditheringError(getPixel, orderedThreshold, image); const error = ditheringError(getPixel, getPlainThreshold, image); 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/image.width|0); const w = image.width*scale; const h = image.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,image); const hybrid = ditheringError(getPixel, orderedThreshold,image); const error = ditheringError(getPixel, getPlainThreshold,image); 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; } }38:T5ca,ditheringFloydSteinberg = { function ditheringFloydSteinberg(getPixel, getThreshold, image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height; y++) { for (let x = 0; x < image.width-1; x++) { let idx = px(x,y,image); 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(image.width-1,y,image); for(let i = 0; i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<4) + (oldPixel>>>4) + errors[idx])/ 16; const newPixel = getPixel(oldPixel, image.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; }39:Tad9,ditheringFloydSteinbergSerpentine = { function ditheringFloydSteinbergSerpentine(getPixel, getThreshold, image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height; y++) { if (y&1) { for (let x = image.width-1; x > 0; x--) { let idx = px(x,y, image); 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, image); 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 < image.width-1; x++) { let idx = px(x,y, image); 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(image.width-1,y,image); for(let i = 0; i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<4) + (oldPixel>>>4) + errors[idx])/ 16; const newPixel = getPixel(oldPixel, image.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; }3a:T839,ditheringAtkinson = { function ditheringAtkinson(getPixel, getThreshold, image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height; y++) { for (let x = 0; x < image.width-2; x++) { for(let i = 0, idx = px(x,y,image); 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(image.width-2,y, image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, image.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(image.width-1,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, image.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; }3b:Tff1,ditheringAtkinsonSerpentine = { function ditheringAtkinsonSerpentine(getPixel, getThreshold, image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height; y++) { if (y&1) { for (let x = image.width-1; x > 1; x--) { for(let i = 0, idx = px(x,y,image); 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,image); 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,image); 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 < image.width-2; x++) { for(let i = 0, idx = px(x,y,image); 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(image.width-2,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, image.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(image.width-1,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, image.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; }3c:T87b,ditheringAtkinsonColorBleed = { function ditheringAtkinsonColorBleed(getPixel, getThreshold,image){ const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height; y++) { for (let x = 0; x < image.width-2; x++) { for(let i = 0, idx = px(x,y,image); 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(image.width-2,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, image.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(image.width-1,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, image.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; }3d:T102f,ditheringAtkinsonColorBleedSerpentine = { function ditheringAtkinsonColorBleedSerpentine(getPixel, getThreshold,image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height; y++) { if (y&1) { for (let x = image.width-1; x > 1; x--) { for(let i = 0, idx = px(x,y,image); 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,image); 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,image); 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 < image.width-2; x++) { for(let i = 0, idx = px(x,y,image); 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(image.width-2,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, image.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(image.width-1,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; const newPixel = getPixel(oldPixel, image.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; }3e:Ta60,ditheringSierra3 = { function ditheringSierra3(getPixel, getThreshold, image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height; y++) { for (let x = 2; x < image.width-2; x++) { for(let i = 0, idx = px(x,y,image); 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(image.width-2,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<5) + (oldPixel>>>3) + errors[idx])/ 32; let newPixel = getPixel(oldPixel, image.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(image.width-1,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<5) + (oldPixel>>>3) + errors[idx])/ 32; let newPixel = getPixel(oldPixel, image.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; }3f:T145d,ditheringSierra3Serpentine = { function ditheringSierra3Serpentine(getPixel, getThreshold,image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height; y++) { if (y&1) { for (let x = image.width-1; x > 1; x--) { for(let i = 0, idx = px(x,y,image); 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,image); 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,image); 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 < image.width-2; x++) { for(let i = 0, idx = px(x,y,image); 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(image.width-2,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<5) + (oldPixel>>>3) + errors[idx])/ 32; let newPixel = getPixel(oldPixel, image.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(image.width-1,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<5) + (oldPixel>>>3) + errors[idx])/ 32; let newPixel = getPixel(oldPixel, image.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; }40:T54e,ditheringSierraLite = { function ditheringSierraLite(getPixel, getThreshold,image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height; y++) { for (let x = 0; x < image.width-1; x++) { for(let i = 0, idx = px(x,y,image); 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(image.width-1,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[idx])/ 4; let newPixel = getPixel(oldPixel, image.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; }41:Ta61,ditheringJaJuNi = { function ditheringJaJuNi(getPixel, getThreshold,image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height; y++) { for (let x = 0; x < image.width-2; x++) { for(let i = 0, idx = px(x,y,image); 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(image.width-2,y,image); i < 4; i++) { const oldPixel = clone.data[idx] + errors[idx]/ 48; let newPixel = getPixel(oldPixel, image.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(image.width-1,y,image); i < 4; i++) { const oldPixel = clone.data[idx] + errors[idx]/ 48; let newPixel = getPixel(oldPixel, image.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; }42:T72a,ditheringSkipNeighbours = { function ditheringSkipNeighbours(getPixel, getThreshold,image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height; y++) { for (let x = 0; x < image.width-2; x++) { for(let i = 0, idx = px(x,y,image); 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(image.width-2,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[idx])/ 4; let newPixel = getPixel(oldPixel, image.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(image.width-1,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[idx])/ 4; let newPixel = getPixel(oldPixel, image.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; }43:T971,ditheringSkip2Neighbours = { function ditheringSkipNeighbours(getPixel, getThreshold, image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height; y++) { for (let x = 0; x < image.width-3; x++) { for(let i = 0, idx = px(x,y,image); 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(image.width-3,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; let newPixel = getPixel(oldPixel, image.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(image.width-2,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; let newPixel = getPixel(oldPixel, image.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(image.width-1,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; let newPixel = getPixel(oldPixel, image.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; }44:Tbf2,ditheringSkip3Neighbours = { function ditheringSkipNeighbours(getPixel, getThreshold,image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height; y++) { for (let x = 0; x < image.width-4; x++) { for(let i = 0, idx = px(x,y, image); 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(image.width-4,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; let newPixel = getPixel(oldPixel, image.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(image.width-3,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; let newPixel = getPixel(oldPixel, image.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(image.width-2,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; let newPixel = getPixel(oldPixel, image.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(image.width-1,y,image); i < 4; i++) { let oldPixel = clone.data[idx]; oldPixel = ((oldPixel<<3) + (oldPixel>>>5) + errors[idx])/ 8; let newPixel = getPixel(oldPixel, image.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; }45:T420,ditheringStraightDown = { function ditheringStraightDown(getPixel, getThreshold,image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height-1; y++) { for (let x = 0; x < image.width; x++) { for(let i = 0, idx = px(x,y,image); 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 = image.height-1; for (let x = 0; x < image.width; x++) { for(let i = 0, idx = px(x,y,image); 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; }46:T676,ditheringDownRight = { function ditheringDownRight(getPixel, getThreshold,image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height-1; y++) { for (let x = 0; x < image.width-1; x++) { for(let i = 0, idx = px(x,y,image); 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(image.width-1,y,image); i < 4; i++) { const oldPixel = clone.data[idx] + errors[idx]; let newPixel = getPixel(oldPixel, image.width-1, y, getThreshold); clone.data[idx] = newPixel; idx++; } } const y = image.height-1; for (let x = 0; x < image.width-1; x++) { for(let i = 0, idx = px(x,y,image); 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(image.width-1,y,image); i < 4; i++) { const oldPixel = clone.data[idx] + errors[idx]; let newPixel = getPixel(oldPixel, image.width-1, y, getThreshold); clone.data[idx] = newPixel; idx++; } ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringDownRight.label = "Diffuse Down-Right"; return ditheringDownRight; }47:T447,ditheringDownLeft = { function ditheringDownLeft(getPixel, getThreshold,image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height-1; y++) { for (let x = 0; x < image.width; x++) { for(let i = 0, idx = px(x,y,image); 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 = image.height-1; for (let x = 0; x < image.width; x++) { for(let i = 0, idx = px(x,y,image); 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; }48:T591,ditheringSierraLiteSkip1 = { function ditheringSierraLiteSkip1(getPixel, getThreshold,image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height; y++) { for (let x = 0; x < image.width-2; x++) { for(let i = 0, idx = px(x,y,image); 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 = image.width-2; x < image.width; x++) { for(let i = 0, idx = px(x,y,image); 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; }49:T594,ditheringSierraLiteSkip2 = { function ditheringSierraLiteSkip2(getPixel, getThreshold,image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height; y++) { for (let x = 0; x < image.width-3; x++) { for(let i = 0, idx = px(x,y,image); 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 = image.width-3; x < image.width; x++) { for(let i = 0, idx = px(x,y,image); 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; }4a:T594,ditheringSierraLiteSkip3 = { function ditheringSierraLiteSkip3(getPixel, getThreshold,image) { const {ctx, clone, errors, line} = getDitheringCtx(image); for (let y = 0; y < image.height; y++) { for (let x = 0; x < image.width-4; x++) { for(let i = 0, idx = px(x,y,image); 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 = image.width-4; x < image.width; x++) { for(let i = 0, idx = px(x,y,image); 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; }4b:[] 32:{"id":"845d86a6f9a4e8ed","slug":"parameterized-ordered-error-diffusion-dithering","title":"Parameterized Ordered Error Diffusion Dithering","thumbnail":"e72c3f451e49f1fa1762cd7fcdf2dcdee9173f5b2bdb6813cd911e418ffbc169","access_level":"public","create_time":"$D2022-01-22T04:01:20.891Z","update_time":"$D2022-01-22T04:02:21.979Z","view_time":null,"first_public_time":"$D2022-01-22T04:03:00.996Z","has_unpublished_edits":null,"fork":{"id":"c36f7b2e35bb570b","slug":"ordered-error-diffusion-dithering","title":"Ordered Error Diffusion Dithering","owner":{"id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan"}},"stars":4,"starred":false,"owner":{"type":"team","id":"1c6ad35f03f72183","login":"iamgrahamallen","name":"Graham","avatar_url":"https://avatars-next.observableusercontent.com/a5a7b638fffaef970b064782f3c2a8f40e6fa9b37c51c448caea056ac0798f26","tier":"starter_2024"},"version":3362,"publish_version":3362,"role":null,"authored":false,"authors":[{"type":"individual","id":"acb4a7741eb3e481","login":"iamgrahamallen","name":"Graham","avatar_url":"https://avatars-next.observableusercontent.com/a5a7b638fffaef970b064782f3c2a8f40e6fa9b37c51c448caea056ac0798f26","tier":null}],"members":[{"type":"individual","id":"acb4a7741eb3e481","login":"iamgrahamallen","name":"Graham","avatar_url":"https://avatars-next.observableusercontent.com/a5a7b638fffaef970b064782f3c2a8f40e6fa9b37c51c448caea056ac0798f26","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Parameterized Ordered Error Diffusion Dithering","cells":[{"id":1095,"value":"md`# Parameterized Ordered Error Diffusion Dithering\n_The same notebook as [Job's](https://observablehq.com/@jobleonard/ordered-error-diffusion-dithering), but with all the functions now able to take an image object as a parameter_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"ditherHybrid(ditheringMethods[ditheringSelection], thresholds[thresholdSelection], imgDavid)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"viewof thresholdSelection = select({\n title: 'Threshold Map',\n options: [\n { label: '1×1', value: '1×1' },\n { label: '2×2', value: '2×2' },\n { label: '3×3', value: '3×3' },\n { label: '4×4', value: '4×4' },\n { label: '8×8', value: '8×8' },\n { label: '2×2 mirrored', value: '2×2mirrored' },\n { label: '3×3 mirrored', value: '3×3mirrored' },\n { label: '4×4 mirrored', value: '4×4mirrored' },\n { label: '8×8 mirrored', value: '8×8mirrored' },\n { label: '2×2 horizontal', value: '2×2h' },\n { label: '2×2 vertical', value: '2×2v' },\n { label: '4×4 horizontal', value: '4×4h' },\n { label: '4×4 vertical', value: '4×4v' },\n { label: '8×8 horizontal', value: '8×8h' },\n { label: '8×8 vertical', value: '8×8v' },\n { label: '2×2 variable width', value: '2×2variable' },\n { label: '4×4 variable width', value: '4×4variable' },\n { label: '8×8 variable width', value: '8×8variable' },\n { label: 'Interleaved Gradient Noise', value: 'IntGrdNoise'}\n ],\n value: '2×2mirrored'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1682,"value":"hybridVariable1bit = {\n await visibility();\n return ditherHybridOneRow(\n ditheringAtkinson,\n get2x2variableWidthThreshold,\n getPixel1bit,\n imgDavid\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3003,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringAtkinson,\n make2x2variableWidthThreshold(255),\n getPixel1bit,\n imgDavid\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1699,"value":"hybridVariable2bit = {\n await visibility();\n return ditherHybridOneRow(\n ditheringSierra3,\n make4x4variableWidthThreshold(thresholdWidth4x4),\n getPixel2bit,\n imgDavid\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3034,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringAtkinson,\n make4x4variableWidthThreshold(255),\n getPixel2bit,\n imgDavid\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3029,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringSierra3,\n make4x4variableWidthThreshold(16),\n getPixel2bit,\n imgDavid\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3021,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringSierra3,\n make4x4variableWidthThreshold(17),\n getPixel2bit,\n imgDavid\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3014,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringSierra3,\n make4x4variableWidthThreshold(28),\n getPixel2bit,\n imgDavid\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3006,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringSierra3,\n get8x8variableWidthThreshold,\n getPixel4bit,\n imgDavid\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3041,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringSkipNeighbours,\n make2x2variableWidthThreshold(68),\n getPixel2bit,\n imgDavid\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"{\n await visibility();\n let ctx = DOM.canvas(imgDavid.width, imgDavid.height).getContext('2d');\n let clone = new ImageData(\n new Uint8ClampedArray(imgDavid.data),\n imgDavid.width,\n imgDavid.height\n );\n\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"{\n await visibility();\n return ditherAllBits(ditheringOrdered, getPlainThreshold,imgDavid);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"{\n await visibility();\n return md`## ${tex`2{\\times}2`} Ordered Dithering`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"{\n await visibility();\n return ditherAllBits(ditheringOrdered, get2x2threshold,imgDavid);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"{\n await visibility();\n return md`## ${tex`4{\\times}4`} Ordered Dithering`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"ditherAllBits(ditheringOrdered, get4x4threshold,imgDavid)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"{\n await visibility();\n return md`## ${tex`8{\\times}8`} Ordered Dithering`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"{\n await visibility();\n return ditherAllBits(ditheringOrdered, get8x8threshold,imgDavid);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"{\n await visibility();\n return ditherAllBits(ditheringFloydSteinberg, getPlainThreshold, imgDavid);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1149,"value":"{\n await visibility();\n return md`## Jarvis, Judice and Ninke (a.k.a. JaJuNi)`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1147,"value":"{\n await visibility();\n return ditherAllBits(ditheringJaJuNi, getPlainThreshold,imgDavid);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"{\n await visibility();\n return md`## Atkinson`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"{\n await visibility();\n return ditherAllBits(ditheringAtkinson, getPlainThreshold,imgDavid);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"{\n await visibility();\n return md`## Atkinson-ish (no reduced color bleed)`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"{\n await visibility();\n return ditherAllBits(ditheringAtkinsonColorBleed, getPlainThreshold,imgDavid);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"{\n await visibility();\n return md` ## Three-row Sierra`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"{\n await visibility();\n return ditherAllBits(ditheringSierra3, getPlainThreshold,imgDavid);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"{\n await visibility();\n return md` ## Sierra Lite`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"{\n await visibility();\n return ditherAllBits(ditheringSierraLite, getPlainThreshold, imgDavid);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1188,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1679,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"ditheringOrdered = {\n function ditheringOrdered(getPixel, getThreshold, image) {\n let {ctx, clone, errors, line} = getDitheringCtx(image);\n for (let y = 0; y < image.height; y++) {\n for (let x = 0; x < image.width; x++) {\n for (let i = 0, idx = px(x, y, image); 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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2938,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2952,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2965,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2944,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1135,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1210,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1228,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"ditheringStraightRight = {\n function ditheringStraightRight(getPixel, getThreshold,image) {\n const {ctx, clone, errors, line} = getDitheringCtx(image);\n for (let y = 0; y < image.height; y++) {\n for (let x = 0; x < image.width-1; x++) {\n for(let i = 0, idx = px(x,y,image); 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(image.width-1,y,image); i < 4; i++) {\n const oldPixel = clone.data[idx] + errors[idx];\n let newPixel = getPixel(oldPixel, image.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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1288,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1291,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1293,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1572,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1574,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1576,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"function px(x, y, image) {\n return (x * 4) + (y * image.width * 4);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"function getDitheringCtx(image) {\n let ctx = DOM.canvas(image.width, image.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(image.data), image.width, image.height),\n errors: new Int32Array(image.width * image.height * 4),\n line: image.width*4,\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1660,"value":"get2x2variableWidthThreshold = {\n return make2x2variableWidthThreshold(thresholdWidth);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2276,"value":"get4x4variableWidthThreshold = {\n return make4x4variableWidthThreshold(thresholdWidth4x4);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2683,"value":"get8x8variableWidthThreshold = {\n return make8x8variableWidthThreshold(thresholdWidth8x8);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3193,"value":"getInterleavedGradientNoise = {\n function getInterleavedGradientNoise(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 getInterleavedGradientNoise.label = \"Intrlvd. Grdnt. Noise\";\n return getInterleavedGradientNoise;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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: getInterleavedGradientNoise\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"grayscale2bit = [0, 85, 170, 255]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1041,"value":"getPixels = [getPixel1bit, getPixel2bit, getPixel4bit];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"imgDavid = {\n let img = new Image();\n img.crossOrigin = '*';\n img.src = 'https://file-hamhdaleym.now.sh/';\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3227,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"import {select, slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1","titling":"auto"}} 33:"$32:body"