"#000",

  "#ff71ce",

  "#000",

  "#01cdfe",

  "#000",

  "#05ffa1",

  "#000",

  "#b967ff",

  "#000",

  "#fffb96",

  "#000",

];

let grid = [];

let particles = [];

const NUM_PARTICLES = 25000;

let box_w;

let rgb_fs, tv_fs;

let gfx;

​

function setup() {

  createCanvas(800, 800);

  pixelDensity(1);

  noStroke();

  noiseDetail(2, 0.25);

  gfx = createGraphics(width, height);

​

  box_w = width / vaporwave.length;

​

  let x = 0;

  for (let ind = 0; ind < vaporwave.length; ind++) {

    let c = color(vaporwave[ind]);

    c.setAlpha(120);

    gfx.fill(c);

    gfx.rect(x, 0, box_w, height);

    x += box_w;

  }

  let y = 0;

  for (let ind = 0; ind < vaporwave.length; ind++) {

    let c = color(vaporwave[ind]);

    c.setAlpha(120);

    gfx.fill(c);

    gfx.rect(0, y, width, box_w);

    y += box_w;

  }

​

  gfx.loadPixels();

  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;

      let pid = getPixelID(x, y);

      if (pixels[pid] == 0 && pixels[pid + 1] == 0 && pixels[pid + 2] == 0)

        a = map(n, 0.0, 1.0, -TWO_PI, TWO_PI);

      else

        a = Math.ceil(

          (map(n, 0.0, 1.0, -TWO_PI, TWO_PI) * (PI / 4)) / (PI / 4)

        );

​

      if (y < box_w) a = HALF_PI;

      else if (y > height - box_w) a = -HALF_PI;

​

      if (x < box_w) a = 0;

      else if (x > width - box_w) a = -PI;

​

      grid[y][x] = { n: n, a: a };

    }

  }

​

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

    let life = random(50, 250);

    particles.push({

      x: random(box_w, width - box_w - 1),

      y: random(box_w, height - box_w - 1),

      life: life,

      olife: life,

    });

  }

​

  tv_fs = gfx.createFilterShader(tv_noise_src);

  rgb_fs = gfx.createFilterShader(rgb_src);

}

​

function draw() {

  image(gfx, 0, 0);

  gfx.loadPixels();

  for (let i = particles.length - 1; i >= 0; i--) {

    let p = particles[i];

​

    let pid = getPixelID(p.x, p.y);

    let c = 220;

    if (

      gfx.pixels[pid] == 0 &&

      gfx.pixels[pid + 1] == 0 &&

      gfx.pixels[pid + 2] == 0

    )

      c = 255;

​

    gfx.pixels[pid] = c;

    gfx.pixels[pid + 1] = c;

    gfx.pixels[pid + 2] = c;

    // pixels[pidd+3] = 1;

​

    let a = grid[int(p.y)][int(p.x)].a;

    p.x += cos(a);

    p.y += sin(a);

    p.life--;

​

    if (

      p.x < box_w ||

      p.x > width - box_w - 1 ||

      p.y < box_w ||

      p.y > height - box_w - 1

    ) {

      p.x = random(box_w, width - box_w - 1);

      p.y = random(box_w, height - box_w - 1);

    }

​

    if (p.life <= 0) particles.splice(i, 1);

  }

  gfx.updatePixels();

​

  if (particles.length == 0) {

    console.log("done");

    rgb_fs.setUniform("_noise", 0.01);

    rgb_fs.setUniform("fractalize", true);

    tv_fs.setUniform("_noise", 0.01);

​

    gfx.filter(rgb_fs);

    gfx.filter(tv_fs);

​

    let a = 45;

    for (let sc = 1.0; sc > 0.05; sc -= 0.15) {

      push();

      translate(width / 2, height / 2);

​

      imageMode(CENTER);

      angleMode(DEGREES);

      tint(255, random(127,255));

      rotate(a);

      let w = width * sc;

      image(gfx, 0, 0, w, w);

      pop();

      a += random(20,60);

    }

​

    noLoop();

  }

}

​

function getPixelID(x, y) {

  let _density = gfx.pixelDensity();

  return 4 * _density * (int(y) * _density * width + int(x));

}

​

// https://webgl-shaders.com/shaders/frag-badtv.glsl

let tv_noise_src = `precision mediump float;

varying vec2 vTexCoord;

uniform sampler2D tex0;

uniform float _noise;

​

/*

 * Random number generator with a float seed

 *

 * Credits:

 * http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0

 */

highp float random1d(float dt) {

    highp float c = 43758.5453;

    highp float sn = mod(dt, 3.14);

    return fract(sin(sn) * c);

}

​

/*

 * Pseudo-noise generator

 *

 * Credits:

 * https://thebookofshaders.com/11/

 */

highp float noise1d(float value) {

    highp float i = floor(value);

    highp float f = fract(value);

    return mix(random1d(i), random1d(i + 1.0), smoothstep(0.0, 1.0, f));

}

​

/*

 * Random number generator with a vec2 seed

 *

 * Credits:

 * http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0

 * https://github.com/mattdesl/glsl-random

 */

highp float random2d(vec2 co) {

    highp float a = 12.9898;

    highp float b = 78.233;

    highp float c = 43758.5453;

    highp float dt = dot(co.xy, vec2(a, b));

    highp float sn = mod(dt, 3.14);

    return fract(sin(sn) * c);

}

​

​

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

}

​

/*

 * The main program

 */

void main() {

    // Calculate the effect relative strength

    float strength = (0.3 + 0.7 * noise1d(0.3 * 1.)) * _noise;// 0.5; //u_mouse.x / u_resolution.x;

​

    // Calculate the effect jump at the current time interval

    float jump = 500.0 * floor(0.3 * (0.5) * (1. + noise1d(1.))); //(u_mouse.x / u_resolution.x) * (u_time + noise1d(u_time)));

​

    // Shift the texture coordinates

    vec2 uv = vTexCoord;

​

// Get the texture pixel color

    vec3 pixel_color = texture2D(tex0, uv).rgb;

​

  pixel_color.r = texture2D(tex0, uv-vec2(_noise,_noise)).r;

  pixel_color.g = texture2D(tex0, uv+vec2(_noise,_noise)).g;

  pixel_color.b = texture2D(tex0, uv-vec2(_noise,_noise)).b;

​

​

//if (sdBox(uv, vec2(0.15,0.15)) > 0.5) {

    uv.y += _noise*5.*0.2 * strength * (noise1d(5.0 * vTexCoord.y + 2.0 * 1. + jump) - 0.5);

    uv.x += 0.1 * strength * (noise1d(100.0 * strength * uv.y + 3.0 * 1. + jump) - 0.5);

​

    // Get the texture pixel color

     pixel_color = texture2D(tex0, uv).rgb;

​

​

    // Add some white noise

    pixel_color += vec3(5.0 * strength * (random2d(vTexCoord + 1.133001 * vec2(1., 1.13)) - 0.5));

//} else {

​

//}

    // Fragment shader output

    gl_FragColor = vec4(pixel_color, 1.0);

}

`;

​

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

}`;

​