05 - Conditional Statements and Comparison Operators

frame, frameRate, and frameCount

In the previous chapter, we saw some of the variables that p5.js makes available for us. One important thing to note is that these variables can only be used from inside the p5.js functions setup and draw. If we were to try to use them outside these functions, we would get an error saying that they are not declared.

Let’s see another useful variable that p5.js makes available for us: frameCount.

Remember how we defined a count function in the previous chapter to be able to count the number of times that the draw function is getting called. We can actually use the variable called frameCount that p5.js provides us for this same purpose. frameCount is a variable that keeps count of the number of times the draw function is called throughout the lifetime of a program. By default, the draw function is called a maximum of 60 times per second. A setting called frameRate inside p5.js determines this value.

The introduction of this variable warrants a discussion about what frames are in p5.js. We can think of a frame as the result of the draw function call. draw function gets called numerous times in a second, and the frameRate function determines this amount. If we are to call the frameRate function with no arguments, it will return us the current frameRate for p5.js - which we can save into a variable and console.log to see its value for every frame.