processing / processing/p5.js-web-editor
P5.js compatibility issue with Arc browser on Windows
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.7k
- Forks
- 1.7k
- Avg merge
- 3d 4h
- Merged PRs (30d)
- 8
Description
p5.js version
1.10.0
What is your operating system?
Windows
Web browser and version
Arc Browser Based on Chromium version 130.0.6723.92 (Official Build) (64-bit)
Actual Behavior
I'm working on a simple p5.js sketch where balls bounce off the edges of the canvas. The sketch runs as expected for a while, but when a ball approaches the top edge, the sketch freezes, and I receive an error message.
TypeError: Cannot read properties of undefined (reading 'length')
at undefined:53173:127
🌸 p5.js says:
[p5.js, line 53173] Cannot read property of undefined. Check the line number in error and make sure the variable which is being operated is not undefined.
- More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property#what_went_wrong
┌[https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js:53173:127]
Error at line 53173 in _gridMap()
└[https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js:53138:26]
Called from line 53138 in _main.default._updateGridOutput()
└[https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js:53690:20]
Called from line 53690 in _main.default._updateAccsOutput()
└[https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js:78952:22]
Called from line 78952 in _main.default.redraw()
└[https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js:66079:23]
Called from line 66079 in _draw()
Expected Behavior
The ball should bounce off the top edge and continue moving within the canvas without any errors.
Steps to reproduce
Steps:
- Go to the P5.js web editor https://editor.p5js.org/
- Run the code given below
Snippet:
let ball;
let ball2;
function setup() {
createCanvas(600,600);
ball = new Ball(width/2,height/2);
ball2 = new Ball(width/2-100,height/2-100);
}
function draw() {
background(0);
ball.display()
ball.move();
ball.edges();
ball2.display();
ball2.move();
ball2.edges();
}
class Ball {
constructor(x,y){
this.x = x;
this.y = y;
this.xspeed = random(1,3);
this.yspeed = random(1,4);
}
display() {
stroke(255);
noFill();
ellipse(this.x, this.y, 42);
}
move() {
this.x += this.xspeed;
this.y += this.yspeed;
}
edges() {
if (this.x > width || this.x < 0) {
this.xspeed *= -1;
}
if (this.y > height || this.y < 0) {
this.yspeed *= -1;
}
}
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the sketch in the p5.js web editor on Windows with Arc Browser, then inspect the reported p5.js entry points: _gridMap(), _updateGridOutput(), _updateAccsOutput(), redraw(), and _draw(). Compare the failing behavior around the top canvas edge with the expected uninterrupted bounce and the reported undefined-length error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100