FrameRate

Making an animation for a client

Let's say that you're working on an animation for a client. They wanted an animated canvas that loops. So far, you have this:

The trouble is, the client just informed you that this animation might be running on older hardware, so it has to run at 30 frames per second. Fortunately, you can just use the frameRate() function in the setup loop to fix that

framerate(30)

Oh no, it's too slow now!

You changed the framerate from 60 to 30, but now the animation plays half as fast. This is because the animation that's being done is frame-dependent. That means that the speed of change in the animation is directly proportional to the framerate of the canvas. That means we'll need to use the rate in change of time rahter than the rate in change of frames. This will make the animation run the same way, regardless of the frames per second (FPS) that the sketch runs at.

The fascinating problem of programmatic animation

This is one of the more interesting challenges of doing animations with programming. In conventional software engineering context, time is a much less interesting issue. If you're writing a server or the backend of an application, the main challenge you need to solve for is getting the program to run as quickly as possible. That isn't to say making a program run as quickly as possible can't be a rewarding challenge, meerly that its a much more linear and monotonic challenge than what we're trying to do.

Summary

In short, in order to make the animation frame-independent, we need to:

• track what time it is each frame
• compare the change in time between frames
• use the change in time to influence the theta