Processing.js

Oh, this was a long night! As I was about to go to sleep yesterday, I was just checking my blogroll on Bloglines the last time, when I saw John Resig‘s brand new blog post, announcing that he had ported the wonderful Processing.org to JavaScript. This is absolutely great news. Some time ago I read that a port of Processing to JS had been started, but I wasn’t able to follow the news back them. So this came as a nice surprise.

I really like Processing and have been doing some small experiments with it for quite some time. But what I mostly like about it, given my total lack of artistic sense, is to appreaciate all the creativity and beautiful things which it empowers artists to do (see photos and videos on flickr, vimeo and their site).

So, having a bit of experience with Processing and a deep love for JavaScript, I took last night to explore Processing.js and see what I could quickly do with it. I picked up three examples of code I had with Processing and put them to run under Processing.js. And I also created a brand new one to explore the API from the JS perspective.

Porting the code from Processing was considerably easy. It was not totally flawless, of course, because we simply can’t expect everything to run perfectly without the need of any modification. However, with some simply exploration and effort, everything was running ok.

The greatest part of it is that it is a double API and language under only one core. It is weird to look at it, but you can code in Java or in JavaScript to the exact same API. Under the hood, the Processing.js parses the Java code (at least most of the idiom common to Processing) and converts it to JavaScript. It is funny that, even if you made a mistake in your Java code, you’ll get a JavaScript syntax error!

I’ll go into more details about the code and the porting in another post. Here I’ll mention that most of the Processing 2D API (3d not supported) works flawlessly on it (even the text services, only for Firefox 3), but there are some things still lacking. As a quick example, two of my Processing code used the mouseButton variable to know which button of the mouse was pressed. This variable, however, is lacking in this first version. Anyway, it was a very easy addition to the core with just two lines of code. The frameCount is also missing, which is another easy addition. Anyway, the great thing is that, knowing that we are only targeting the most modern web browsers, we can use advanced JS and DOM features, without the need for ugly hacks all over the place. As an example, we can even use the DOMContentLoaded event to watch for the best time to start to run the code.

Let’s go to the examples! Just a note, however: these are all ultra-alpha code, and by using it, you understand you are going to the deep underground world of your web browser, and that it may crash or get extremely slow. All the examples work in Firefox, Safari and Opera, but some of them needs the text services and will only make sense if you view with Firefox 3 (also, they were only thoroughly tested in Firefox 3).

Brownian Movement

This is a very basic one. A Brownian Movement example comes in the default examples of Processing, and when I was learning the Processing API, I used that code as an example to create a more aesthetically pleasing version, putting some random colors to the mix, a fade-out effect and changed the straight lines to Bezier curves. The code worked without any modification at all! I just picked up the Processing code, throwed it to the Processing.js core and it worked on the first run.

Chaos Theory

A simple game I coded in 2006 inspired by a similar flash game I saw back then. When the game starts, 75 balls are randomly launched into space, and you must click somewhere into the screen to generate a explosion. When the explosion hits a ball, it generates another explosion, creating a chain reaction. The goal is to destroy the most number of balls with the smallest number of clicks (generated explosions).
The original code used some Java features unavailable at Processing.js, but converting it wasn’t much of a deal (except for squashing some original bugs!). Also, the balls had some drop shadows which I disabled here for the game to run quickier. You will need to view it in Firefox 3 if you wish to see the ball counter (which is somewhat essential for the fun), but I’ll change this soon to a text on the page, as I did in the next example.

Snake

A simple version of the traditional snake game. Here the snake grows automatically (and fast!) and you should avoid crashing in itself or on the walls for as long as possible. A counter tells you how good you did on each try. This was the most interesting example because I didn’t had the code for it before. I coded it from scratch for these Processing.js demos, and took the opportunity to code it entirely using the API from JavaScript only (so, in this example, there is no Java code being parsed and converted). Coding Processing in JavaScript feels a bit different than traditional Processing, and requires some small tricks, but it is also very interesting because it is easier (at least, more natural) to interface with other HTML elements on the page via the DOM.

Electric Field

I did this code for an assigment (in a course at university) to create some visualization tool for an Electric Field. Each student used some tool and approach. As I used Processing, and the results looks cool (!), I also went on an effort to port this one to Processing.js. This is actually a simplified demo, because the original code was huger and crashing the browser frequently. It is extremely slow because there are gazillions of per-pixel calculations on these, but if you want to take a look beyond the screenshot, and you are patient enough, take a look. Add some electric charges using the left and right buttons (middle click works as right button too, if you wish to avoid the popup menu), and after that, click on the checkbox to view the Electric Field. Each charge takes some time to add, and the “View Electric Field” takes a long time*. The ammount of calculation, though, is always the same (it is not proportional to the ammount of charges), so you can add as many charges you want.
*The browser will say 3 or 4 times that a script is running for too long, and will ask if you wish to continue.
Please note that this example in special is very slow and may crash your browser, so open at your own risk!

I hope you find all these examples interesting. If you wanna view more of these, there are many many more examples at the Processing.js project page.

(Oh, all of these remember me once when I did an implementation of the Conway’s Game of Life all in Obscure C Code for a contest! =) Story for another day.)