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.
Follow these steps to swing a pendulum back and forth:
Link to the
Animation
class:<head> <script src="animation.js"> </script>
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();
Define the properties of the pendulum:
var amplitude = Math.PI / 4; // 45 degrees var period = 4000; // ms var theta = 0; var pendulumLength = 250; var pendulumWidth = 10; var rotationPointX = canvas.width / 2; var rotationPointY = 20;
Set the
stage()
function which updates the angle of the pendulum, clears the...