Firstly, download processing-1.4.1-min.js, jquery-1.9.1.min.js, and webpd-latest.js by right-clicking on these links and saving them to /ProcessingJSWebpdTest/js/ (or where ever you prefer). Next we create a very simple Pd patch in which (x, y) coordinates can be used to control pitch and amplitude.
Now create index.html (in the same directory as test.pd, and also containing the folder /js with the files processing-1.4.1-min.js, jquery-1.9.1.min.js, and webpd-latest.js).
The first few lines are pretty straight forward. Firstly we load processing.js, WebPd, and jQuery, and set the style such that there is no padding or margins. Then we start a script, and determine the document’s width and height (remember I said we’d do it the proper way?!), and try to load the Pd patch. The next script is some simple Processing code.
One issue (when trying to refer to the Pd patch variable in the Processing sketch - i.e. when send variables between both of them) is that the sketch must initially be set to noLoop() mode, and then after the patch is loaded, we turn Processing’s loop mode back on. Perhaps there is a better way, but so far this is what has worked for me, and what is also done in Sébastien’s demo.
Now lets run this. If you double click on index.html you’ll more than likely be greeted with a black screen and red circle in the corner not doing anything. This is because the processing script has failed as the browser blocked Ajax’s request to load the patch. The easiest way to get around this is to start a local HTTP server. As long as you have Python installed, go to the root directory of your project (where index.html is located) and run
python -m SimpleHTTPServer
in the terminal, and finally load http://localhost:8000/index.html in your browser. You should then be greeted with the following:
As you can see from Firefox’s console, there are some buffer underflow errors, however WebPd is a great start in implementing Pd in js, and a potentially a go-to library for Web developers with a background in Max or Pd. To see what has been implemented in WebPd, go to the Web GUI page, where in fact you can live code Pd web objects! The source code can be downloaded here.