zoom centered on mouse coordinates, in conjunction with zoom on the center of the screen

Programming Questions

kylebebak

zoom centered on mouse coordinates, in conjunction with zoom on the center of the screen

in Programming Questions • 1 year ago

Hey all,

I'm trying to get write a sketch which will allow me to combine zooming in and out on the center of the screen with "minus" and "equals" with zooming in on the mouse coordinates of the screen with a double click. I have two problems.

1) Zooming in on the center of the screen works fine, but when it's combined with zooming in on the mouse coordinates it doesn't work.

2) Zooming in on the mouse coordinates only _sort of_ works if not used in conjunction with the center of screen zoom. By sort of I mean if I choose one spot on the screen to zoom towards and keep zooming on that spot, it works. However, if I zoom on one spot and then on another the second zoom will not zoom towards the second spot I've chosen. If I leave the third zoom in the same spot as the second zoom, the third zoom _will_ zoom in on the correct spot. So it's the change from one zoom location to another that's causing problems.

By the way, with mouse zoom, I don't want to move the target of the zoom to center of the screen--I want the target of the zoom to have the same coordinates on the screen as it did before the zoom. When it works it's currently doing this, and this is one thing I don't want to change.

Thanks for the help!

~~~~~

Code:

//a test sketch to get zoom to work
//scale values for mouse and keys, translate values
float scmouse=1;
float sckeys=1;
float Xmouse=width/2;
float Ymouse=height/2;
float tx = 0, ty = 0;
void setup() {
size(500, 500);
}
void draw() {
background(0);
if (keyPressed) {
//= and - to zoom in and out on center of screen
if (key == '-') sckeys *= 1/1.05;
if (key == '=') sckeys *= 1.05;
//r to reset all zooms and translates
if (key == 'r') {
sckeys=1;
scmouse=1;
tx=0;
ty=0;
}
}
/*this code works it not used in conjunction with the mouse zoom
it zooms in and out on the center of the screen
*/
translate(width/2, height/2);
scale(sckeys);
translate(-width/2, -height/2);
/*Xmouse and Ymouse are just mouseX and mouseY constrained to the screen.
This code _sort of_ works if not used in conjunction with the key zoom
written right above. By sort of I mean if I choose one spot on the screen
to zoom towards and keep zooming on that spot, it works. However, if I zoom
on one spot and then on another the second zoom will not zoom towards
the second spot I've chosen. If I leave the third zoom in the same spot
as the second zoom, the third zoom _will_ zoom in on the correct spot.
So it's the change from one zoom location to another that's causing problems.
*/
translate(Xmouse, Ymouse);
scale(scmouse);
translate(-Xmouse, -Ymouse);
//mouseDragged translation
translate(tx, ty);
//some test rectangles
fill(255);
rect(225, 225, 50, 50);
fill(255, 0, 0);
rect(300, 300, 20, 20);
fill(255, 255, 0);
rect(50, 50, 10, 10);
}
//getting mouse coordinates for debugging just type c
void keyReleased() {
if (key == 'c') {
println();
println("X = " + mouseX);
println("Y = " + mouseY);
}
}
//every time mouse is double clicked, the variable scmouse, the mouse scale,
//is multipled by 2
void mousePressed() {
// mouseEvent variable contains the current event information
if (mouseEvent.getClickCount()==2) {
Xmouse=constrain(mouseX, 0, width);
Ymouse=constrain(mouseY, 0, height);
scmouse*=2;
println("<double click>");
}
//if (mouseEvent.getButton()==MouseEvent.BUTTON3) println("<right button>");
// this prints out the event in descriptive form
}
void mouseDragged() {
tx += (mouseX - pmouseX) / (sckeys * scmouse);
ty += (mouseY - pmouseY) / (sckeys * scmouse);
}

Replies(6)

kylebebak

Re: zoom centered on mouse coordinates, in conjunction with zoom on the center of the screen

1 year ago

help?

Chrisir

Re: zoom centered on mouse coordinates, in conjunction with zoom on the center of the screen

1 year ago

without understanding the whole picture:

What you have is

a scene,
a viewport, see https://forum.processing.org/topic/zoom-and-pan-in-2d#25080000001539603
viewport is pan and scale
and you can change this viewport by mouse and keyboard.

Now you have

scale(sckeys);

and also

scale(scmouse);

That's a duplicate approach.

I recommend to have one viewport (as a class maybe?) and mouse
and keyboard can both change it.
Thus you have only one line with scaling e.g.

Good luck!

P.S.
maybe use - and + instead of - and =
that's more intuitive.

jeff_g

Re: zoom centered on mouse coordinates, in conjunction with zoom on the center of the screen

1 year ago

This thread may help.
https://forum.processing.org/topic/zoom-based-on-mouse-position

kylebebak

Re: zoom centered on mouse coordinates, in conjunction with zoom on the center of the screen

1 year ago

It looks like the thread may have the answer, I'll just have to play with the code in there until I understand it. Thanks all!

Chrisir

Re: zoom centered on mouse coordinates, in conjunction with zoom on the center of the screen

