2c:null 2d:["$","title",null,{"children":"Breakdown of labyrinth shader | Yaroslav Sergienko | Observable"}] 32:T5df,makeRegl(` vec3 self = tf(0.,0.); vec2 FC = floor((gl_FragCoord.xy - 0.5) / pixelSize) + 0.5; float random = fsnoise(FC) * .5 + .5; float grid = float( mod(FC.x, 8.0) > 6.0 || mod(FC.y, 8.0) > 6.0 ); if(mod(t, 6.0) == 0.) { gl_FragColor = vec4( step(-1., -length(FC - vec2(0., -2.) - iResolution / 2. / pixelSize)), random * grid, 0.0, 1.0 ); return; } gl_FragColor = vec4(self, 1.0); float diff = 0.; float coeffSum = 0.; const float rad2 = 5.0; for(float y=-rad2; y<=rad2; y++) { for(float x=-rad2; x<=rad2; x++) { diff += tf(x, y).r; coeffSum += 1.0; } } diff = diff / coeffSum; gl_FragColor.g = random * grid - diff * 4.5; vec2 theMostGreenCell; float theGreenestGreen = 0.0; const float rad = 4.; for(float y=-rad; y<=rad; y++) { for(float x=-rad; x<=rad; x++){ float green = tf(x,y).g; if(green <= theGreenestGreen) continue; if(tf(x,y+1.).r < 1. && tf(x+1.,y).r < 1. && tf(x,y-1.).r < 1. && tf(x-1.,y).r< 1.) continue; if(tf(x,y).r == 1.) continue; theGreenestGreen = green; theMostGreenCell = vec2(x,y); } } if(theGreenestGreen == 0.) return; if(length(theMostGreenCell) == 0.) gl_FragColor.r = 1.; `, ` const float pixelSize = 3.0; vec3 tf(float x, float y) { return texture2D(texture, (floor(mod(gl_FragCoord.xy - 0.5 + vec2(x, y) * pixelSize, iResolution) / pixelSize) * pixelSize + 0.5) / iResolution).rgb; } float fsnoise(vec2 c){ return fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453); } `, 300, 1152)33:T516,makeRegl(` vec3 self = tf(0.,0.); vec2 FC = floor((gl_FragCoord.xy - 0.5) / pixelSize) + 0.5; float random = fsnoise(FC) * .5 + .5; if(mod(t, 2.0) == 0.) { gl_FragColor = vec4( step(-2., -length(FC - .5 - iResolution / pixelSize / 2.)), random, 0.0, 1.0 ); return; } gl_FragColor = vec4(self, 1.0); vec2 theMostGreenCell; float theGreenestGreen = 0.0; const float rad = ${rad2.toFixed(1)}; for(float y=-rad; y<=rad; y++) { for(float x=-rad; x<=rad; x++){ float green = tf(x,y).g; if(green <= theGreenestGreen) continue; if( tf(x, y + 1.).r < 1. && tf(x + 1., y).r < 1. && tf(x, y - 1.).r < 1. && tf(x - 1., y).r < 1. ) continue; if(tf(x,y).r == 1.) continue; theGreenestGreen = green; theMostGreenCell = vec2(x,y); } } if(theGreenestGreen > 0. && theMostGreenCell == vec2(0., 0.)) { gl_FragColor.r = 1.; } `, ` const float pixelSize = 10.0; vec3 tf(float x, float y) { return texture2D( texture, // mod(gl_FragCoord.xy + vec2(x, y) * pixelSize, iResolution) / iResolution (floor((mod(gl_FragCoord.xy + vec2(x, y) * pixelSize, iResolution) - 0.5) / pixelSize) * pixelSize + 0.5) / iResolution ).rgb; } float fsnoise(vec2 c){ return fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453); } `, 300, 1152)34:T4e1,makeRegl(` vec3 self = tf(0.,0.); vec2 FC = floor((gl_FragCoord.xy - 0.5) / pixelSize) + 0.5; float random = fsnoise(FC) * .5 + .5; float grid = float(mod(FC.x, 8.0) > 6.0 || mod(FC.y, 8.0) > 6.0); if(mod(t, 2.0) == 0.) { gl_FragColor = vec4( step(-1., -length(FC + vec2(2.0, 0.0) - iResolution / 2. / pixelSize - .5)), random * grid, 0.0, 1.0 ); return; } gl_FragColor = vec4(self, 1.0); vec2 theMostGreenCell; float theGreenestGreen = 0.0; const float rad = ${rad2.toFixed(1)}; for(float y=-rad; y<=rad; y++) { for(float x=-rad; x<=rad; x++){ float green = tf(x,y).g; if(green <= theGreenestGreen) continue; if(tf(x,y+1.).r < 1. && tf(x+1.,y).r < 1. && tf(x,y-1.).r < 1. && tf(x-1.,y).r< 1.) continue; if(tf(x,y).r == 1.) continue; theGreenestGreen = green; theMostGreenCell = vec2(x,y); } } if(theGreenestGreen == 0.) return; if(length(theMostGreenCell) == 0.) gl_FragColor.r = 1.; `, ` const float pixelSize = 5.0; vec3 tf(float x, float y) { return texture2D(texture, floor(mod(gl_FragCoord.xy + vec2(x, y) * pixelSize, iResolution) / pixelSize) * pixelSize / iResolution).rgb; } float fsnoise(vec2 c){ return fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453); } `, 300, 1152)35:Taa9,blue2d = { const height = 200; const ctx = DOM.context2d(width, height); const cols = 21; const leftSpace = 120; const colWidth = (width - leftSpace) / cols; const rowHeight = height / 4; let rawT = 0; while (true) { rawT += 1; const t = Math.floor(rawT / 20) % 16; const redList = new Array(cols).fill(0).map((_, num) => { if (num <= 5) { return 0; } else if (num <= 5 + t) { return 1; } else { return 0; } }); const blueList = new Array(cols).fill(0).map((_, num) => { let sum = 0; let count = 0; for (let x=-rad1; x<=rad1; x++) { const val = redList[num + x] || 0; sum += val * 2; } sum /= (2 * rad1 + 1) ** 2; return Math.min(1, sum); }); const fract = x => x - Math.floor(x); const greenList = new Array(cols).fill(0).map((_, num) => { const noise = fract(Math.sin(12.9898 * num + 78.233) * 43758.5453); return 0.5 + noise * 0.5; }); ctx.fillStyle = 'black'; ctx.fillRect(0, 0, width, height); // ctx.globalCompositeOperation = 'screen'; for (let col=0; col 6.0 || mod(FC.y, 8.0) > 6.0 ); if(mod(t, 2.0) == 0.) { gl_FragColor = vec4( step(-1., -length(FC + vec2(2.0, 0.0) - iResolution / 2. / pixelSize - .5)), random * grid, 0.0, 1.0 ); return; } gl_FragColor = vec4(self, 1.0); float diff = 0.; float coeffSum = 0.; const float rad1 = 5.0; for(float y=-rad1; y<=rad1; y++) { for(float x=-rad1; x<=rad1; x++) { diff += tf(x, y).r; coeffSum += 1.0; } } diff = diff / coeffSum; gl_FragColor.b = diff * 3.0; vec2 theMostGreenCell; float theGreenestGreen = 0.0; const float rad = 4.; for(float y=-rad; y<=rad; y++) { for(float x=-rad; x<=rad; x++){ float green = tf(x,y).g; if(green <= theGreenestGreen) continue; if(tf(x,y+1.).r < 1. && tf(x+1.,y).r < 1. && tf(x,y-1.).r < 1. && tf(x-1.,y).r< 1.) continue; if(tf(x,y).r == 1.) continue; theGreenestGreen = green; theMostGreenCell = vec2(x,y); } } if(theGreenestGreen == 0.) return; if(length(theMostGreenCell) == 0.) gl_FragColor.r = 1.; `, ` const float pixelSize = 5.0; vec3 tf(float x, float y) { return texture2D(texture, floor(mod(gl_FragCoord.xy + vec2(x, y) * pixelSize, iResolution) / pixelSize) * pixelSize / iResolution).rgb; } float fsnoise(vec2 c){ return fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453); } `, 300, 1152)37:Tadc,green2d = { const height = 200; const ctx = DOM.context2d(width, height); const cols = 21; const leftSpace = 120; const colWidth = (width - leftSpace) / cols; const rowHeight = height / 4; let rawT = 0; while (true) { rawT += 1; const t = Math.floor(rawT / 20) % 16; const redList = new Array(cols).fill(0).map((_, num) => { if (num <= 5) { return 0; } else if (num <= 5 + t) { return 1; } else { return 0; } }); const blueList = new Array(cols).fill(0).map((_, num) => { let sum = 0; let count = 0; for (let x=-rad1; x<=rad1; x++) { const val = redList[num + x] || 0; sum += val * 2; } sum /= (2 * rad1 + 1) ** 2; return Math.min(1, sum); }); const fract = x => x - Math.floor(x); const greenList = new Array(cols).fill(0).map((_, num) => { const noise = fract(Math.sin(12.9898 * num + 78.233) * 43758.5453); return Math.max(0, Math.min(1, 0.5 + noise * 0.5 - blueList[num] * coeff)); }); ctx.fillStyle = 'black'; ctx.fillRect(0, 0, width, height); // ctx.globalCompositeOperation = 'screen'; for (let col=0; col 6.0 || mod(FC.y, 8.0) > 6.0 ); if(mod(t, 6.0) == 0.) { gl_FragColor = vec4( step(-1., -length(FC - iResolution / 2. / pixelSize - vec2(0.0, 5.0))), random * grid, 0.0, 1.0 ); return; } gl_FragColor = vec4(self, 1.0); float diff = 0.; float coeffSum = 0.; const float rad2 = ${rad1.toFixed(1)}; for(float y=-rad2; y<=rad2; y++) { for(float x=-rad2; x<=rad2; x++) { diff += tf(x, y).r; coeffSum += 1.0; } } diff = diff / coeffSum; gl_FragColor.b = clamp(diff * 3.0, 0.0, 1.0); gl_FragColor.g = random * grid - diff * ${coeff.toFixed(1)}; vec2 theMostGreenCell; float theGreenestGreen = 0.0; const float rad = ${rad2.toFixed(1)}; for(float y=-rad; y<=rad; y++) { for(float x=-rad; x<=rad; x++){ float green = tf(x,y).g; if(green <= theGreenestGreen) continue; if(tf(x,y+1.).r < 1. && tf(x+1.,y).r < 1. && tf(x,y-1.).r < 1. && tf(x-1.,y).r< 1.) continue; if(tf(x,y).r == 1.) continue; theGreenestGreen = green; theMostGreenCell = vec2(x,y); } } if(theGreenestGreen == 0.) return; if(length(theMostGreenCell) == 0.) gl_FragColor.r = 1.; `, ` const float pixelSize = 3.0; vec3 tf(float x, float y) { return texture2D(texture, (floor(mod(gl_FragCoord.xy - 0.5 + vec2(x, y) * pixelSize, iResolution) / pixelSize) * pixelSize + 0.5) / iResolution).rgb; } float fsnoise(vec2 c){ return fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453); } `, 300, 1152)39:[] 30:{"id":"7371e8db8988787e","slug":"labyrinth-shader-breakdown","title":"Breakdown of labyrinth shader","thumbnail":"25b4f08d7acb52c3faa03f18fe7b413c54573bd87b89fb527c329a0999d7a5f5","access_level":"public","create_time":"$D2023-09-24T14:51:44.299Z","update_time":"$D2023-09-25T16:07:13.057Z","view_time":null,"first_public_time":"$D2023-09-24T14:51:44.299Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ae7dadfe8dcf0cbe","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":"starter_2024"},"version":902,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f19682cf1ab7bdae","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":null}],"members":[{"type":"individual","id":"f19682cf1ab7bdae","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Breakdown of labyrinth shader","cells":[{"id":0,"value":"# Breakdown of labyrinth shader","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"Here is the result we will dig into:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"[Original source](https://twigl.app/?ol=true&ss=-NeYF-wXyp4xy8c8VKZa) by by [Ivan Dianov](https://ivandianov.com/) ([@illus0r](https://observablehq.com/@illus0r/)).\n\nThis page is based on a [source](https://twigl.app?ol=true&ss=-NfBz2pqB-cP-0Wr85yg) adapted by me.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"## A single pixel at the center","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"First, we'll start with a pretty boring algorithm that travels in all directions, starting from a single point.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":466,"value":"This is the initial state:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":331,"value":"```glsl\ngl_FragColor = vec4(\n isCenterPixel ? 1.0 : 0.0,\n 0.0,\n 0.0,\n 1.0\n);\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"makeRegl(`\nvec2 FragCoord = vec2(floor((gl_FragCoord.xy - 0.5) / pixelSize)) * pixelSize + 0.5;\n\ngl_FragColor = vec4(\n length(FragCoord - iResolution / 2.0) > 5. ? 0.0 : 1.0,\n 0.0,\n 0.0,\n 1.0\n);\n`, `\nconst float pixelSize = 10.0;\n`, 200, 1150)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"## Filling all neighbors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":448,"value":"We introduce the function `tf(x, y)` here. It returns the previous color of a pixel, shifted by x units up and y units right.\n\nFor example, `tf(0.0, 0.0)` is the previous color of the current pixel.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":453,"value":"```glsl\nvec3 tf(float x, float y) {\n return texture2D(\n texture,\n (gl_FragCoord.xy + vec2(x, y)) / iResolution\n );\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":715,"value":"Let's add a `mod` function to that function so that the coordinate system becomes periodic. This means that if we move to the left relative to the leftmost pixel, we actually reach the rightmost pixel.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":718,"value":"```glsl\nvec3 tf(float x, float y) {\n return texture2D(\n texture,\n mod((gl_FragCoord.xy + vec2(x, y)) / iResolution, 1.0)\n );\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":463,"value":"Here, we have a rule that the current pixel is filled if one of its neighbors is filled during the previous tick:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":327,"value":"```glsl\nif (tf(0., 1.).r == 1. || tf(1., 0.).r == 1. || tf(0., -1.).r == 1. || tf(-1. ,0.).r == 1.) {\n gl_FragColor.r = 1.;\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"makeRegl(`\nvec3 self = tf(0.,0.);\nvec2 FC = floor((gl_FragCoord.xy - 0.5) / pixelSize) * pixelSize + 0.5;\n\nfloat localT = float(int(t * 100.0));\n\nif (mod(localT, 20.0) != 0.0) {\n gl_FragColor = vec4(self, 1.0);\n return;\n}\n\nif(mod(localT, 300.0) == 0.0) {\n gl_FragColor = vec4(\n step(-6., -length(FC - vec2(-1.0, 0.0) - iResolution / 2.0)),\n 0.0,\n 0.0,\n 1.0\n );\n return;\n}\n\ngl_FragColor = vec4(self, 1.0);\n\nif (tf(0., 1.).r == 1. || tf(1.,0.).r == 1. || tf(0.,-1.).r == 1. || tf(-1.,0.).r == 1.) {\n gl_FragColor.r = 1.;\n}\n`, `\n\nconst float pixelSize = 10.0;\n\nvec3 tf(float x, float y) {\n return texture2D(texture, (floor(mod(gl_FragCoord.xy - 0.5 + vec2(x, y) * pixelSize, iResolution) / pixelSize) * pixelSize + 0.5) / iResolution).rgb;\n}\n`, 200, 1150)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"## A single pixel at the center and random field","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"We use green color to add random values:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":346,"value":"```glsl\ngl_FragColor = vec4(\n float(isCenterPixel),\n fsnoise(gl_FragCoord.xy) * .5 + .5,\n 0.0,\n 1.0\n);\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":820,"value":"Note, that `float(isCenterPixel)` is equivalent to `isCenterPixel ? 1.0 : 0.0`.\n\nWe also use the following standard function to obtain random values in the range of 0 to 1 based on the current pixel coordinates.\n\n```glsl\nfloat fsnoise(vec2 c){\n return fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453);\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":333,"value":"makeRegl(`\nvec3 self = tf(0.,0.);\nvec2 FC = floor((gl_FragCoord.xy - 0.5) / pixelSize) + 0.5;\n\nfloat random = fsnoise(FC) * .5 + .5;\n\ngl_FragColor = vec4(\n step(-0.65, -length(FC - vec2(.5, .2) - iResolution / pixelSize / 2.)),\n random,\n 0.0,\n 1.0\n);\nreturn;\n`, `\n\nconst float pixelSize = 10.0;\n\nvec3 tf(float x, float y) {\n return texture2D(\n texture,\n // mod(gl_FragCoord.xy + vec2(x, y) * pixelSize, iResolution) / iResolution\n (floor((mod(gl_FragCoord.xy + vec2(x, y) * pixelSize, iResolution) - 0.5) / pixelSize) * pixelSize + 0.5) / iResolution\n ).rgb;\n}\n\nfloat fsnoise(vec2 c){\n return fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453);\n}\n`, 300, 1152)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"## Random selection of neighbors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"Now, we want to add some randomness to the process of yellow cells growing.\n\nThe algorithm is as follows. We look at all cells in some neighbourhood and check if the current cell:\n- is not yellow (i.e. the red component is zero),\n- has at least one yellow neighbor (there are 4 neighbors for each cell),\n- has a non-zero green value,\n- has the maximum value of green color among cells that meet the previous three conditions.\n\nIn this case, we make the current cell yellow.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":323,"value":"```glsl\nvec2 theMostGreenCell;\nfloat theGreenestGreen = 0.0;\nconst float rad2 = ${rad2.toFixed(1)};\nfor(float y=-rad2; y<=rad2; y++) {\n for(float x=-rad2; x<=rad2; x++){\n if(tf(x, y).r == 1.) continue;\n if( \n tf(x, y + 1.).r < 1. && tf(x + 1., y).r < 1. &&\n tf(x, y - 1.).r < 1. && tf(x - 1., y).r < 1.\n ) continue;\n float green = tf(x,y).g;\n if(green <= theGreenestGreen) continue;\n theGreenestGreen = green;\n theMostGreenCell = vec2(x,y);\n }\n}\nif(theGreenestGreen > 0. && theMostGreenCell == vec2(0., 0.)) {\n gl_FragColor.r = 1.;\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":256,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"## Adding a grid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":481,"value":"We use a combination of `mod` functions for X and Y coordinates to create a grid. Cells outside of the grid are black.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":382,"value":"```glsl\nfloat random = fsnoise(gl_FragCoord.xy) * .5 + .5;\nfloat grid = float(\n mod(gl_FragCoord.x, 8.0) > 6.0 ||\n mod(gl_FragCoord.y, 8.0) > 6.0\n);\n\ngl_FragColor = vec4(\n float(isCenterPixel),\n random * grid,\n 0.0,\n 1.0\n);\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"## Adding a blue field","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":586,"value":"The blue field will display the average concentration of yellow cells (i.e., having 100% red) near the current cell:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":617,"value":"$${tex.block`\\text{hasRed}(x, y) = \\begin{cases}\n1&\\\\\n0&\n\\end{cases}`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":532,"value":"$${tex.block`\\text{blue} = \\frac{\\sum_{x, y=-${rad1}}^5 \\text{hasRed}(x, y)}{(${rad1}\\cdot 2 + 1)^2}`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":781,"value":"Here is the visualization of a one-dimensional version. The red, green, and blue channels are shown separately.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":728,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"```glsl\nfloat blue = 0.;\nfloat count = 0.;\nconst float rad1 = ${rad1.toFixed(1)};\n\nfor(float y=-rad1; y<=rad1; y++) {\n for(float x=-rad1; x<=rad1; x++) {\n blue += tf(x, y).r;\n count += 1.0;\n }\n}\n\nblue = blue / count;\ngl_FragColor.b = blue * 3.0;\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":496,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"## Preventing collisions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":635,"value":"We simply state that the blue color excludes green:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":316,"value":"```glsl\nconst float COEFF = ${coeff.toFixed(1)};\ngl_FragColor.g = random * grid - blue * COEFF;\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":667,"value":"The coefficient `COEFF` should be adjusted manually.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":788,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"## Adjusting coefficients","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":672,"value":"viewof coeff = Inputs.range([0, 10], {value: 4.5, step: 0.1, label: \"COEFF\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"viewof rad1 = Inputs.range([1, 10], {value: 5, step: 1, label: \"rad1\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"viewof rad2 = Inputs.range([1, 10], {value: 4, step: 1, label: \"rad2\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"--------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":203,"value":"html`` || makeRegl(`\nvec2 FragCoord = vec2(ivec2((gl_FragCoord.xy - 0.5) / pixelSize)) * pixelSize;\n\ngl_FragColor = vec4(\n length(FragCoord - iResolution / 2.0) > 100. ? 0.0 : 1.0,\n 0.0,\n 0.0,\n 1.0\n);\n`, `\nconst float pixelSize = 10.0;\n`, 200, 1150)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"html`` || makeRegl(`\nconst float PI = 3.141592653589793;\nvec3 self = tf(0.,0.);\nvec2 FC = floor((gl_FragCoord.xy - 0.5) / pixelSize) + 0.5;\n\nfloat random = fsnoise(FC) * .5 + .5;\nfloat grid = max(\n step(0.9, sin(FC.x * PI/4.)),\n step(0.9, sin(FC.y * PI/4.))\n);\n\ngl_FragColor = vec4(\n step(-1.2, -length(FC - vec2(0, 0.5) - iResolution / 2. / pixelSize - .5)),\n random * grid,\n 0.0,\n 1.0\n);\n`, `\n\nconst float pixelSize = 5.0;\n\nvec3 tf(float x, float y) {\n return texture2D(texture, floor(mod(gl_FragCoord.xy + vec2(x, y) * pixelSize, iResolution) / pixelSize) * pixelSize / iResolution).rgb;\n}\n\nfloat fsnoise(vec2 c){\n return fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453);\n}\n`, 300, 1152)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {makeRegl} from '4fcf5efdc3c119ee'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 31:"$30:body"