[Beginner] Panning and Zooming

Using Cinder
1

Hi,

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

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

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

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

2

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

1 Like