HTML5 Canvas Bubble Demo

Update: This script has been rewritten and deserved a new blog post, here is the link to the new demo and download

When I first learned of HTML5′s Canvas I was pumped, my skills in Flash ActionScript were very limited and I had no desire to learn it as Apple had no interest in using Flash at all  (I know AS3 today, but still don’t use it).

I figured I might as well upload something I whipped together in the past, so behold my bubbles script.

How it works :

  1. A certain number of bubbles are generated off screen, each bubble has 5 attributes : X-position, Y-position, X-velocity and Y-velocity and radius.
  2. These bubbles move each frame, when a bubble is fully off screen, it is removed and than replaced by a new bubble with new attributes.

That’s it!  Pretty simple.  Anyways, I’ve uploaded it here for download (remember to drop the .txt extension).

The demo can be seen online here

For those with browsers that do not support the canvas tag, I’ve also attached a picture below of what you should see.

HTML5 Bubbles ImagePretty fancy stuff eh?  Not really, but it was fun to make.

Please remember you need an HTML5 compatible browser for it to work (or a workaround).