processing / processing/p5.js-web-editor

P5.js compatibility issue with Arc browser on Windows

Open
#3,261 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area:Preview Bug Priority:Medium
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:
  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;
		}
	}
}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.