Oscillating a bubble

In this recipe, we'll create a life-like oscillating bubble using the principles of harmonic oscillation and canvas transformations.

Oscillating a bubble

How to do it...

Follow these steps to create a life-like oscillating bubble floating in the air:

  1. Link to the Animation class:
    <head>
    <script src="animation.js">
    </script>
  2. Instantiate an Animation object and get the canvas context:
        <script>
        window.onload = function(){
            // instantiate new animation object
            var anim = new Animation("myCanvas");
            var context = anim.getContext();
            var canvas = anim.getCanvas();
  3. Set the stage() function which updates the width and height scale of the bubble, clears the canvas, ...

Get HTML5 Canvas Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial