let box_off;

let boxes = [];

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

];

​

let gfx;

let rgb_fs, tv_fs, pix_fs;

​

let sep = false;

​

function setup() {

  createCanvas(800, 800, WEBGL);

  box_h = height * 0.001;

  box_off = width * 0.1;

​

  gfx = createGraphics(width, height);

​

  let cid = 0;

  for (let y = -box_h; y < height + box_h; y += box_h) {

    boxes.push({

      x: 0,

      y: y,

      c: vaporwave[cid],

      d: "up",

      w: width,

    });

    cid++;

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

  }

​

  cid = 0;

  for (let y = -box_h; y < height + box_h; y += box_h) {

    boxes.push({

      x: 0,

      y: y,

      c: vaporwave[cid],

      d: "down",

      w: width, // - 2 * box_off,

    });

    cid++;

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

  }

​

  // textureMode(NORMAL)

​

  // saveGif("t.gif", 8);

​

  rgb_fs = createFilterShader(rgb_src);

  tv_fs = createFilterShader(tv_noise_src);

  pix_fs = createFilterShader(pix_src);

​

  frameRate(30);

  // saveGif("t.loop.gif", 12.5);

}

​

function draw() {

  background(220);

  gfx.background(220);

​

  // orbitControl();

  ambientLight(220);

​

  noStroke();

  gfx.noStroke();

  for (let b of boxes) {

    if (b.d == "up") {

      fill(color(b.c));

      rect(b.x - width / 2, b.y - height / 2, b.w, box_h);

​

      b.y -= box_h / 4;

      if (b.y < -box_h) b.y = height + box_h;

    } else {

      gfx.fill(color(b.c));

      gfx.rect(b.x, b.y, b.w, box_h);

​

      b.y += box_h / 8;

      if (b.y > height + box_h) b.y = -box_h;

    }

  }

​

  texture(gfx);

  push();

​

  // normalMaterial();

  // // ambient materials reflect under any light

  // ambientMaterial(255, 0, 0);

  // // emissive materials show the same color regardless of light

  // emissiveMaterial(245, 255, 0);

  // // specular materials reflect the color of the light source

  // // and can vary in 'shininess'

  // shininess(10);

  // specularMaterial(0, 220, 255);

​

  let r = millis() * 0.0005;

  rotateX(r);

  rotateY(r);

  rotateZ(r);

  box(width / 3);

  pop();

​

  if (frameCount % 250 == 0) sep = !sep;

  if (shaderson) {

    if (!sep) {

      rgb_fs.setUniform("_noise", .005); //random([0.01, -0.01]));

      rgb_fs.setUniform("_g_noise", .0002); //random([-0.002, 0.002]));

      rgb_fs.setUniform("fractalize", false); //random([false, true]));

    } else {

      rgb_fs.setUniform("_noise", 1.005); //random([0.01, -0.01]));

      rgb_fs.setUniform("_g_noise", 1.0002); //random([-0.002, 0.002]));

      rgb_fs.setUniform("fractalize", true); //random([false, true]));

    }

    tv_fs.setUniform("_noise", 0.001);

    pix_fs.setUniform("_size", 450);

​

    filter(tv_fs);

    filter(rgb_fs);

    filter(pix_fs);

  }

​

  // if (r > TWO_PI) {

  //   console.log(frameCount);

  //   noLoop();

  // }

  // fill(color(0, 0, 0, 80));

  // rect(box_off, box_off, width - 2 * box_off, height - 2 * box_off);

}

let shaderson = true;

function keyPressed() {

  if (key == "s") shaderson = !shaderson;

}

​

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

}

`;

​