• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Surfstation

Bits and pieces found online

  • Home

HTML5 Canvas Experiment

5 February, 2010 Pete

post_4275-450x165.jpg

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?

Technology

Primary Sidebar

Recent Posts

  • Looking For Something
  • INORI (Prayer)
  • Unexpected Discoveries
  • A Love Letter to Winter
  • The WDC – ‘Safe and Free’
  • IDIOTS
  • Bench.li
  • The Racial Dot Map: One Dot Per Person for the Entire U.S.
  • I Shot Him
  • Box

Archives

  • April 2019
  • March 2019
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • September 2008
  • August 2008

Categories

  • Architecture
  • Fashion
  • Film Motion
  • Fine Art
  • Graphic Design
  • Illustration
  • Installation
  • Miscellaneous
  • Music Sound
  • Performance
  • Photography
  • Product Design
  • Technology
  • Typography
  • Uncategorized
  • Web Design
Copyright © 2021 Surfstation