PVector screenMouse = new PVector(0,0);
PVector worldMouse = new PVector(0,0);
PVector offset = new PVector(0,0);

void setup(){
  size(800, 800);
  //offset.x = -width/2;
  //offset.y = -height/2;
}

void draw(){
  frameRate(144);
  background(50);

  pushMatrix();
  updateZoom();
  worldRender();
  popMatrix();

  screenRender(); // draw stuff that shouldn't move relative to the screenspace
}

void worldRender() {
  drawGrid(); // draw a grid
  worldCircle(); // draw a circle at mouse's world coords
  offsetLines();
}

void screenRender() {
  screenCircle(); // draw red marker at mouse's screenspace coords
  drawDebug(); // draw a bunch of debug text info
}

//=================================================================
// FUNCTIONS

PVector world = new PVector(0,0);
PVector STW(PVector screen) {
  world.x = (screen.x / zoomScalar) + offset.x;
  world.y = (screen.y / zoomScalar) + offset.y;
  return world;
}

PVector screen = new PVector(0,0);
PVector WTS(PVector world) {
  screen.x = int((world.x - offset.x) * zoomScalar);
  screen.y = int((world.y - offset.y) * zoomScalar);
  return screen;
}

PVector worldMousePreZoom, worldMousePostZoom = new PVector(0,0);
void updateZoom() {
  screenMouse.x = mouseX;
  screenMouse.y = mouseY;
  worldMouse = STW(screenMouse);
  worldMousePreZoom = STW(screenMouse);
  scale(zoomScalar);
  worldMousePostZoom = STW(screenMouse);
  offset.x += (worldMousePreZoom.x - worldMousePostZoom.x);
  offset.y += (worldMousePreZoom.y - worldMousePostZoom.y);
  translate(-offset.x, -offset.y);
}

//=================================================================
// CONTROLS

float zoomRate = 1.1; //
float zoomScalar = 1;
void mouseWheel(MouseEvent event) {
  if (event.getCount() > 0) {
    zoomScalar /= zoomRate;
  }
  if (event.getCount() < 0) {
    zoomScalar *= zoomRate;
  }
}

PVector startPan = new PVector(0,0);
void mousePressed() {
  if (mouseButton == LEFT) {
    startPan.x = mouseX;
    startPan.y = mouseY;
  }
}

void mouseDragged() {
  if (mouseButton == LEFT) {
    offset.x -= (mouseX - startPan.x) / zoomScalar;
    offset.y -= (mouseY - startPan.y) / zoomScalar;
    startPan.x = mouseX;
    startPan.y = mouseY;
  }
}

//==================================================================
// DEBUG STUFF

int markerSize = 10;
void worldCircle() {
  fill(GREEN);
  ellipse(worldMouse.x, worldMouse.y, markerSize*2, markerSize*2);
}
void screenCircle() {
  fill(RED);
  ellipse(mouseX, mouseY, markerSize, markerSize);
}

void offsetLines() {
  textAlign(CENTER);
  stroke(YELLOW);
  fill(YELLOW);
  line(0, 0, offset.x, 0);
  text("offset.x: " + offset.x, offset.x/2, 20);
  line(0, 0, 0, offset.y);
  text("offset.y: " + offset.y, 60, offset.y/2);
  stroke(RED);
  fill(RED);
  line(0, 0, worldMouse.x, 0);
  text("worldMouse.x: " + worldMouse.x, worldMouse.x/2, 20);
  line(worldMouse.x, 0, worldMouse.x, worldMouse.y);
  text("worldMouse.y: " + worldMouse.y, worldMouse.x+90, worldMouse.y/2);
}

void drawGrid() {
  for (int i = 0; i < 8; i++) {
    for (int j = 0; j < 8; j++) {
      fill(40);
      stroke(GREEN);
      rect(800/10*i, 800/10*j, 80, 80);
      fill(50);
    }
  }
}

void drawDebug() {
  fill(YELLOW);
  textAlign(LEFT);
  text("screenMouseX: " + int(screenMouse.x), 10, 20);
  text("screenMouseY: " + int(screenMouse.y), 10, 30);
  text("worldMouseX: " + worldMouse.x, 10, 40);
  text("worldMouseY: " + worldMouse.y, 10, 50);
  text("worldMousePreZoom.x: " + int(worldMousePreZoom.x), 10, 60);
  text("worldMousePreZoom.y: " + int(worldMousePreZoom.y), 10, 70);
  text("worldMousePostZoom.x: " + int(worldMousePreZoom.x), 10, 80);
  text("worldMousePostZoom.y: " + int(worldMousePreZoom.y), 10, 90);
}

//==================================================================
// COLORS

color WHITE = #ffffff;
color YELLOW = #fff700;
color BLACK = #0a0a0a;
color RED = #ff0000;
color GREEN = #0a9600;
color BLUE = #3256a8;
color GREY = #dcdcdc;