Sketches not working in Firefox

p5.js
1

Hi! I am trying to incorporate a P5.js sketch on my Wordpress site. I am using a theme named Lay Theme and have been following this tutorial to get sketches to load on the site. I have tested three different sketches and they all work fine in Chrome. In Firefox and Edge (haven’t tested other browsers yet) all I get is a blank screen. Sometimes it works when I reload, but it’s very rare. It seems to happen more often if I let the site just stay up for a few minutes and then reload.

I’ve done a lot of googling and debugging, but I have no clue why the sketches won’t work. I’ll provide code and error messages here in hope of assistance.

Code from sketch:

var cnv;
var ey;

function setup() {
	cnv = createCanvas(windowWidth, windowHeight);
	//createCanvas(windowWidth, windowHeight);
	colorMode(HSB, 360, 100, 100, 100);
	angleMode(DEGREES);
	cnv.position(0, 0);
	cnv.parent('sketch-holder');

	ey = {
		x: width/2,
		y: height,
		rad: width/3,
	};


}

function draw() {
	background(0, 0, 15);

	var ang = atan2(mouseY - ey.x, mouseX - ey.x);

	noStroke();
	fill(0, 0, 100);
	ellipse(ey.x, ey.y, ey.rad);
	fill(340, 50, 90);
	ellipse(ey.x + (ey.x / 4) * cos(ang), ey.y + (ey.y / 4.5) * sin(ang), ey.rad / 3.3);
	sin(ang), ey.rad;
	fill(0, 0, 15);
	ellipse(ey.x + (ey.x / 3.8) * cos(ang), ey.y + (ey.y / 4) * sin(ang), ey.rad / 6);
	sin(ang), ey.rad;
	fill(0, 0, 100);
	ellipse(ey.x + (ey.x / 3.2) * cos(ang), ey.y + (ey.y / 3.6) * sin(ang), ey.rad / 16);
	sin(ang), ey.rad/2;

}

function windowResized(){
	resizeCanvas(windowWidth, windowHeight);
	ey.x = width/2;
	ey.y = height;
	ey.rad = width/3;
}

This is my index.html file:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BigEye</title>
    <style> body {padding: 0; margin: 0;} </style>
    <script src="libraries/p5.js"></script>
    <script src="libraries/p5.sound.js"></script>
    <script src="libraries/p5.dom.js"></script>
    <script src="bigeye.js"></script>
  </head>
  <body>
  </body>
</html>

I have tried to execute only the index.html file in an up-to-date Firefox and Edge, and these are the error-messages I get:

Error in Firefox:

firefox_error
firefox_error813×94 3.29 KB

Error in Edge:
I’m a new user so I’m only allowed one image per post

SCRIPT5007: SCRIPT5007: Unable to get property ‘appendChild’ of undefined or null reference
p5.js (59372, 13)

Let me know if there’s any other useful ways to debug this, or other things I should provide/check.

August

1 Like
2

Were you able to resolve this issue?

“p is null” isn’t something I have seen before, although I primarily work with Java and Python modes, not p5.js. Perhaps your p5.js library isn’t loading, or is loading after your sketch code in a race condition?

I believe (?) that calling remove() can drop a sketch like this, setting p to null

https://p5js.org/reference/#/p5/remove