<!DOCTYPE html> <html> <head> http://processing-1.4.8.min.js </head> <body> <canvas data-processing-sources="hello.pde"></canvas> </body> </html>
Then when you create a file hello.pde in the same directory as your HTML page with the following content.
size(400, 400); rect(80, 70, 60, 240); rect(280, 70, 60, 240); rect(140, 170, 140, 40);
If you now load your HTML page in your browser. It should display a simple graphic. For me, this did not work in Chrome because the hello.pde file is loaded with XMLHttpRequest and creates a same-origin policy violation. But it worked in Firefox.
I will continue exploring the Processing.js library.