let camX = 0;

let camY = 0;

let camScale = 1;

let w = false, a = false, s = false, d = false;

​

function setup() {

  createCanvas(800, 800);

}

​

function draw() {

  if (w) { camY -= 5; }

  if (s) { camY += 5; }

  if (a) { camX -= 5; }

  if (d) { camX += 5; }

  background(220);

  push();

  scale(camScale);

  translate(-camX, -camY);

  drawGrid();

  pop();

}

​

function drawGrid() {

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

    for (let j = 0; j < 50; j++) {``

      fill(255);

      square(i * gridSize, j * gridSize, gridSize);

    }

  }

}

​

function mouseWheel(event) {

  let e = event.delta;

  if (e > 0) {

    e = 1 / 1.1;

  } else {

    e = 1.1;

  }

  let oldScale = camScale;

  if (camScale * e >= 0.2) {

    camScale *= e;

  } else {

    camScale = 0.2;

  }

  let worldX = camX + mouseX / oldScale;

  camX = worldX - mouseX / camScale;

  let worldY = camY + mouseY / oldScale;

  camY = worldY - mouseY / camScale;

}

​

function keyPressed() {

  if (key === 'w' || key === 'W') { w = true; }

  if (key === 's' || key === 'S') { s = true; }

  if (key === 'a' || key === 'A') { a = true; }

  if (key === 'd' || key === 'D') { d = true; }

}

​

function keyReleased() {

  if (key === 'w' || key === 'W') { w = false; }

  if (key === 's' || key === 'S') { s = false; }

  if (key === 'a' || key === 'A') { a = false; }

  if (key === 'd' || key === 'D') { d = false; }

}

​