let vaporwave = ["#ff71ce", "#01cdfe", "#05ffa1", "#b967ff", "#fffb96"];

let circ_gfx;

let rgb_fs, tv_fs, dot_fs, pix_fs, wtr_fs;

​

function setup() {

  // createCanvas(800, 800);

createCanvas(1600,1050);

  pixelDensity(1);

  circ_gfx = createGraphics(width, height);

​

  background(255);

  rectMode(CENTER);

  stroke(0);

  strokeWeight(20);

​

  let gfx = createGraphics(width, height);

  gfx.background(255);

​

  gfx.rectMode(CENTER);

  gfx.stroke(0);

  gfx.strokeWeight(20);

  gfx.fill(0);

  gfx.translate(width / 2, height / 2);

  gfx.rotate(QUARTER_PI);

  gfx.square(0, 0, 300);

  gfx.rotate(-QUARTER_PI);

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

​

  rgb_fs = createFilterShader(rgb_src);

  tv_fs = createFilterShader(tv_noise_src);

  dot_fs = createFilterShader(dot_src);

  pix_fs = createFilterShader(pix_src);

  wtr_fs = createFilterShader(wtr_src);

​

  // image(gfx, 0, 0)

​

  particles = [];

  let remaining = 1500;//75000;

  let sx = width / 2 - 200;

  let sy = height / 2 - 200;

  gfx.loadPixels();

  while (remaining > 0) {

    let x = int(random(sx, sx + 400));

    let y = int(random(sy, sy + 400));

​

    let c = gfx.get(x, y);

    if (red(c) < 10 && green(c) < 10 && blue(c) < 10) {

      let l = random(50, 2000);

      particles.push({ ox: x, oy: y, x: x, y: y, l: l, ol: l });

      remaining--;

    }

  }

​

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

      let a2 = Math.ceil(

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

      );

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

    }

  }

​

  strokeWeight(1);

  noStroke();

​

  // fill(color(255,0,0,100));

  // fill(color(vaporwave[0]))

  let circs = [];

  drawSplotch(

    width / 2 - 200 + 48,

    height / 2 - 200 + 48,

    300,

    vaporwave[0],

    circs

  );

  // square(width/2 - 200 + 48, height/2-200+48, 300);

​

  // fill(color(0,255,0,100));

  // fill(color(vaporwave[1]))

  // square(width/2 + 200 - 48, height/2-200+48, 300);

  drawSplotch(

    width / 2 + 200 - 48,

    height / 2 - 200 + 48,

    300,

    vaporwave[1],

    circs

  );

​

  // fill(color(0,0,255,100));

  // fill(color(vaporwave[2]))

  // square(width/2 - 200 + 48, height/2+200-48, 300);

  drawSplotch(

    width / 2 - 200 + 48,

    height / 2 + 200 - 48,

    300,

    vaporwave[2],

    circs

  );

  // fill(color(255,0,255,100));

  // fill(color(vaporwave[3]))

  // square(width/2 + 200 - 48, height/2+200-48, 300);

  drawSplotch(

    width / 2 + 200 - 48,

    height / 2 + 200 - 48,

    300,

    vaporwave[3],

    circs

  );

​

  // https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array

  let shuffled = circs

    .map((value) => ({ value, sort: Math.random() }))

    .sort((a, b) => a.sort - b.sort)

    .map(({ value }) => value);

​

  circ_gfx.noStroke();

  for (let c of circs) {

    circ_gfx.fill(c.c);

    circ_gfx.circle(c.x, c.y, c.d);

  }

​

  stroke(color(20, 20, 20, 10)); //255);

  imageMode(CENTER);

  frameRate(fps);

  secs = 12;

  maxZ = fps * secs;

  // saveGif("empress.gif", secs);

}

​

let z = 0;

let zdir = true;

let maxZ;

let fps = 12;

let rot = 0;

let secs;

function draw() {

  background(color(220, 220, 220, 10));

  push();

  translate(width / 2, height / 2);

  rotate(rot);

  rot += PI / 128;

  if (random() > 0.5) rot += random(-PI / 32, PI / 32);

  let sc = random(circ_gfx.width * 0.95, circ_gfx.width * 1.05);

  if (random() > 0.85) sc *= random([0.5, 2]);

  image(circ_gfx, 0, 0, sc, sc);

  pop();

  stroke(20);

  strokeWeight(1);

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

    let p = particles[i];

    point(p.x, p.y);

    p.l--;

​

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

    p.x += cos(a);

    p.y += sin(a);

​

    if (p.x < 0 || p.x > width - 1 || p.y < 0 || p.y > height - 1 || p.l <= 0) {

      // particles.splice(i,1);

      p.l = random(50, 200);

      p.x = p.ox;

      p.y = p.oy;

      // particles.push({ ox:x,oy:y, x: x, y: y, l: l, ol: l });

    }

  }

