Question

I’ve been working on a simulation that’s pretty bloody huge, which meant it became necesary to zoom in and out.

I found a good working script but when the simulation got bigger I found it had a problem…
The more you zoom in, the smaller the steps became and the further you zoom out, the bigger.

This is a problem because I need the steps to be equal no matter what zoom level you are.

The script I’m using now is:

var total = 75,
    delta = e.detail ? e.detail * -120 : e.wheelDelta; //e is mouse event

this.zoomValue += (delta > 0) ? 1 : -1;

this.zoomRatio = 1 + (this.zoomValue / total) * 2;
e.preventDefault();

You can see it in action here: http://clanpvp.com/sol (if it’s not working, I’m either fiddling with it or you are using Internet Explorer)

I use the zoomRatio later to calculate the positions of various objects.

Who knows of a better way to zoom in?

Answer 1

The anwser is very simple actualy… yet I needed somebody to show me before I saw it myself.

The solution is to have it zoom exponentialy, so

this.zoomRatio = Math.exp(this.zoomValue);

Does the trick, you can do something like

this.zoomRatio = Math.exp(this.zoomValue / 10);

To make it scroll in smaller ‘steps’.