Foundation HTML5 Animation with JavaScript

By Billy Lamberta , Keith Peters

Foundation HTML5 Animation with JavaScript takes the code from Keith Peters' hugely successful Foundation ActionScript Animation and updates it to include standards-compliant JavaScript using HTML5 Canvas.

Full Description

  • ISBN13: 978-1-4302-3665-8
  • 504 Pages
  • User Level: Beginner to Advanced
  • Publication Date: December 5, 2011
  • Available eBook Formats: EPUB, MOBI, PDF
  • Print Book Price: $39.99
  • eBook Price: $27.99
Buy eBook Buy Print Book Add to Wishlist

Related Titles

Full Description

Foundation HTML5 Animation with JavaScript covers everything that you need to know to create dynamic scripted animation 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.

You will learn how to utilize the amazing animation and physics-based code originally created by author Keith Peters in his hugely successful Foundation ActionScript Animation in all of your HTML5 applications. In no time at all, you'll understand the concepts behind scripted animation and also have the ability to create all manner of exciting animations and games.

What you’ll learn

  • 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

Who this book is for

This book 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

Table of Contents

  1. Basic Animation Concepts
  2. Basics of JavaScript for Animation
  3. HTML5 and Canvas graphics
  4. Trigonometry for Animation
  5. Velocity and Acceleration
  6. Boundaries and Friction
  7. User Interaction: Moving Objects Around
  8. Easing and Springing
  9. Collision Detection
  10. Coordination Rotation and Bouncing Off Angles
  11. Billiard Ball Physics
  12. Particle Attraction and Gravity
  13. Forward Kinematics: Making Things Walk
  14. Inverse Kinematics: Dragging and Reaching
  15. 3D Basics
  16. 3D Lines and Fills
  17. Backface Culling and 3D Lighting
  18. Matrix Math
  19. Tips and Tricks
Source Code/Downloads

Downloads are available to accompany this book.

Your operating system can likely extract zipped downloads automatically, but you may require software such as WinZip for PC, or StuffIt on a Mac.

Errata

Please Login to submit errata.

On page 18:

I believe:

return window.setTimeout

should be changed to

return window.SetInterval

On page 30:

Only got the code to work on an iPad with iOS 5.0 when the utils.js file was modified to the following:

utils.captureTouch = function(element) {
var touch = {x: null, y: null, isPressed: false};

element.addEventListener('touchstart', function(event) {
var x, y;
var touch_event = event.touches[0]; // first touch

if(touch_event.pageX || touch_event.pageY) {
x = touch_event.pageX;
y = touch_event.pageY;
} else {
x = touch_event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = touch_event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= element.offsetLeft; // #1 missing 'element' reference.
y -= element.offsetTop; // #2 missing 'element' reference.

touch.x = x;
touch.y = y;
touch.isPressed = true;

}, false);

return touch;
}

The "touchmove" listener does not seem to be working. Also, the original code was missing the "element" reference (see #1 and #2 comments in the code above).

On page 59:

Sine and cosine do not correspond with x and y values respectively in the example.

ball.x = centerX + Math.sin(angle) * radiusX;
ball.y = centerY + Math.cos(angle) * radiusY;

Note that the switch just causes the object to clockwise vice counterclockwise.

On page 111:
From Author's Errata listing, found at:

https://github.com/lamberta/html5-animation/blob/master/errata.md

Author Comment:
An error at press time has caused an errant graphic to obscure portions of the text. The complete paragraphs are as follows:

... So, given the 45 degrees and the hypotenuse of 1 pixel, you should be able to use Math.cos and Math.sin to find the lengths of vx and vy.

The side adjacent to the angle is vx. The cosine of an angle is the adjacent/hypotenuse. Or, stated another way, the adjacent side is the cosine of the angle times the hypotenuse. Similarly, the opposite side is vy. Sine is opposite/hypotenuse, or the opposite is the sine times hypotenuse.

Here’s the formula you would use:

vx = Math.cos(angle) * speed;
vy = Math.sin(angle) * speed;

Now don’t you dare forget to convert the 45 degrees to radians before passing it into the Math functions! This is what the code looks like after we plug in example values: ...

On page 176:
From Author's Errata listing, found at:

https://github.com/lamberta/html5-animation/blob/master/errata.md

Author Comment:
In an updated Editor's Draft of the W3C Animation-Timing specification, window.cancelRequestAnimationFrame has been renamed to window.cancelAnimationFrame. (Submitted by Paul Irish)

Exercise 03-easing-off.html has been updated to use this name:

window.cancelAnimationFrame(animRequest);

On page 177:
From Author's Errata listing, found at:

https://github.com/lamberta/html5-animation/blob/master/errata.md

Author Comment:
The cross-browser test for the cancelAnimationFrame function definition has been updated in utils.js to reflect its name change:

if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = (window.cancelRequestAnimationFrame ||
window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame ||
window.mozCancelAnimationFrame || window.mozCancelRequestAnimationFrame ||
window.msCancelAnimationFrame || window.msCancelRequestAnimationFrame ||
window.oCancelAnimationFrame || window.oCancelRequestAnimationFrame ||
window.clearTimeout);
}

On page 462:
From Author's Errata listing, found at:

https://github.com/lamberta/html5-animation/blob/master/errata.md

Author Comment:
Exercise 14-time-based-3.html exhibits a bug when a user switches to a new browser tab, then, after a few seconds, switches back to the tab running the example. (Submitted by Paul Irish)

The current frame uses the time stored by the previous frame to calculate the elapsed time. Since switching browser tabs increases this value by many times, the calculation for vertical velocity results in excessive motion. One fix is to establish a range for the elapsed value before applying the gravity multiplier. The typical framerate is about 17 milliseconds.

elapsed = Math.min(20, Math.max(-20, elapsed));
vy += gravity * elapsed / 1000;