When animating lots of points initial frame rate is 20; clicking on the canvas increases rate to 60fpps. Why?

[fabiopettinati]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

1.11.1 same behavior in older versions as well.

Web browser and version

Safari 18.2

Operating system

MacOS 15.2

Steps to reproduce this

Steps:

1. open this sketch: https://editor.p5js.org/fabiopettinati/sketches/ybyFz83Lh
2. once it stats notice frame rate at the bottom of canvas. I should be around 20fps
3. click the mouse anywhere inside the canvas. you will notice the frame rate jumps to 60fps.

Snippet:

let frameRateP;
let numSamples = 30;
let frameRateSamples = [];
let frameRateSum = 0;

let size = 2;
let vMax = 5;
let nShapes = 20000;
let shapes;

  function setup() {
  createCanvas(windowWidth, windowHeight - 40);
  frameRateP = createP();
  
  shapes = new Int16Array(nShapes * 4);
  for (let i = 0, k = 0; i < nShapes; i++) {
    shapes[k++] = random(width);
    shapes[k++] = random(height);
    shapes[k++] = random(-vMax, vMax);
    shapes[k++] = random(-vMax, vMax);
  }
}

function draw() {
  let newSample = frameRate();
  frameRateSamples.push(newSample);
  frameRateSum += newSample;
  if (frameRateSamples.length > numSamples) {
    frameRateSum -= frameRateSamples.shift();
  }
  frameRateP.html(round(frameRateSum / frameRateSamples.length));
  
  background(255);
  noStroke();
  fill(255, 0, 0);
  
  for (let i = 0, k = 0; i < nShapes; i++) {
    let x = shapes[k++];
    let y = shapes[k++];
    let vx = shapes[k++];
    let vy = shapes[k++];
   
    x += vx;
    y += vy;
    
    if (x < 0)
      x = width - 1;
    else if (x > width - 1)
      x = 0;
    
    if (y < 0)
      y = height -1;
    else if (y > height - 1)
      y = 0;
    
    shapes[k-4] = x;
    shapes[k-3] = y;
    
    square(x, y, size);
  };
}

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[limzykenneth]

I'm not able to replicate the exact behaviour you described with the frame rate increasing to 60 fps on clicking the canvas on my Mac with Safari. The frame rate in general is a bit variable between different machines and browsers I use between 10 to 30 fps but that is expected with 100,000 draw calls in a frame.

I don't know why you are seeing the change in framerate on click but likely is due to some resource optimization on the browser. If you want to render a lot of points, it is probably more efficient to edit the pixels array and updatePixels() afterward rather than making individual draw calls.

[fabiopettinati]

I know about going directly to the pixels array but the fact is that for such a trivial sketch having to click to get to the full 60fps or so is bewildering. I will run the sketch on different browsers on the Mac just to see if it makes a difference. The bottom line is that I’d expect the sketch to run at full fps without requiring any intervention from the user (like on a wall-mounted smart display in a public place)

[davepagurek]

@fabiopettinati It sounds like, as Ken suggested, Safari is deciding to optimize for efficiency until it's sure the user actually wants more power allocated to it by interacting with the page. That's largely out of p5's control, if that's the case.

Is this different on battery vs when plugged in? Some performance things are pretty throttled on battery for the reasons above.

Is this different on other browsers? It could be that Safari is not as good a choice for installation purposes because of things like this. I also see some discussion on Reddit about changing Safari's throttling settings here that you could try: https://www.reddit.com/r/mac/comments/14jjbkr/i_want_to_like_safari_but_the_performance/