Learn

Frames Per Second (FPS) specifies the number of frames displayed every second. When the FPS of animation is lower, it looks like it is in slow motion. When the frame rate is higher, the animation looks like it is being fast-forwarded.

p5.js will automatically run your code at 60 frames per second. However, you can manipulate the FPS by using the frameRate() function, which will change the number of frames shown per second to the number specified as the function’s argument. For example, the code snippet below will cause the draw() function to run numberOfFrames times per second.

frameRate(numberOfFrames);

The frameRate() function will not go over 60 frames per second in p5.js. This is more than enough! A typical animation is between 24 to 30 frames per second.

Different FPS

In the diagram above, you can see the ball dropping at ten frames per second (10 FPS), 30 frames per second (30 FPS), and 60 frames per second (60 FPS). Notice that when the animation has a lower frame rate, each frame is more distinct.

Instructions

1.

Let’s play around with the frame rate to manipulate the speed the sketch is run at. Below the createCanvas() function, add a frame rate of 60 frames per second in the setup() function.

2.

Below the line you just added, set the frame rate to 24 frames per second.

Remember that code runs from top to bottom, so this new frame rate will override the frame rate we set in the above instruction. Notice the change in animation speed.

3.

Below the line you just added, write a new frameRate() function and set it to run at 6 frames per second.

Notice how the animation has slowed down and now has a stop motion effect.

Folder Icon

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Already have an account?