xxxxxxxxxx544
let grid, particles;let sq_w;let hw, hh, hs;let dither_fs;let vaporwave = [ // (0, 0, 0), // (20, 20, 20), // (220, 220, 220), "#ff71ce", "#01cdfe", "#05ffa1", "#b967ff", "#fffb96", // (0, 0, 0), // (0, 0, 0), // (0,0,0),];// rgb - based on https://editor.p5js.org/BarneyCodes/sketches/XUer03ShMlet fragSrc_rgb = `precision mediump float;varying vec2 vTexCoord;uniform float _noise;uniform sampler2D tex0;uniform vec2 canvasSize;#define TWO_PI 6.28318530718//https://iquilezles.org/articles/distfunctions2d/float sdCircle( vec2 p, float r ){ return length(p) - r;}float sdVesica(vec2 p, float r, float d){ p = abs(p); float b = sqrt(r*r-d*d); return ((p.y-b)*d>p.x*b) ? length(p-vec2(0.0,b)) : length(p-vec2(-d,0.0))-r;}vec3 hsb2rgb( in vec3 c ){ vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0), 6.0)-3.0)-1.0, 0.0, 1.0 ); rgb = rgb*rgb*(3.0-2.0*rgb); return c.z * mix( vec3(1.0), rgb, c.y);}void main() { vec2 uv = vTexCoord; vec3 col; vec4 _col = texture2D(tex0, uv); col = _col.rgb; float noise = _noise;//sin(pow(cos(_noise),2.)/2.);//0.1; // glitch rgb components vec2 _uv = uv.xy * 2.0 - 1.0; float alpha = 1.0; vec2 offset = vec2(noise * 0.05, noise*0.05);if ((sdCircle(_uv,0.25) < 0.0005)) { col.r = texture2D(tex0, uv+offset).r; col.g = texture2D(tex0, uv).g; col.b = texture2D(tex0, uv-offset).b; // if ((sdVesica(_uv,0.55, 0.2) < 0.0005)) { //if ((sdCircle(_uv,0.55) < 0.0005)) { // vec2 offset = vec2(noise * 0.05, noise*0.05); // col.r = texture2D(tex0, uv+offset).r; // col.g = texture2D(tex0, uv).g; // col.b = texture2D(tex0, uv-offset).b;alpha = 1.0; //} else { // alpha = 0.75; //}} gl_FragColor = vec4(col, alpha);}`;let fragSrc_pixelate = `precision mediump float;varying vec2 vTexCoord;uniform sampler2D tex0;uniform float tileSize;void main() { vec2 uv = vTexCoord; // uv step for tiling float tiles = tileSize;//800.; uv = uv * tiles; uv = floor(uv); uv = uv / tiles; vec4 tex = texture2D(tex0, uv); gl_FragColor = tex;}`;let fs, fs2;let gfx;function setup() { createCanvas(2800, 2800); gfx = createGraphics(width, height); angleMode(RADIANS); sq_w = width * 0.3; noiseDetail(2, 0.75); grid = []; for (let y = 0; y < height; y++) { grid[y] = []; for (let x = 0; x < width; x++) { let n = noise(x * 0.01, y * 0.01); // let a = map(n, 0.0, 1.0, -TWO_PI * 8, TWO_PI * 8); let a2 = Math.ceil( (map(n, 0.0, 1.0, -TWO_PI, TWO_PI) * (PI / 4)) / (PI / 4) ); let a = a2; grid[y][x] = { n: n, a: a, a2: a2 }; } } particles = []; hw = width / 2; hh = height / 2; hs = sq_w / 2; for (let _ = 0; _ < 2500*2; _++) { let x = random(hw - hs, hw + hs); let y = random(hh - hs, hh + hs); let life = random(50, 250)*2; //500); particles.push({ x: x, y: y, ox: x, oy: y, l: life, ol: life, a: random([true, false]), watercolor: random([false, true, true, true]), col: random(vaporwave), wait: false, }); } background(255); stroke(20); noFill(); gfx.background(255); gfx.stroke(40); gfx.noFill(); gfx.rectMode(CENTER); gfx.fill(0) gfx.rect(width / 2, height / 2, sq_w, sq_w); gfx.fill(20); fs = createFilterShader(rgb_src);//fragSrc_rgb); fs2 = gfx.createFilterShader(fragSrc_pixelate); dfs = createFilterShader(dither_src); // saveGif("flow.gif", 6);//10);}let z = 0;let zdir = true;let step = 1;function draw() { // fs.setUniform("_noise", map(z, 0, 100, .001, 50.)); //map(particles.length, 1000, 0, 0.001, 0.1)); // fs2.setUniform("tileSize", map(z, 0, 100, 400.0, 800.0)); // // console.log(z) // if (zdir) z++; // else z--; // if (z > 200) { // z = 200; // zdir = !zdir; // gfx.stroke(220); // } else if (z < 0) { // z = 0; // zdir = !zdir; // gfx.stroke(40); // } // gfx.filter(fs2); // gfx.filter(fs); image(gfx, 0, 0); for (let i = particles.length - 1; i >= 0; i--) { let p = particles[i]; p.l--; if (step == 0 && !p.wait) { if (!p.watercolor && random() > 0.98) { p.watercolor = true; let pts = random(6, 24); gfx.noStroke(); let t = random(0, TWO_PI); let st = PI / pts; let col = color(p.col); col.setAlpha(random(1, 10)); gfx.fill(col); gfx.beginShape(); let r = random(10, 100); for (let _ = 0; _ < random(1, 10); _++) { for (let i = 0; i < pts; i++) { let x = p.x + r * cos(t); let y = p.y + r * sin(t); gfx.vertex(x, y); t += st; } } gfx.endShape(CLOSE); } else { if (random() > 0.99) p.watercolor = false; } } else if (step == 1) { gfx.stroke(255); gfx.strokeWeight(map(p.l, p.ol, 0, 1, 5)); // gfx.ellipse(p.x, p.y, random(0.5, 2.0), random(0.5, 2.0)) gfx.point(p.x, p.y); } else if (step == 2) { gfx.stroke(color(p.col)); // gfx.ellipse(p.x, p.y, random(0.5, 2.0), random(0.5, 2.0)) gfx.point(p.x, p.y); } if (!p.wait) { let a; if (p.a) a = grid[int(p.y)][int(p.x)].a; else a = grid[int(p.y)][int(p.x)].a2; p.x += cos(a); p.y += sin(a); p.l--; } if (p.x < 0 || p.x > width - 1 || p.y < 0 || p.y > height - 1 || p.l <= 0) { // p.x = random(hw - hs, hw + hs); // p.y = random(hh - hs, hh + hs); // let life = random(50, 200); // p.l = life; if (step == 0) p.wait = true; else particles.splice(i, 1); } } // array.filter((obj) => obj.id === id).length; if ( particles.length == 0 || particles.filter((obj) => obj.wait == true).length == particles.length ) { gfx.stroke(40); gfx.noFill(); gfx.rect(width / 2, height / 2, sq_w, sq_w); step++; console.log("step"); for (let p of particles) { p.wait = false; p.x = p.ox; p.y = p.oy; p.l = p.ol; } for (let _ = 0; _ < 100; _++) { let x = random(hw - hs, hw + hs); let y = random(hh - hs, hh + hs); let life = random(50, 150); //500); particles.push({ x: x, y: y, ox: x, oy: y, l: life, ol: life, a: random([true, false]), watercolor: random([false, true, true, true]), col: random(vaporwave), wait: false, }); } } if (step == 3) { for (let t = 0; t < TWO_PI; t += PI / 8) { push(); // strokeWeight(10); stroke(0); noFill(); rectMode(CENTER); translate(width / 2, height / 2); rect(0, 0, sq_w, sq_w); rotate(PI / 4); rect(0, 0, sq_w, sq_w); pop(); } fs.setUniform("_noise", 0.001); filter(fs); filter(dfs); console.log("done"); noLoop(); }}// dither - https://medium.com/the-bkpt/dithered-shading-tutorial-29f57d06ac39// http://alex-charlton.com/posts/Dithering_on_the_GPU/// https://github.com/hughsk/glsl-dither/blob/master/example/index.fraglet dither_src = `precision mediump float;varying vec2 vTexCoord;uniform sampler2D tex0;uniform float _noise;uniform float indexMatrix4x4[16];mat4 bayer = mat4( -0.5, 0.0, -0.375, 0.125, 0.25, -0.25, 0.375, -0.125, -0.3125, 0.1875, -0.4375, 0.0625, 0.4375, -0.0625, 0.3125, -0.1875); // https://github.com/hughsk/glsl-luma/blob/master/index.glslfloat luma(vec3 color) { return dot(color, vec3(0.299, 0.587, 0.114));}// https://github.com/hughsk/glsl-luma/blob/master/index.glslfloat luma(vec4 color) { return dot(color.rgb, vec3(0.299, 0.587, 0.114));}float dither4x4(vec2 position, float brightness) { int x = int(mod(position.x, 4.0)); int y = int(mod(position.y, 4.0)); int index = x + y * 4; float limit = 0.0; if (x < 8) { if (index == 0) limit = 0.0625; if (index == 1) limit = 0.5625; if (index == 2) limit = 0.1875; if (index == 3) limit = 0.6875; if (index == 4) limit = 0.8125; if (index == 5) limit = 0.3125; if (index == 6) limit = 0.9375; if (index == 7) limit = 0.4375; if (index == 8) limit = 0.25; if (index == 9) limit = 0.75; if (index == 10) limit = 0.125; if (index == 11) limit = 0.625; if (index == 12) limit = 1.0; if (index == 13) limit = 0.5; if (index == 14) limit = 0.875; if (index == 15) limit = 0.375; } return brightness < limit ? 0.0 : 1.0;}vec3 dither4x4(vec2 position, vec3 color) { return color * dither4x4(position, luma(color));}vec4 dither4x4(vec2 position, vec4 color) { return vec4(color.rgb * dither4x4(position, luma(color)), 1.0);}float dither8x8(vec2 position, float brightness) { int x = int(mod(position.x, 8.0)); int y = int(mod(position.y, 8.0)); int index = x + y * 8; float limit = 0.0; if (x < 8) { if (index == 0) limit = 0.015625; if (index == 1) limit = 0.515625; if (index == 2) limit = 0.140625; if (index == 3) limit = 0.640625; if (index == 4) limit = 0.046875; if (index == 5) limit = 0.546875; if (index == 6) limit = 0.171875; if (index == 7) limit = 0.671875; if (index == 8) limit = 0.765625; if (index == 9) limit = 0.265625; if (index == 10) limit = 0.890625; if (index == 11) limit = 0.390625; if (index == 12) limit = 0.796875; if (index == 13) limit = 0.296875; if (index == 14) limit = 0.921875; if (index == 15) limit = 0.421875; if (index == 16) limit = 0.203125; if (index == 17) limit = 0.703125; if (index == 18) limit = 0.078125; if (index == 19) limit = 0.578125; if (index == 20) limit = 0.234375; if (index == 21) limit = 0.734375; if (index == 22) limit = 0.109375; if (index == 23) limit = 0.609375; if (index == 24) limit = 0.953125; if (index == 25) limit = 0.453125; if (index == 26) limit = 0.828125; if (index == 27) limit = 0.328125; if (index == 28) limit = 0.984375; if (index == 29) limit = 0.484375; if (index == 30) limit = 0.859375; if (index == 31) limit = 0.359375; if (index == 32) limit = 0.0625; if (index == 33) limit = 0.5625; if (index == 34) limit = 0.1875; if (index == 35) limit = 0.6875; if (index == 36) limit = 0.03125; if (index == 37) limit = 0.53125; if (index == 38) limit = 0.15625; if (index == 39) limit = 0.65625; if (index == 40) limit = 0.8125; if (index == 41) limit = 0.3125; if (index == 42) limit = 0.9375; if (index == 43) limit = 0.4375; if (index == 44) limit = 0.78125; if (index == 45) limit = 0.28125; if (index == 46) limit = 0.90625; if (index == 47) limit = 0.40625; if (index == 48) limit = 0.25; if (index == 49) limit = 0.75; if (index == 50) limit = 0.125; if (index == 51) limit = 0.625; if (index == 52) limit = 0.21875; if (index == 53) limit = 0.71875; if (index == 54) limit = 0.09375; if (index == 55) limit = 0.59375; if (index == 56) limit = 1.0; if (index == 57) limit = 0.5; if (index == 58) limit = 0.875; if (index == 59) limit = 0.375; if (index == 60) limit = 0.96875; if (index == 61) limit = 0.46875; if (index == 62) limit = 0.84375; if (index == 63) limit = 0.34375; } return brightness < limit ? 0.0 : 1.0;}vec3 dither8x8(vec2 position, vec3 color) { return color * dither8x8(position, luma(color));}vec4 dither8x8(vec2 position, vec4 color) { return vec4(color.rgb * dither8x8(position, luma(color)), 1.0);}float dither2x2(vec2 position, float brightness) { int x = int(mod(position.x, 2.0)); int y = int(mod(position.y, 2.0)); int index = x + y * 2; float limit = 0.0; if (x < 8) { if (index == 0) limit = 0.25; if (index == 1) limit = 0.75; if (index == 2) limit = 1.00; if (index == 3) limit = 0.50; } return brightness < limit ? 0.0 : 1.0;}vec3 dither2x2(vec2 position, vec3 color) { return color * dither2x2(position, luma(color));}vec4 dither2x2(vec2 position, vec4 color) { return vec4(color.rgb * dither2x2(position, luma(color)), 1.0);}void main() { vec2 uv = vTexCoord; //vec3 col; //vec4 _col = texture2D(tex0, uv); //col = _col.rgb; //col = dither(col); //gl_FragColor = vec4(col, 1.0); gl_FragColor = dither2x2(gl_FragCoord.xy, texture2D(tex0, uv));}`;// rgb - based on https://editor.p5js.org/BarneyCodes/sketches/XUer03ShMlet rgb_src = `precision mediump float;varying vec2 vTexCoord;uniform sampler2D tex0;uniform float _noise;uniform float _g_noise;uniform bool fractalize;//https://iquilezles.org/articles/distfunctions2d/float sdBox( in vec2 p, in vec2 b ){ vec2 d = abs(p)-b; return length(max(d,0.0)) + min(max(d.x,d.y),0.0);}void main() { vec2 uv = vTexCoord; vec3 col; vec4 _col = texture2D(tex0, uv); col = _col.rgb; float noise = 0.25; // if (sdBox(uv, vec2(1.0,sin(_g_noise*0.15))) > (2.2 * sin(_g_noise*0.5))) {//0.5) { //if ((sdBox(uv, vec2(0.15,0.31)) > 0.75) || (1./sdBox(uv, vec2(0.85,0.71)) < 0.25)) { // glitch rgb components // vec2 offset = vec2(noise * 0.05, 0.0); vec2 offset = vec2(noise * _noise, noise *_noise); col.r = texture2D(tex0, uv-offset).r; col.g = texture2D(tex0, uv+offset).g; col.b = texture2D(tex0, uv-offset).b; if (fractalize) col = fract(5.*cos(2.0/col)); //col.g *= tan(4.0*_g_noise); //col.r = cos(2.8 * _g_noise); //col.g = pow(step(0.5,col.g),_g_noise);//} float alpha = 1.0; //float alpha = clamp(pow(noise, 2.0),0.0, 0.5); gl_FragColor = vec4(col, alpha);}`;