How to zoom in on a point (the math behind it) - c

Question

I'm working on a fractal graphic. I need to be able to zoom in on a specific point.
Here's what I've got so far. If you keep the mouse in the same position for the whole zoom, it works. But if you zoom part of the way then move the mouse to a new position and try to zoom some more from there, it starts jumping all over.
scale_change = zoom * ((button == SCROLL_DOWN) ? ZOOM_INC : -ZOOM_INC);
zoom += scale_change;
center->x -= (mouse->x - (IMG_SIZE / 2)) * scale_change;
center->y -= (mouse->y - (IMG_SIZE / 2)) * scale_change;
I assume some part of it is over-simplistic? There's some variable I'm not accounting for? It does work if you don't move the mouse, though.

Answer 1

The best approach is probably to use a transform matrix to both scale the image and find out what point in the scaled image your mouse is over so you can transform based on that point.
I know you're working in C, but I created an example in js, because it allows me to demonstrate working code easier. Click on the image and use Z and X to zoom in and out. https://jsfiddle.net/7ekqg8cb/
Most of the code is implementing matrix multiplication, matrix inversion and matrix point transformation. The important part is:
var scaledMouse = transformPoint(mouse);
matrixMultiplication([1, 0, scaledMouse.x,
0, 1, scaledMouse.y,
0, 0, 1]);
var scale = 1.2;
if (direction) {
matrixMultiplication([scale, 0, 0,
0, scale, 0,
0, 0, 1]);
}
else {
matrixMultiplication([1/scale, 0, 0,
0, 1/scale, 0,
0, 0, 1]);
}
matrixMultiplication([1, 0, -scaledMouse.x,
0, 1, -scaledMouse.y,
0, 0, 1]);
transformPoint uses the inverse of the transform matrix to find out where the mouse is relative to the transformed image. Then the transform matrix is translated, scaled and translated back, to scale the transform matrix around that point.