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

 

28 thoughts on “HTML5 Canvas Bubble Demo

  1. Hey thank you for that very cool bubbling canvas! So far so good.
    Seems I use it wrong because I couldnt set up some (clickable) link list under the canvas tag?

    • Hi,

      Although, the canvas tag is considered part of HTML5, you were right, there was jQuery in the script.
      Therefore I removed it as it wasn’t helping it.

      I’m kind of confused as to how you would use the canvas tag without javascript? As that is the only way to draw to the board

      Thanks for the comment

      • Wow fast response and fix, that’s much better! JavaScript within the canvas element is fine but JQuery is an entirely different library. I mistook your bubbles.js file as a JQuery file. Are you aware of a method to add an image overlay to each bubble to give the appearance of reflections? Possibly using a transparent bubble png like this http://i.imgur.com/brjGj.png (its a white transparent image) at the largest size the bubbles will go and scale it down depending on the bubble size.

    • That does look good! Thanks for this excellent demo, you’ve inspired me! Now I’m going to try to make each one pop when you click it…

      • If you make it, don’t forget to post it here.

        The way I’d do it is (plus I think this is the only way to do it) :
        - user clicks the screen
        - get the x and y parameter of the click
        - loop through each bubble
        If the click is greater or equal than the bubbles x and y parameter, and also less than or equal to the bubbles x and y parameter plus the radius, than pop it.

        The only problem with this is if they click the top right corner (for example), the bubble is circular, so they didn’t technically click it, but the script will think you did.

        Meaning, if you want it to be very accurate and realistic, you’ll have to do a little more math than what I said above.

        • That would be fine, I’m hoping to use something like this on a mobile app where accuracy is not required.

          I’ve found an example of somebody creating clickable canvas elements and they used the same method you described.
          I’d also like to have maybe a 3 frame animation when the bubble is pressed for realism and a ‘pop’ sound aswell.

          I’ll keep you posted.

  2. Hi there!

    Happy Holidays! I just found this effect and I absolutely love this! I was just curious as to how to contain it to one area? I will be using a Joomla template for a site I am creating for a non-profit, and I would like to use this effect, but I would like to contain it in a module or area just like yootheme.com did on their website. I am a bit new to this and would like to learn.

    Any insight would be great.

    Thanks!

    • Well, I’ll give you a run down of how I would start. The only thing that would need to be messed around with are the wavy different colors, although it wouldn’t take too much.

      HTML
      ——–

      CSS
      ——–
      canvas{
      border-radius:4px;
      position:relative;
      margin:0 auto;
      background-color:#AA4064;
      }

      JAVASCRIPT
      ——–
      You’ll have to change the javascript to not look for the width and height of the screen, but the width and height of the canvas tag.

      Happy Holidays to you and good luck!

  3. Can you please guide me how can i put text on each bubble(i want to give different name for each bubble) and each bubble should be different in size. how can i achieve this one can you guide

  4. I am trying to help my son with a blog for his swimmers and I love your bubbles. I am having the hardest time adding them on the blog. Please let me know the code for html so I can add them. They are GREAT!
    Thanks so much!

  5. I am adding it as a html and copying your example but it isn’t working. Am I putting it in the wrong place and do I have to write my own?

  6. Hi there!
    I love this effect. I was trying to use it like an under water effect, that is, with the bubbles movement only in one direction: bottom up. How can I do it?

    Thanks

    Raquel

Leave a Reply

Your email address will not be published. Required fields are marked *

You may 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>