Home
JavaScript mode in the Processing environment (PDE) is based on and made possible by Processing.js, a port of the Processing language to JavaScript and the HTML5 <canvas></canvas> element. This allows you to natively target web environments without having to worry about plugins. Processing.js was originally started by John Resig and is now being developed by a great team at Seneca College.
The mode allows you to run and export your Processing.js sketches directly from inside the Processing environment. Running a sketch starts a server that delivers your sketch directly from its export folder. This allows you to view and test your sketch on multiple browsers and even multiple devices if you are on a network.
If you have any firewall or anti-malware software running (which you probably should) then you need to configure it to allow the server to run. The server runs on address http://127.0.0.1/ and is not bound to a specific port but chooses just any free port that is currently available. This allows running multiple sketches (servers) side by side.
To start a fresh Processing.js sketch:
- open Processing
- create a new sketch
- change its mode to JavaScript using the mode menu in the upper-right corner of the editor window
- hack away ...
- press "run"
- (your sketch code is checked for syntax errors)
- (a server is started)
- your default browser should open a new window with the address of the server
- test your sketch in the browser (hint: Chrome and Safari have integrated JavaScript consoles and for FireFox there is FireBug)
- switch back to the Processing environment (PDE) and change your code
- save (yes, just save)
- got to browser and reload window
- … and so on
Pressing "stop" or closing your sketch window will stop the server.
Putting it online:
Running or exporting a sketch produces an export folder named "web-export" in your 'sketches' folder which you can find from the menu:
JavaScript > Show Sketch folder
You can upload the contents of this folder to any web server and your sketch should then be available to the world. Yay!
JavaScript tabs
Similar to .java tabs in the standard mode you can add JavaScript tabs (files) to your sketch. Simply create a new tab with a name ending in ".js" or drag an existing ".js" file onto the editor window of your sketch to copy it.
JavaScript tabs allow for writing pure JavaScript code inside the PDE that can reach beyond what the Processing API offers. Check the examples included with the mode to see how to integrate JavaScript code with "normal Processing".
Templating
You can add your own HTML layout (and more) to a sketch. This layout needs to sit in a folder named "template" next to your .pde files. It will be used when running or exporting your sketch and anything in it will be copied along.
To start a new template you can just copy the default template to your sketch from the menu in the Processing environment:
JavaScript > Start Custom Template
As Processing.js is very tightly integrated with the environment it's running in (the browser) there are some things that differ from normal Processing sketches. Images and fonts need to be preloaded before they can be used as they are transfered over the net and some settings allow for better interaction and integration with the outer framing. These settings are added or changed in a Processing.js project by means of "directives" which you can edit through a settings window available in the menu under:
JavaScript > Playback Settings
As of Processing 2.0 alpha 5 there is a mechanism included into the running / export mechanism that will seek for JavaScript versions of installed libraries. If an "import xx.yy.zz" statement is encountered the PDE looks up the Java version of the library (the .jar file) and if there is a .js file with the same name but .js ending it will be included upon running / export.