The p5.js Web Editor’s loop protection can report an infinite loop when a loop is simply expensive to execute.
For example, this p5.js issue was initially reported as an infinite loop:
opened 02:33AM - 29 Jul 26 UTC
Area:Core
Area:WebGL
p5.js 2.0+
### Most appropriate sub-area of p5.js?
- [ ] Accessibility
- [ ] Color
- [x] C… ore/Environment/Rendering
- [ ] Data
- [ ] DOM
- [ ] Events
- [ ] Image
- [ ] IO
- [ ] Math
- [ ] Typography
- [ ] Utilities
- [x] WebGL
- [ ] WebGPU
- [ ] p5.strands
- [ ] Build process
- [ ] Unit testing
- [ ] Internationalization
- [ ] Friendly errors
- [ ] Other (specify if possible)
### p5.js version
2.2.3
### Web browser and version
150.0.7871.115 (Official Build) (arm64)
### Operating system
MacOS
### Steps to reproduce this
### Steps:
1. Run the following sketch in the p5.js editor
Doing this yields Error: Multiple infinite loops detected. Stopping execution.
### Snippet:
```js
const points1 = [];
const num = 7;
function setup() {
const s = 640;
createCanvas(s, s, WEBGL);
for (let i = 0; i < num; i++) {
const x = 0.5 * width - random(0, width);
const y = 0.5 * height - random(0, height);
const z = 0.5 * width - random(0, width);
points1.push({
x: 0.625 * x,
y: 0.625 * y,
z: 0.625 * z,
});
}
frameRate(24);
}
function draw() {
background(15);
noFill();
for (let k = 0; k < 32; k++) {
stroke(255);
push();
rotateY(frameCount * 0.01 - k * 0.04);
beginShape();
for (let i = 0; i < points1.length; i++) {
splineVertex(points1[i].x, points1[i].y, points1[i].z);
}
endShape(CLOSE);
pop();
}
}
```
After profiling it, the loop itself terminates normally. The warning is triggered because rendering the WebGL spline geometry takes long enough to exceed the editor’s loop protection threshold.
A similar case was reported on the Processing forum:
<!let img;
let cnv;
function preload() {
img = loadImage(‘assets/IMG_0299_2.jpg’);
}
//only run once
function setup() {
cnv = createCanvas(img.width, img.height);
let newCanvasX = (windowWidth - img.width)/2;
let newCanvasY = (windowHeight- img.height)/2;
cnv.position(newCanvasX, newCanvasY);
//access the pixel information of the image
for(let col = 0; col< img.width; col+=2){
for (let row =0; row<img.height;row+=2) {
let xPos =col;
let yPos =row;
let c = img.get(xPos,yPos);
pus…
In both cases, the current message:
Error: Multiple infinite loops detected. Stopping execution.
makes it sound like the editor has determined that the user’s code contains an actual infinite loop, when it may instead just be a slow loop.
Would it make sense to update the warning to make this distinction clearer?
For example:
This loop is taking a long time to execute and may be infinite. Execution has been stopped.
or something similar that doesn’t state conclusively that an infinite loop was detected.
I’m happy to work on this if we agree on the desired behaviour/wording.
There is ticket about it on p5.js GitHub #9026 I investigated with @davepagurek
Update: after clarification, development of this warning belongs in the p5.js Web Editor repository. A related Web Editor issue is now open here:
opened 04:30PM - 14 Aug 26 UTC
Bug
Awaiting Maintainer Approval
### p5.js version
2.3.2 (although it happens to me on many versions)
### What … is your operating system?
Linux
### Web browser and version
151.0.7922.108 (Official Build) (x86_64)
### Actual Behavior
This Error: Multiple infinite loops detected. Stopping execution
It has been appearing way too often starting sometime this summer. (I don't remember seeing it in May, but in June I feel it started) Most recently I am using an old linux computer to grade p5.js work and almost any assignments with nested loops is giving this error and not completing.
In addition I see it often on my macbook pro which is a fast computer. I have to imagine this is happening all of the time.
I tried using "// noprotect" at the top of the sketch with the hope that it would turn off loop protection, but it does not seem to do that. (although it is documented to turn off the protection). I also tried changing frameRate(1) but that did not help either (I was testing the idea that maybe the draw loop was causing infitinite loops and if i slowed it down it may help)
### Expected Behavior
I expect it to run, but just a little bit slower.
When i use // noprotect I expect it to turn off infinite loop protection and run without errors.
Considering p5.js and the P5 editor are intended to be the most accessible coding platform, it should work reasonably well for older computers. My computer is not that old, but it is kind of slow. The p5 web editor just does not work with this computer.
### Steps to reproduce
// noprotect
// Note run this on a slower computer, in my case a Linux laptop and it will give the error
let z = 0;
function setup() {
createCanvas(400, 400);
colorMode(HSB, 360, 100, 100);
noStroke();
}
function draw() {
background(0, 0, 90);
z += 0.01;
for (let x = 0; x < width; x += 5) {
for (let y = 0; y < height; y += 5) {
let n = noise(x / 100, y / 100, z);
fill(n * 360, 75, 95);
square(x, y, 5);
}
}
}
I added the p5.js #9026 findings and proposed clearer warning wording there. Further implementation discussion will continue on GitHub, so this forum topic can now be closed.