1 year ago

hello,

did you make any progress on this?

Can you show some Code?

kylebebak

Re: zoom centered on mouse coordinates, in conjunction with zoom on the center of the screen

1 year ago

I got it working just how I wanted it! I wrote a 2D viewport for it that can rotate, pan, and zoom, and knows how to translate the values called by mouseX and mouseY and convert them to values on the portion of the screen that's shown, regardless of the transformations that have been done.

Here's the code if you'd like to have a look. Thanks for the reply!

//a test sketch to get zoom to work
float x=0, y=0;
float w, h;
float X, Y;
float mX, mY, pmX, pmY;
float panx=0, pany=0, px=0, py=0, dpx=0, dpy=0;
float easing=.065;
boolean[] keys=new boolean[2];
float angle=0;
float da;
boolean yellow=false;
void setup() {
size(500, 500);
w=width;
h=height;
smooth();
}
void draw() {
yellow=false;
background(0);
if (keyPressed) {
//= and - to zoom in and out on center of screen
if (key == '1') {
float zoom=.95;
x += .5 * w * ( 1 - 1 / zoom );
y += .5 * h * ( 1 - 1 / zoom );
w *= 1 / zoom;
h *= 1 / zoom;
}
if (key == '2') {
float zoom=1.05;
x += .5 * w * ( 1 - 1 / zoom );
y += .5 * h * ( 1 - 1 / zoom );
w *= 1 / zoom;
h *= 1 / zoom;
}
//r to reset all zooms and translates
if (key == 'r') {
x=0;
y=0;
w=width;
h=height;
mX=0;
mY=0;
angle=0;
}
if (key == 'q') {
float[] m=mouseRotate(constrain(mouseX, 0, width),
constrain(mouseY, 0, height), angle, width/2, height/2);
mX=m[0];
mY=m[1];
X= x + mX * w/width;
Y= y + mY * h/height;
println("rotated mouse = " + mX + ", " + mY);
if (X>45 && X<55 && Y>45 && Y<55) {
yellow=true;
}
}
}
//mouseDragged translation
dpx= (panx - px) * easing;
dpy= (pany - py) * easing;
x -= dpx;
y -= dpy;
px += dpx;
py += dpy;
//arrowkey Rotation, keys[]
if (keys[0]) angle+=radians(-2);
if (keys[1]) angle+=radians(2);
translate(width/2, height/2);
rotate(angle);
translate(-width/2, -height/2);
scale( width / w, height / h);
translate(-x, -y);
//some test rectangles
fill(255);
rect(225, 225, 50, 50);
rect(245, 125, 10, 10);
rect(245, 25, 10, 10);
fill(255, 0, 0);
rect(290, 290, 20, 20);
if (yellow) fill (255, 255, 0, 100);
else fill(255, 255, 0);
rect(45, 45, 10, 10);
}
void mousePressed() {
// mouseEvent variable contains the current event information
//double-click zoom
if (mouseEvent.getClickCount()==2) {
float zoom=2;
float[] m=mouseRotate(constrain(mouseX, 0, width),
constrain(mouseY, 0, height), angle, width/2, height/2);
mX=m[0];
mY=m[1];
X= x + mX * w/width;
Y= y + mY * h/height;
x= X - (1 / zoom) * (X - x);
y= Y - (1 / zoom) * (Y - y);
w *= 1 / zoom;
h *= 1 / zoom;
}
//right-click center and zoom
if (mouseEvent.getButton()==MouseEvent.BUTTON3) {
float zoom=2;
float[] m=mouseRotate(constrain(mouseX, 0, width),
constrain(mouseY, 0, height), angle, width/2, height/2);
mX=m[0];
mY=m[1];
X= x + mX * w/width;
Y= y + mY * h/height;
x= X - w / (2 * zoom);
y= Y - h / (2 * zoom);
w *= 1 / zoom;
h *= 1 / zoom;
}
}
void mouseDragged() {
float[] m=mouseRotate(constrain(mouseX, 0, width),
constrain(mouseY, 0, height), angle, width/2, height/2);
mX=m[0];
mY=m[1];
m=mouseRotate(constrain(pmouseX, 0, width),
constrain(pmouseY, 0, height), angle, width/2, height/2);
pmX=m[0];
pmY=m[1];
panx += (mX - pmX) * w/width;
pany += (mY - pmY) * h/height;
}
void keyPressed() {
if (keyCode == LEFT) keys[0]=true;
if (keyCode == RIGHT) keys[1]=true;
}
void keyReleased() {
if (keyCode == LEFT) keys[0]=false;
if (keyCode == RIGHT) keys[1]=false;
}
float[] mouseRotate(float mx, float my, float angle,
float xc, float yc) {
float mtx=mx;
float mty=my;
mx= xc + (mtx-xc) * cos(-angle) - (mty-yc) * sin(-angle);
my= yc + (mtx-xc) * sin(-angle) + (mty-yc) * cos(-angle);
float[] mxmy= {
mx, my
};
return mxmy;
}

Top Reply