In this recipe, we'll create a life-like oscillating bubble using the principles of harmonic oscillation and canvas transformations.
Follow these steps to create a life-like oscillating bubble floating in the air:
Link to the
Animation
class:<head> <script src="animation.js"> </script>
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();
Set the
stage()
function which updates the width and height scale of the bubble, clears the canvas, scales the canvas context, and then draws the bubble:anim.setStage(function(){ // update var widthScale = Math.sin(this.getTime() / 200) * 0.1 + 0.9; var heightScale = -1 * Math.sin(this.getTime()...