2b:null 2c:["$","title",null,{"children":"Pseudo-blue noise shader | Fil | Observable"}] 31:T583,{ const width = Math.floor(928 / pixelSize); const height = 360 / pixelSize; const context = DOM.context2d(width, height, 1); const f = pixelSize / 400; context.canvas.onmousemove = (e) => { const box = e.target.getBoundingClientRect(); const x = ((e.clientX - box.left) / box.width) * width; const y = ((e.clientY - box.top) / box.height) * height; draw(x, y); }; const data = context.createImageData(width, height); /* // Option: use a cache to accelerate when pixelSize < 1 // But then it doesn’t demonstrate the speed anymore :) const blueCache = new Float32Array(width * height); for (let y = 0, k = 0; y < height; ++y) for (let x = 0; x < width; ++x, k++) blueCache[k] = pseudoblue(x, y); */ const uint32 = new Uint32Array(data.data.buffer); const LIGHT = 0xffffffff, DARK = 0xff000000; // big endian notation: 0xAaBbGgRr represents the usual #RrGgBbAa const draw = (mx, my) => { for (let y = 0, k = 0; y < height; ++y) { for (let x = 0; x < width; ++x, k++) { uint32[k] = pseudoblue(x, y) < 0.55 + f * Math.hypot(x - mx, y - my) ? LIGHT : DARK; } } context.putImageData(data, 0, 0); }; draw(width / 2, height / 2); return Object.assign(context.canvas, { style: `image-rendering: pixelated; cursor: crosshair; width:${ pixelSize * width }px` }); }32:[] 2f:{"id":"70dbc4b534745d20","slug":"pseudoblue","title":"Pseudo-blue noise shader","thumbnail":"5554e9c81a3cac8ade98c004e62d3417f1cabb683252dc2428371fcb7f39f22e","access_level":"public","create_time":"$D2023-01-18T09:34:10.733Z","update_time":"$D2023-02-20T18:33:41.977Z","view_time":null,"first_public_time":"$D2023-01-19T14:58:22.218Z","fork":false,"stars":16,"starred":false,"owner":{"type":"team","id":"da2a32154638c457","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":"starter_2024"},"version":1664,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null,"role":"editor"}],"comments":[{"id":"e4a39d3a175e1dce","reply_to_id":null,"content":"I've said elsewhere that my pbn algorithm is really a merge sort in reverse, with random swaps. So that might be one direction to explore.\n\nAnother option is to see if we can improve on NuSan's shader they came up with after reading my notebook:\n\nhttps://twitter.com/NuSan_fx/status/1464273180059750401\n\nhttps://www.shadertoy.com/view/7lV3Ry","create_time":"$D2023-01-19T10:28:01.265Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"50ae49f0fe8505c9","reply_to_id":"e4a39d3a175e1dce","content":"*he (hadn't checked the twitter bio for pronouns so defaulted to \"they\")","create_time":"$D2023-01-19T10:28:28.292Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"adc3c41e26695098","reply_to_id":null,"content":"You have to force the width/height into a power of two if you want the closed form to render properly, it seems","create_time":"$D2023-01-19T10:39:29.804Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"5d3a0560be179040","reply_to_id":"e4a39d3a175e1dce","content":"Also, this is way above my math level but might be relevant: http://abdallagafar.com/publications/dyadic-nets/","create_time":"$D2023-01-19T11:04:08.934Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"f97b20b6856ca5d4","reply_to_id":"e4a39d3a175e1dce","content":"(I've promoted http://abdallagafar.com/ before right? His work is so good)","create_time":"$D2023-01-19T11:04:23.691Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"a7417ba336fd7126","reply_to_id":"e4a39d3a175e1dce","content":"The ACM link has an 18min video: https://dl.acm.org/doi/abs/10.1145/3450626.3459880","create_time":"$D2023-01-19T11:12:27.171Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"8222184955db7c6c","reply_to_id":"e4a39d3a175e1dce","content":"Oh, they actually wrote a follow-up with actual blue noise! https://dl.acm.org/doi/abs/10.1145/3550454.3555519","create_time":"$D2023-01-19T11:27:08.122Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"6c86d7e4ff26d54e","reply_to_id":"e4a39d3a175e1dce","content":"I had missed all this activity! Amazing :)","create_time":"$D2023-01-19T11:31:14.061Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"0900b7e6c452fd3c","reply_to_id":"e4a39d3a175e1dce","content":"I have now reduced NuSan’s shader to a few lines of code.","create_time":"$D2023-01-19T13:30:11.815Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"7f2da5b601d2b336","reply_to_id":"adc3c41e26695098","content":"I think this works now","create_time":"$D2023-01-19T13:37:57.689Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"8fabd0edfe815894","reply_to_id":"adc3c41e26695098","content":"Bayer still does funky things on my screen - and the pb one possibly too, but if so it's masked by the swapping","create_time":"$D2023-01-19T13:55:43.674Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"0d5d72bf4808f526","reply_to_id":"e4a39d3a175e1dce","content":"Neat!","create_time":"$D2023-01-19T13:55:54.454Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"3b4124bde0ec0948","reply_to_id":"adc3c41e26695098","content":"🤔 maybe it's an artifact of using Plot.raster? My main contribution to the shader code is that I eliminated any notion of width and height—so the function itself is completely independent of the target geometry (provided you stay in the [0-65535] range for x and y).","create_time":"$D2023-01-19T14:05:25.622Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"4e0e567d2145676a","reply_to_id":"adc3c41e26695098","content":"Well, if we figure out what breaks the Bayer code we also know what breaks the pb code","create_time":"$D2023-01-19T14:15:37.448Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"6503f425baf6aa55","reply_to_id":null,"content":"Am I reading this right and are we making a 2¹⁶ by 2¹⁶ Bayer matrix here?","create_time":"$D2023-01-19T14:18:14.228Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"3d91e22a30d4c6d8","reply_to_id":"6503f425baf6aa55","content":"Oh right, 32 bit numbers, duh","create_time":"$D2023-01-19T14:18:39.379Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"36736abc14d8827a","reply_to_id":"6503f425baf6aa55","content":"yes, except we're not producing them all :)","create_time":"$D2023-01-19T14:20:29.581Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"8b52f10aa912a9c8","reply_to_id":"6503f425baf6aa55","content":"Right, right, closed form :)","create_time":"$D2023-01-19T14:21:09.644Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"39eccca3400c8a88","reply_to_id":null,"content":"My guess is that the cause of t he the issue is that we're not \"tiling\" x,y correctly. If so I was wondering if the problem started here. Clearly not.","create_time":"$D2023-01-19T14:23:44.043Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"564b38d46d52b787","reply_to_id":"39eccca3400c8a88","content":"So presuming `bayer` is working right, the problem might be the x and y values sent to it. Is Plot.raster guaranteed to always send integer values over, and increase those integer values one step per pixel?","create_time":"$D2023-01-19T14:25:25.457Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"0659270a641b4cd9","reply_to_id":"39eccca3400c8a88","content":"yes (and double checked by logging the values)","create_time":"$D2023-01-19T14:27:55.814Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"126c2760b97c27a9","reply_to_id":"39eccca3400c8a88","content":"is your browser set to 100%?","create_time":"$D2023-01-19T14:28:45.661Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"c94c51ea5ad1b63f","reply_to_id":"39eccca3400c8a88","content":"Yep","create_time":"$D2023-01-19T14:28:50.831Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"7fa5909cf00ec5a1","reply_to_id":"39eccca3400c8a88","content":"Also seems to happen in both Chromium and Firefox browsers. Maybe it's an issue with my graphics card?","create_time":"$D2023-01-19T14:30:03.597Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"ebcacef01e068f23","reply_to_id":"39eccca3400c8a88","content":"… I don't see any problem on my screen so it's hard to guess. Maybe we can make a pure canvas version which would help eliminate any issue with Plot","create_time":"$D2023-01-19T14:30:29.874Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"514f3f5b311a3496","reply_to_id":"39eccca3400c8a88","content":"I got some ready-made functions for that I think :)","create_time":"$D2023-01-19T14:31:42.444Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"ca3e30fc304dcc00","reply_to_id":null,"content":"Why do I suddenly hear a carillon playing? https://www.youtube.com/watch?v=8qvdAWLcPyU","create_time":"$D2023-01-19T17:12:51.789Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"eac360c0913725cc","reply_to_id":null,"content":"Sorry, was just figuring out what the `b = y` was for. Mind if I try if Interleaved Gradient Noise works as a mix function?","create_time":"$D2023-01-20T11:57:07.470Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"3dcadda6512c6be3","reply_to_id":"eac360c0913725cc","content":"try all you want! (use the tinker mode if you don't want to fork or to add to history.)\nI've tried several things that are much faster but less nicely distributed (e.g. sqrt instead of sin). There's potential to be at least 5x faster.","create_time":"$D2023-01-20T12:00:22.889Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"dde247fafd8643bd","reply_to_id":"eac360c0913725cc","content":"I suspect that if we manage to avoid the casting between floating point and integers (for bitmasking) and inline that we'd get close to the speed of unmodified bayer","create_time":"$D2023-01-20T12:05:33.572Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"dc708c4e109bedf2","reply_to_id":"eac360c0913725cc","content":"Ah, forgot about the tinker mode :)","create_time":"$D2023-01-20T12:05:53.347Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"f34ec6103c8572e3","reply_to_id":"eac360c0913725cc","content":"When I profile it's the 16 calls to Math.sin that take about 90% of the CPU time.","create_time":"$D2023-01-20T12:29:51.982Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"7f51a09dd1333537","slug":"algorithms","title":"Algorithms","owner":{"id":"da2a32154638c457","login":"fil","name":"Fil"}},"type":"notebook","body":{"title":"Pseudo-blue noise shader","cells":[{"id":0,"value":"# Pseudo-blue noise shader\n\nPseudo-blue noise was introduced by Job van der Zwan in this [original notebook](https://observablehq.com/@jobleonard/pseudo-blue-noise), which explains the concept and gives a construction method that works from the top-down, generating a full map. Here, we compute it bottom-up: for any given pixel position ⟨x, y⟩, generate a number. Our code—also available on [shadertoy](https://www.shadertoy.com/view/mtlSzn)—is a simplification of [NuSan’s shader variant](https://www.shadertoy.com/view/7lV3Ry). Like Job’s algorithm it starts with a Bayer matrix and quasi-randomly flips its orientations on subdivision. Huge thanks to Job for the help, suggestions, and references, and to [Fabian](/@mootari) for the interactive visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1164,"value":"Usage:\n~~~js\nimport {pseudoblue} from \"@fil/pseudoblue\"\npseudoblue(x, y) // returns a number in [0, 1) for pixel ⟨x, y⟩\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":730,"value":"{\n const height = 480;\n const context = DOM.context2d(width, height, 1);\n const data = context.createImageData(width, height);\n for (let y = 0, k = 0; y < height; ++y) {\n for (let x = 0; x < width; ++x, k += 4) {\n if (pseudoblue(x, y) * width < x) data.data[k + 3] = 255;\n }\n }\n context.putImageData(data, 0, 0);\n return Object.assign(context.canvas, { style: \"image-rendering: pixelated\" });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1326,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1385,"value":"viewof pixelSize = Inputs.range([0.5, 5], {\n label: \"pixel size\",\n step: 0.5,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1603,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":931,"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 s = 6;\n let a, b;\n return (x, y) => {\n let v = 0;\n for (let i = 0; i < s; ++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 / (1 << (s << 1));\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1096,"value":"pseudoblue(0, 0) // note: we're using [1, 2, 3, 0] as the bayer matrix, otherwise this corner returns 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1407,"value":"---\nBayer’s dithering function is the same without random flipping:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1409,"value":"bayer = (x, y) => {\n let v = 0;\n for (let i = 0; i < 8; ++i) {\n v = (v << 2) | ((x & 1) + ((y & 1) << 1) + 1) % 4;\n x >>= 1;\n y >>= 1;\n }\n return v / (1 << (8 << 1));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1411,"value":"{\n const height = 110;\n const context = DOM.context2d(width, height, 1);\n const data = context.createImageData(width, height);\n for (let y = 0, k = 0; y < height; ++y) {\n for (let x = 0; x < width; ++x, k += 4) {\n if (bayer(x, y) * width < x) data.data[k + 3] = 255;\n }\n }\n context.putImageData(data, 0, 0);\n return Object.assign(context.canvas, { style: \"image-rendering: pixelated\" });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1535,"value":"---\n\nWe can use other sources of noise as our mixing function. For example, we can try using interleaved gradient noise:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1505,"value":"pseudoblueILG = {\n const c = 256 * ilg_constant;\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);\n return c * (v - (v|0));\n }\n const s = 8;\n let a, b;\n return (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 / (1 << (s << 1));\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1523,"value":"viewof ilg_constant = Inputs.range([0, 10], {value: 7.92177803434839, label: \"interleave gradient noise multiplier\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1510,"value":"{\n const height = 110;\n const context = DOM.context2d(width, height, 1);\n const data = context.createImageData(width, height);\n for (let y = 0, k = 0; y < height; ++y) {\n for (let x = 0; x < width; ++x, k += 4) {\n if (pseudoblueILG(x, y) * width < x) data.data[k + 3] = 255;\n }\n }\n context.putImageData(data, 0, 0);\n return Object.assign(context.canvas, { style: \"image-rendering: pixelated\" });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1429,"value":"---\n*performance quick-check*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1423,"value":"perf(bayer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1426,"value":"perf(pseudoblue)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1514,"value":"perf(pseudoblueILG)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1421,"value":"function perf(m) {\n const t0 = performance.now();\n const n = 2 ** 10;\n for (let i = 0; i < n; ++i) for (let j = 0; j < n; ++j) m(i, j);\n return (performance.now() - t0) | 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"