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).
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.
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).
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.
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.
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.)