Changing the FPS cap and manipulating pixels causes an permanent FPS drop whenever the cursor clicks/hovers on the page

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
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.7.0

Web browser and version

Google Chrome: 117.0.5938.92 (Official Build) (64-bit) (cohort: Stable)

Operating System

Windows 10 Pro: 10.0.19045 Build 19045

Steps to reproduce this

Details

Changing the FPS cap and manipulating pixels causes a permanent drop in performance whenever the cursor clicks/hovers on the page.

It also appears that the FPS drop incurred by hovering over the page can only happen for a short period of time after the page has just loaded but clicking seems to work whenever during the lifetime of the page.

P.S. I accidentally created an empty issue whilst trying to create this one. If it could be deleted by someone who can it would be greatly appreciated.

Steps:

1. Run the code snippet attached to this issue
2. Hover/Click on the page/canvas and notice the drop in FPS.
3. If you do not observe a drop in FPS, consider adjusting the SIZE constant so that there is enough load to make the baseline FPS below that of your monitors refresh rate.

Snippet:

const SIZE = 600;
const FRAME_RATE = 999;

function setup() {
    createCanvas(SIZE, SIZE);
    frameRate(FRAME_RATE);
}

function draw() {
    background(0);

    for (let y = 0; y < SIZE; y++) {
        for (let x = 0; x < SIZE; x++) {
            set(x, y, 0);
        }
    }

    updatePixels();

    fill(255);
    text(Math.round(frameRate()), 50, 50);
}

Start by running the attached snippet in Chrome with p5.js 1.7.0 and record the baseline FPS before and after hovering or clicking the canvas. Compare results while adjusting SIZE as suggested; done means those interactions no longer cause a permanent FPS drop during pixel manipulation.