This repository contains the example code and exercises from Foundation HTML5 Animation with JavaScript, a book on creating scripted animations with the HTML5 canvas by Billy Lamberta and Keith Peters.
What is HTML5 Animation?
This is the companion code repository for the book of the same name, published by Apress (ISBN 1430236655), written by Billy Lamberta and Keith Peters. It provides all the JavaScript and HTML5 code examples referenced in the book, from basic math and trigonometry functions to advanced physics and 3D rendering techniques. The code runs in any modern web browser with HTML5 canvas support, and the authors note it works on most mobile devices including iPhones, iPads, and Android devices.
Key Features
- Book-aligned exercises — Every example in the repository corresponds to an exercise in the book, so you can read a chapter and run the matching code.
- Live demos — The demos are hosted online at http://lamberta.github.io/html5-animation, letting you try each animation without downloading anything.
- Multiple download routes — You can grab the entire archive as a zip file from the GitHub repository, or clone it with git using
git clone git://github.com/lamberta/html5-animation.git.
- Math and trigonometry coverage — Includes all the JavaScript functions you need for animation math, such as sine, cosine, and arctangent for rotation and angular movement.
- Basic motion principles — Covers velocity, acceleration, friction, easing, and bouncing, with runnable examples for each.
- User input handling — Shows how to respond to keyboard, mouse, and touchscreen interaction in canvas animations.
- Advanced motion techniques — Includes springs, coordinate rotation, conservation of momentum, and forward and inverse kinematics.
- 3D without WebGL — Teaches perspective projection, 3D solids, backface culling, and dynamic lighting using plain canvas 2D drawing.
- Community ports — The repository lists community-contributed ports to Dart (https://github.com/financeCoding/dart-html5-animation) and C++/SFML (https://github.com/pulpobot/C-SFML-html5-animation).
Who is it for?
- Web developers moving from Flash to HTML5 — The book was written in part for Flash developers, and the code examples show how to build standards-compliant animations that work across modern browsers and mobile devices.
- Self-taught programmers learning canvas — If you want to understand animation math and physics, the exercises give you runnable code to dissect and modify.
- Game developers — The repository includes collision detection, conservation of momentum, and kinematics examples that are directly applicable to 2D and pseudo-3D games.
- Educators — Instructors can use the demos and code as teaching aids for classes on web animation or game development.
What can you do with it?
- Learn animation fundamentals: Work through examples that demonstrate velocity, acceleration, friction, easing, and bouncing so you can make objects move realistically on a canvas.
- Handle interaction: Add keyboard, mouse, and touchscreen controls to your animations using the input-handling patterns shown in the code.
- Build physics-based scenes: Apply springs, coordinate rotation, and conservation of momentum to simulate realistic motion and collisions between objects.
- Create 3D scenes without WebGL: Use the 3D chapters to project points, render solid objects, cull backfaces, and light them dynamically using only the 2D canvas API.
How does it work?
The repository is organized as a set of HTML files, each containing a JavaScript example that runs in the browser. To get started, download the zip archive and unpack it, or clone the repository with git. Then open the individual HTML files in a browser that supports HTML5 canvas. The demos are also hosted online, so you can experiment without ever downloading the code.
FAQ
Is the source code free?
Yes. The README states, "You are free to use this source code as you wish." The code is provided under a permissive disclaimer (AS IS, without warranty), so you can use it in your own projects.
Do I need to buy the book to use the code?
No, the code and demos are freely available. However, the book provides detailed explanations of each exercise, so buying it is recommended if you want to understand the reasoning behind the code.
Which browsers and devices are supported?
The animations use the HTML5 canvas element and should run in all modern browsers. The book description notes that it works on most mobile devices, including iPhones, iPads, and Android devices.
Are there versions in other programming languages?
The repository lists community ports: a Dart version by Mike Coding and a C++/SFML version by Santiago Alvarez. The book's concepts apply to any language with a drawing surface, so you can translate the examples yourself.
Can I submit my own port or contribution?
The authors invite you to send a message to have your port listed on the repository page. The project is hosted on GitHub, so you can also fork it and submit pull requests through the normal GitHub workflow.
