My First HTML5 Canvas Box2d Animations

Posted by Kumaran on July 11, 2011 Leave a comment (53) Go to comments

I created my first HTML5 canvas animation using box2d which adds some physics (the laws of gravity). I posted two demos which destroys my name (MUTHU) into pieces, look below

Note: For good experience please view the  HTML5 canvas box2d demo in Chrome or Firefox browser. IE not supported for now.

Demo 1: wait and watch demo Click to open demo in new tab

 

Demo 2: Click on the black area to destroy my name and have some fun.  Click to open demo in new tab

 

Do you like it? Please leave your comment below. I’ll be back with more demos.

Pages:
HTML5, ,
Leave a comment ?

53 Comments.

  1. Moorthy G July 12, 2011 at 3:35 am(Edit)

    Awesome, Muthu!!!

    Keep it up!!!

    Reply
  2. Rekha July 12, 2011 at 4:44 am(Edit)

    Nice Work, Muthu
    Really Good..

    Reply
  3. Rajmadan July 12, 2011 at 5:31 am(Edit)

    Nice Work Kumaran, the graphics are so smooth. Keep up and come out with more of such work.

    Reply
  4. Ramesh July 12, 2011 at 8:15 am(Edit)

    Great Muthu!

    Reply
  5. rufus July 12, 2011 at 8:59 am(Edit)

    Good creative thinking and nice work Muthu

    Reply
  6. Suthagar July 12, 2011 at 11:04 am(Edit)

    Really excellent work muthu…

    Reply
  7. Suthagar July 12, 2011 at 11:51 am(Edit)

    Really excellent work muthu…
    You always rocks man

    Reply
  8. Kumaran July 12, 2011 at 12:16 pm(Edit)

    Thanks all. I am going to expand my work with different ideas. I think it’s gonna take some time…

    Reply
  9. kaspar July 13, 2011 at 5:06 am(Edit)

    Nice.

    Reply
  10. sagadevan July 13, 2011 at 7:38 am(Edit)

    Nice work ,Keep it up. :razz:

    Reply
  11. Ganesan July 14, 2011 at 5:02 pm(Edit)

    Great Muthu

    Reply
  12. PF July 14, 2011 at 7:38 pm(Edit)

    well thought!

    Reply
  13. nani July 15, 2011 at 4:57 am(Edit)

    Really nice.

    Reply
  14. Bala July 15, 2011 at 7:41 am(Edit)

    Supperr Muthu!!!!

    Reply
  15. Gian Giacomo July 16, 2011 at 3:16 pm(Edit)

    Really nice!

    Reply
  16. Abdul July 19, 2011 at 12:34 pm(Edit)

    Nice Work, Muthu

    Reply
  17. really fabolus July 20, 2011 at 9:28 am(Edit)

    really fabolus yar

    Reply
  18. really fabolus July 20, 2011 at 9:30 am(Edit)

    really fabolus yar.

    Reply
  19. Jogi July 22, 2011 at 9:51 am(Edit)

    awesome really fabolus

    Reply
  20. kavitha July 24, 2011 at 2:34 am(Edit)

    Good

    Reply
  21. Kumaran July 24, 2011 at 5:58 am(Edit)

    Thank you all once again. I have started next work on HTML5. Soon I’ll will be posting it.

    Reply
  22. Deepak July 25, 2011 at 9:40 am(Edit)

    Good one :) cheers

    Reply
  23. Manish July 25, 2011 at 10:41 am(Edit)

    Awesome Work, Dude.

    Reply
  24. joe shepard July 26, 2011 at 9:09 am(Edit)

    nice!!

    Reply
  27. shweta July 27, 2011 at 12:45 pm(Edit)

    wow

    Reply
  28. sudeep July 28, 2011 at 8:08 am(Edit)

    hi,

    Great job… like the usage of gravity..

    Reply
  29. Haaasn July 29, 2011 at 10:10 am(Edit)

    hi,
    does it require javascript as well

    Reply
  30. SARAVANAN August 2, 2011 at 5:19 am(Edit)

    :razz:

    Hi Muthu,

    The DEMOs are really Awesome…

    Thanks for Sharing

    Reply
  31. Depression medication August 4, 2011 at 5:10 am(Edit)

    Thanks for that awesome posting.

    Reply
  32. Carmelo August 6, 2011 at 10:37 am(Edit)

    Nice work :) )
    Box2d is not a porting of the engine used to develop angry birds?

    Anyway, Well done :razz:

    Reply
  33. pa@Kabelkultur Webbdesign August 6, 2011 at 12:16 pm(Edit)

    Hello!
    That was excellent, well done!

    Reply
  34. belly fat loss August 11, 2011 at 7:26 am(Edit)

    It’s really a great and useful piece of information. I am satisfied that you just shared this useful information with us. Please keep us informed like this. Thank you for sharing.

    Reply
  35. Umesh August 11, 2011 at 10:18 am(Edit)

    Good Job keep it up :) :razz:

    Reply
  36. sushma August 11, 2011 at 4:06 pm(Edit)

    nice work…keep doing

    Reply
  37. obuliraj August 15, 2011 at 10:29 am(Edit)

    nice job muthu…

    Reply
  38. Roshitha August 16, 2011 at 4:42 am(Edit)

    Nice work…!!

    Reply
  39. kanel August 16, 2011 at 5:29 pm(Edit)

    good job!

    Reply
  40. amsaraj August 25, 2011 at 8:51 am(Edit)

    Looking nice! Proven talent :)

    Reply
  42. sboniso September 3, 2011 at 12:56 pm(Edit)

    Nice!!!! Teach me please

    Reply
  43. Arslan September 8, 2011 at 9:58 pm(Edit)

    its great effort man

    Reply
  44. Rabia September 9, 2011 at 9:28 pm(Edit)

    Really nice… :grin:

    Reply
  45. Yasmeen September 19, 2011 at 11:34 am(Edit)

    Very nice

    Reply
  46. Surya October 21, 2011 at 3:36 pm(Edit)

    :idea: Good work!

    Reply
  47. A.B October 22, 2011 at 9:15 am(Edit)

    Did you see the CPU usage? Try to create the same in Flash and see what happens.

    Reply
  48. Tommaso November 4, 2011 at 12:59 pm(Edit)

    It’s cool MUTHU… :grin:

    Reply
  49. Jezalyn November 10, 2011 at 11:55 am(Edit)

    awesome..how did u do that?keep up the good work!

    Reply
  50. avesh November 27, 2011 at 6:43 am(Edit)

    amazing.

    Reply
  51. Sandeep Kundu November 29, 2011 at 5:42 am(Edit)

    Very very nice… Keep it up..

    Reply
  52. Mecham January 13, 2013 at 7:54 am(Edit)

    really looking forward to your next post!

    Reply

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>