24:null 25:["$","title",null,{"children":"H-curve and HI-curve dithering | Job van der Zwan | Observable"}] 2a:T4b1,function ditherAllBits(ditheringMethod, getThreshold, image = img) { 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*2, h).getContext('2d'); ctx.imageSmoothingEnabled = false; ctx.canvas.style = 'image-rendering: crisp-edges; image-rendering: pixelated'; const image1bit = ditheringMethod(getPixel1bit, getThreshold, image); const image2bit = ditheringMethod(getPixel2bit, getThreshold, image); ctx.drawImage(image1bit, 0, 0, w, h); ctx.drawImage(image2bit, w, 0, w, h); return ctx.canvas; } else { scale = Math.max(1, width/img.width | 0); const w = image.width*scale; const h = image.height*scale; let ctx = DOM.canvas(w, h*2).getContext('2d'); ctx.imageSmoothingEnabled = false; ctx.canvas.style = 'image-rendering: crisp-edges; image-rendering: pixelated'; const image1bit = ditheringMethod(getPixel1bit, getThreshold, image); const image2bit = ditheringMethod(getPixel2bit, getThreshold, image); ctx.drawImage(image1bit, 0, 0, w, h); ctx.drawImage(image2bit, 0, h, w, h); return ctx.canvas; } }2b:T79b,function ditherHybridOneRow(ditheringError, orderedThreshold, getPixel, image = img) { 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 + 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/img.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; } }2c:T8db,function ditherHybrid(ditheringError, orderedThreshold, image = img) { 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/img.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<>>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); 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); 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; }2e:Taba,ditheringSierra3Scrambled = { function ditheringSierra3Scrambled(getPixel, getThreshold, image = img) { const {ctx, clone, errors, line} = getDitheringCtx(image); scramble.apply(clone.data); 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); 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); 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); 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++; } } scramble.reverse(clone.data); ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringSierra3Scrambled.label = "Sierra Scrambled"; return ditheringSierra3Scrambled; }2f:T549,ditheringSierraLite = { function ditheringSierraLite(getPixel, getThreshold, image = img) { 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); 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); 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; }30:T563,ditheringSierraLiteScrambled = { function ditheringSierraLiteScrambled(getPixel, getThreshold, image = img) { const {ctx, clone, errors, line} = getDitheringCtx(image); scramble.apply(clone.data); 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); 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 + line] += quantError * 2; idx++; } } // avoid wrapping error for(let i = 0, idx = px(image.width-1,y); 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 + line] += quantError * 4; idx++; } } scramble.reverse(clone.data); ctx.putImageData(clone, 0, 0); return ctx.canvas; } ditheringSierraLiteScrambled.label = "Sierra Lite Scrambled"; return ditheringSierraLiteScrambled; }31:[{"id":"60378a5aa990d3834ac0593e5ba9f35fd6658d8428b88bd29c0bf627fdcc09e559867370e86efe7c012e8b1f518990ef6c993e94d262919bbd94e3568c240e44","href":"https://static.observableusercontent.com/files/60378a5aa990d3834ac0593e5ba9f35fd6658d8428b88bd29c0bf627fdcc09e559867370e86efe7c012e8b1f518990ef6c993e94d262919bbd94e3568c240e44","name":"david-512.jpg","type":"image/jpeg","lastModified":1586541159300.841,"size":75131},{"id":"d8d9ef3cede3660a91775bb134dc2e79282fed526b3a44ad19efa618858bdca25d0242298310454db223c3018b1b4df3e57f1db03f488ac5b7bf5e6982c6ab92","href":"https://static.observableusercontent.com/files/d8d9ef3cede3660a91775bb134dc2e79282fed526b3a44ad19efa618858bdca25d0242298310454db223c3018b1b4df3e57f1db03f488ac5b7bf5e6982c6ab92","name":"david2.jpg","type":"image/jpeg","lastModified":1586540352763.672,"size":217681}] 28:{"id":"a759cad2284f4882","slug":"h-curve-and-hi-curve-dithering","title":"H-curve and HI-curve dithering","thumbnail":"3e176ad6f90f819b375c8dae0ce4c1cb2ed143a7fd5a14b835db284f24497f85","access_level":"public","create_time":"$D2020-04-10T16:47:08.410Z","update_time":"$D2020-04-11T11:57:07.166Z","view_time":null,"first_public_time":"$D2020-04-10T21:32:44.876Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":"starter_2024"},"version":646,"publish_version":646,"role":null,"authored":false,"authors":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}],"members":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"5462a115d4372a20","slug":"space-filling-curves","title":"Space-Filling Curves","owner":{"id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan"}},"type":"notebook","body":{"title":"H-curve and HI-curve dithering","cells":[{"id":0,"value":"md`# H-curve and HI-curve dithering\n\nPeople have tried to combine image diterhing with space-filling curves - see for example [Riemersma dithering](https://www.compuphase.com/riemer.htm). After sharing my H-curve notebook on \\`/r/creativecoding\\` last week, [\\`@eastHuddler\\`](https://twitter.com/eastHuddler) experimented with [using the H-curve instead](https://old.reddit.com/r/creativecoding/comments/fvn35h/a_simple_algorithm_to_generate_hcurves/fmpq3l9/). Inspired by that I decided to give it a shot myself as well.\n\nWe need a square image, because as implemented the curve only works on squares. Since the \"classic\" dithering test-image is a close-up of Michelangelo's David, let's stick to that theme:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"david.image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`Original photo by Benjamín Núñez González, [CC-BY-SA-4.0](https://creativecommons.org/licenses/by-sa/4.0/deed.en): https://commons.wikimedia.org/wiki/File:David,_Miguel_%C3%81ngel,_Florencia,_Italia,_2019_09.jpg\n\nCropped, scaled and converted to grayscale for the sake of testing.\n\n\nWe'll dither a 1-bit and 2-bit version (so one and four colors, respectively). First the H-curve:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"ditherAllBits(ditheringHCurve, getPlainThreshold)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"md`Then the HI-curve:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"ditherAllBits(ditheringHICurve, getPlainThreshold)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"md`The HI-curve seems to do better than the H-curve. Perhaps the added alternating rotations help with hiding structural artefacts. However, I would not go so far as to suggest these are good dithering algorithms. See as a point of comparison the 4x4 ordered dithering and Three-Row Sierra dithering below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"ditherAllBits(ditheringOrdered, get4x4threshold)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"ditherAllBits(ditheringSierra3, getPlainThreshold)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"md`We could, however, [try to use the reversible projection as intentional scrambling](https://observablehq.com/@jobleonard/h-curve-and-hi-curve-image-scrambling), then combine with [hybrid ordered dithering](https://observablehq.com/@jobleonard/ordered-error-diffusion-dithering):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"ditheringSierra3Scrambled(getPixel1bit, getPlainThreshold)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"ditheringSierraLiteScrambled(getPixel2bit, get4x4threshold)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"md`Not very practical, but maybe fun for some glitch art`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"// replace `img = imgDavid` with `img = imGradientColor` to see a color test image instead\nimg = imgDavid","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"getPixels = [getPixel1bit, getPixel2bit, getPixel4bit];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"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":16,"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":565,"value":"getAlternatingThreshold = {\n const thresholds2x2 = [\n 1,2,\n 2,1\n ].map(v => 85*v);\n function get2x2threshold(x, y) {\n return thresholds2x2[(x&1) + ((y&1)<<1)];\n }\n get2x2threshold.label = \"2×2\"\n return get2x2threshold;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"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":103,"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":89,"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":23,"value":"grayscale2bit = [0, 85, 170, 255]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"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":24,"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":91,"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":30,"value":"function px(x, y) {\n return (x * 4) + (y * img.width * 4);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"ditheringOrdered = {\n function ditheringOrdered(getPixel, getThreshold, image = img) {\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); 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":32,"value":"ditheringHCurve = {\n const {gridToLine, lineToGrid} = hcurveIndices(8);\n\n function ditheringHCurve(getPixel, getThreshold, image = img) {\n let {ctx, clone, errors, line} = getDitheringCtx(image);\n for (let j = 0, error = 0 ; j < lineToGrid.length; j++) {\n let xy = lineToGrid[j];\n const x = xy % 1024;\n const y = xy >>> 10;\n const idx = px(x, y);\n for(let i = 0; i < 4; i++) {\n let oldPixel = clone.data[idx+i] + errors[i];\n const newPixel = getPixel(oldPixel, x, y, getThreshold);\n clone.data[idx+i] = newPixel;\n errors[i] = oldPixel - newPixel\n }\n }\n\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n }\n ditheringHCurve.label = \"H-curve\"\n return ditheringHCurve;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"ditheringHICurve = {\n const {gridToLine, lineToGrid} = hicurveIndices(8);\n\n function ditheringHICurve(getPixel, getThreshold, image = img) {\n let {ctx, clone, errors, line} = getDitheringCtx(image);\n for (let j = 0, error = 0 ; j < lineToGrid.length; j++) {\n let xy = lineToGrid[j];\n const x = xy % 1024;\n const y = xy >>> 10;\n const idx = px(x, y);\n for(let i = 0; i < 4; i++) {\n let oldPixel = clone.data[idx+i] + errors[i];\n const newPixel = getPixel(oldPixel, x, y, getThreshold);\n clone.data[idx+i] = newPixel;\n errors[i] = oldPixel - newPixel\n }\n }\n\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n }\n ditheringHICurve.label = \"HI-curve\"\n return ditheringHICurve;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"scramble = {\n const {gridToLine, lineToGrid} = hicurveIndices(8);\n const buffer = img.data.slice();\n\n function apply(data) {\n buffer.set(data);\n for(let j = 0; j < lineToGrid.length; j++) {\n let xy = lineToGrid[j];\n const x = xy % 1024;\n const y = xy >>> 10;\n const idx = px(x, y);\n data[j*4] = buffer[idx];\n data[j*4+1] = buffer[idx+1];\n data[j*4+2] = buffer[idx+2];\n data[j*4+3] = buffer[idx+3];\n }\n return data;\n }\n\n function reverse(data) {\n buffer.set(data);\n for(let j = 0; j < gridToLine.length; j++) {\n let xy = gridToLine[j];\n const x = xy % 1024;\n const y = xy >>> 10;\n const idx = px(x, y);\n data[j*4] = buffer[idx];\n data[j*4+1] = buffer[idx+1];\n data[j*4+2] = buffer[idx+2];\n data[j*4+3] = buffer[idx+3];\n }\n return data;\n }\n return {apply, reverse};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function getDitheringCtx(image = img) {\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":542,"value":"imgDavid = {\n let img = await david.image()\n\n let ctx = DOM.canvas(img.width, img.height).getContext('2d');\n ctx.drawImage(img, 0, 0);\n return {\n data: ctx.getImageData(0, 0, img.width, img.height).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":540,"value":"imgGradientColor = {\n const data = new Uint8ClampedArray(1024*1024*4);\n data.fill(255);\n for (let y = 0; y < 1024; y++) {\n const line = y*1024;\n for(let x = 0; x < 1024; x++) {\n const idx = (x + line) * 4;\n let dx = x/4 - 127.5;\n let dy = y/4 - 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 return {\n data,\n width: 1024,\n height: 1024\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {hcurveIndices} from \"@jobleonard/a-simple-algorithm-to-generate-h-curves\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"import {hicurveIndices} from \"@jobleonard/the-hi-curve\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"david = await FileAttachment(\"david2.jpg\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 29:"$28:body"