let fs;

let vaporwave = [

  (0, 0, 0),

  (220, 220, 220),

  "#ff71ce",

  "#01cdfe",

  "#05ffa1",

  "#b967ff",

  "#fffb96",

];

​

function setup() {

  createCanvas(800, 800);

​

  let d = width / 4;

  circs = [];

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

  while (d < width) {

    let c = random(255);

    circs.push({

      d: d,

      t: random(-TWO_PI, TWO_PI),

      s: (random([-1, 1]) * PI) / random(32, 256),

      c: color(c, 0, c),

    });

​

    d += random(1, 50);

  }

  noFill();

​

  fs = createFilterShader(fragSrc_rgb);

  saveGif("loop.gif", 6);

}

​

let neg1 = 1.0;

let neg2 = 1.0;

function draw() {

  background(color(20, 20, 20, 10));

  translate(width / 2, height / 2);

  for (let c of circs) {

    stroke(c.c);

    circle(cos(c.t), sin(c.t), c.d);

    c.t += c.s;

  }

  translate(-width / 2, -height / 2);

​

  if (frameCount % 50 == 0) neg1 *= -1.0;

  if (frameCount % 100 == 0) neg2 *= -1.0

  // if (random() > 0.5) {

    fs.setUniform("_noise1", neg1 * 0.001);//random(0.01, 0.001));

    fs.setUniform("_noise2", neg2 * 0.001);// random(0.01, 0.001));

    filter(fs);

  // }

}

​

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

let fragSrc_rgb = `precision mediump float;

varying vec2 vTexCoord;

uniform float _noise1;

uniform float _noise2;

uniform sampler2D tex0;

​

void main() {

  vec2 uv = vTexCoord;

  vec3 col;

  vec4 _col = texture2D(tex0, uv);

  col = _col.rgb;

​

  //float noise = _noise;//0.1;

  // glitch rgb components

​

  vec2 offset = vec2(_noise1, _noise2);

  col.r = texture2D(tex0, uv+offset).r;

  col.g = texture2D(tex0, uv).g;

  col.b = texture2D(tex0, uv+offset).b;

​

  // col.r = step(col.r, 0.5);

​

  gl_FragColor = vec4(col, 1.0);

}`;

​