How to zoom into an image (but at a certain point) with scale

Processing Coding Questions
1

Hello all,

I have a question:

I want to animate the zoom into an image, but not into its center, but into a certain area of the image (e.g. a dog or cat (or where I click the mouse) on a much bigger image).

I use scale but this is increasing the size from the upper left corner. Bad.

So additional I use translate (xdiff,ydiff);

let’s say during the animation in draw I say scl += 0.033;

and xdiff-=5; ydiff-=5; but what values do I have to use here?

And how can I make sure the point clicked with the mouse zooms into the center?

Thank you!

Chrisir

1 Like
2

is this effect what you want? (sorry I’m lazy so I’m using p5.js but basically the same)
https://editor.p5js.org/micuat/sketches/GBld82xeN

you go to the center of the canvas, scale it, and offset the amount of mouse position (right image). If you take the inverse matrix (transformation in reverse order with inverted values) then you get the rect in the left image.

2 Likes
3

perfect!

Exactly what I was looking for!

Cheers, mate!

Chrisir

1 Like