29:null 2a:["$","title",null,{"children":"Feedback shaders | Yaroslav Sergienko | Observable"}] 2f:T61f,makeRegl(` const float pixelSize = 1.0; const float PI = 3.141592653589793; vec3 self = tf(0.,0.); vec2 FC = gl_FragCoord.xy * pixelSize; float random = fsnoise(FC) * .5 + .5; float grid = max( step(0.9, sin(FC.x * PI/4.)), step(0.9, sin(FC.y * PI/4.)) ); if(t == 0.) { gl_FragColor = vec4( step(-1., -length(FC - .5)), 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++) { float coeff = exp(-length(vec2(x, y)) * 0.1); diff += tf(x, y).r == 1. ? coeff : 0.; coeffSum += coeff; } } diff = diff / coeffSum; float green = random * grid - clamp(diff, 0.0, 1.0) * 40.0; gl_FragColor.g = clamp(self.g * 0.99 + green * 0.01, 0.0, 1.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.; `, ` vec3 tf(float x, float y) { return texture2D(texture, mod(gl_FragCoord.xy + vec2(x, y), iResolution) / iResolution).rgb; } float fsnoise(vec2 c){ return fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453); } `, 100, 500)30:T7a2,null && makeRegl(` const float PI = 3.141592653589793; const float R = 3.; vec2 uv = gl_FragCoord.xy / iResolution; vec3 self = tf(0.,0.); float random = fsnoise(gl_FragCoord.xy) * .5 + .5; float grid = max( step(0.9, sin(gl_FragCoord.x * PI/4.)), step(0.9, sin(gl_FragCoord.y * PI/4.)) ); if(t == 0.) { gl_FragColor = vec4( step(-.01, -length(gl_FragCoord.xy - .5)), random * grid, 0.0, 1.0 ); return; } gl_FragColor.a = 1.; gl_FragColor.b = 0.0; // float diff = (tf(0., R).r + tf(R, 0.).r + tf(0., -R).r + tf(-R, 0.).r) / 4.0 - self.r; 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++){ float coeff = 1. / (1. + length(vec2(x, y)) * 0.3); diff += tf(x, y).r == 1. ? coeff : 0.; coeffSum += coeff; } } diff = diff / coeffSum; // - self.r; gl_FragColor.r = self.r == 1.0 ? 1.0 : 0.0; // clamp(diff, 0.0, 1.0); // clamp(self.r * 0.9 + 0.1 * diff, 0.0, 1.0); float green = random * grid - clamp(diff, 0.0, 1.0) * 80.0; gl_FragColor.g = clamp(self.g * 0.99 + green * 0.01, 0.0, 1.0); // gl_FragColor.b = gl_FragColor.r > 0. && gl_FragColor.r < 1.0 && gl_FragColor.g == 0. ? 1.0 : 0.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.; `, ` vec3 tf(float x, float y) { return texture2D(texture, mod(gl_FragCoord.xy + vec2(x, y), iResolution) / iResolution).rgb; } float fsnoise(vec2 c){ return fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453); } `, 100, 190)31:Ta59,null && makeRegl(` vec2 uv = gl_FragCoord.xy/iResolution; vec3 self = tf(0.,0.); // if (t == 1.) { // gl_FragColor = vec4(self.g, 0.0, 0.0, 1.0); // // gl_FragColor = vec4(self.b, 0.0, 0.0, 1.0); // // gl_FragColor = vec4(self.r == 1., self.r > 0., 0.0, 1.0); // return; // } else if (t > 1.) { // gl_FragColor = vec4(self, 1.0); // return; // } float blue = fsnoise(gl_FragCoord.xy) * .5 + .5; if(t < .2) { self.b = 0.5; self.r = step(-.01,-length(gl_FragCoord.xy-.5)); } vec2 diff = ( tf( 0., R).rg * .25 + tf( R, 0.).rg * .25 + tf( 0.,-R).rg * .25 + tf(-R, 0.).rg * .25 - (self.rg)) * vec2(FERO, DIFF); // float diff = 0.; // const float rad2 = 3.0; // for(float y=-rad2; y<=rad2; y++) { // for(float x=-rad2; x<=rad2; x++){ // if (x == 0. && y == 0.) continue; // diff += tf(x, y).r; // } // } // float r2 = (rad2 * 2. + 1.); // diff = diff / (r2 * r2 - 1.) - self.r; // float red = diff; // clamp(diff, 0.0, 1.0); // max(0., diff); gl_FragColor.a = 1.; gl_FragColor.rb = self.rb; // gl_FragColor.g = self.g + blue * PROD() - self.r * CONS; // + diff.g; // gl_FragColor.g *= 1.-DECAY; float green = (blue * PROD() - self.r * CONS) * (1.-DECAY) / DECAY; gl_FragColor.g = self.g * 0.99 + green * 0.01; if(gl_FragColor.r < 1.) { float red = max(0., diff.r) * .9 / 0.1; // gl_FragColor.r = (gl_FragColor.r + max(0., diff.r)) * .9; gl_FragColor.r = gl_FragColor.r * 0.9 + 0.1 * red; } if(self.r == 1.) return; if(tf(0.,1.).r + tf(1.,0.).r + tf(0.,-1.).r + tf(-1.,0.).r == 0.) return; vec2 theMostGreenCell; float theGreenestGreen; 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){ 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; float n = tf(x,y).r; // if(n/green>TOLERANCE) continue; if(n>0.5) continue; theGreenestGreen = green; theMostGreenCell = vec2(x,y); } } if(theGreenestGreen == 0.) return; if(length(theMostGreenCell) == 0.) gl_FragColor.r = 1.; `, ` const float DIFF = .02; const float FERO = .1; const float CONS = .8; const float PI = 3.141592653589793; const float DECAY = .01; const float TOLERANCE = .9; const float R = 2.; float PROD() { return .01 * max( step(0.9, sin(gl_FragCoord.x * PI/4.)), step(0.9, sin(gl_FragCoord.y * PI/4.)) ); } vec3 tf(float a, float bb) { return texture2D(texture, mod(gl_FragCoord.xy + vec2(a, bb), iResolution) / iResolution).rgb; } float fsnoise(vec2 c){ return fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453); } `, 100, 190)32:[] 2d:{"id":"fed9b97eb86980cd","slug":null,"title":"Feedback shaders","thumbnail":"a425499131d6ddf4792b9b2725d780755e83ebdee3977355beef43f8ed35adeb","access_level":"public","create_time":"$D2023-09-23T13:31:55.950Z","update_time":"$D2023-09-24T14:51:12.424Z","view_time":null,"first_public_time":"$D2023-09-23T13:31:55.950Z","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":625,"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":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Feedback shaders","cells":[{"id":531,"value":"# Feedback shaders","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":52,"value":"makeRegl(`\nif (t > 0.01) {\n bool prevAlive = texture2D(texture, uv).x == 0.;\n int neigh = 0;\n for (int i=-1; i<=1; i++) {\n for (int j=-1; j<=1; j++) {\n if (i == 0 && j == 0) continue;\n vec2 coords = uv + vec2(i, j) / iResolution;\n neigh += int(texture2D(texture, coords).x == 0.);\n }\n }\n if (!prevAlive && neigh == 3 || prevAlive && (neigh == 2 || neigh == 3)) {\n gl_FragColor = vec4(0., 0., 0., 1.);\n } else {\n gl_FragColor = vec4(1., 1., 1., 1.);\n }\n} else {\n bool isBlack = fract(sin(gl_FragCoord.x + gl_FragCoord.y) * 1000.0) < 0.5;\n gl_FragColor = vec4(vec3(float(isBlack)), 1.);\n}\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":509,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"Source: https://github.com/regl-project/regl/blob/gh-pages/example/feedback.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"makeRegl(`\nfloat dist = length(gl_FragCoord.xy);\nvec2 textureCoords = uv + cos(t) * vec2(0.5 - uv.y, uv.x - 0.5) - sin(2.0 * t) * (uv - 0.5);\nvec3 textureData = texture2D(texture, textureCoords).rgb;\nvec4 addVec = vec4(\n 1.0 + cos(2.0 * t),\n 1.0 + cos(2.0 * t + 1.5),\n 1.0 + cos(2.0 * t + 3.0),\n 0.0\n);\nfloat addVecCoeff = exp(-0.01 * dist);\ngl_FragColor = vec4(0.98 * textureData, 1) + addVecCoeff * addVec;\ngl_FragColor = vec4(textureCoords, 0., 1.0);\nif (clamp(textureCoords, 0., 1.) != textureCoords) {\n gl_FragColor = vec4(0., 0., 0., 1.);\n} else {\n gl_FragColor = vec4(floor(textureCoords * 10.0) / 10.0, 0.0, 1.0);\n}\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"import {makeRegl} from '4fcf5efdc3c119ee'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"