Foundation HTML5 Animation with JavaScript

Billy Lamberta, Keith Peters

Mentioned 2

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

More on Amazon.com

Mentioned in questions and answers.

I have been playing around with JavaScript and Canvas for a while. Very often when I dissect a code people have put on the web, it is really hard to understand the logic and algorithm behind the code if the code is poorly commented.

I would like to apply physics and maths to my code. Are there any good articles, resources hub or books I could learn more about it?

I am aware of few good physics library out there such as Box2D. However I am hoping to learn the basics rather than using the library blindly.

Foundation HTML5 Animation with JavaScript by Keith Peters and Billy Lamberta is a really good book. I just started reading it. So far it is great. It covers many formulas and in-depth explanation on that. http://www.amazon.com/Foundation-HTML5-Animation-JavaScript-Lamberta/dp/1430236655

You could have a pretty thorough read on Google Books. http://books.google.co.nz/books?id=KZTIFYMLShYC&printsec=frontcover&dq=foundation+html5+animation+with+javascript&hl=en&sa=X&ei=XZhiT7q3L8eaiAfh0_DfBQ&redir_esc=y#v=onepage&q&f=false

I've got a good amount of experience with 2D rendering on <canvas>, however there is a project coming up where I need to have a 3D object rotating left along its centre (I believe z-axis). Luckily this is all I need to achieve. The page will run on iPads at an upcoming event.

I'm not experienced with any 3D software/libraries aside from minimal playing around with Papervision 3D in Flash.

I can pick things up pretty easily, so:

  1. Are there any frameworks I can use to take care of the initial stuff?
  2. Are there any open-source projects that include the code to do the above? If not, tutorials to do it are fine.
  3. How do I create the 3D object? Is this the same as a BitmapMaterial in Papervision?

Three.js is pretty awesome, just wanted to point you to this github repo as well

http://lamberta.github.com/html5-animation/ check out the examples in part 4.

Billy Lamberta authored Foundation HTML5 Animation with JavaScript, which is a great book teaching you the math/etc. behind doing things like this if you are interesting in getting a little deeper understanding.