JavaScript 2D and 3D particle effects at Full Frontal

[UPDATE] Creative JavaScript and HTML5 training course now available.

I just spent the weekend recovering after an absolutely fantastic time at the JavaScript conference, ffconf. The venue is the 100 year old cinema in Brighton, the Duke of Yorks. Just another reason why it’s great to live in Brighton (yes I know I sound like a scratched record!).

It’s brilliant mixing with different communities, although I often embarrass myself but not knowing super famous people. Imagine going to a Flash conference and saying “Mario who?”.

But honestly I learned so much. Like the fact that IE9 doesn’t have WebGL and many other features (thanks to Paul Rouget from Mozilla, who also showed some very impressive demos with a patched version of FireFox).

I also learned a little more about the “native client” plug-in system that Chrome is now implementing (so far only being used by Unity3D as far as I know) via Google engineer Alex Russel. Apparently this system works closer with the browser to ensure better compatibility and security.

Paul Bakaus told us how his JS game engine Aves works with DOM objects, having discarded canvas for performance reasons. (His test seemed to show a few thousand sprites on screen although we only saw a screen shot.) Another excellent trick he used was to use 3D CSS transforms to ensure hardware acceleration kicked in, despite the fact that all z values were 0. He’s doing very well, and has now secured west coast investment, so there’s clearly money in HTML games.

My session was on last, and I was naturally apprehensive – how would a load of JavaScripters feel about some Flasher showing a load of HTML5 demos!? But I had no need to worry – everyone was very warm and welcoming and seemed to really enjoy my presentation.

You can find a much more comprehensive write up of the conference here (with some very kind comments about my session!).

The slides are on Flickr, and the source code is on github. Live demos below :

Particles 1.0 – Single Particle
Particles 1.1 – Array of particles
Particles 2.0 – Image particles
Particles 2.1 – Image particles with additive blending
Particles 3.0 – Smoke effect
Particles 3.1 – Smoke effect with rotating image

Canvas3D 1 – A 3D point converted to 2D
Canvas3D 2 – A bunch of 3D points – click to rotate
Canvas3D 3 – A bunch of 3D point sprites with additive blending
Canvas3D 4 – Same sprites, this time to make a starfield effect

I wanted to say a massive thanks to Remy and Julie for inviting me to speak – it’s just fantastic that I had this opportunity to be a part of the JavaScript community, and it’s been a great experience.

And to any Flash developers who want to take a look at JavaScript? Why not check out the code and let me know what you think. It can be fun!