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
- 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
- switch back to the Processing environment (PDE) and change your code
- save (yes, just save)
- got to browser and reload window
- … and so on
If your computer is on a network your sketch can be accessed by other devices on the network through the IP address of your computer plus the port assigned by Processing upon run. Just replace "127.0.0.1" with your computers IP address.
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:
You can upload the contents of this folder to any web server and your sketch should then be available to the world. Yay!
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:
Playback settings aka directives
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: