let isMobile = window.matchMedia('(max-width: 1024px)').matches;

let boxSize;

let rowStep;

let colStep;

let rows;

let cols;

​

function updateGrid() {

  boxSize = isMobile ? 40 : 70;

  rowStep = isMobile ? 57 : 100;

  colStep = isMobile ? 49 : 85;

  rows = (isMobile ? 26 : 37) * boxSize;

  cols = (isMobile ? 34 : 14) * boxSize;

}

​

function setup() {

  width = window.innerWidth;

  height = window.innerHeight;

  createCanvas(width, height, WEBGL);

  ortho();

  updateGrid();

}

​

function draw() {

  clear();

  translate(-width / 2 + (boxSize/2), -height / 2 + (boxSize/2), 0);

  background(255);

  let index = 0;

  for(let x = 0; x < rows; x+=rowStep) {

    for(let y = 0; y < cols; y+=colStep) {

      push();

​

      if (index % 2 == 0) {

        translate(x, y);

      } else if (isMobile) {

        translate(x + 29, y);

      } else {

        translate(x + 50, y);

      }

​

      rotateX(mouseY * 0.01);

      rotateY(mouseX * 0.01);

      box(boxSize);

      pop();

​

      index++;

    }

  }

}

​

function windowResized() {

  isMobile = window.matchMedia('(max-width: 1024px)').matches;

  resizeCanvas(width, height);

  updateGrid();

  console.log(_renderer);

  if (_renderer.drawingContext instanceof WebGLRenderingContext) {

    ortho();

  }

}