// http://codingtra.in

// http://patreon.com/codingtrain

​

// Video: https://youtu.be/H81Tdrmz2LA

​

// Original GIF: https://beesandbombs.tumblr.com/post/149654056864/cube-wave

//Toggle view with mouse press

//Move the mouse arounds the canvas for seeing the dynamics 

let angle = 0;

let w = 24;

let ma;

let maxD;

let quarterPI;

​

function setup() {

  createCanvas(400, 400, WEBGL);

  ma = tan(cos(QUARTER_PI));

  maxD = dist(0, 0, 200, 200);

  quarterPI = QUARTER_PI;

}

​

function draw() {

  background(100);

  ortho(-400, 400, 400, -400, 0, 1000);

  rotateX(ma);

  rotateY(quarterPI);

​

  for (let z = 0; z < height; z += w) {

    for (let x = 0; x < width; x += w) {

      push();

      let d = dist(x, z, width / 2, height / 2);

      let offset = map(d, 0, maxD, -PI, PI);

      let a = angle + offset;

      let h = floor(map(sin(a), -1, 1, 100, 300));

      translate(x - width / 2, 0, z - height / 2);

      normalMaterial();

      box(mouseY + w, mouseX + h, w);

      //rect(x - width / 2 + w / 2, 0, w - 2, h);

      pop();

    }

  }

  angle -= 0.1;

}

​

function mousePressed() {

  ma *= -1;

  quarterPI *= -1;

}