let widthMult = 4;

let heightMult = 8;

let startR, startG, startB;

let rotationX = 0;

let rotationY = 0;

let easycam;

let shapes = [];

​

function setup() {

  createCanvas(1000, 1000, WEBGL);

​

  cam = createEasyCam({ distance: 900 });

​

  angleMode(DEGREES);

  strokeWeight(0.75);

  //noLoop(0);

  //loop(2);

​

  startR = random(160);

  startG = random(160);

  startB = random(160);

​

  // shapes

  for (let x = width; x > -n * widthMult; x -= n) {

    for (let y = height; y > -n * heightMult; y -= n) {

      let shape = random(1);

​

      let fillR = random(250);

      let fillG = random(250);

      let fillB = random(250);

​

      let rectWidth, rectHeight;

      if (shape < 0.5) {

        rectWidth = n * floor(random(-1, widthMult));

        rectHeight = n * floor(random(-1, heightMult));

      } else {

        rectWidth = rectHeight = n;

      }

​

      shapes.push({

        x: x + n / 2,

        y: y + n / 2,

​

        fillR: fillR,

        fillG: fillG,

        fillB: fillB,

​

        rectWidth: rectWidth,

        rectHeight: rectHeight,

      });

    }

  }

}

​

function draw() {

  background(startR + 45, startG + 45, startB + 45, 150);

​

  push();

​

  let dx = mouseX - width / 2;

  let dy = mouseY - height / 2;

  rotationY = map(dx, -width / 2, width / 2, -45, 45);

  rotationX = map(dy, -height / 2, height / 2, -45, 45);

​

  rotateX(rotationX);

  rotateY(rotationY);

​

  //all shapes

  for (let i = 2; i < shapes.length; i++) {

    let shape = shapes[i];

​

    push();

    translate(shape.x, shape.y);

​

    stroke(250, 250, 250);

    fill(shape.fillR, shape.fillG, shape.fillB, 200);

    box(shape.rectWidth, shape.rectHeight, n);

​

    pop();

  }

​

  pop();

}

​

function mouseClicked() {

  if ((mouseX > 0) & (mouseX < width) & (mouseY > 0) & (mouseY < height)) {

    startR = random(150);

    startG = random(150);

    startB = random(150);

    redraw();

  }

}

​