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

**URL:** <https://discourse.processing.org/t/how-to-zoom-into-an-image-but-at-a-certain-point-with-scale/28510>\
**Category:** Coding Questions\
**Created:** [March 13, 2021, 7:51pm UTC](https://discourse.processing.org/t/how-to-zoom-into-an-image-but-at-a-certain-point-with-scale/28510 "2021-03-13T19:51:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 13, 2021, 7:51pm UTC](https://discourse.processing.org/t/how-to-zoom-into-an-image-but-at-a-certain-point-with-scale/28510/1 "2021-03-13T19:51:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [March 13, 2021, 8:45pm UTC](https://discourse.processing.org/t/how-to-zoom-into-an-image-but-at-a-certain-point-with-scale/28510/2 "2021-03-13T20:45:01Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 13, 2021, 9:29pm UTC](https://discourse.processing.org/t/how-to-zoom-into-an-image-but-at-a-certain-point-with-scale/28510/3 "2021-03-13T21:29:10Z")

</div>

perfect!

Exactly what I was looking for!

Cheers, mate!

Chrisir