const Y_AXIS = 1;

const X_AXIS = 2;

​

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

​

let rgb_fs, tv_fs, dot_fs, pix_fs,wtr_fs;

let gfx;

​

let capture;

​

function setup() {

  // createCanvas(960, 1800);

  createCanvas(600, 800);

  gfx = createGraphics(width, height);

  nrows = 20;

  ncols = 15;

​

  // background(color(255, 0, 255));

​

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

  let grid = [];

​

  let sep_w = width * random(0.05, 0.005);

  let sep_h = height * random(0.05, 0.005);

  let sep_width = sep_w * (ncols + 1);

  let sep_height = sep_h * (nrows + 1);

​

  let base_width = (width - sep_width) / ncols;

  let base_height = (height - sep_height) / nrows;

​

  let cx = sep_w;

  let cy = sep_h;

​

  setGradient(

    0,

    0,

    width,

    height,

    color(random(vaporwave)),

    color(random(vaporwave)),

    Y_AXIS

  );

  gfx.noStroke();

​

  for (let r = 0; r < nrows; r++) {

    grid[r] = [];

    for (let c = 0; c < ncols; c++) {

      grid[r][c] = { x: cx, y: cy, on: true, w: base_width, h: base_height, col: color(random(255)) };

      cx += base_width + sep_w;

    }

    cy += base_height + sep_h;

    cx = sep_w;

  }

​

  let n_to_fill = int(random(0, 10));

  while (n_to_fill > 0) {

    let rid = int(random(0, nrows - 3));

    let cid = int(random(0, ncols - 3));

​

    if (grid[rid][cid].on && grid[rid+1][cid].on && grid[rid][cid+1].on && grid[rid+1][cid+1].on) {

      grid[rid][cid + 1].on = false;

      grid[rid + 1][cid].on = false;

      grid[rid + 1][cid + 1].on = false;

      grid[rid][cid].col = color(random(vaporwave));

      grid[rid][cid].w = base_width*2+sep_w;

      grid[rid][cid].h = base_height*2+sep_h;

      n_to_fill--;

    }

  }

  n_to_fill = int(random(0, 10));

  while (n_to_fill > 0) {

    let rid = int(random(0, nrows - 1));

    let cid = int(random(0, ncols - 1));

    if (grid[rid][cid].on) {

      let dir = random([true,false]);

      if (dir) {

        grid[rid][cid].w = grid[rid][cid].w + random(0.0, sep_w);

      } else {

        grid[rid][cid].h = grid[rid][cid].h + random(0.0, sep_h);

      }

      n_to_fill--;

    }

  }

​

  for (let r = 0; r < nrows; r++) {

    for (let c = 0; c < ncols; c++) {

      let g = grid[r][c];

      if (g.on) {

        gfx.fill(g.col);

        gfx.rect(g.x, g.y, g.w, g.h);

      }

    }

  }

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

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

//   image(gfx, 0, 0);

  tv_fs.setUniform("_noise", 0.05);

  pix_fs.setUniform("_noise", 300);

  rgb_fs.setUniform("_noise", 0.0);

  rgb_fs.setUniform("_g_noise", 0.0);

//   filter(rgb_fs);

//   filter(pix_fs);

//   filter(tv_fs);

  // filter(wtr_fs);

  // noLoop();

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

  // capture = createCapture(VIDEO);

  // capture.size(640, 480);//320, 240);

  // capture.hide();

  imageMode(CENTER);

}

​

let t =0;

function draw() {

  image(gfx, width/2, height/2);

  // tint(255,127)

  // image(capture, width/2, height/2);

  let x=  width/2+50*cos(t);

  let y = height/2+50*sin(t);

  circle(x,y,50);

  t+=PI/32;

  tv_fs.setUniform("_noise", 0.05); //random(0.0,0.05));

  pix_fs.setUniform("_noise", 300);

  rgb_fs.setUniform("_noise", 0.005);

  rgb_fs.setUniform("_g_noise", 0.005);

  filter(rgb_fs);

  // filter(pix_fs);

  filter(tv_fs);

}

​

// https://p5js.org/examples/color-linear-gradient.html

function setGradient(x, y, w, h, c1, c2, axis) {

  gfx.noFill();

​

  if (axis === Y_AXIS) {

    // Top to bottom gradient

    for (let i = y; i <= y + h; i++) {

      let inter = map(i, y, y + h, 0, 1);

      let c = lerpColor(c1, c2, inter);

      gfx.stroke(c);

      gfx.line(x, i, x + w, i);

    }

  } else if (axis === X_AXIS) {

    // Left to right gradient

    for (let i = x; i <= x + w; i++) {

      let inter = map(i, x, x + w, 0, 1);

      let c = lerpColor(c1, c2, inter);

      gfx.stroke(c);

      gfx.line(i, y, i, y + h);

    }

  }

}

​

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

​

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

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

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

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

​

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

}

`;