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() 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.
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.
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
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.
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.