# Sketches not working in Firefox

**URL:** <https://discourse.processing.org/t/sketches-not-working-in-firefox/17705>\
**Category:** p5.js\
**Created:** [February 10, 2020, 9:38pm UTC](https://discourse.processing.org/t/sketches-not-working-in-firefox/17705 "2020-02-10T21:38:32Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![August](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/august/32/8048_2.png) [@August](https://discourse.processing.org/u/August)\
**Post date:** [February 10, 2020, 9:38pm UTC](https://discourse.processing.org/t/sketches-not-working-in-firefox/17705/1 "2020-02-10T21:38:32Z")

</div>

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](http://laythemeforum.com:4567/topic/1919/p5js-in-laytheme) 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:

```auto
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:

```auto
<!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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/73eea91c191fc53e07e402e5a258625038eb0a36.png)

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 17, 2020, 12:21am UTC](https://discourse.processing.org/t/sketches-not-working-in-firefox/17705/2 "2020-02-17T00:21:37Z")

</div>

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](https://p5js.org/reference/#/p5/remove)