Integrating the Timeline

Integrating .deltaTime()

Now let's add a Timeline object to the animation and replace the frameCount() logic with deltaTime().

But now the animation is way too fast!

Oh no! Now the animation is going much faster than it was before. This is because when frameCount*0.01 was being used, theta was increasing by about 0.02 each frame. now that deltaTime is being used, it's increasing by about 32 (at 30 FPS) each frame. That's because 32 milliseconds have elapsed since the last frame.

Returning seconds instead of milliseconds

The solution to this is to convert the deltaTime to miliseconds. This can be done by simply dividing the deltaTime value returned by 1000. You could divide each call to deltaTime(), but it'll probably save you more time in the long run to add that division to the Timeline function.

deltaTime()
{
    return (this.now - this.then) * 0.001
}

From there, you can scale up the speed of the animation by multiplying deltaTime() before adding it to t. The decision on how much to multiply the deltaTime by is a matter of aethetics and personal preference (and the preference of your hypothetical client).

t += mTime.deltaTime() * 5

Great! Now the animation will run at the same speed, regardless of its framerate. Try changing the framerate() in the setup loop, and see how the animation plays out when you change the argument passed in.