1d:{"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"},{"id":60,"value":"david.image()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":302,"value":"ditherAllBits(ditheringHCurve, getPlainThreshold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"md`Then the HI-curve:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"ditherAllBits(ditheringHICurve, getPlainThreshold)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":309,"value":"ditherAllBits(ditheringOrdered, get4x4threshold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"ditherAllBits(ditheringSierra3, getPlainThreshold)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":440,"value":"ditheringSierra3Scrambled(getPixel1bit, getPlainThreshold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"ditheringSierraLiteScrambled(getPixel2bit, get4x4threshold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"md`Not very practical, but maybe fun for some glitch art`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"// replace `img = imgDavid` with `img = imGradientColor` to see a color test image instead\nimg = imgDavid","pinned":true,"hidden":false,"mode":"ojs"},{"id":296,"value":"$1f","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"$20","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"getPixels = [getPixel1bit, getPixel2bit, getPixel4bit];","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"$21","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":23,"value":"grayscale2bit = [0, 85, 170, 255]","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":30,"value":"function px(x, y) {\n return (x * 4) + (y * img.width * 4);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":288,"value":"$22","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":357,"value":"$23","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"$24","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"$25","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":5,"value":"import {hcurveIndices} from \"@jobleonard/a-simple-algorithm-to-generate-h-curves\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"import {hicurveIndices} from \"@jobleonard/the-hi-curve\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"david = await FileAttachment(\"david2.jpg\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W26","stdlib":"1"}