p5.js frameRate() doesn’t throttle CPU on high‑refresh displays

Answer

Calling frameRate() in p5.js only sets a target interval for when draw() should render; it does not change how often the draw function is invoked by the animation loop.

Likely explanation

p5.js starts its loop with window.requestAnimationFrame(drawLoop). The drawLoop callback fires on every screen refresh (typically the monitor’s refresh rate). Inside each tick, p5.js checks the elapsed time against the interval derived from frameRate(). If not enough time has passed, it skips the actual drawing but still executes the loop body, keeping the CPU active. Therefore, on a 144 Hz monitor the loop runs ~144 times per second even when frameRate(30) is set.

Confirmed facts (based on p5.js 1.4.0 source)

• The start‑loop code is:

  window.requestAnimationFrame(drawLoop);

• Inside drawLoop the code computes deltaMillis = millis() - _millisForFrameStart and compares it to _millisPerFrame (derived from frameRate()). If deltaMillis < _millisPerFrame it returns early without calling userDraw(), but the requestAnimationFrame callback has already been scheduled for the next refresh.

Steps to enforce a lower FPS and reduce CPU usage

1. Disable the built‑in loop: noLoop();
2. Create a manual timer that respects the desired FPS, e.g.:

   let interval = 1000 / desiredFPS; // ms
   setInterval(() => {
     redraw(); // triggers one draw() call
   }, interval);

3. If you need smooth animation, base movement on elapsed time (deltaTime = millis() - lastMillis) rather than a fixed frame count.

Missing diagnostic detail

Are you currently using the default draw loop (i.e., you have not called noLoop())? Knowing this determines whether the manual timer approach above is needed or if you already have a custom loop in place.