Math problem with smooth zooming into canvas

Question

To all mathematicians out there please read the whole question, this could be answered without any HTML5 knowledge :-)

I am zooming (scaling) a HTML5 canvas and i want to do that in a lot of small steps instead of one big step to make the scrooling seem "smooth". To explain that:

When the user turns the scroolwheel once my goal is to scale the canvas by 20% in total. Now i want to divide this into lets say 20 small steps.

My problem is, that due to the restricted library of the canvas i can only use the scale(xscale,yscale) method of the 2d Context to do so. So i cant set the units to a specific size, that would make it easy. I have to use a factor in every single step and i can't figure out how this could be done.

So the units of my canvas has been 100 in step 1 i want them to be 130 in step 20 with 19 small steps in between.

1. oldscale: 100, : factor: x, newscale: 101
2. oldscale: 101, : factor: x, newscale: 102
3. oldscale: 102, : factor: x, newscale: 103

......

The variables i now is the current stepnumber (0-19), totalsteps (20) and target-zoom in percent (20)

That is a very simple example of what i need. The main problem is, that i only have access to the X and i cant affect the scales directly.

Can anyone help? I hope i explained it well.

Answer 1

Not sur what your problem is :

But I believe you want to find x such that :

(1+x)**numberofStep - 1 = pourcentageOfIncrease  //** is power

=> x= numberOfStepsNTHROOTOF(1+pourcentageOfIncrease) -1

for numberofStep =20 and pourcentageOfIncrease =20

you find : x=pow(1+20%,1/20.)-1= 0.00916 = 0.916% increase at each step

Note: This is similar to calculating compound interest but for zooming. You calculate the zoom at each step to get the total zoom.

Hope I understood your problem and it helps

Answer 2

You need the 20-th root of 130/100. To compute it use

k = Math.exp(Math.log(130/100) / 20)

k raised to the 20-th power will be 130/100.