# Running p5.js sketch error

**URL:** https://discourse.processing.org/t/running-p5-js-sketch-error/1492
**Category:** p5.js
**Created:** [July 4, 2018, 12:35pm UTC](https://discourse.processing.org/t/running-p5-js-sketch-error/1492 "2018-07-04T12:35:03Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![ville2008](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@ville2008](https://discourse.processing.org/u/ville2008)
#### Post date: [July 4, 2018, 12:35pm UTC](https://discourse.processing.org/t/running-p5-js-sketch-error/1492/1 "2018-07-04T12:35:03Z")

</div>

when i try to launch my sketch (P5.JS libarary used) i get this error in the console:

java.lang.NullPointerException  
at processing.mode.p5js.p5jsBuild.updateHtml(p5jsBuild.java:103)  
at processing.mode.p5js.p5jsEditor.handleRun(p5jsEditor.java:438)  
at processing.mode.p5js.p5jsToolbar.handleRun(p5jsToolbar.java:32)  
at processing.app.ui.EditorToolbar$1.actionPerformed(EditorToolbar.java:157)  
at processing.app.ui.EditorButton.mousePressed(EditorButton.java:189)  
at java.awt.Component.processMouseEvent(Component.java:6530)  
at javax.swing.JComponent.processMouseEvent(JComponent.java:3324)  
at java.awt.Component.processEvent(Component.java:6298)  
at java.awt.Container.processEvent(Container.java:2237)  
at java.awt.Component.dispatchEventImpl(Component.java:4889)  
at java.awt.Container.dispatchEventImpl(Container.java:2295)  
at java.awt.Component.dispatchEvent(Component.java:4711)  
at java.awt.LightweightDispatcher.retargetMouseEvent(Container.java:4889)  
at java.awt.LightweightDispatcher.processMouseEvent(Container.java:4523)  
at java.awt.LightweightDispatcher.dispatchEvent(Container.java:4467)  
at java.awt.Container.dispatchEventImpl(Container.java:2281)  
at java.awt.Window.dispatchEventImpl(Window.java:2746)  
at java.awt.Component.dispatchEvent(Component.java:4711)  
at java.awt.EventQueue.dispatchEventImpl(EventQueue.java:760)  
at java.awt.EventQueue.access$500(EventQueue.java:97)  
at java.awt.EventQueue$3.run(EventQueue.java:709)  
at java.awt.EventQueue$3.run(EventQueue.java:703)  
at java.security.AccessController.doPrivileged(Native Method)  
at java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:80)  
at java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:90)  
at java.awt.EventQueue$4.run(EventQueue.java:733)  
at java.awt.EventQueue$4.run(EventQueue.java:731)  
at java.security.AccessController.doPrivileged(Native Method)  
at java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:80)  
at java.awt.EventQueue.dispatchEvent(EventQueue.java:730)  
at java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:205)  
at java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:116)  
at java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:105)  
at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:101)  
at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:93)  
at java.awt.EventDispatchThread.run(EventDispatchThread.java:82)

please help, i am kinda new to p5.js.

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [July 4, 2018, 1:49pm UTC](https://discourse.processing.org/t/running-p5-js-sketch-error/1492/2 "2018-07-04T13:49:28Z")

</div>

You may try out OpenProcessing instead: 🤠

> **[My Sketch - Guest User - OpenProcessing](https://openprocessing.org/sketch/create)**

[![](https://img.youtube.com/vi/vNjobQiQZns/hqdefault.jpg "9.18: p5.js with OpenProcessing and Processing IDE - p5.js Tutorial") ](https://www.youtube.com/watch?v=vNjobQiQZns)

Or simply use any Firefox-based browser to open your “index.html” file: 🤑

> [@How i extends class in p5.js?](https://discourse.processing.org/t/how-i-extends-class-in-p5-js/894/11):
>
> AFAIK, PDE’s p5js Mode doesn’t allow the instance mode approach I guess. grimacing The easiest way to run my demo sketches is by having any Firefox-based browser installed in your OS. star_struck I recommend Firefox Developer Edition, Waterfox & Palemoon: sunglasses[https://www.mozilla.org/en-US/firefox/developer/all/](https://www.mozilla.org/en-US/firefox/developer/all/) Create some folder and then place both files “index.html” & “sketch.js” there. Finally open any Firefox-based browser and drag & drop the “index.html” file there. It …

You can use this minimal “index.html” template btW: 😇

```auto
<script defer src=https://CDN.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

```

---

<div class="post-metadata">

### Author: ![ville2008](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@ville2008](https://discourse.processing.org/u/ville2008)
#### Post date: [July 4, 2018, 1:52pm UTC](https://discourse.processing.org/t/running-p5-js-sketch-error/1492/3 "2018-07-04T13:52:53Z")

</div>

ok, ill test firefox and the script thingy.

---

<div class="post-metadata">

### Author: ![ville2008](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@ville2008](https://discourse.processing.org/u/ville2008)
#### Post date: [July 4, 2018, 2:27pm UTC](https://discourse.processing.org/t/running-p5-js-sketch-error/1492/5 "2018-07-04T14:27:45Z")

</div>

and btw heres my source code please help i am trying to make a snake game i am stuck at the controlls for moving

var s;

function setup() {  
createCanvas(600,600)  
s = new snake();  
}

function draw() {  
background(51);  
s.show();  
s.update();

}  
function snake() {  
this.x = 0;  
this.y = 0;  
this.xspeed = 1;  
this.yspeed = 0;  
this.update = function() {  
this.x = this.x + this.xspeed;  
this.y = this.y + this.yspeed;  
}  
this.show = function() {  
fill(255)  
rect(this.x, this.y, 10, 10);  
}  
}

function KeyPressed() {  
if (keyCode === UP\_ARROW) {  
s.dir(0, -1);  
} else if (KeyCode === DOWN\_ARROW) {  
s.dir(0, 1);  
} var s;

}  
function snake() {  
this.x = 0;  
this.y = 0;  
this.xspeed = 1;  
this.yspeed = 0;  
this.update = function() {  
this.x = this.x + this.xspeed;  
this.y = this.y + this.yspeed;  
}  
this.show = function() {  
fill(255)  
rect(this.x, this.y, 10, 10);  
}  
}

function KeyPressed() {  
if (keyCode === UP\_ARROW) {  
s.dir(0, -1);  
} else if (KeyCode === DOWN\_ARROW) {  
s.dir(0, 1);  
}var s;

function setup() {  
createCanvas(600,600)  
s = new snake();  
}

function draw() {  
background(51);  
s.show();  
s.update();

}  
function snake() {  
this.x = 0;  
this.y = 0;  
this.xspeed = 1;  
this.yspeed = 0;  
this.update = function() {  
this.x = this.x + this.xspeed;  
this.y = this.y + this.yspeed;  
}  
this.show = function() {  
fill(255)  
rect(this.x, this.y, 10, 10);  
}  
}

function KeyPressed() {  
if (keyCode === UP\_ARROW) {  
s.dir(0, -1);  
} else if (KeyCode === DOWN\_ARROW) {  
s.dir(0, 1);  
} else if (KeyCode === RIGHT\_ARROW) {  
s.dir(1, 0);  
} else if (KeyCode === LEFT\_ARROW) {  
s.dir(-1, 0);  
}  
}