Foundation HTML5 Animation with JavaScript

8 min read Original article ↗

This page contains all the samples, excercises, and demo code from

Everything you need to know about moving things around in the web browser using JavaScript. This is the starting place for creating HTML5 games, animations, and UX effects. Check out the Amazon reviews, I promise I didn't make these up :)

  • “One of the best programming books I've read in a long time. Writing is clear, straightforward, and interesting.” —David Kroenke
  • “It has been 35 years since I had to even spell sine or cosine yet this book makes perfect sense and has really opened my eyes to what is possible.” —Peter Hoyt
  • “MUST OWN for any HTML5 game developer.” —Amazon Customer

Fork this repo on GitHub.

Buy the Book!

My publisher has graciously allowed me to post all the sample code and exercises below to make it easier to browse and incorporate in your own work. Each example is explained in detail within the book, so check it out if you really want to understand how all this code works. If you're just browsing around and looking to solve a problem, that's cool, but if it helps you out of a jam, please consider buying the book (or ebook) so that I can continue publishing. I promise, it's good!
And if you enjoy the book, please spread the word and write a review.

HTML5 Animation with JavaScript

The Blurb

Foundation HTML5 Animation with JavaScript, by Billy Lamberta and Keith Peters, covers everything that you need to know to create dynamic, scripted animations using the HTML5 canvas. It provides information on all the relevant math you'll need, before moving on to physics concepts like acceleration, velocity, easing, springs, collision detection, conservation of momentum, 3D, and forward and inverse kinematics. Foundation HTML5 Animation with JavaScript is a fantastic resource for all web developers working in HTML5 or switching over from Flash to create standards-compliant games, applications, and animations that will work across all modern browsers and most mobile devices, including iPhones, iPads, and Android devices.

Table of Contents and Exercises

This is table of contents and exercises from Foundation HTML5 Animation with JavaScript, which can be found at Amazon, Barnes & Noble, and other booksellers.
The source code for each excercise is available online, and for a detailed explanation, please consult the book. Check the errata page for the latest updates and corrections.

