Swinging a pendulum

Unlike the bubble recipe, whose width and height oscillate as a function of time, in this recipe we'll create a pendulum whose angle oscillates as a function of time.

Swinging a pendulum

How to do it...

Follow these steps to swing a pendulum back and forth:

  1. Link to the Animation class:
    <head>
    <script src="animation.js">
    </script>
  2. Instantiate a new Animation object and get the canvas context:
        <script>
        window.onload = function(){
            var anim = new Animation("myCanvas");
            var canvas = anim.getCanvas();
            var context = anim.getContext();
  3. Define the properties of the pendulum:
     var amplitude = Math.PI / 4; // 45 degrees var period = 4000; // ms var theta = 0; var ...

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