Processing.js – Missing Documentation

The Processing.js project is really cool. It allows you to run Processing .pde files inside (HTML5 compatible) web browsers using Javascript. You can pass data back and forth between the two programs, access the DOM with Processing, and you don’t need any plugins or Java.

Click here to run this Processing sketch in your browser

One caveat… When importing a Processing .pde file into the HTML5 canvas you must access the files on a web server or by using localhost (a server running on your computer, e.g. MAMP) because most (all modern?) web browsers don’t allow file:/// access for security reasons. Unfortunately this is not intuitive as Javascript should run in the browser regardless of file:/// access. Nor is it mentioned in any of the Processing.js Quick Start documentation. I found it by testing, and then confirmed it in their README. Darn, need to remember to read (all of) the instructions.

UPDATE: A friend pointed out that the problem accessing the .pde file could be due to the same origin policy. Though not explicitly stated on the Github page for Processing.js, they do mention that disabling same origin setting in your browser is a(n undesirable) workaround.

Some web browsers (e.g., Chrome) require secondary files to be loaded from a web server for security reasons. This means loading a web page that references a Processing.js sketch in a file via a file:/// URL vs. http:// will fail. You are particularly likely to run into this problem when you try to view your webpage directly from file, as this makes all relatively links file:/// links.

2 thoughts on “Processing.js – Missing Documentation

  1. I appreciate your posting this. It took me quite a while to come to the same conclusions–the good people at Processing do make make this very clear. I wish I had found your page a few weeks ago.

    My impression is Explorer will not run the pde files ever ever. Chrome will–but only through workarounds. Firefox will run the files without any problems.

    I am a high school teacher. Unfortunately, this issue seems to make Processingjs useless as a teaching tool. So sad.

  2. Glad to hear it helped. Sharing knowledge == good karma. Nice site, I would have been thrilled to learn that stuff in high school. For labs that are locked down I have been able to use their online IDE for guest workshops. Can you run the projects in FireFox?

Comments are closed.