How do you scale the change of a period over time?

Question

I am writing a game, and I have a period (a repeating cycle) which is mapped to the scrolling of a background. I want to change this period, so that the scrolling is faster or slower--- but if I just change the period, the background's x position will JUMP to wherever it would be had it been moving at the rate of the new period. To compensate for this, I need to on a frame-by-frame basis, be gradually changing the period from the old and the new.

This is where my problem lies: I know the difference between the old and new period-- It's just not apparent to me how to figure out the formula for finding how many steps to break up this transition over time. Any help would be greatly appreciated.

Answer 1

What you're looking for is something called a tweener. A lot of information about tweeners can be found here.

The overview is that you'll need to somehow create an interval over which to change the period, and then call the tweener function to find out what the value at the current time should be. For example if we want to change the period from $2 \to 3$ over $1$ second then we would need to somehow call a function ever so often (depending on the platform you can use different things, in JS you can use requestAnimationFrame or setInterval, on Mac you can sync up with the display rate with the CVDisplayLink, on iOS CADisplayLink and so on). Now lets call timeElapsed the amount of time elapsed since the animation has started. It's clear if you want the period to change linearly that the period at a given timeElapsed should be 2 + timeElapsed. The article above describes how to abstract this into a general change from one number to another, over a general duration.

Answer 2

Is this your problem? The background's scrolling depends upon $s = t/T_0$ where $T_0$ is the old period. After changing the period, you then set $s = t/T_1$, and this causes the background to jump!

What you should do instead is this. Suppose the period changes at time $t = t_0$. Then after $t = t_0$, you should use $s = t_0/T_0 + (t-t_0)/T_1$. Then the background won't jump - it will just change its speed.

This doesn't perform the gradual change you asked for. But it does eliminate the jump. And I think this is what you really want.