​

const zoom_diff = 0.1;

const zoom_min = 0.1;

const zoom_max = 3;

​

let camera;

let zoom = 1;

​

function setup() {

  createCanvas(400, 400);

  camera = createVector(0, 0);

}

​

function draw() {

  background(220);

  translate(camera);

  scale(zoom);

  // insert bunch of drawing routines in classes

  push();

  fill(255);

  rect(0, 0, 100, 100);

  rect(100, 100, 100, 100);

  pop();

  push();

  fill(0);

  textSize(12 / zoom);

  text(Math.round((mouseX - camera.x) / zoom) + ", " + Math.round((mouseY - camera.y) / zoom), 

       (mouseX - camera.x) / zoom, 

       (mouseY - camera.y) / zoom);

  pop();

}

​

function mouseDragged() {

  camera.add(createVector(movedX, 

                          movedY));

  return false;

}

​

function mouseWheel(event) {

  if (event.deltaY > 0) {

    zoom -= zoom_diff;

  } else {

    zoom += zoom_diff;

  }

  zoom = Math.max(Math.min(zoom, zoom_max), zoom_min);

  return false;

}

​