Fireflies
(View in Google Chrome/Firefox)

I actually ported this from a javascript experiment I did around the same time as the snowfall one. I thought it would be a good idea to see how regular JS performed alongside Processing.js. You can check out the regular javascript version for comparison. I tried to ensure they both looked identical and were coded as similarly as possible. The verdict is that they both perform smoothly, but Processing.js seems to require about 20% more CPU than regular JS, for what reason I don’t quite know. I haven’t looked into the Processing source code to see what’s going on. Processing has a neater syntax and less overall code, and it even sorted out scoping issues I had in the regular version, so it wins on that front.

I’d be interested to use it some more, although I’m unsure of what benefits it offers over regular JS. The syntax is certainly nicer, but the typed variables tempt me with the facade of proper OO - it’s ultimately converted to javascript so I know it doesn’t offer any practical advantage. I think it would require further investigation to see the real benefits.

Oh, I hit a couple of hurdles early on that had me stumped for ages. The beginners guide to Processing.js is lacking some vital information, so if you’re stuck on how to actually set up it in your HTML page then follow the points below:

1. Add the processing.xx.min.js in a script tag.
2. Add init.js in the same manner, which can be found in the examples zip on the Processing.js website.
3. Ensure your processing script tag and Canvas object are in the same container, and the script tag is above the canvas.
4. Be sure to have a setup() method and set the canvas size with size()

Check out the source code in the Firefly experiment if you want to see exactly how this is done.

Canvas Snowfall

Flash Snowfall

You’ll need a modern browser to view the canvas version (eg: Firefox/Chrome/Opera/etc). View the source of the Canvas version for the javascript.

As you can see they look pretty much identical, the differences primarily lie in performance. The Flash version can handle more than twice the number of snowflakes before the frame rate drops. This may be down to the a fundamental difference between Canvas and Flash: Canvas is a rasterised bitmap object, whereas Flash is a vector animation tool. When you draw shapes in Canvas you’re drawing directly onto a bitmap, the shape can no longer be moved or scaled and is ‘baked’ into the image. In some ways it’s similar to the BitmapData object in Flash. Because of this animation is far easier to accomplish in Flash and I had to adapt parts of the original code to work with the Canvas concept.

Javascript and AS1 share a lot in similarity as programming languages so porting the code was relatively easy. The Canvas object also has a similar API to the Graphics object in Flash. I’ll admit Javascript is not my favourite language, by a long shot, the lack of strict typing is difficult to return to after years of AS3, and in more complex scripts nested closures can get messy. It is however fast to program, which can come in very handy when prototyping and experimenting with ideas.

It may be worth investigating Processing, a framework for the Canvas object written by John Resig, the guy behind JQuery.