Contents
Contents at a Glance
About the Author
About the Technical Reviewer
About the Cover Image Artist
Acknowledgments
Introduction
Part I: JavaScript Animation Basics
Chapter 1: Basic Animation Concepts
What is animation?
Frames and motion
Frames as records
Programmed frames
Dynamic versus static animation
Summary
Chapter 2: Basics of JavaScript for Animation
Basic animation
An introduction to HTML5
Canvas support
Performance
A basic HTML5 document
CSS stylesheet
Additional scripts
Debugging
Animating with code
Animation Loops
An animation loop using requestAnimationFrame
JavaScript objects
Basics Objects
Creating new kinds of objects
Prototypes
Functional style
User interaction
Events and event handlers
Listeners and handlers
Summary
Chapter 3: Trigonometry for Animation
What is trigonometry?
Angles
Radians and degrees
The canvas coordinate system
Triangle sides
Trigonometry functions
Rotation
Waves
Smooth up and down motion
Linear vertical motion
Pulsing motion
Waves with two angles
Waves with the drawing API
Circles and ellipses
Circular movement
Elliptical movement
Pythagorean Theorem
Distance between two points
Important formulas in this chapter
Calculate basic trigonometric functions
Convert radians to degrees and degrees to radians
Rotate to the mouse (or any point)
Create waves
Create circles
Create ovals
Get the distance between two points
Summary
Chapter 4: Trignometry for Animation
Colors on the canvas
Using hexadecimal color values
Combining colors
Extracting component colors
Transparency
Color utility functions
The Drawing API
The canvas context
Removing the drawing with clearRect
Setting the line appearance
Drawing paths with lineTo and moveTo
Drawing curves with quadraticCurveTo
Creating multiple curves
Additional curves
Creating shapes with fill
Creating gradient fills
Setting gradient color stops
Loading and drawing images
Loading images
Using image elements
Using video elements
Pixel manipulation
Getting pixel data
Painting pixel data
Important formulas in this chapter
Convert hex to decimal
Convert decimal to hex
Combine component colors
Extract component colors
Draw a curve through a point
Summary
Part II: Basic Motion
Chapter 5: Velocity and Acceleration
Velocity
Vectors and velocity
Velocity on one axis
Velocity on two axes
Angular velocity
Vector addition
A mouse follower
Velocity extended
Acceleration
Acceleration on one axis
Acceleration on two axes
Gravity as acceleration
Angular acceleration
A spaceship
Ship controls
Important formulas in this chapter
Convert angular velocity to x, y velocity
Convert angular acceleration (any force acting on an object) to x, y acceleration
Add acceleration to velocity
Add velocity to position
Summary
Chapter 6: Boundaries and Friction
Environmental boundaries
Setting boundaries
Removing objects
Regenerating objects
Screen wrapping
Bouncing
Friction
Friction, the right way
Friction, the easy way
Friction applied
Important formulas in this chapter
Remove an out-of-bounds object
Regenerate an out-of-bounds object
Screen wrapping for an out-of-bounds object
Apply friction (the correct way)
Apply friction (the easy way)
Summary
Chapter 7: User Interaction: Moving Objects Around
Pressing and releasing an object
Using touch events
Dragging an object
Combining dragging with motion code
Throwing
Summary
Part III: Advanced Motion
Chapter 8: Easing and Springing
Proportional Motion
Easing
Simple easing
Advanced easing
Springing
Springing in one dimension
Springing in two dimensions
Springing to a moving target
So where's the spring?
Chaining springs
Springing to multiple targets
Offsetting the target
Attaching multiple objects with springs
Important formulas in this chapter
Simple easing, long form
Simple easing, abbreviated form
Simple easing, short form
Simple spring, long form
Simple spring, abbreviated form
Simple spring, short form
Offset spring
Summary
Chapter 9: Collision Detection
Collision detection methods
Geometric hit testing methods
Hit testing two objects
Hit testing an object and a point
Summary of geometric hit testing
Distance-based collision detection
Simple distance-based collision detection
Collision-based springing
Multiple-object collision detection strategies
Basic multiple-object collision detection
Multiple-object springing
Important formulas in this chapter
Distance-based collision detection
Multiple-object collision detection
Summary
Chapter 10: Coordinate Rotation and Bouncing Off Angles
Simple coordinate rotation
Advanced coordinate rotation
Rotating a single object
Rotating multiple objects
Bouncing off an angle
Performing the rotation
Optimizing the code
Making it dynamic
Fixing the “not falling off the edge” problem
Fixing the “under the line” problem
Bouncing off multiple angles
Important formulas in this chapter
Coordinate rotation
Reverse coordinate rotation
Summary
Chapter 11: Billiard Ball Physics
Mass
Momentum
Conservation of Momentum
Conservation of Momentum on One Axis
Conservation of Momentum on Two Axes
Important Formulas in this Chapter
Conservation of Momentum, in Straight Mathematical Terms
Conservation of Momentum in JavaScript, with a Shortcut
Summary
Chapter 12: Particle Attraction and Gravity
Particles
Gravity
Gravitational force
Collision detection and reaction
Orbiting
Springs
Gravity versus springs
A springy node garden
Nodes with connections
Nodes with mass
Important formulas in this chapter
Basic gravity
JavaScript-friendly gravity implementation
Summary
Chapter 13: Forward Kinematics: Making Things Walk
Introducing Forward and Inverse Kinematics
Getting Started Programming Forward Kinematics
Moving One Segment
Moving Two Segments
Automating the Process
Building a Natural Walk Cycle
Making It Dynamic
Making It Really Walk
Giving It Some Space
Adding Gravity
Handling the Collision
Handling the Reaction
Screen Wrapping, Revisited
Summary
Chapter 14: Inverse Kinematics: Dragging and Reaching
Reaching and Dragging Single Segments
Reaching with a Single Segment
Dragging with a Single Segment
Dragging Multiple Segments
Dragging Two Segments
Dragging More Segments
Reaching with Multiple Segments
Reaching for the Mouse
Reaching for an Object
Adding Some Interaction
Using the Standard Inverse Kinematics Method
Introducing the Law of Cosines
Programming the Law of Cosines
Important Formulas in This Chapter
Law of Cosines
Law of Cosines in JavaScript
Summary
Part IV: 3D Animation
Chapter 15: 3D Basics
The third dimension and perspective
The z axis
Perspective
Velocity and acceleration
Bouncing
Single object bouncing
Multiple object bouncing
Z-sorting
Gravity
Wrapping
Easing and springing
Easing
Springing
Coordinate rotation
Collision detection
Important formulas in this chapter
Basic perspective
Z-sorting
Coordinate rotation
3D distance
Summary
Chapter 16: 3D Lines and Fills
Creating points and lines
Making shapes
Creating 3D fills
Using triangles
Modeling 3D solids
Modeling a spinning cube
Modeling other shapes
Moving 3D solids
Summary
Chapter 17: Backface Culling and 3D Lighting
Backface culling
Enhanced depth sorting
3D lighting
Summary
Part V: Additional Techniques
Chapter 18: Matrix Math
Matrix basics
Matrix operations
Matrix addition
Matrix multiplication
Canvas transforms
Summary
Chapter 19: Tips and Tricks
Brownian (random) motion
Random distribution
Square distribution
Circular distribution
Biased distribution
Collision-based distribution
Timer- and time-based animation
Timer-based animation
Time-based animation
Collisions between same-mass objects
Integrating sound
Summary
Appendix: Useful Formulas
Index
