let num_boxes, box_w;

let grow;

let grow_max;

​

let rgb_fs, tv_fs, pix_fs;

function setup() {

  createCanvas(800, 800, WEBGL);

  num_boxes = 11;

  box_w = width / num_boxes;

​

  grow = 2;

  grow_max = 0;

​

  grid = [];

  for (let z = 0; z < num_boxes - 1; z++) {

    for (let r = 0; r < num_boxes - 1; r++) {

      for (let c = 0; c < num_boxes - 1; c++) {

        let s = max(1, min(c % 3, r % 3) * 15);

        if (grow_max < s) grow_max = s;

        grid.push({

          x: c * box_w + box_w - width / 2,

          y: r * box_w + box_w - height / 2,

          z: z * box_w + box_w,

          s: s,

        });

      }

    }

  }

  rgb_fs = createFilterShader(rgb_src);

  tv_fs = createFilterShader(tv_noise_src);

  pix_fs = createFilterShader(pix_src);

​

  frameRate(12);

}

​

function draw() {

  background(20);

  orbitControl();

  ambientLight(20);

​

  pointLight(

    255,

    0,

    0, // color

    40,

    -40,

    0 // position

  );

​

  directionalLight(

    0,

    255,

    0, // color

    1,

    1,

    0 // direction

  );

​

  fill(0);

  for (let g of grid) {

    push();

    fill(map(g.s, 1, grow_max, 40, 255));

    normalMaterial();

    // ambientMaterial(255, 0, 0);

    // emissive materials show the same color regardless of light

    // emissiveMaterial(0, 255, 0);

    // specular materials reflect the color of the light source

    // and can vary in 'shininess'

    shininess(10);

    // specularMaterial(0, 0, 255);

    translate(g.x, g.y, g.z);

    // circle(g.x, g.y, g.s);

    rotateX(millis() * 0.001);

    rotateY(millis() * 0.001);

    sphere(g.s);

    g.s += grow;

    if (g.s > grow_max) g.s = 1;

    pop();

  }

  rgb_fs.setUniform("_noise", 0.05);

  rgb_fs.setUniform("_g_noise", 0.005);

  tv_fs.setUniform("_noise", random());//tv_n);

  pix_fs.setUniform("_size", 250.);

  filter(pix_fs)

  filter(rgb_fs);

}

​

// 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.g = pow(step(0.5,col.g),_g_noise);

}

​

  float alpha = 1.0;//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;

​

void main() {

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

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

    float 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://p5js.org/examples/color-linear-gradient.html

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

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

      g.stroke(c);

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

      g.stroke(c);

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

    }

  }

}

​

function keyPressed() {

  if (key == "s") saveGif("test.gif", 4);

  if (key == "p") save("test.png");

}

​

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

}

`;

​

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

}

`;