Ortho Boxes

let grid, NUM = 20;

​

function setup() {

  createCanvas(S=(windowWidth, windowHeight), S, WEBGL);

  background(2, 2, 12);

  const pal = palettes[0];

  grid = arrCreate2D(NUM, NUM);

  const s = S / NUM;

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

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

      const pos = {

        x: map(i, 0, NUM-1, -S/2, S/2),

        y: 0,

        z: map(j, 0, NUM-1, -S/2, S/2)

      }

      const sze = {

        x: s * 0.95, 

        y: s * random(0.5, 1.5), 

        z: s * 0.95

      }

      const clr = random(pal); // color(128 + 128*noise(S+S+pos.x/123, S+S+S+pos.y/23));

      grid[j][i] = new Block(pos, sze, clr);

    }

  }

}

​

function draw() {

  background(2, 2, 12);

  // rotateX(-0.75)

  // rotateY(-0.05)

  orbitControl();

  camera(0, -800, 100, 0, 0, 0)

  // lights();

  // const sunPos = createVector(sin(frameCount/123)*S*10, 10*S, map(mouseX, 0, width, -100, 100)*S);

  // pointLight(color(255, 255, 255), sunPos);

  // spotLight(color, position, direction, [angle], [concentration])

  const lpX = width/2; // mouseX

  const sunPos = createVector(sin(frameCount/123)*S*10, 10*S, map(lpX, 0, width, -10, 10)*S);

  spotLight(color(255, 255, 255), sunPos, sunPos.copy().normalize().mult(-1))

  push();

  translate(sunPos.x, sunPos.y, sunPos.z)

  sphere(S/4);

  pop();

  ortho();

  specularMaterial(255);

  shininess(100);

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

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

      grid[j][i].show();

    }

  }

}

​

function arrCreate2D(x, y, val = 0) {

  let arr = [];

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

    arr[j] = [];

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

      arr[j][i] = val;

    }

  }

  return arr;

}