P5.js compatibility issue with Arc browser on Windows

[shloktayal]

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:

1. Go to the P5.js web editor https://editor.p5js.org/
2. 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;
		}
	}
}

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[ujjwaldubey1]

@raclim Can I work on it ?

[raclim]

Yes @ujjwaldubey1 feel free to take it on! :)

[Jatin24062005]

Hello @raclim As a Contributer I wanted to tell you i think the issue is no longer there i followed the Process as the above described ....
I would request you to Please close the issue and it there was a issue it was maybe in a Code snippet

p5.js.Web.Editor.-.Google.Chrome.2024-12-10.19-56-30.mp4

[Harshit-7373]

@shloktayal @raclim

Issue: The sketch freezes when a ball approaches the top edge, and an error occurs: TypeError: Cannot read properties of undefined (reading 'length').

Fix: The issue is likely caused by the ball going out of bounds when approaching the top or bottom edge. To resolve this, I added the constrain() function to make sure the ball stays within the canvas boundaries.

Updated Code :
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() {
// Ensure the ball stays within the canvas bounds
if (this.x > width || this.x < 0) {
this.xspeed *= -1;
}
if (this.y > height || this.y < 0) {
this.yspeed *= -1;
}
// Prevent the ball from going out of bounds by constraining its position
this.x = constrain(this.x, 0, width);
this.y = constrain(this.y, 0, height);
}
}

Thankyou and if You have any doubts feel free to ask.
Github : Harshit-7373