Zooming into where mouse pointer is

glennmarshall

I'm trying to work out how the user can use the mouse wheel to zoom in and out of the screen with the mouse pointer being the centre of zooming. I nearly have it working, except that after zooming, the screen content follows the pointer around as you move it. I can't work out the math / code to offset this. I need to use the translate / scale functions for my project. Thanks!

void setup(){
  size(500,500);
}

float zoom=1;

void draw(){
  background(200);

  translate(mouseX,mouseY);

  scale(zoom);

  translate(-(mouseX),-(mouseY));

  ellipse(20,200,500,300);
  rect(200,400,300,300);
  ellipse(400,200,100,100);

}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  //println(e);
  zoom-=e/10;

}

KevinWorkman

Can't you store the position of the mouse when you zoom, and then zoom into that instead of the current mouse position?

glennmarshall

funny I tried that - but in my project I'm using the mouse wheel for zooming, and tried using the mouseWheel() method to 'flag' when zooming and store x,y coordinates, but lots of flickering and jumping about - because of how and when mouseWheel() is called probably.. I'll have another go..

glennmarshall

this is the closest I can get it.. It works, but jumps on the first wheel movement, and then works as wanted.. can't get rid of the jumping..

float wheelCount = 0;
float mx=0;
float my=0;
float zoom=1;

void setup() {
  size(500, 500);
}

void draw() {
  background(200);

  if (wheelCount != 0) {
    mx=mouseX;
    my=mouseY;
    zoom-=wheelCount/10;
    wheelCount = 0; 
  }


  translate(mx, my);
  scale(zoom);
  translate(-(mx), -(my));

  ellipse(20, 200, 500, 300);
  rect(200, 400, 300, 300);
  ellipse(400, 200, 100, 100);
}

void mouseWheel(MouseEvent event) {
  wheelCount = event.getCount();
}

Chrisir

In line 16 you have /10 - not sure why

But it would ignore most of the wheel movement or make it weaker

Consider apply an easing for mx,my and zoom

That means that you bot jump there but smoothly walk the values to their new value

I can’t remember it, but in theory, set newMx in line 14 (plus and minus might be wrong: )

mx = mx + (mx-newMx) * 0.1;

0.1 tells how much slower the movement is

glennmarshall

thanks for that - I've actually come up with a better solution anyway - after the user drags / navigates around the image space - that becomes the new centre of focus for zooming - rather than the current mouse pos - is much more intuitive and solves the wheel updating problem :)

Chrisir

Can you please post it