10/5/11

Lightweight Online Animation Using HTML5

These days, I am thinking about some easier ways to post visualization animations onto the internet. A lot of friends, like Mhairi and Brian, gave me some new ideas of on-line data visualization and 2D animation, which reminds me of a new technique named HTML5 Canvas.
The most wonderful thing of Canvas is that, it allow us to visit the animation, or an interactive system on-line directly, without loading any flash, video or drive, which means it's really fast. There are many great exploration in this technique nowadays, you can see some of them via canvasdemos.
As you may see, this tool supports 2D and 3D animations. One demo, pirates-love-daisies, deeply inspired me.

This small game tells a funny story of the pirates through its game logic. The characters there and the animation are as attractive as we see in Flash games, but you dont have to wait for your browser to download a large flash file. Just like a comment below, I am exited to "see a big future of canvas" (ROAdmin's comment) through this little game.
Unfortunately, HTML5 Canvas is still not very widely supported by browsers, only some new version ones , like IE9, Safari 1.3+, Firefox 1.5+, can run these demos.

5 comments:

  1. If only you would put some links there , for us to experience the site. That would be much handy and convenient.

    ReplyDelete
  2. I already put the links there, the pink text, see? Move your mouse there, and you will see it turning to a hand shape.

    ReplyDelete
  3. Hey Cindy. Will you add a post about those works you showed at the inspiration presentation? would really like to see the furry ball again :) Seem a really interesting interaction* Ines

    ReplyDelete
  4. Here is another website you might be interested in about fashion etc http://www.facebook.com/pages/Mykindaplacecom/72896784661?sk=info

    ReplyDelete
  5. Nice post. Great blog. Thanks for the share. Keep posting such kind of information on your blog. I bookmarked it for continuous visit.
    flash to html5 converter

    ReplyDelete