drawing_zoom.pde

PGraphics pg;
PVector pos;
float zoom = 1;

void setup() {
  size(800, 800);
  PImage img = loadImage("https://images.freeimages.com/images/large-previews/975/map-1483450.jpg");
  pg = createGraphics(width, height);
  pg.beginDraw();
  pg.image(img, 0, 0);
  pg.endDraw();
  pos = new PVector(width/2, height/2);
}

void draw() {
  background(0.5);
  pushMatrix();
    translate(pos.x, pos.y);
    scale(zoom);
    imageMode(CENTER);
    image(pg, 0, 0);
  popMatrix();
  textSize(30);
  text("zoom: " + nf(zoom, 0, 0) + "\n" + pos.toString(), 20, 40);
}

void mouseWheel(MouseEvent event) {
  // could we zoom towards the cursor here?
  int dir = event.getCount();
  if (dir > 0) {
    zoom *= 0.8;
  }
  if (dir < 0) {
    zoom /= 0.8;
  }
}

void keyPressed(){
  if(key == 'w'){
    pos.y += zoom * 100;  
  }
  if(key == 's'){
    pos.y -= zoom * 100;  
  }
  if(key == 'a'){
    pos.x += zoom * 100;  
  }
  if(key == 'd'){
    pos.x -= zoom * 100;  
  }
  if(key == 'r'){
    // re-center
    pos.x = width/2;
    pos.y = height/2;
  }
}

void mousePressed() {
  pg.beginDraw();
  pg.rectMode(CENTER);
   // but where should the rect fall when the zoom is not 1?
  float clickedCanvasX = mouseX - pos.x + width /2;
  float clickedCanvasY = mouseY - pos.y + height/2;
  pg.rect(clickedCanvasX, clickedCanvasY, 20, 20);
  pg.endDraw();
}