​

let SIZE, CAM;

function setup() {

  colorMode(RGB, 1);

  SIZE = min(windowWidth, windowHeight);

  createCanvas(SIZE, SIZE, WEBGL);

  ortho(-width, width, height, -height, -2 * SIZE, 2 * SIZE);

  CAM = createCamera();

  CAM.camera(

    -1, 1, 1, 

    0, 0, 0,

    0, 0, 1

  )

}

​

let t;

function draw() {

  // orbitControl();

  scale(SIZE);

​

  t = fract(frameCount / FRAMES);

  const mx = mouseX / width;

  t = mx;

  background(0);

​

  noFill();

  strokeWeight(5);

  stroke("red")

  const rows = 10;

  const cols = 10;

  const size = 0.75 / rows;

  const col1 = color(1, 0.5, 0);

  const col2 = color(0.25, 0, 1);

  for (let i=0; i<rows; i++) {

    for (let j=0; j<cols; j++) {

      const x = (i + 0.5) / rows - 0.5;

      const y = (j + 0.5) / cols - 0.5;

      const x_f = i / rows;

      const y_f = j / cols;

      push();

        let w = 1;

        let h = 1;

        let d = 1;

​

        translate(x, y, size * d / 2 - .25);

​

        noFill();

        stroke(1);

        box(w * size, h * size, d * size);

      pop();

      push();

​

      const col = lerpColor(col1, col2, (x_f + 1 - y_f) / 2);

​

        // d = (cosn(x_f + y_f + t) + sinn(y_f + t)) * 5; 

        d = (noise(x + t, y + t)) * 15;

        translate(x, y, size * d / 2 - .25);

​

        const box_scale = .75;

​

        fill(col);

        noStroke();

        box(box_scale * w * size, 

            box_scale * h * size, 

            d * size

        );

        // translate(0, 0, size * d / 2);

        // noFill();

        // stroke("white");

        // box(w * size, 

        //     h * size, 

        //     0 * size

        // );

​

      pop();

​

    }

  }

}

​

const cosn = (v) => cos(v * TAU) * 0.5 + 0.5;

const sinn = (v) => sin(v * TAU) * 0.5 + 0.5;