let gfx;

let off;

let pts = [];

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),

];

function setup() {

  createCanvas(800, 800);

  textSize(36);

  textFont("Segoe UI");

  textAlign(CENTER, CENTER);

​

  off = width * 0.1;

​

  gfx = createGraphics(width, height, WEBGL);

​

  for (let _ = 0; _ < 1000; _++) {

    pts.push({ x: random(width), y: random(height), c: random(20, 255) });

  }

​

  rgb_fs = createFilterShader(rgb_src);

  imageMode(CENTER);

  // saveGif("panik.gif", 6);

  for (let _ = 0; _ < 10; _++) {

    let w = random(10,50);

    circs.push({

      x:random(w,width-2*w), y:-w,

      w: w, c: random(vaporwave),

    })

  }

}

​

let circs = [];

​

function draw() {

  background(color(0, 0, 0, 10));

  for (let p of pts) {

    let c = color(p.c);

    c.setAlpha(180);

    if (random() > 0.8) c.setAlpha(random(20, 255));

    stroke(c);

    point(p.x, p.y);

  }

​

  for (let c of circs) {

    noStroke();

    fill(color(c.c));

    rect(c.x-c.w/2, 0, c.w, c.y);

    circle(c.x, c.y, c.w);

    c.y+=random(.5,3);

  }

  if (frameCount % 40 != 0) {

    gfx.push();

    gfx.background(color(0, 0, 0, 10));

    gfx.stroke(color(110, 110, 80, 80));

    gfx.noFill();

    gfx.rotateX(millis() * 0.001);

    gfx.rotateY(millis() * 0.001);

    gfx.rotateZ(millis() * 0.001);

    gfx.sphere(50, 4, 4);

    gfx.pop();

    stroke(220);

    image(gfx, width / 2, height / 2);

  }

​

  //   line(off, off, width-off, off);

  //   line(width-off, off, width-off, 2*off);

  line(width - off, 4 * off, width - off, height - off);

  line(width - off, height - off, off * 2, height - off);

​

  // line(off, off, width-2*off, off);

  // line(off,off,off,height-4*off);

​

  noFill();

​

  let x = width / 2;

  let y = height / 2;

  if (random() > 0.9) x += random(-10, 10);

  if (random() > 0.9) y += random(-10, 10);

​

  circle(x, y, width * 0.3);

​

  // if (frameCount < 150) {

  // x = 20;

  // y = height - 40;

  fill(220);

  noStroke();

​

  textAlign(RIGHT);

  x = width - 1.15 * off;

  y = height - 24 - off;

  if (random() > 0.9) x += random(-10, 10);

  if (random() > 0.9) y += random(-10, 10);

  textSize(36);

  text("roll for ini𐕣ia𐕣ive", x, y);

​

  if (frameCount % 15 == 0) {

    rgb_fs.setUniform("_noise", random(-0.05, 0.05));

    rgb_fs.setUniform("_g_noise", random(-0.001, 0.001));

    if (frameCount % 40 == 0) {

      //random() > 0.85)

      rgb_fs.setUniform("fractalize", true);

​

      textSize(256);

      stroke(color(220, 220, 220, 10));

      textAlign(CENTER);

      text("⛧", width / 2, height / 2 + 24);

    } else rgb_fs.setUniform("fractalize", false);

    filter(rgb_fs);

  }

  // } else {

  //   noLoop();

  // }

}

​

// rgb - based on https://editor.p5js.org/BarneyCodes/sketches/XUer03ShM

let 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);

}`;

​