Another bloody zooming problem (this time with PMatrix)

Programming Questions

bricola

Another bloody zooming problem (this time with PMatrix)

in Programming Questions • 2 years ago

Hallo, I'm trying do a basic zoom-centered-on-mouse sketch (as part of a larger project) but I've been puzzling over this for days and I need a bit of help. So I'm trying to get my head round the matrix stuff for coordinate system transformations but I don't get it. Try the code - the zoom centered on mouse doesn't work if you're zooming when the image is zoomed already. I feel like I need to transform the center point of the zoom into the image coords but that doesn't work either. Any ideas?

Cheers,

Rob

Viewport viewport;
float zoomFactor = 1;
boolean dragging = false;
void setup() {
size(400, 400);
smooth();
textFont(createFont("Courier New", 12), 12);
viewport = new Viewport(50, 50, 50, 50);
}
void draw() {
background(0);
if(dragging){
viewport.pan(mouseX, mouseY);
}
g.setMatrix(viewport.mat);
noFill();
stroke(150);
for(int j = 0; j < 10; j++)
for(int i = 0; i < 10; i++)
ellipse(50+i*20, 50+j*20, 20, 20);
g.resetMatrix();
PVector p = viewport.screenToImageCoords(new PVector(mouseX, mouseY));
text(p.x + " " + p.y, mouseX, mouseY);
}
void mousePressed(){
if(mouseButton == RIGHT) dragging = true;
}
void mouseReleased(){
dragging = false;
}
void keyPressed() {
if(keyCode == UP || keyCode == DOWN) {
if(keyCode == UP) zoomFactor *= 1.1;
if(keyCode == DOWN) zoomFactor *= 0.9;
viewport.zoomOnPoint(mouseX, mouseY, zoomFactor);
}
}
class Viewport {
float x, y, w, h, iw, ih;
PMatrix2D mat, inverseMat;
Viewport(float x, float y, float w, float h) {
this.x = x;
this.y = y;
this.w = iw = w;
this.h = ih = h;
mat = new PMatrix2D();
inverseMat = new PMatrix2D();
}
void pan(float ox, float oy){
mat.translate(ox, oy);
}
void zoomOnPoint(float ox, float oy, float zoomFactor) {
//PVector pImg = screenToImageCoords(new PVector(ox, oy));
mat = new PMatrix2D();
mat.translate(ox, oy);
mat.scale(zoomFactor);
mat.translate(-ox, -oy);
inverseMat = new PMatrix2D(mat);
inverseMat.invert();
PVector out = mat.mult(new PVector(0, 0), null);
x = out.x;
y = out.y;
w = iw * zoomFactor;
h = ih * zoomFactor;
}
PVector screenToImageCoords(PVector p){
return inverseMat.mult(p, null);
}
PVector imageToScreenCoords(PVector p){
return mat.mult(p, null);
}
void draw() {
stroke(255, 0, 0);
noFill();
rect(0, 0, iw, ih);
}
}

Replies(3)

bricola

Re: Another bloody zooming problem (this time with PMatrix)

2 years ago

Nailed it. Here's the code if anyone's interested:

Viewport viewport;
float zoomFactor = 1;
boolean dragging = false;
PVector zoomPoint;
void setup() {
size(400, 400);
smooth();
textFont(createFont("Courier New", 12), 12);
viewport = new Viewport(50, 50, 50, 50);
}
void draw() {
background(0);
if(dragging) {
viewport.pan(mouseX-zoomPoint.x, mouseY-zoomPoint.y);
}
g.setMatrix(viewport.mat);
noFill();
stroke(150);
for(int j = 0; j < 10; j++)
for(int i = 0; i < 10; i++)
ellipse(i*20, j*20, 20, 20);
g.resetMatrix();
PVector p = viewport.screenToImageCoords(new PVector(mouseX, mouseY));
text(p.x + ", " + p.y, mouseX, mouseY);
}
void mousePressed() {
if(mouseButton == RIGHT) {
dragging = true;
zoomPoint = new PVector(mouseX-viewport.x, mouseY-viewport.y);
}
}
void mouseReleased() {
dragging = false;
}
void keyPressed() {
if(keyCode == UP || keyCode == DOWN) {
if(keyCode == UP) zoomFactor *= 1.1;
if(keyCode == DOWN) zoomFactor *= 0.9;
viewport.zoomOnPoint(mouseX, mouseY, zoomFactor);
}
}
class Viewport {
float x, y, w, h, iw, ih;
PMatrix2D mat, inverseMat;
Viewport(float x, float y, float w, float h) {
this.x = x;
this.y = y;
this.w = iw = w;
this.h = ih = h;
updateMatrix();
}
void pan(float tx, float ty) {
x = tx;
y = ty;
updateMatrix();
}
void zoomOnPoint(float zoomX, float zoomY, float zoomFactor) {
float prevZoom = w/iw;
float dx = (zoomX-x);
float dy = (zoomY-y);
x += dx - dx*(zoomFactor/prevZoom);
y += dy - dy*(zoomFactor/prevZoom);
w = iw * zoomFactor;
h = ih * zoomFactor;
updateMatrix();
}
void updateMatrix() {
mat = new PMatrix2D();
mat.translate(x, y);
mat.scale(w/iw);
inverseMat = new PMatrix2D(mat);
inverseMat.invert();
}
PVector screenToImageCoords(PVector p) {
return inverseMat.mult(p, null);
}
PVector imageToScreenCoords(PVector p) {
return mat.mult(p, null);
}
void draw() {
stroke(255, 0, 0);
noFill();
rect(x, y, w, h);
}
}

ifte_mind..

Re: Another bloody zooming problem (this time with PMatrix)

27 days ago

You did a great job writing this program.i am new in processing and trying to learn it properly.Can you plz comment on the lines mentioning which part,function or command is doing what.
thank you.

tfguy44

Re: Another bloody zooming problem (this time with PMatrix)

27 days ago

Why did you resurrect a thread from 2 years ago?
It is highly unlikely that the person who posted this is going to come back after two years to comment on it for you.