const NUM_BOXES = 10;

let boxes = [];

let box_w, off;

let cam;

const delta = .01;

​

let rgb_fs, dither_fs, tv_fs;

​

function setup() {

  createCanvas(DIM, DIM, WEBGL);

  cam = createCamera();

​

  cam.setPosition(DIM * 1.5, -DIM * 0.5, DIM * 1.5);

​

  // Point the camera at the origin.

  cam.lookAt(0, 0, 0);

​

  box_w = DIM / NUM_BOXES;

  off = box_w * 0.85;

  let _x = -off;

  let _y = -off;

  let _z = -2 * off;

​

  for (let z = 0; z < 10; z++) {

    for (let x = 0; x < 10; x++) {

      boxes.push({ x: _x, y: _y, z: _z, f: 255 });

      _x += off;

    }

    _x = -off;

    _z += off;

  }

​

  // for (let z = 0; z < 3; z++) {

  //   for (let y = 0; y < 3; y++) {

  //     for (let x = 0; x < 3; x++) {

  //       boxes.push({ x: _x, y: _y, z: _z });

  //       _x += off;

  //     }

  //     _y += off;

  //     _x = -off;

  //   }

  //   _z += off;

  //   _y = -off;

  // }

​

  rgb_fs = createFilterShader(rgb_src);

  dither_fs = createFilterShader(dither_src);

  tv_fs = createFilterShader(tv_noise_src);

​

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

}

​

let toggle = true;

function draw() {

  if (!paused) {

    // background(color(20,20,20,1));

​

    // cam.roll(delta);

    orbitControl();

​

    ambientLight(140);

​

    pointLight(

      255,

      0,

      0, // color

      DIM / 2,

      DIM / 2,

      DIM / 2 // position

    );

​

    directionalLight(

      220,

      220,

      220, // color

      0,

      1,

      0 // direction

    );

​

    let locX = DIM * 0.2;

    let locY = DIM * 0.2;

    spotLight(

      100,

      100,

      255, // color

      locX,

      locY,

      200, // position

      -locX,

      -locY,

      -200, // direction

      PI / 3 // radius of the spotlight cone

    );

​

    // rotateX(millis() * 0.0001);

    // rotateY(delta * millis());

    // rotateZ(millis() * 0.0001);

​

    for (let b of boxes) {

      push();

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

      let n = noise(b.x * 0.01, b.y * 0.01, frameCount * 0.01);

      let o = map(n, 0.0, 1.0, 1.0, 0.05);

      // let c = map(n, 0.0, 1.0, 0, 255);

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

​

      normalMaterial();

      // ambient materials reflect under any light

      ambientMaterial(255, 0, 255);

      // emissive materials show the same color regardless of light

      emissiveMaterial(22, 255, 55);

      // specular materials reflect the color of the light source

      // and can vary in 'shininess'

      shininess(90);

      specularMaterial(255, 0, 255);

      // fill(color(b.f));

      box(box_w * o, box_w * o, box_w * o);

      pop();

    }

​

    if (frameCount % 20 == 0) {

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

        boxes[i].y += off;

        if (boxes[i].y > 3 * off) boxes.splice(i, 1);

      }

​

      let _x = -off;

      let _y = -off;

      let _z = -2 * off;

      let c;

      if (toggle) c = 220;

      else c = 255;

      for (let z = 0; z < 10; z++) {

        for (let x = 0; x < 10; x++) {

          if (frameCount % 100 == 0) boxes.push({ x: _x, y: _y, z: _z, f: c });

          else if (random() > 0.9) boxes.push({ x: _x, y: _y, z: _z, f: c });

          _x += off;

        }

        _x = -off;

        _z += off;

      }

​

      toggle = !toggle;

    }

    //     // next row

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

    //       if (boxes.length <= 400)

    //         boxes.push({ x: boxes[i].x, y: -off, z: boxes[i].z, f:boxes[i].f });

​

    //       boxes[i].y += off / 2;

    //       if (boxes[i].y > height / 2) boxes.splice(i, 1);

    //     }

    //   }

    // next row

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

    //   if (boxes.length < 500)

    //   boxes.push({x:boxes[i].x, y:boxes[i].y, z: boxes[i].z});

    //   boxes[i].y+=off/2;

    //   if (boxes[i].y > height/2) boxes.splice(i,1);

    // }

    // console.log(boxes.length)

​

    tv_fs.setUniform("_noise", 0.01);

    filter(tv_fs);

    rgb_fs.setUniform("_noise", 0.01);

    rgb_fs.setUniform("_g_noise", 0.01);

​

    if (frameCount % 100 == 0) toggle_frac = !toggle_frac;

    if (toggle_frac) rgb_fs.setUniform("fractalize", true);

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

​

    filter(rgb_fs);

    filter(dither_fs);

  }

}

