HTML5 Canvas Bubble Demo V2

The HTML Canvas Bubble Demo got a lot of attention and I received a lot of hits from that. Since last year, I used it on a WP theme and updated it to make it more functional.

So here is a link to the NEW demo.


Here is a link to download all the files, including the demo

When using it on your own site, create a DOM element with the ID “canvasBubbles”, include the “bubbles.js” script :

Basic Usage

1
2
3
<script>
   bubblesMain();
</script>

Custom Options (Example)

1
2
3
4
5
6
7
8
9
10
11
12
<script>
    bubblesMain(new Object({
        type : 'radial',
        revolve : 'center',
        minSpeed : 100,
        maxSpeed : 500,
        minSize : 50,
        maxSize : 150,
        num : 100,
        colors : new Array('#FF0000','#FFFFFF','#BBBBBB')
    }));
</script>
  • type (linear,radial)
  • revolve (topLeft, topRight, bottomLeft, bottomRight) This is used when “type” is radial
  • opacity (any floating number between 0 and 1)
  • minSpeed (any number)
  • maxSpeed (any number)
  • minSize (any number)
  • maxSize (any number)
  • num (number of bubbles)
  • colors (an array of 6 digit HEX colors)

HTML5 Canvas Transform

I was messing around with HTML5 Canvas transform and was having trouble getting the right values that I wanted.

I decided to build a page that allowed me to test how to manipulate images on the fly. It allows linking to multiple images and transforming it how you want.
Ensure that there is an image source and that there is a value in each box for the image to appear.

Check it out, and if you have any questions or suggestions please feel free to comment.

HTML5 Canvas transform

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).