Animating mechanical gears

For the mechanics and engineers out there, this one's for you. In this recipe, we'll create a system of interconnected rotating gears.

Animating mechanical gears

How to do it...

Follow these steps to animate a system of interconnected gears:

  1. Link to the Animation class:
    <head>
    <script src="animation.js">
    </script>
  2. Define the constructor for the Gear class:
        <script> function Gear(config){ this.x = config.x; this.y = config.y; this.outerRadius = config.outerRadius; this.innerRadius = config.innerRadius; this.holeRadius = config.holeRadius; this.numTeeth = config.numTeeth; this.theta = config.theta; this.thetaSpeed = config.thetaSpeed; this.lightColor = ...

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