​

let paused = false;

function keyPressed() {

  if (key == "p") paused = !paused;

  if (key == "s") save("boxes.png");

}

let toggle_frac = false;

​

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

}

`;

​

// 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.*tan(col));//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 = 0.25;//1.0;

 //float alpha = clamp(pow(noise, 2.0),0.0, 0.5);

  gl_FragColor = vec4(col, alpha);

}`;

​

// dither - https://medium.com/the-bkpt/dithered-shading-tutorial-29f57d06ac39

// http://alex-charlton.com/posts/Dithering_on_the_GPU/

// https://github.com/hughsk/glsl-dither/blob/master/example/index.frag

let dither_src = `precision mediump float;

varying vec2 vTexCoord;

uniform sampler2D tex0;

uniform float _noise;

uniform float indexMatrix4x4[16];

​

mat4 bayer = mat4(

  -0.5, 0.0, -0.375, 0.125,

  0.25, -0.25, 0.375, -0.125,

  -0.3125, 0.1875, -0.4375, 0.0625,

  0.4375, -0.0625, 0.3125, -0.1875

); 

​

// https://github.com/hughsk/glsl-luma/blob/master/index.glsl

float luma(vec3 color) {

  return dot(color, vec3(0.299, 0.587, 0.114));

}

// https://github.com/hughsk/glsl-luma/blob/master/index.glsl

float luma(vec4 color) {

  return dot(color.rgb, vec3(0.299, 0.587, 0.114));

}

​

float dither4x4(vec2 position, float brightness) {

  int x = int(mod(position.x, 4.0));

  int y = int(mod(position.y, 4.0));

  int index = x + y * 4;

  float limit = 0.0;

​

  if (x < 8) {

    if (index == 0) limit = 0.0625;

    if (index == 1) limit = 0.5625;

    if (index == 2) limit = 0.1875;

    if (index == 3) limit = 0.6875;

    if (index == 4) limit = 0.8125;

    if (index == 5) limit = 0.3125;

    if (index == 6) limit = 0.9375;

    if (index == 7) limit = 0.4375;

    if (index == 8) limit = 0.25;

    if (index == 9) limit = 0.75;

    if (index == 10) limit = 0.125;

    if (index == 11) limit = 0.625;

    if (index == 12) limit = 1.0;

    if (index == 13) limit = 0.5;

    if (index == 14) limit = 0.875;

    if (index == 15) limit = 0.375;

  }

​

  return brightness < limit ? 0.0 : 1.0;

}

​

vec3 dither4x4(vec2 position, vec3 color) {

  return color * dither4x4(position, luma(color));

}

​

vec4 dither4x4(vec2 position, vec4 color) {

  return vec4(color.rgb * dither4x4(position, luma(color)), 1.0);

}

​

float dither8x8(vec2 position, float brightness) {

  int x = int(mod(position.x, 8.0));

  int y = int(mod(position.y, 8.0));

  int index = x + y * 8;

  float limit = 0.0;

​

  if (x < 8) {

    if (index == 0) limit = 0.015625;

    if (index == 1) limit = 0.515625;

    if (index == 2) limit = 0.140625;

    if (index == 3) limit = 0.640625;

    if (index == 4) limit = 0.046875;

    if (index == 5) limit = 0.546875;

    if (index == 6) limit = 0.171875;

    if (index == 7) limit = 0.671875;

    if (index == 8) limit = 0.765625;

    if (index == 9) limit = 0.265625;

    if (index == 10) limit = 0.890625;

    if (index == 11) limit = 0.390625;

    if (index == 12) limit = 0.796875;

    if (index == 13) limit = 0.296875;

    if (index == 14) limit = 0.921875;

    if (index == 15) limit = 0.421875;

    if (index == 16) limit = 0.203125;

    if (index == 17) limit = 0.703125;

    if (index == 18) limit = 0.078125;

    if (index == 19) limit = 0.578125;

    if (index == 20) limit = 0.234375;

    if (index == 21) limit = 0.734375;

    if (index == 22) limit = 0.109375;

    if (index == 23) limit = 0.609375;

    if (index == 24) limit = 0.953125;

    if (index == 25) limit = 0.453125;

    if (index == 26) limit = 0.828125;

    if (index == 27) limit = 0.328125;

    if (index == 28) limit = 0.984375;

    if (index == 29) limit = 0.484375;

    if (index == 30) limit = 0.859375;

    if (index == 31) limit = 0.359375;

    if (index == 32) limit = 0.0625;

    if (index == 33) limit = 0.5625;

    if (index == 34) limit = 0.1875;

    if (index == 35) limit = 0.6875;

    if (index == 36) limit = 0.03125;

    if (index == 37) limit = 0.53125;

    if (index == 38) limit = 0.15625;

    if (index == 39) limit = 0.65625;

    if (index == 40) limit = 0.8125;

    if (index == 41) limit = 0.3125;

    if (index == 42) limit = 0.9375;

    if (index == 43) limit = 0.4375;

    if (index == 44) limit = 0.78125;

    if (index == 45) limit = 0.28125;

    if (index == 46) limit = 0.90625;

    if (index == 47) limit = 0.40625;

    if (index == 48) limit = 0.25;

    if (index == 49) limit = 0.75;

    if (index == 50) limit = 0.125;

    if (index == 51) limit = 0.625;

    if (index == 52) limit = 0.21875;

    if (index == 53) limit = 0.71875;

    if (index == 54) limit = 0.09375;

    if (index == 55) limit = 0.59375;

    if (index == 56) limit = 1.0;

    if (index == 57) limit = 0.5;

    if (index == 58) limit = 0.875;

    if (index == 59) limit = 0.375;

    if (index == 60) limit = 0.96875;

    if (index == 61) limit = 0.46875;

    if (index == 62) limit = 0.84375;

    if (index == 63) limit = 0.34375;

  }

​

  return brightness < limit ? 0.0 : 1.0;

}

​

vec3 dither8x8(vec2 position, vec3 color) {

  return color * dither8x8(position, luma(color));

}

​

vec4 dither8x8(vec2 position, vec4 color) {

  return vec4(color.rgb * dither8x8(position, luma(color)), 1.0);

}

​

float dither2x2(vec2 position, float brightness) {

  int x = int(mod(position.x, 2.0));

  int y = int(mod(position.y, 2.0));

  int index = x + y * 2;

  float limit = 0.0;

​

  if (x < 8) {

    if (index == 0) limit = 0.25;

    if (index == 1) limit = 0.75;

    if (index == 2) limit = 1.00;

    if (index == 3) limit = 0.50;

  }

​

  return brightness < limit ? 0.0 : 1.0;

}

​

vec3 dither2x2(vec2 position, vec3 color) {

  return color * dither2x2(position, luma(color));

}

​

vec4 dither2x2(vec2 position, vec4 color) {

  return vec4(color.rgb * dither2x2(position, luma(color)), 1.0);

}

​

​

void main() {

  vec2 uv = vTexCoord;

  //vec3 col;

  //vec4 _col = texture2D(tex0, uv);

  //col = _col.rgb;

​

  //col = dither(col);

  //gl_FragColor = vec4(col, 1.0);

​

  gl_FragColor = dither4x4(gl_FragCoord.xy, texture2D(tex0, uv));

}`;

​