Switch to the Czech version

Saturday, 4 August 2012

Dusty room - HTML5 example

This week I've given HTML5's canvas a go and created a showcase page featuring a dynamical dust-particles simulation. It can easily be included into any kind of web page to add this special effect to it without changing the way users work with the original page.

Here is a live demo.

As a framework for handling the canvas I chose EaselJS, which seems like a nice graphical library with sufficient documentation. It features most of the expected 2D graphics-engine building blocks and built-in graphical effects. Most techniques and common tasks are explained on examples.

The particle system is based on the following rules:
1. Each particle has: position, velocity.
2. Velocity changes slightly (randomly) every frame - to add some "Brownian motion".
3. Nearby particles's velocities are slightly averaged every frame - creates streams of air.
4. Mouse cursor influences the nearby particles as if it were a particle (a bit "heavier" one).

Notes on viewing the result in various browsers:
Google Chrome 20 and Mozilla Firefox 14 - everything worked right and fast. No problems there.
Just as a side note - because I don't use Firefox that much, I was able to test several versions as it was upgrading only a few versions at a time. FF8 - awfully slow! FF11 - pretty slow, jerky. FF14 - works OK. Nothing apart from the performance change was noticeable. Nothing broken along the way.
Microsoft Internet Explorer 9 - the canvas-part works fine, it is even pretty fast, but the text-shadow style is not working (which is not really an issue for this demo).
Dolphin browser on Android - everything works right! It is dead-slow, but this was to be expected.
Opera? Safari? Who knows, I know I don't...

What next? I think this could be a nice "plugin" to some page I might create in the future. The least I can say is that canvas is a pretty nifty and usable thing now. It is time to get to know it!

No comments:

Post a Comment