​

  // if (particles.length == 0) {

  // border

  let c;

  if (zdir) c = lerpColor(color(0), color(255), map(z, 0, maxZ, 0.0, 1.0));

  else c = lerpColor(color(0), color(255), map(z, maxZ, 0, 1.0, 0.0));

  c.setAlpha(20);

  strokeWeight(20);

  stroke(c);

  noFill();

  push();

  translate(width / 2, height / 2);

  rotate(QUARTER_PI);

  square(0, 0, 300);

  rotate(-QUARTER_PI);

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

  pop();

  pix_fs.setUniform("_noise", 800);

  filter(pix_fs);

  if (z > maxZ * 0.25 && z < maxZ * 0.75) {

    // tv_fs.setUniform("_noise", 0.005);

    rgb_fs.setUniform("_noise", 0.01);

    rgb_fs.setUniform("_g_noise", 0.002);

    if (z > maxZ * 0.45 && z < maxZ * 0.65) rgb_fs.setUniform("fractalize", true);

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

​

    filter(rgb_fs);

    // filter(tv_fs);

  }

​

  if (zdir) z++;

  else z--;

  if (z < 0) {

    z = 0;

    zdir = !zdir;

  }

  if (z > maxZ) {

    z = maxZ;

    zdir = !zdir;

  }

​

  // noLoop();

  // }

}

​

function drawSplotch(x, y, d, c, arr) {

  let _d = 1;

  // push();

  // translate(x, y);

  // noStroke();

  let off = d * 0.4;

​

  while (_d < d) {

    let _c = color(c);

    _c.setAlpha(random(1, 5));

​

    arr.push({

      x: x + random(-off, off),

      y: y + random(-off, off),

      c: _c,

      d: _d,

    });

    // fill(_c);

    // circle(random(-off, off), random(-off, off), d);

​

    _d += random(0.5, 3);

  }

  // pop();

}

​

// pixelate - based on https://github.com/aferriss/p5jsShaderExamples/blob/gh-pages/4_image-effects/4-6_pixelate/sketch.js

let pix_src = `precision mediump float;

​

varying vec2 vTexCoord;

uniform sampler2D tex0;

uniform float _size;

​

void main() {

​

  vec2 uv = vTexCoord;

​

  // uv step for tiling 

  // float ts = 100.;

  // if (_size < 140.) ts = 450.;

  float tiles = 100.; //150.; //250.;

  uv = uv * tiles;

  uv = floor(uv);

  uv = uv / tiles;

​

  vec4 tex = texture2D(tex0, uv);

  gl_FragColor = tex;

}`;

​

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

}`;

​

//https://github.com/twostraws/ShaderKit/blob/main/Shaders/SHKWater.fsh

let wtr_src = `precision mediump float;

varying vec2 vTexCoord;

uniform sampler2D tex0;

uniform float _noise;

uniform float _strength;

​

void main() {

    // bring both speed and strength into the kinds of ranges we need for this effect

    float speed = _noise;//0.05;//u_time * u_speed * 0.05;

    float strength = _strength; //1.0 / 100.0;

​

    vec2 uv = vTexCoord;

    vec4 _col = texture2D(tex0, uv);

​

    // take a copy of the current texture coordinate so we can modify it

    vec2 coord = vTexCoord;

​

    // offset the coordinate by a small amount in each direction, based on wave frequency and wave strength

    coord.x += sin((coord.x + speed) * 15.0) * strength;

    coord.y += cos((coord.y + speed) * 15.0) * strength;

​

    // use the color at the offset location for our new pixel color

    gl_FragColor = texture2D(tex0, coord) * _col.a;

}

`;

​

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

​

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

    uv.y += 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);

}

`;

​

let dot_src = `precision mediump float;

varying vec2 vTexCoord;

uniform sampler2D tex0;

uniform float _noise;

​

/*

 * Returns a value between 1 and 0 that indicates if the pixel is inside the circle

 */

float circle(vec2 pixel, vec2 center, float radius) {

    return 1.0 - smoothstep(radius - 1.0, radius + 1.0, length(pixel - center));

}

​

/*

 * Returns a rotation matrix for the given angle

 */

mat2 rotate(float angle) {

    return mat2(cos(angle), -sin(angle), sin(angle), cos(angle));

}

​

/*

 *  Calculates the diffuse factor produced by the light illumination

 */

float diffuseFactor(vec3 normal, vec3 light_direction) {

    float df = dot(normalize(normal), normalize(light_direction));

​

    if (gl_FrontFacing) {

        df = -df;

    }

​

    return max(0.0, df);

}

​

/*

 * The main program

 */

void main() {

    // Use the mouse position to define the light direction

    vec2 u_resolution = vec2(960., 1600.);

    vec2 u_mouse = vec2(0., 0.);

​

    float min_resolution = min(u_resolution.x, u_resolution.y);

    vec3 light_direction = -vec3((u_mouse - 0.5 * u_resolution) / min_resolution, 0.5);

​

    // Calculate the light diffusion factor

    vec3 v_normal = vec3(0.25,0.25,0.);

    float df = diffuseFactor(v_normal, light_direction);

​

    // Move the pixel coordinates origin to the center of the screen

    vec2 pos = gl_FragCoord.xy - 0.5 * u_resolution;

​

    // Rotate the coordinates 20 degrees

    pos = rotate(radians(20.0)) * pos;

​

    // Define the grid

    float grid_step = 12.0;

    vec2 grid_pos = mod(pos, grid_step);

​

    // Calculate the surface color

    float surface_color = 1.0;

    surface_color -= circle(grid_pos, vec2(grid_step / 2.0), 0.8 * grid_step * pow(1.0 - df, 2.0));

    surface_color = clamp(surface_color, 0.05, 1.0);

​

    // Fragment shader output

    gl_FragColor = vec4(vec3(surface_color), 1.0);

}

`;

​