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
- Basic Animation Concepts
- Basics of JavaScript for Animation
- HTML5 and Canvas graphics
- Trigonometry for Animation
- Velocity and Acceleration
- Boundaries and Friction
- User Interaction: Moving Objects Around
- Easing and Springing
- Collision Detection
- Coordination Rotation and Bouncing Off Angles
- Billiard Ball Physics
- Particle Attraction and Gravity
- Forward Kinematics: Making Things Walk
- Inverse Kinematics: Dragging and Reaching
- 3D Basics
- 3D Lines and Fills
- Backface Culling and 3D Lighting
- Matrix Math
- Tips and Tricks
- Source Code/Downloads
- Errata
-
If you think that you've found an error in this book, please let us know about it. You will find any confirmed erratum below, so you can check if your concern has already been addressed.
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.mdAuthor Comment:
On page 176:From Author's Errata listing, found at:
https://github.com/lamberta/html5-animation/blob/master/errata.mdAuthor Comment:
On page 177:From Author's Errata listing, found at:
https://github.com/lamberta/html5-animation/blob/master/errata.mdAuthor Comment:
On page 462:From Author's Errata listing, found at:
https://github.com/lamberta/html5-animation/blob/master/errata.mdAuthor Comment:
Your Cart
You don't have any books in your shopping cart yet!
Companion eBooks
Why limit yourself to one format? If you’ve purchased the print edition of most Apress titles then we’re happy to offer you the eBook edition for just $10.
User Group Program
Register your user group with Apress to take advantage of discounts on books, receive review copies, door prizes, and much, much more…
Academic Resources
Let Apress assist in the development of your academic programs and coursework.
Bulk Sales Discount
Bulk discounts apply when you buy ten or more copies of individual Apress or Friends of ED titles in either hard copy or eBook format.
... 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: ...