I discovered last night that if you run two pix_film objects into pix_diff like so:

and stop one of them while the other one is still running, GEM freaks out a little bit, causing this really rad datamoshing effect. I’m not sure why this happens, but I’m guessing that pix_diff’s calculation of the absolute value of the difference between two inputted images may be similar mathematically to what happens when you delete i-frames from Xvid videos… I could be wrong. Anyway, that GIF above is the last scene from NIN’s banned Broken video (which seems kinda quaint these days, especially after seeing À l'intérieur a few times) “reacting” to a blank still frame or something…

Simple Processing.js + Webpd Tutorial

For ages now I’ve been meaning to investigate the combination of Processing.js and WebPd. Processing.js is a Javascript port of Processing, while WebPd is a Javascript port of Pure Data. So surely they can be combined to create some awesome web apps no?!

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.