P5 in WEBGL crashes Chrome

p5.js
1

Hello,

let me first give you a minimal example that will crash Chrome on my PC (Windows 10, RTX 3080Ti, Ryzen 9 5950x).

function setup(){
    createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw(){
    background(0);
    
    noStroke();
    fill(255);
    for(var k = 0; k < 1000; k++){
        ellipse(random(-width/2, width/2), random(-height/2, height/2), 13, 13);
    }
}

If I run this in Opera, it works fine.
If I run this in Firefox, it works fine.
If I run this in Chrome, it starts fine, but after a few seconds the entire browser gets more and more unresponsive, and if I leave it running for a few more secs, I have to kill it using the task manager.

IMPORTANT detail, if I set the number of circles in the for-loop to e.g. 100, instead of 1000, it works fine, so I guess somewhere between 100 and 1000 there’s some kind of a “barrier” that exhausts some resource (I haven’t noticed anything unusual when looking at RAM/CPU/GPU though).
And it’s weird because it only happens in Chrome, in WEBGL mode, on my PC. If run this in Chrome on a Mac, it works fine, and if I use any other browser on PC, it also works fine.

Has anyone noticed something like this?

1 Like
2

It runs fine in Chrome version 104.0.5112.79 (Official Build) (arm64) on my MacBook Air (M1, 2020) with Monterey version 12.4, producing a nice dazzling display of ellipses, so I decided to see how far the loop can be pushed.

With this loop header, it still works:

    for (var k = 0; k < 10000; k++) {

But this fails, producing only a white canvas:

    for (var k = 0; k < 100000; k++) {

The same results occur with Safari.

EDIT:

But, funny, if I reduce the size of the ellipses, this works:

    for(let k = 0; k < 100000; k++){
        ellipse(random(-width/2, width/2), random(-height/2, height/2), 4, 4);
    }

That is with Chrome, as described above. So it appears that it might be roughly related to the number of pixels drawn during a frame.

What happens on your Windows system if you reduce the size of the ellipses and run it in Chrome?

3

Are you sure it fails? It might be that circles fill the entire screen, rendering it white. :smiley:

Anyway, thanks for the feedback, I think this particular setup (chrome/windows/rtx/…) is the issue, but am not sure why.

1 Like
4

Good point! In fact, this works, albeit slowly:

    for(let k = 0; k < 1000000; k++){
        fill(random() * 256);
        ellipse(random(-width/2, width/2), random(-height/2, height/2), 10, 10);
    }

EDITED:

255 → 256 in this line:

        fill(random() * 256);
1 Like
5

If I set the number to something like 100, it works fine, but if I increase it to 1000 (the limit is somewhere between 100 and 1000 I guess) it starts to get slower and slower and Chrome chrases. The other browsers work fine.

1 Like
6

So, evidently, your hypothesis is correct …

1 Like