29:null 2a:["$","title",null,{"children":"Interleaved Gradient Noise | Job van der Zwan | Observable"}] 2f:T7bb,function get3x1gs(fn) { return (x, y) => 0.25 * (fn(x-1, y) + 2 * fn(x, y) + fn(x+1, y)); } function get1x3gs(fn) { return (x, y) => 0.25 * (fn(x, y-1) + 2 * fn(x, y) + fn(x, y+1)); } function get5x1gs(fn) { return (x, y) => 0.0625 * ( fn(x-2, y) + fn(x+2, y) + 4 * (fn(x-1, y) + fn(x+1, y)) + 6 * fn(x, y) ); } function get1x5gs(fn) { return (x, y) => 0.0625 * ( fn(x, y-2) + fn(x, y+2) + 4 * (fn(x, y-1) + fn(x, y+1)) + 6 * fn(x, y) ); } function get7x1gs(fn) { return (x, y) => 0.015625 * ( fn(x - 3, y) + fn(x + 3, y) + 6 * (fn(x - 2, y) + fn(x + 2, y)) + 15 * (fn(x - 1, y) + fn(x + 1, y)) + 20 * fn(x, y) ); } function get1x7gs(fn) { return (x, y) => 0.015625 * ( fn(x, y - 3) + fn(x, y + 3) + 6 * (fn(x, y - 2) + fn(x, y + 2)) + 15 * (fn(x, y - 1) + fn(x, y + 1)) + 20 * fn(x, y) ); } function get9x1gs(fn) { return (x, y) => 0.00390625 * ( fn(x - 4, y) + fn(x + 4, y) + 8 * (fn(x - 3, y) + fn(x + 3, y)) + 28 * (fn(x - 2, y) + fn(x + 2, y)) + 56 * (fn(x - 1, y) + fn(x + 1, y)) + 70 * fn(x, y) ); } function get1x9gs(fn) { return (x, y) => 0.00390625 * ( fn(x, y - 4) + fn(x, y + 4) + 8 * (fn(x, y - 3) + fn(x, y + 3)) + 28 * (fn(x, y - 2) + fn(x, y + 2)) + 56 * (fn(x, y - 1) + fn(x, y + 1)) + 70 * fn(x, y) ); } const hblur = [get3x1gs, get5x1gs, get7x1gs, get9x1gs]; const vblur = [get1x3gs, get1x5gs, get1x7gs, get1x9gs]; function getGsBlurStrip(fn){ const blurs = [fn]; for (const hb of hblur) { blurs.push(hb(fn)); } for (const vb of vblur) { const vbfn = vb(fn); blurs.push(vbfn); for (const hb of hblur) { blurs.push(hb(vbfn)); } } return (x, y, width, height) => { let idx = x * 5 / width | 0; if (idx < 0) idx = 0; else if (idx >= 5) idx = 5-1; let vidx = y * 5 / height | 0; if (vidx < 0) vidx = 0; else if (vidx > 4) vidx = 4; return blurs[idx + vidx * 5](x, y) | 0; } }30:[{"id":"e10d446db3bce7c6847c5c715f24e8f2d36a04be80653d760f08d2a24a34e5cf7086480c9cee07916773c1a6c0b022ec3201d43e515c177d7c1864d1cc60939e","href":"https://static.observableusercontent.com/files/e10d446db3bce7c6847c5c715f24e8f2d36a04be80653d760f08d2a24a34e5cf7086480c9cee07916773c1a6c0b022ec3201d43e515c177d7c1864d1cc60939e","name":"image.png","type":"image/png","lastModified":1697532279076.217,"size":237140}] 2d:{"id":"92bc9c793858b2d7","slug":null,"title":"Interleaved Gradient Noise","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"unlisted","create_time":"$D2021-11-10T08:59:24.069Z","update_time":"$D2026-08-15T23:47:11.304Z","view_time":null,"first_public_time":null,"fork":false,"stars":1,"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":2123,"publish_version":null,"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,"subscribed":null,"forks":2,"collection":{"id":"77d671ed1e63253d","slug":"image-dithering-experiments","title":"Image Dithering Experiments","owner":{"id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan"}},"type":"notebook","body":{"title":"Interleaved Gradient Noise","cells":[{"id":0,"value":"# Interleaved Gradient Noise\n\nhttp://www.iryoku.com/next-generation-post-processing-in-call-of-duty-advanced-warfare\n\nhttps://bartwronski.com/2016/10/30/dithering-part-three-real-world-2d-quantization-dithering/\n\nhttps://blog.demofox.org/2022/01/01/interleaved-gradient-noise-a-different-kind-of-low-discrepancy-sequence/","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":243,"value":"// Q: can we make an integer-operations only\n// version of ILG, for low-powered systems?\n// A: Yes! Looks like 8-bit ILG is possible!\nfunction getInterleavedGradientNoise8Bit(x, y) {\n return (142 * x + 79 * y) & 255;\n}","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":193,"value":"getInterleavedGradientNoise = {\n return 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 // const v = 52.9829189 * (0.06711056 * x + 0.00583715 * y);\n const v = 3.555713357813584 * x + 0.309269245057135 * y;\n return v * 256 & 255;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1375,"value":"function getR2(x, y) {\n // x/1.32471795724474602596 + y / (1.32471795724474602596*1.32471795724474602596)\n return (x * 0.7548776662466927 + y * 0.5698402909980532) * 256 & 255;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1368,"value":"// See https://blog.demofox.org/2024/05/19/a-low-discrepancy-shuffle-iterator-random-access-inversion/\nfunction findCoprimeApprox(n, phi = (1 + 5**0.5) / 2) {\n // initiate by multiplying n by phi and round to odd\n let coprime = Math.round(n * phi);\n if (coprime%2 === 0) coprime--\n return coprime;\n while (gcd(n, coprime) !== 1 && coprime > 1) {\n coprime--;\n }\n return coprime;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1370,"value":"// Requires that both parameters are\n// positive non-zero 32-bit integers,\n// and that a > b\nfunction gcd(a, b) {\n // hint to JS that these are SMI\n let x = b >>> 0, y = a >>> 0;\n if (!(x|y)) return 0;\n let t = y;\n if (x < y) {\n y = x;\n x = t;\n }\n while (y !== 0) {\n t = y;\n y = x % y;\n x = t;\n }\n return x;\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":729,"value":"offset_x = 1.618033989 + ratio_offset","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":738,"value":"offset_x / 1.618033989","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":732,"value":"offset_y = 1.618033989 - ratio_offset","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":748,"value":"1.618033989 / offset_y","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":798,"value":"metallicRatio = n => [(n + Math.sqrt(n*n + 4))*0.5, Math.abs(n - Math.sqrt(n*n + 4))*0.5];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":800,"value":"metallicRatio(n_ratio)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":734,"value":"getGoldenRatioWithOffset = {\n return function getGoldenRatioWithOffset(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);\n // const v = 3.555713357813584 * x + 0.309269245057135 * y;\n const v = x * (1.618033989 + ratio_offset) + y / (1.618033989 - ratio_offset);\n return v * 256 & 255;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":856,"value":"getMetallicRatio8bit = {\n const {abs, sqrt} = Math;\n const metallicRatio = n => [\n (n + sqrt(n*n + 4)) * 128 & 255,\n abs(n - sqrt(n*n + 4)) * 128 & 255\n ];\n const [r, rinv] = metallicRatio(n_ratio);\n // const getMetallicRatio8bit = (x, y) => x * 115 + y * 177 & 255;\n const getMetallicRatio8bit = (x, y) => x * r + y * rinv & 255;\n return getMetallicRatio8bit;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":807,"value":"getMetallicRatio = (ratio) => {\n const {abs, sqrt} = Math;\n const metallicRatio = n => [\n (n + sqrt(n*n + 4))*0.5, \n abs(n - sqrt(n*n + 4))*0.5\n ];\n const [r, rinv] = metallicRatio(ratio);\n return function getMetallicRatio(x, y) {\n const v = x * r + y * rinv;\n return v * 256 & 255;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1746,"value":"## Box blurs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1159,"value":"get3x3avg = fn => {\n const {round} = Math;\n return (x, y) => round((\n fn(x-1, y-1) + fn(x, y-1) + fn(x+1, y-1) +\n fn(x-1, y) + fn(x, y) + fn(x+1, y) +\n fn(x-1, y+1) + fn(x, y+1) + fn(x+1, y+1)\n ) / 9);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1326,"value":"get2x2avg = fn => {\n const {round} = Math;\n return (x, y) => round((\n fn(x, y) + fn(x+1, y) +\n fn(x, y+1) + fn(x+1, y+1)\n ) / 4);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1324,"value":"get4x4avg = fn => {\n const {round} = Math;\n return (x, y) => round((\n fn(x-1, y-1) + fn(x, y-1) + fn(x+1, y-1) + fn(x+2, y-1) +\n fn(x-1, y) + fn(x, y) + fn(x+1, y) + fn(x+2, y) +\n fn(x-1, y+1) + fn(x, y+1) + fn(x+1, y+1) + fn(x+2, y+1) +\n fn(x-1, y+2) + fn(x, y+2) + fn(x+1, y+2) + fn(x+2, y+2)\n ) / 16);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1189,"value":"get5x5avg = fn => {\n const {round} = Math;\n return (x, y) => round((\n fn(x-2, y-2) + fn(x-1, y-2) + fn(x, y-2) + fn(x+1, y-2) + fn(x+2, y-2) +\n fn(x-2, y-1) + fn(x-1, y-1) + fn(x, y-1) + fn(x+1, y-1) + fn(x+2, y-1) +\n fn(x-2, y) + fn(x-1, y) + fn(x, y) + fn(x+1, y) + fn(x+2, y) +\n fn(x-2, y+1) + fn(x-1, y+1) + fn(x, y+1) + fn(x+1, y+1) + fn(x+2, y+1) +\n fn(x-2, y+2) + fn(x-1, y+2) + fn(x, y+2) + fn(x+1, y+2) + fn(x+2, y+2)\n ) / 25);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1747,"value":"## Sorta Gaussianish","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1748,"value":"$2f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":1178,"value":"getFilters = arr => {\n const l = arr.length;\n const vblur = [fn => fn, get2x2avg, get3x3avg, get4x4avg, get5x5avg];\n const blurs = [arr];\n for (let i = 1; i < vblur.length; i++) {\n blurs.push(arr.map(fn => vblur[i](fn)));\n }\n return (x, y, width, height) => {\n let idx = x * l / width | 0;\n if (idx < 0) idx = 0;\n else if (idx >= l) idx = l-1;\n let vidx = y * 5 / height | 0;\n if (vidx < 0) vidx = 0;\n else if (vidx > 4) vidx = 4;\n return blurs[idx][vidx](x, y);\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1328,"value":"getBlurStrip = fn => getFilters([fn, get2x2avg(fn), get3x3avg(fn), get4x4avg(fn), get5x5avg(fn)])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1264,"value":"metallicRatio(1).map(v => v * 0x10000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":850,"value":"metallicRatio(n_ratio).map((v) => 256*v & 255)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1310,"value":"testNoise(getBlurStrip(get8x8Bayer))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1763,"value":"testNoise(getGsBlurStrip(get8x8Bayer))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":250,"value":"testNoise(getBlurStrip(getInterleavedGradientNoise))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1764,"value":"testNoise(getGsBlurStrip(getInterleavedGradientNoise))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":1383,"value":"testNoise(getBlurStrip(triangulate(getInterleavedGradientNoise8Bit)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1765,"value":"testNoise(getGsBlurStrip(triangulate(getInterleavedGradientNoise8Bit)))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":1467,"value":"testNoise(getBlurStrip(triangulate(getSomething)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1766,"value":"testNoise(getGsBlurStrip(triangulate(getSomething)))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":1744,"value":"function getSomething(x, y) { return (176 * x + 123 * y) & 255 }","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":1745,"value":"function getSomething2(x, y){ return (144 * x + 43 * y) & 255 }","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":1768,"value":"testNoise(getGsBlurStrip(getSomething3))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":1767,"value":"function getSomething3(x, y) {\n const v = (33792 * x + 52277 * y) & 0xFFFF;\n return ((v > 0x7FFF ? (0xFFFF - v) * 2 + 1 : v * 2) >>> 8) & 0xFF;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":1410,"value":"function getR2_8bit(x, y) { return (63 * x + 144 * y) & 255 }","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1601,"value":"const getR2_8bit_tr = triangulate(getR2_8bit)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":1743,"value":"{\n let values = new Uint8Array(256);\n for (let x = 0; x < 16; x++) {\n for (let y = 0; y < 16; y++) {\n values[x + y * 16] = getSomething3(x, y)\n }\n }\n const sorted = values.slice().sort();\n return {values, sorted, every8BitVal: sorted.every((v, i) => v === i)}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1524,"value":"function getR2v2(x, y) {\n return (0.24512233375330725 * x + 0.4301597090019467 * y) * 256 & 255;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1587,"value":"function triangulate(f) {\n return (x, y) => {\n const v = f(x,y);\n return v > 127 ? (255 - v) * 2 + 1 : v * 2;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1769,"value":"function triangulate16(f) {\n return (x, y) => {\n const v = f(x, y);\n return v > 0x7FFF ? (0xFFFF - v) * 2 + 1 : v * 2;\n }\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":814,"value":"testNoise(getBlurStrip(getMetallicRatio(n_ratio)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1349,"value":"viewof selectRange = Inputs.range([49340, 49350])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":812,"value":"// viewof n_ratio = Inputs.range([1.0, 1.2], {step: 1/10000000, value: 0.7665, })\n// n_ratio = 0x10000 / 19687\n// n_ratio = 0x10000 / 19661\n// n_ratio = 40507 / 0x10000\n// 49339; 49417\n// n_ratio = 49363 / 0x10000\n// n_ratio = primevals[selectPrime] / 0x10000\nn_ratio = selectRange / 0x10000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1294,"value":"viewof selectPrime = Inputs.range([0, primevals.length - 1], {step: 1, value: primevals.length - 1 >> 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1346,"value":"primevals[selectPrime]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1298,"value":" primevals[selectPrime] / 0x10000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1290,"value":"primevals = {\n let i = 0, pr = [];\n for (const value of primes()) {\n if (value >= 0x80000) break;\n pr[i++] = value;\n }\n return pr\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1288,"value":"primes = function* primes() {\n yield 2; yield 3; yield 5; yield 7;\n\n const sieve = new Map();\n const ps = primes(); \n ps.next(); \n ps.next();\n \n for (let p = 3, i = 9; true; i += 2) {\n let s = sieve.get(i);\n\n if (s !== undefined) {\n sieve.delete(i);\n } else if (i < p * p) {\n yield i;\n continue;\n } else {\n s = 2 * p;\n p = ps.next().value;\n }\n \n let k = i + s;\n while (sieve.has(k)) k += s;\n sieve.set(k, s);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":720,"value":"viewof ratio_offset = Inputs.range([0.825, .828], {step: 0.000000001, value: 0.842})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"function offset(fn, dx = 0, dy = 0) {return (x, y) => fn(x + dx, y + dy)}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1307,"value":"get8x8Bayer = {\n const map = [\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 * 4);\n return (x, y) => map[(x & 7) + (y & 7)*8];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":304,"value":"// 233021\n// 20269\n\n20269 / 256","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"function testNoise(noise, steps = 256) {\n const { ctx, imgData } = getCtx(width >> 2, 200);\n const {data, width: w, height: h} = imgData;\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const idx = (x + y * w) * 4;\n // v = [0, 255]\n let v = noise(x, y, w, h);\n v = (steps * v / 255 | 0) * 255 / (steps - 1);\n data[idx] = v;\n data[idx + 1] = v;\n data[idx + 2] = v;\n data[idx + 3] = 255; // make sure image is not transparent\n }\n }\n ctx.putImageData(imgData, 0, 0);\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"function getCtx(w = width >>> 2, h = 50) {\n let ctx = DOM.canvas(w, h).getContext(\"2d\");\n ctx.canvas.style = `image-rendering: crisp-edges; image-rendering: pixelated; width: ${\n w * 4\n }px; height: ${h * 4}px`;\n\n return {\n ctx,\n imgData: new ImageData(new Uint8ClampedArray(w * h * 4), w, h)\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"