# Cannot read property 'bind' of null When using OpenProcessing

**URL:** <https://discourse.processing.org/t/cannot-read-property-bind-of-null-when-using-openprocessing/923>\
**Category:** p5.js\
**Created:** [June 13, 2018, 3:14pm UTC](https://discourse.processing.org/t/cannot-read-property-bind-of-null-when-using-openprocessing/923 "2018-06-13T15:14:06Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![esulu](https://avatars.discourse-cdn.com/v4/letter/e/b4bc9f/32.png) [@esulu](https://discourse.processing.org/u/esulu)\
**Post date:** [June 13, 2018, 3:14pm UTC](https://discourse.processing.org/t/cannot-read-property-bind-of-null-when-using-openprocessing/923/1 "2018-06-13T15:14:06Z")

</div>

Hello there. I am making a game in processing and it works fine, but I am trying to upload it to [openprocessing.org](http://openprocessing.org) but I’m running into some issues.

I pasted my code on a new sketch and uploaded all of the files onto the site, but I am running into the following error: Cannot read property ‘bind’ of null.

I tried looking up the cause and how to fix this issue, but my attempts did not work.

Here is the sketch on openprocessing: [https://www.openprocessing.org/sketch/559876#](https://www.openprocessing.org/sketch/559876#)

---

<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:** [June 13, 2018, 7:42pm UTC](https://discourse.processing.org/t/cannot-read-property-bind-of-null-when-using-openprocessing/923/2 "2018-06-13T19:42:36Z")

</div>

We can’t use libraries written in Java (like your SoundFile there) in JS! 😥

Either hack your way to get sound using JS itself like this Mario sketch did: 🤖  
[https://GoSubRoutine.GitHub.io/PjsGameEngine/codebase/](https://GoSubRoutine.GitHub.io/PjsGameEngine/codebase/)

> **[GoSubRoutine/PjsGameEngine](https://github.com/GoSubRoutine/PjsGameEngine)**
>
> Contribute to GoSubRoutine/PjsGameEngine development by creating an account on GitHub.

Or then rewrite it in JS (or some other language transpiled to JS, like TypeScript and CoffeeScript) targeting the library p5js:

- [https://GitHub.com/processing/p5.js/wiki/Processing-transition](https://GitHub.com/processing/p5.js/wiki/Processing-transition)

---

<div class="post-metadata">

**Author:** ![esulu](https://avatars.discourse-cdn.com/v4/letter/e/b4bc9f/32.png) [@esulu](https://discourse.processing.org/u/esulu)\
**Post date:** [June 13, 2018, 8:37pm UTC](https://discourse.processing.org/t/cannot-read-property-bind-of-null-when-using-openprocessing/923/3 "2018-06-13T20:37:59Z")

</div>

Thanks for the reply! I didn’t what caused the error in the first place.

I will definitely look into this.

---

<div class="post-metadata">

**Author:** ![esulu](https://avatars.discourse-cdn.com/v4/letter/e/b4bc9f/32.png) [@esulu](https://discourse.processing.org/u/esulu)\
**Post date:** [June 16, 2018, 4:56pm UTC](https://discourse.processing.org/t/cannot-read-property-bind-of-null-when-using-openprocessing/923/4 "2018-06-16T16:56:58Z")

</div>

Alright so I tried to upload the game without the audio to at least play it online, and still got the same issue.

I looked into it and preloaded the images and the font to get rid of the error, and it worked, kind of.

So now it doesn’t play, its just a blank screen. [link](https://www.openprocessing.org/sketch/559876)

Not sure why this is happening. I have uploaded the image files to [openprocessing.org](http://openprocessing.org) and it still doesn’t run the game.

---

<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:** [June 16, 2018, 10:06pm UTC](https://discourse.processing.org/t/cannot-read-property-bind-of-null-when-using-openprocessing/923/5 "2018-06-16T22:06:20Z")

</div>

> [@How to overlay an image over another in P3D](https://discourse.processing.org/t/how-to-overlay-an-image-over-another-in-p3d/959/5):
>
> Once Pjs spots the 1st /\*@pjs \*/ directive comment block within a sketch, it skips the others! skull_and_crossboneswarningskull

Besides using 2 /\*@pjs \*/ directive comment blocks, those image filenames don’t match the 1s you’ve uploaded there! 😱

They even lack the file extension “.png”! Capitalization fails to match either! 😵

For example, the 1st image you request in /\*@pjs \*/ is “imgHeart1”.  
However, the uploaded filename is just: “heart1.png”. 🙄

---

<div class="post-metadata">

**Author:** ![esulu](https://avatars.discourse-cdn.com/v4/letter/e/b4bc9f/32.png) [@esulu](https://discourse.processing.org/u/esulu)\
**Post date:** [June 16, 2018, 11:54pm UTC](https://discourse.processing.org/t/cannot-read-property-bind-of-null-when-using-openprocessing/923/6 "2018-06-16T23:54:19Z")

</div>

Ok so I tried using only 1 @pjs comment block and matched the files I had:

```auto
/* @pjs preload="heart1.png, heart2.png, map1.png, Zombie-up.png, Zombie-down.png, Zombie-left.png, Zombie-right.png, background.png, Crate-img.png, Health-img.png, volumeWhite1.png, volumeWhite2.png, bullet1.png, bullet2.png, bullet3.png, DAY-ZERO.png, devlogo.png, Arial.tff"; */

```

But it’s still not playing and I’m not sure why.

Thanks for your continuous help 🙂 Really appreciate it

---

<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:** [June 17, 2018, 1:25am UTC](https://discourse.processing.org/t/cannot-read-property-bind-of-null-when-using-openprocessing/923/7 "2018-06-17T01:25:13Z")

</div>

- Hit F12 or CTRL + SHIFT + J to access the browser’s console and check for any errors there. 👓
- BtW, I’ve spotted this error there: 🤖  
“GET [https://www.OpenProcessing.org/sketch/559876/files/map1.png](https://www.OpenProcessing.org/sketch/559876/files/map1.png) 404 (Not Found)”
- Indeed, it isn’t “map1.png” but a capitalized “Map1.png”: 😔

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/a57b1882e22e30a69aa615f2721f97ba480a557e.png)

- In general, avoid capitalized filenames! 👾
- 2nd error: “GET [https://www.openprocessing.org/sketch/559876/files/Arial.tff](https://www.openprocessing.org/sketch/559876/files/Arial.tff) 404 (Not Found)”
- Seems like you haven’t uploaded that “Arial.tff” font file yet. 😩
- Also, we need to use the /\*@pjs \*/directive `font=""` in order to preload font files: 🧐  
[http://ProcessingJs.org/reference/font/](http://ProcessingJs.org/reference/font/)

---

<div class="post-metadata">

**Author:** ![esulu](https://avatars.discourse-cdn.com/v4/letter/e/b4bc9f/32.png) [@esulu](https://discourse.processing.org/u/esulu)\
**Post date:** [June 17, 2018, 1:42am UTC](https://discourse.processing.org/t/cannot-read-property-bind-of-null-when-using-openprocessing/923/8 "2018-06-17T01:42:23Z")

</div>

Fixed the map name and added the font file + the @pjs directive. When I hit F12 I am getting the following error now and I don’t know what it means:

````auto
Uncaught TypeError: Cannot read property 'bind' of null
    at eval (eval at attach (processing-1.4.8.js:718), <anonymous>:1340:27)
    at Processing.Sketch.attach (processing-1.4.8.js:719)
    at executeSketch (processing-1.4.8.js:21448)
    at new Processing.Processing (processing-1.4.8.js:21483)
    at pjs_OPextension.js:7
    at dispatch (jquery-1.11.1.min.js:3)
    at r.handle (jquery-1.11.1.min.js:3)
(anonymous) @ VM556:1340
attach @ processing-1.4.8.js:719
executeSketch @ processing-1.4.8.js:21448
Processing.Processing @ processing-1.4.8.js:21483
(anonymous) @ pjs_OPextension.js:7
dispatch @ jquery-1.11.1.min.js:3
r.handle @ jquery-1.11.1.min.js:3
load (async)
add @ jquery-1.11.1.min.js:3
(anonymous) @ jquery-1.11.1.min.js:3
each @ jquery-1.11.1.min.js:2
each @ jquery-1.11.1.min.js:2
on @ jquery-1.11.1.min.js:3
(anonymous) @ iframe_giveFocus.js:2
sketch_console.js:78 Uncaught TypeError: Cannot read property 'message' of null
    at sketchConsole.showError (sketch_console.js:78)```

````

Edit: Here is what I did to the @pjs:

```auto
/* @pjs preload="heart1.png, heart2.png, Map1.png, Zombie-up.png, Zombie-down.png, Zombie-left.png, Zombie-right.png, background.png, Crate-img.png, Health-img.png, volumeWhite1.png, volumeWhite2.png, bullet1.png, bullet2.png, bullet3.png, DAY-ZERO.png, devlogo.png" font="arial.ttf";*/
```

---

<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:** [June 17, 2018, 2:28am UTC](https://discourse.processing.org/t/cannot-read-property-bind-of-null-when-using-openprocessing/923/9 "2018-06-17T02:28:18Z")

</div>

In order to have a sketch automatically transpiled by the Pjs library to JS, we need to make sure it sticks to its API: [http://ProcessingJS.org/reference/](http://ProcessingJS.org/reference/) 📖

For example, inside your class Leaderboard’s constructor, you attempt to **createReader()**, which isn’t available to Pjs! 😥

---

<div class="post-metadata">

**Author:** ![esulu](https://avatars.discourse-cdn.com/v4/letter/e/b4bc9f/32.png) [@esulu](https://discourse.processing.org/u/esulu)\
**Post date:** [June 17, 2018, 2:34am UTC](https://discourse.processing.org/t/cannot-read-property-bind-of-null-when-using-openprocessing/923/10 "2018-06-17T02:34:17Z")

</div>

Thanks for the replies once again!

The initial purpose of posting our game online was to have our friends have it a go. I guess we can’t do that since we have file reading/writing.

Oh well, it was worth a shot. 😔