1d:{"title":"Ordered Error Diffusion Dithering","cells":[{"id":1095,"value":"md`# Ordered Error Diffusion Dithering `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3206,"value":"*Note: If you wish to convert an image to black-and-white using one of the methods described here, [@iamgrahamallen](https://observablehq.com/@iamgrahamallen) modified the code in this notebook into a conventient tool that lets you do just that:* \n\nhttps://observablehq.com/@iamgrahamallen/convert-image-to-one-bit","pinned":false,"hidden":false,"mode":"md"},{"id":465,"value":"hybrid2x2 = {\n return ditherHybrid(ditheringMethods[ditheringSelection], thresholds[thresholdSelection])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1350,"value":"viewof imageSelection = select({\n title: 'Input Image',\n options: [\n { label: 'David', value: 'David' },\n { label: 'Horizontal Gradient', value: 'HorGr' },\n { label: 'Vertical Gradient', value: 'VertGr' },\n { label: 'Color Gradient', value: 'GrC' },\n { label: 'Test Card', value: 'TestCard' },\n { label: 'Doggo', value: 'Doggo' },\n { label: 'Gray', value: 'Gray'}\n ],\n value: 'David'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"$1f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1073,"value":"$20","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$21","pinned":false,"hidden":false,"mode":"ojs"},{"id":1682,"value":"hybridVariable1bit = {\n await visibility();\n return ditherHybridOneRow(\n ditheringAtkinson,\n get2x2variableWidthThreshold,\n getPixel1bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2427,"value":"table([\n [get2x2variableWidthThreshold(0,0), get2x2variableWidthThreshold(1, 0)],\n [get2x2variableWidthThreshold(0,1), get2x2variableWidthThreshold(1, 1)]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1649,"value":"viewof thresholdWidth = slider({\n min: 0, \n max: 256,\n step: 0.25, \n value: 0,\n description: \"2×2 threshold step size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2483,"value":"$22","pinned":false,"hidden":false,"mode":"ojs"},{"id":3003,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringAtkinson,\n make2x2variableWidthThreshold(255),\n getPixel1bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2998,"value":"$23","pinned":false,"hidden":false,"mode":"ojs"},{"id":1699,"value":"hybridVariable2bit = {\n await visibility();\n return ditherHybridOneRow(\n ditheringSierra3,\n make4x4variableWidthThreshold(thresholdWidth4x4),\n getPixel2bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2439,"value":"{\n await visibility();\n return table([\n [0, 1, 2, 3].map(v => get4x4variableWidthThreshold(v, 0)),\n [0, 1, 2, 3].map(v => get4x4variableWidthThreshold(v, 1)),\n [0, 1, 2, 3].map(v => get4x4variableWidthThreshold(v, 2)),\n [0, 1, 2, 3].map(v => get4x4variableWidthThreshold(v, 3))\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2435,"value":"viewof thresholdWidth4x4 = slider({\n min: 0, \n max: 256,\n step: 0.25, \n value: 16,\n description: \"4×4 threshold step size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1654,"value":"{\n await visibility();\n return md`Obviously, for a uniform 127 map the ordered dithering should regress to a plain threshold again, except at 2 bit grayscale this time. The hybrid similarly is, again, equal to the original error diffusion method in this case. The original Bayer 4×4 threshold map is recreated when we pick a step size of 16. What happens when we push beyond that is a bit more complicated this time.\n\nRecall our insight about checkerboard patterns in the 1 bit case. What is different now is that we are rounding between shades of grey. The result is that we force the image into checkerboard textures halfway between these shade of grey. Two-bit images have four \"colors\" - black, two shades of grey and white. Therefore we should expect to get three checkerboard texture precisely between them, which is exactly what we get in the ordered dithering case:`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3034,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringAtkinson,\n make4x4variableWidthThreshold(255),\n getPixel2bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3032,"value":"{\n await visibility();\n return md`Another way to think about it is this: when we have a low step size, we end up with many opaque shades of grey. When we have a high step size, we end up with many opaque shades of \"checkerboard grey\". Both cases are examples of banding. This is true for both the ordered and hybrid dithering.\n\nFor ordered dithering, the sweet spot with minimal banding would appear to be and equally distributed step size (16 in the 4×4 case).`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3029,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringSierra3,\n make4x4variableWidthThreshold(16),\n getPixel2bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3021,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringSierra3,\n make4x4variableWidthThreshold(17),\n getPixel2bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3025,"value":"{\n await visibility();\n return md`For hybrid dithering, the error diffusion gives a bit of wiggle room. This is most visible on the shoulder in the bottom right: for step sizes 17 and above - just one more than the even distribution case - the shoulder has false checkerboard patterns in the ordered dithering case. These never appear in the hybrid dithering example.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3017,"value":"$24","pinned":false,"hidden":false,"mode":"ojs"},{"id":3014,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringSierra3,\n make4x4variableWidthThreshold(28),\n getPixel2bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3010,"value":"{\n await visibility();\n return md`What is interesting however is that we end up with adjacent pixels that are two shades apart (most notable on the cheek). This kind of makes sense: the higher error sensitivity also means greater rounding error, which means more overcompensation in the *other* direction, so we can end up \"double rounding\" an extra shade away.\n\nFor the record, at 4 bits the effects get so subtle they are very hard to distinguish without zooming in:`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3006,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringSierra3,\n get8x8variableWidthThreshold,\n getPixel4bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2690,"value":"{\n await visibility();\n return table([\n [0, 1, 2, 3, 4, 5, 6, 7].map(v => get8x8variableWidthThreshold(v, 0)),\n [0, 1, 2, 3, 4, 5, 6, 7].map(v => get8x8variableWidthThreshold(v, 1)),\n [0, 1, 2, 3, 4, 5, 6, 7].map(v => get8x8variableWidthThreshold(v, 2)),\n [0, 1, 2, 3, 4, 5, 6, 7].map(v => get8x8variableWidthThreshold(v, 3)),\n [0, 1, 2, 3, 4, 5, 6, 7].map(v => get8x8variableWidthThreshold(v, 4)),\n [0, 1, 2, 3, 4, 5, 6, 7].map(v => get8x8variableWidthThreshold(v, 5)),\n [0, 1, 2, 3, 4, 5, 6, 7].map(v => get8x8variableWidthThreshold(v, 6)),\n [0, 1, 2, 3, 4, 5, 6, 7].map(v => get8x8variableWidthThreshold(v, 7))\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2679,"value":"viewof thresholdWidth8x8 = slider({\n min: 0, \n max: 256,\n step: 0.125, \n value: 4,\n description: \"8×8 threshold step size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2545,"value":"{\n await visibility();\n return md`Not all combinations of dithering, threshold matrices and bit depths produce equally satisfying results. As far as \"good\" dither algorithms and threshold matrices go, I just combined known methods. But the above examples suggest that there might be ways to fine-tune threshold matrices and error-diffusion methods to work better together.\n\nAnother fun thing to play with is experimenting with ordering matrices and dithering kernels that normally are pretty bad, and see what comes out when we combine them. To demonstrate, I made a *terrible* custom dither kernel that I call \"skip neighbours\", where the error jumps over the adjacent pixels to the pixels two, three or four steps ahead.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3041,"value":"{\n await visibility();\n return ditherHybridOneRow(\n ditheringSkipNeighbours,\n make2x2variableWidthThreshold(68),\n getPixel2bit\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3039,"value":"$25","pinned":false,"hidden":false,"mode":"ojs"},{"id":2518,"value":"$26","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"{\n await visibility();\n let ctx = DOM.canvas(img.width, img.height).getContext('2d');\n let clone = new ImageData(\n new Uint8ClampedArray(img.data),\n img.width,\n img.height\n );\n\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"{\n await visibility();\n return md`## Threshold\n\n*(Turns out that threshold \"dithering\" is technically ${tex`1{\\times}1`} ordered dithering!)*`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"{\n await visibility();\n return ditherAllBits(ditheringOrdered, getPlainThreshold);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"{\n await visibility();\n return md`## ${tex`2{\\times}2`} Ordered Dithering`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"{\n await visibility();\n return ditherAllBits(ditheringOrdered, get2x2threshold);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"{\n await visibility();\n return md`## ${tex`4{\\times}4`} Ordered Dithering`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"ditherAllBits(ditheringOrdered, get4x4threshold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"{\n await visibility();\n return md`## ${tex`8{\\times}8`} Ordered Dithering`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"{\n await visibility();\n return ditherAllBits(ditheringOrdered, get8x8threshold);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3163,"value":"{\n await visibility();\n return md`For the ${tex`2{\\times}2`} version, we can very easily see the different textures mimicking three levels of gray. For the ${tex`4{\\times}4`} we end up with 15 levels of gray and ${tex`8{\\times}8`} has 63 shades of crosshatches (plus black and white).\n\nFine detail, like the pupils in the eyes, is lost. Sharp outlines get fuzzier too. On the other hand, a benefit of ordered dithering is that it they are [point operations](https://observablehq.com/@jake-low/image-processing-point-operations) - the output of a pixel does not depend on the surrounding pixels. This makes it easy to parallelize, and also a more stable form of dithering: changing a pixel does not affect the others. This is why it is often used in (real) GIFs where there is little movement. The regularity of the textures can also aid compression.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"AppendixB = {\n await visibility();\n return md`

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

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

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