JavaScript HTML5 Canvas Snow in 3D

Snow storm in JS and HTML

Snow storm in JS and HTML

Incredibly, the early bird tickets on my HTML5/JS training course sold out in just 20 minutes today! And to celebrate I thought you might like an early Christmas present – JavaScript HTML5 canvas snow in 3D! ๐Ÿ™‚

If you want to use this effect on your site, please feel free but PLEASE DO NOT HOTLINK TO MY FILES! Copy the files on github to your own server!

I adapted one of the Mr.doob‘s three.js Particle examples. I’ve extended the particle class and added velocity to update it’s position. Anyone that knows me knows that I’ve been making snow for a while now! Most people’s first approach is to make the snow move left and right but actually you don’t need to do that. If there are lots of flakes all moving in different directions it pretty much has the same effect, and it gives much simpler and more uniform effect.

As ever, the code is fully commented and available on github.

[UPDATE: code has been updated now to work in Three.js revision 46]

Creative JavaScript/HTML5 training

blobgs

blobgs

After Full Frontal there was a lot of interest in learning about creative visual programming so I’ve set up a two day course here in Brighton on January 10th and 11th 2011.

We’ll cover all aspects of creative visual JavaScript coding: advanced interactions, physics, gaming and 3D. We’ll be using my own code and Mr.doob’s examples from mrdoob.com.

There are very limited spaces and tickets go on sale on Wednesday 24th November at midday. You’ll find more details on the eventbrite page : Creative HTML5 and JavaScript Training

If you want to be notified as soon as tickets become available, sign up to the mailing list.

JavaScript 2D and 3D particle effects at Full Frontal

DSC_7347

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

I just spent the weekend recovering after an absolutely fantastic time at the inappropriately (or appropriately?) named JavaScript conference, Full Frontal. 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.

DSC_7347

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.

PixelPoundingJS.027

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!

Flash uses more battery than HTML5?

HTML5 Canvas 3D particles

HTML5 Canvas 3D particles

There’s been a lot of talk about whether Flash drains the battery on MacBooks as much as HTML5 does, so I thought I’d check this claim out. I’m concerned that any tests would be based upon Flash vs no Flash, without an HTML5 version to compare to.

So here we have identical content in Flash and HTML5. It’s just a simple 3D Particle system.

My challenge, leave this running and see which one runs down your battery fastest!

FLASH VERSION

HTML5 VERSION

Now of course this will just be comparing one small part of Flash and HTML5 – rendering animating bitmap images. I’m sure that rich content will use the battery no matter which technology you use. But is there a difference in how fast it drains? And to be fair, please make sure you use the non-debug version of the FlashPlayer.

Brighton projections with Processing

P1060414

Yet another reason you want to live in Brighton ๐Ÿ™‚ Every year we have a very special festival the night the clocks go back : White Night. Twinned with Nuite Blanche in Amiens France, events happen all night long: workshops, collaborative art, and performances.

P1060414

This year I was especially lucky to be part of a projection event at 200 year old Marlborough House. It was organised by BANG, the Brighton animators group and there were over 30 contributed animations mapped onto the building’s facade and windows. Kate Genevieve (who you may have seen at the FOTB elevator pitch) also coordinated a gorgeousย 2 edition comic in newspaper form with a full back story about how the building had been used by a crazy scientist to capture dreams.

The animations were just beautiful and so varied. From full architectural 3D mapping, to hand drawn character animation, through to charming stop-frame animations from children. More photos at the Flickr group.

My small part of it was to fill the 30 minute gaps between showings; we wanted something interactive, so I used it as an excuse to get more familiar with Processing, which I’ll be teaching at Sussex Downs College over the next few weeks.

We invited people to text and tweet us their dreams, and we projected them around the edge of the building. I also made a couple of Victorian looking timers that were mapped onto architectural curves, and counted down the minutes until the next showing.

IMG_0155

The growing ink splodge in the middle was inspired by a page in the newspaper.

During development, I very quickly ran into Processing performance problems, but that’s not surprising : the canvas was 2048 x 768! Moving to OpenGL helped a lot but it is quite complex and difficult to find documentation. As well as the performance, I also needed the blend modes. I’ve got the hang of it now, thanks to Mach Kobayashi, and this MSDN blog post.

Processing Keystone library amended for multiple projectors

I also used the excellent Keystone Processing library by David Bouchard to register the projectors. I expanded the library to work with two projectors, so that the image could be split into multiple adjustable images. In hindsight, I would definitely do more work on the keystone system. It’s almost impossible to adjust the image using handles that are being projected off the edge of the building!

IMG_0145

There was also a last minute panic as projectors were repositioned just before the show, forcing me to reprogram the keystoning, and some stressful vector maths to reposition and size the text path. And poor Tom of BrightonArt dropped his MacBookPro onto the corner of a flight case. But on the plus side, it made some beautiful glitch art ๐Ÿ™‚

Broken screen as glitch artwork

I love working with large scale projectors and I’m looking forward to getting involved with more events like this next year. I’m also enjoying Processing – there’s a lot to love about it. I’ll be sure to keep you informed of my progress ๐Ÿ™‚

Bang Dream Machine : Directed by Abbie Stanton // Kate Genevieve // Sarah Bird