# P5 in WEBGL crashes Chrome

**URL:** <https://discourse.processing.org/t/p5-in-webgl-crashes-chrome/38369>\
**Category:** p5.js\
**Created:** [August 15, 2022, 10:09pm UTC](https://discourse.processing.org/t/p5-in-webgl-crashes-chrome/38369 "2022-08-15T22:09:19Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![patakk](https://avatars.discourse-cdn.com/v4/letter/p/77aa72/32.png) [@patakk](https://discourse.processing.org/u/patakk)\
**Post date:** [August 15, 2022, 10:09pm UTC](https://discourse.processing.org/t/p5-in-webgl-crashes-chrome/38369/1 "2022-08-15T22:09:20Z")

</div>

Hello,

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

```auto
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?

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 15, 2022, 10:51pm UTC](https://discourse.processing.org/t/p5-in-webgl-crashes-chrome/38369/2 "2022-08-15T22:51:30Z")

</div>

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:

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

```

But this fails, producing only a white canvas:

```auto
    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:

```auto
    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?

---

<div class="post-metadata">

**Author:** ![patakk](https://avatars.discourse-cdn.com/v4/letter/p/77aa72/32.png) [@patakk](https://discourse.processing.org/u/patakk)\
**Post date:** [August 15, 2022, 11:03pm UTC](https://discourse.processing.org/t/p5-in-webgl-crashes-chrome/38369/3 "2022-08-15T23:03:45Z")

</div>

> [@javagar](#):
>
> But this fails, producing only a white canvas:
> 
> ```auto
> 
> ```

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

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

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 15, 2022, 11:10pm UTC](https://discourse.processing.org/t/p5-in-webgl-crashes-chrome/38369/4 "2022-08-15T23:10:33Z")

</div>

> [@patakk](#):
>
> Are you sure it fails? It might be that circles fill the entire screen, rendering it white.

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

```auto
    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:

```auto
        fill(random() * 256);

```

---

<div class="post-metadata">

**Author:** ![patakk](https://avatars.discourse-cdn.com/v4/letter/p/77aa72/32.png) [@patakk](https://discourse.processing.org/u/patakk)\
**Post date:** [August 15, 2022, 11:32pm UTC](https://discourse.processing.org/t/p5-in-webgl-crashes-chrome/38369/5 "2022-08-15T23:32:13Z")

</div>

> [@javagar](#):
>
> What happens on your Windows system if you reduce the size of the ellipses and run it in Chrome?

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.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 15, 2022, 11:36pm UTC](https://discourse.processing.org/t/p5-in-webgl-crashes-chrome/38369/6 "2022-08-15T23:36:27Z")

</div>

So, evidently, your hypothesis is correct …

> [@patakk](#):
>
> I think this particular setup (chrome/windows/rtx/…) is the issue …