# \[Beginner\] Panning and Zooming

**URL:** <https://discourse.libcinder.org/t/beginner-panning-and-zooming/723>\
**Category:** Using Cinder\
**Created:** [June 12, 2017, 6:05am UTC](https://discourse.libcinder.org/t/beginner-panning-and-zooming/723 "2017-06-12T06:05:00Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Callum](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@Callum](https://discourse.libcinder.org/u/Callum)\
**Post date:** [June 12, 2017, 6:05am UTC](https://discourse.libcinder.org/t/beginner-panning-and-zooming/723/1 "2017-06-12T06:05:00Z")

</div>

Hi,

I have been trying to get the maths right for panning and zooming with the following:

```auto
gl::pushModelMatrix();

// move origin to the center of the window
gl::translate(+(getWindowCenter()));
gl::scale(zoom_, zoom_);
gl::translate(-(getWindowCenter()));

// apply translational offset
gl::translate(-offset_);

for (auto& circle : circles_) {
    circle.setRadius(circleRadius_);
    circle.draw();
}

gl::popModelMatrix();

```

The problem is, panning when zoomed doesn’t pan at a 1:1 ratio.  
I can fix this by using

```auto
gl::translate(-(offset_ / zoom_));

```

however then it doesn’t zoom from the center of the screen, but somewhere between the center and the origin.  
No matter what I try I can’t get 1:1 panning while zoomed, and zooming from the center of the window simultaneously. What am I missing?

My full code is available on GitHub here: [https://github.com/CallumHoward/CirclePacking/blob/master/src/CirclePackingApp.cpp#L88-L107](https://github.com/CallumHoward/CirclePacking/blob/master/src/CirclePackingApp.cpp#L88-L107)

I have been referring to this thread here:  
[https://forum.libcinder.org/topic/matrix-transformations-for-rotating-scaling-and-panning-a-canvas-sorry](https://forum.libcinder.org/topic/matrix-transformations-for-rotating-scaling-and-panning-a-canvas-sorry)

---

<div class="post-metadata">

**Author:** ![Callum](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@Callum](https://discourse.libcinder.org/u/Callum)\
**Post date:** [June 13, 2017, 4:42am UTC](https://discourse.libcinder.org/t/beginner-panning-and-zooming/723/2 "2017-06-13T04:42:40Z")

</div>

Worked this out, it turns out I needed to divide the amount added to the offset when panning while zoomed by the zoom factor.

> <https://github.com/CallumHoward/CirclePacking/blob/master/src/CirclePackingApp.cpp#L68>