Frames and FPS: pictures over time

Concepts explained

A frame is one picture in an animation. Showing a series of slightly different pictures can create the appearance of movement. FPS means frames per second: how many frames are shown in one second.

A flipbook makes a useful model. Each page is a frame; turning the pages faster changes how quickly you see them.

Time per frame

One second contains 1,000 milliseconds. At 25 frames per second, the time available for each frame is 1 / 25 second, or 0.04 seconds: 40 milliseconds.

# language: en
let framesPerSecond = 25
say 1 / framesPerSecond

This prints 0.04. It calculates an interval; it does not turn on an automatic animation system.

Waiting is not a speed guarantee

A loop also spends time calculating and drawing. Adding wait(0.04) after that work can make each round take longer than 0.04 seconds. The window’s display rate can differ from the program’s update rate too.

An update changes game state, such as a position. A render draws that state. A sprite’s animation pose may change less often than its position. Keeping these jobs separate helps explain why a character can move smoothly while reusing the same picture.

Try a paper flipbook at two different speeds. Does increasing the page-turn speed add any new drawings?

Animation · Event timing