frameRate()'s messy behaviour

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Details about the bug:

• p5.js version: 1.4.0
• Web browser and version: Firefox 90.0
• Operating System: Windows 10
• Steps to reproduce this: p5.js sketch

Many values passed to frameRate() do not actually set the frame rate to that amount. Similarly, the values returned by frameRate() do not match the actual frame rate either. The only values at which frameRate() works well are ones which evenly divide 60. Most other values passed to frameRate() are clipped to one of these values.

As an example, try setting the frame rate to some values around 45 fps using the slider in the linked sketch. The pink line represents the value passed to frameRate() and the green line is the average value returned by frameRate() over the last 120 calls.

• Values of 48 and above will all produce average frame rates of 60fps.
• 47fps and 46fps both jitter around at an average of 45 fps.
• Actually setting the value to 45 fps will produce a frame rate of 30fps.
• Finally, setting the frame rate to 24 (mentioned in the documentation of frameRate()) will produce a frame rate of 20fps.

Of course the frame rate is ultimatly limited by the browser's refresh rate, but it should still be possible to reach an average frame rate which matches the value passed to frameRate().

Start by running the linked p5.js sketch and reading the implementation of frameRate() in the core environment/rendering code. Compare requested rates with the values returned by frameRate() across browser refresh-rate constraints. Done means supported target rates produce matching average measurements rather than being clipped to unrelated values.