The examples below cover the following:

  • All the JavaScript and HTML5 code (including math and trigonometry functions) you'll need to start animating with code.
  • Basic motion principles like velocity, acceleration, friction, easing, and bouncing.
  • How to handle user interactions via the keyboard, mouse, and touchscreen.
  • Advanced motion techniques like springs, coordinate rotation, conservation of momentum, and forward and inverse kinematics.
  • All the basic 3D concepts you'll need for 3D in HTML5 (without WebGL)—from simple perspective to full 3D solids, complete with backface culling and dynamic lighting.

  1. Part One: JavaScript Animation Basics

    1. Chapter 1: Basic Animation Concepts

    2. Chapter 2: Basics of JavaScript for Animation

      1. Our Basic HTML5 Canvas Setup [source]
      2. JavaScript Event Demonstration [source]
      3. Listening for Mouse Events [source]
      4. Capture the Mouse Position [source]
      5. Listening for Touch Events [source]
      6. Listening for Keyboard Events [source]
      7. Capture a Keyboard Event by Key Code [source]
      8. Capture a Keyboard Event by Key Name [source]

    3. Chapter 3: Trigonometry for Animation

      1. Rotate an Object Towards a Point [source]
      2. Smooth Up and Down Motion [source]
      3. Set the Range, Speed, and Center of the Motion [source]
      4. Add Linear Vertical Motion to Make a Wave [source]
      5. Create a Pulsing Motion by Adjusting Scale [source]
      6. Wave Motion Using Two Angles [source]
      7. Draw a Wave to the Canvas Element [source]
      8. Circular Movement [source]
      9. Elliptical Movement [source]
      10. Using the Pythagorean Theorem to Calculate Distance [source]
      11. Find the Distance Between the Center Point and Mouse [source]

    4. Chapter 4: Rendering Techniques

      1. Drawing App [source]
      2. Draw Curve Toward Point [source]
      3. Draw Curve Through Point [source]
      4. Joined Multiple Curves [source]
      5. Smoothly Joined Multiple Curves [source]
      6. Smoothly Joined Multiple Curves in Closed Path [source]
      7. Linear Gradient Fill [source]
      8. Linear Gradient Fill with Different Position [source]
      9. Radial Gradient Fill [source]
      10. Load Image with JavaScript and Draw [source]
      11. Draw an HTML Image Element [source]
      12. Draw Frames of an HTML5 Video Element [source]
      13. Invert Color of Canvas Pixels [source]
      14. Covert Canvas Pixels to Grayscale [source]
      15. Dynamic Manipulation of Canvas Pixels [source]
      16. Spray Paint Drawing App [source]

  2. Part Two: Basic Motion

    1. Chapter 5: Velocity and Acceleration

      1. Velocity on One Axis [source]
      2. Velocity on Two Axes [source]
      3. Angular Velocity [source]
      4. Using Angular Velocity to Follow the Mouse [source]
      5. Applying Velocity to an Object's Rotation Property [source]
      6. Acceleration on One Axis [source]
      7. Applying Acceleration Interactively [source]
      8. Acceleration on Two Axis [source]
      9. Gravity as Applied Acceleration [source]
      10. Using Angular Acceleration to Follow the Mouse [source]
      11. Spaceship Simulation [source]

    2. Chapter 6: Boundaries and Friction

      1. Remove Object at Boundaries [source]
      2. Fountain of Regenerating Objects [source]
      3. Spaceship Simulation with Screen Wrapping [source]
      4. Bounce Off Walls [source]
      5. Bounce Off Walls with Gravity [source]
      6. Friction, The Right Way [source]
      7. Friction, The Easy Way [source]
      8. Spaceship Simulation with Friction Applied [source]

    3. Chapter 7: User Interaction: Moving Objects Around

      1. Listening for Mouse Events on an Object [source]
      2. Listening for Touch Events on an Object [source]
      3. Dragging an Object [source]
      4. Combining Dragging and Motion Code [source]
      5. Drag an Object and Reset its Velocity [source]
      6. Throwing an Object [source]

  3. Part Three: Advanced Motion

    1. Chapter 8: Easing and Springing

      1. Simple Easing [source]
      2. Dragging and Easing [source]
      3. Turn Off Easing [source]
      4. Ease to a Moving Target [source]
      5. Springing in One Dimension [source]
      6. Springing with Friction Applied [source]
      7. Springing in Two Dimensions [source]
      8. Springing to a Moving Target [source]
      9. Add Gravity and Draw Spring [source]
      10. Chaining Multiple Springs [source]
      11. Chaining Many Springs [source]
      12. Springing to Multiple Targets [source]
      13. Offset the Spring Target [source]
      14. Two Objects Connected by a Spring [source]
      15. Three Objects Connected by a Spring [source]

    2. Chapter 9: Collision Detection

      1. Hit Testing With the Bounding Box of an Object [source]
      2. Stacking Boxes [source]
      3. Hit Testing a Point and a Bounding Box [source]
      4. Distance-based Collision Detection [source]
      5. Distance-based Collision Detection With Arbitrary Size [source]
      6. Collision-based Springing [source]
      7. Multiple Object Collision Detection and Springing [source]
      8. Optimized Multiple Object Collision Detection and Springing [source]

    3. Chapter 10: Coordinate Rotation and Bouncing Off Angles

      1. Using Simple Coordinate Rotation to Rotate Around Point [source]
      2. Rotating Around a Point Using Advanced Coordinate Rotation [source]
      3. Rotating Multiple Objects [source]
      4. Bouncing Off an Angle [source]
      5. Optimized Bouncing Off an Angle [source]
      6. Bouncing Off a Dynamic Angle [source]
      7. Bouncing Off Angle and Hit Test Object [source]
      8. Bouncing Off Angle and Check Bounding Box [source]
      9. Bouncing Off Angle and Walls [source]
      10. Bouncing Off Multiple Angles [source]

    4. Chapter 11: Billiard Ball Physics

      1. Conservation of Momentum on One Axis [source]
      2. Optimized Conservation of Momentum on One Axis [source]
      3. Conservation of Momentum on Two Axes [source]
      4. Optimized Conservation of Momentum on Two Axes [source]
      5. Multiple Object Collisions [source]
      6. Multiple Object Collisions With Problem Fixed [source]

    5. Chapter 12: Particle Attraction and Gravity

      1. Gravitational Force Between Particles [source]
      2. Gravitational Force and Collision Detection [source]
      3. Gravitational Force and Collision Detection With Random Sizes [source]
      4. Object in Orbit [source]
      5. Drawing Along the Orbital Path [source]
      6. Connecting Particles With Springs [source]
      7. Drawing Lines Between Connected Particles [source]
      8. Applying Mass to Connected Particles [source]

    6. Chapter 13: Forward Kinematics: Making Things Walk

      1. Segment Class Demo [source]
      2. Single Segment and Slider [source]
      3. Moving Two Segments 1 [source]
      4. Moving Two Segments 2 [source]
      5. Automate Walk [source]
      6. Natural Walk [source]
      7. Natural Walk with Two Legs [source]
      8. Natural Walk with Two Visible Legs [source]
      9. Dynamic Walk Controls [source]
      10. Real Walk on the Ground [source]

    7. Chapter 14: Inverse Kinematics: Dragging and Reaching

      1. Reaching with a Single Segment [source]
      2. Dragging a Single Segment [source]
      3. Dragging Two Segments [source]
      4. Dragging Many Segments [source]
      5. Reaching with Two Segments [source]
      6. Reaching with Many Segments [source]
      7. Reaching for an Object [source]
      8. Reaching with the Law of Cosines [source]
      9. Reaching with the Law of Cosines, Reverse [source]

  4. Part Four: 3D Animation

    1. Chapter 15: 3D Basics

      1. 3D Perspective [source]
      2. 3D Perspective without Negative Scale [source]
      3. 3D Velocity and Acceleration [source]
      4. Single Object 3D Bounce [source]
      5. Multiple Object 3D Bounce [source]
      6. Multiple Object 3D Bounce with Z-Sorting [source]
      7. Bouncy Balls and Gravity [source]
      8. Running Through a Forest with Screen-Wrapping [source]
      9. Flying Through a Forest [source]
      10. 3D Easing [source]
      11. 3D Springing [source]
      12. Coordinate Rotation Around Y-Axis [source]
      13. Coordinate Rotation Around X and Y Axes [source]
      14. 3D Collision Detection [source]

    2. Chapter 16: 3D Lines and Fills

      1. Lines and Balls [source]
      2. Lines and Points [source]
      3. Square [source]
      4. Letter E [source]
      5. Filled Letter E [source]
      6. Creating Shapes with Triangles [source]
      7. Modeling a Cube [source]
      8. Modeling a Pyramid [source]
      9. More Complex Models [source]
      10. Generating a Cylinder Model [source]
      11. Move Model, Rotate Around Origin [source]
      12. Move Model, Rotate Around Self [source]

    3. Chapter 17: Backface Culling and 3D Lighting

      1. Backface Culling [source]
      2. Enhanced Depth Sorting [source]
      3. 3D Lighting Effect [source]

  5. Part Five: Additional Techniques

    1. Chapter 18: Matrix Math

      1. Coordinate Rotation Around X and Y Axes [source]
      2. Rotate Transformation [source]
      3. Skew X-Axis Transformation [source]
      4. Skew X and Y Axes Transformation [source]

    2. Chapter 19: Tips and Tricks

      1. Brownian (Random) Motion [source]
      2. Brownian Motion with Trails [source]
      3. Square Distribution [source]
      4. Square Distribution Over Smaller Area [source]
      5. Circular Distribution [source]
      6. Smoothed Circular Distribution [source]
      7. Biased Distribution [source]
      8. Biased Distribution with Multiple Iterations [source]
      9. Two-Dimensional Biased Distribution [source]
      10. Collision-Based Distribution [source]
      11. Timer-Based Animation [source]
      12. Time-Based Animation [source]
      13. Time-Based Animation using setInterval [source]
      14. Time-Based Animation with Gravity [source]
      15. Collisions Between Same-Mass Objects [source]
      16. Using Sound Effects [source]

  6. Extras

    1. Easing Equations [source]
    2. Find a Position on a Motion Path [source]
    3. Putting Web Workers to Work [source]
    4. Character Animation Using a Sprite Sheet [source]
    5. Helper Functions [source]
    6. JavaScript Key Codes [source]