HTML5 Canvas Experiment
Click here to launch the experiment! (beware: sophisticated browser needed)
HTML5 is getting a lot of love lately. With the arrival of FireFox 3.5, Safari 4 and the new betas of Google Chrome and Opera, browsers support some great new features including canvas and the new audio/video tags. Most interesting: modern mobile devices like the iPhone or Android-based phones also support new standards in favor of Flash. The future looks bright for HTML5.
Time for us to play with this technology. We’ve created a little experiment which loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet - click on one of them and it’ll appear on the screen.
The original particle engine was ported from a Flex/AS3 project that we’ve created to javascript. We’re using processing.js for particle rendering on canvas which is a very useful graphics library created by John Resig. The music will only be played if the browser supports the audio tag. To detect if the audio or canvas feature is present we use the awesome modernizr library. We could have used a fallback solution like playing the sound via Flash. But this experiment is about HTML5 - and who needs Flash anyway?
Big thanks to spokenlounge.com for supporting us and for providing the mp3 track.
If you want to dive into further resources, then try:
- HTML5Doctor, great resource about everything HTML5
