I've been playing around with Processing.js to produce visualizations of some genomics data. The Java based Processing language/environment was originally developed by the noted data visualization guru Ben Fry and graphic artist Casey Reas. Processing.js is a port of the Processing language and libraries to javascript and the HTML 5 canvas by none other than John Resig, the creator of the jQuery javascript library. I was skeptical at first that Processing.js would be anything but a pale shadow of it's Processing predecessor, but after using it for a bit I have to say that I am impressed.
Most of the Processing sketches one can find scattered around the web and on such sites as Open Processing just work. Here, for example, is a sketch from the examples on Processing.org called reflection2. Click on image to launch another ball. Once the canvas element has focus, type 'r' to draw a new ground.:


The only requirement for this sketch to work is a browser that supports the HTML5 canvas. While it's not close to the speed of Processing compiled to JVM bytecode, the performance isn't bad at all and seems more than adequate for a wide range of visualization tasks. This is a testimony to the performance work that has been going into browser javascript engines as well as to the efforts put into optimizing processing.js itself. Embedding processing.js scripts in blogger, as I have done here, also turns out to be quite easy. Just add a script tag to grab the processing.js library to an (old style) blogger template and another script tag embedded in the post containing the processing code (view source to see both tags).

Labels: blogger, canvas, HTML5, javascript, Processing, processing.js