let vaporwave = [

  "#000000",

  "#ff71ce",

  "#01cdfe",

  "#05ffa1",

  "#b967ff",

  "#fffb96",

  "",

];

let rgb_fs, tv_fs, dot_fs, pix_fs, wtr_fs;

​

let fps = 12;

let secs = 12;

let frames;

P5Capture.setDefaultOptions({

  format: "webm", //"mp4",

  framerate: fps,

  quality: 1.0,

  width: 1280,

});

let capture;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  num_boxes = 40;

  frames = secs * fps;

​

  windowResized();

  noStroke();

​

  boxes = [];

  let cid = 0;

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

    boxes.push({ cid: cid });

    cid++;

    if (cid > vaporwave.length - 1) cid = 0;

  }

​

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

​

  textAlign(CENTER, CENTER);

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

​

  capture = P5Capture.getInstance();

  // capture.start();

}

​

function draw() {

  background(color(20, 20, 20, 90));

​

  textAlign(CENTER,CENTER);

  fill(255);

  text("nihilistic", width / 2, height / 2 - text_size / 2);

  text("tendencies", width / 2, height / 2 + text_size / 2);

​

  if (random() > 0.75) {

    textAlign(RIGHT);

  text("LOVE", width, height / 2 - text_size / 2);

  text("ALL", width / 2, height / 2 + text_size / 2);

  }

  let x = offset;

  let a = random(120, 220);

  // for (let b of boxes) {

  for (let i = 0; i < boxes.length; i++) {

    let b = boxes[i];

    let col = color(vaporwave[b.cid]);

    col.setAlpha(120);

    fill(col);

    rect(x, offset, box_w, height - 2 * offset);

​

    if (i % 2 == 0) {

      fill(20);

      rect(x - 2, box_w + offset, box_w + 4, box_w);

      rect(x - 2, height - offset - box_w * 2, box_w + 4, box_w);

    }

​

    x += box_w + offset;

  }

​

  pix_fs.setUniform("_noise", 250);

  filter(pix_fs);

​

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

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

​

  rgb_fs.setUniform("_noise", 0.01 * cos(frameCount / 10)); //0.01);

  rgb_fs.setUniform("_g_noise", 0.002);

  tv_fs.setUniform("_noise", 0.1);

  // wtr_fs.setUniform("_noise", 0.1);

  //   wtr_fs.setUniform("_strength", 5.1);

​

  // rgb_fs.setUniform("fractalize", true);

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

  // filter(wtr_fs);

  filter(rgb_fs);

  filter(tv_fs);

  if (frameCount > frames) {

    console.log("done");

    capture.stop();

    noLoop();

  }

  // }

}

​

function windowResized() {

  resizeCanvas(1280, 720); //windowWidth, windowHeight);

​

  // console.log(windowWidth, windowHeight);

​

  offset = width * 0.01;

  let rem_w = width - offset * (num_boxes + 1);

  box_w = rem_w / num_boxes;

  text_size = width * 0.15;

  textSize(text_size);

}

​

function keyPressed() {

  if (key == "s") {

    saveGif("rects.gif", 6);

  }

}

​

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

}

`;

​