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
1 Like