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!