Foundation HTML5 Animation with JavaScript

Foundation HTML5 Animation with JavaScript

Released November 2011
Publisher(s): Apress
ISBN: 9781430236658

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book 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

  1. Title
  2. Dedication
  3. Contents at a Glance
  4. Contents
  5. About the Author
  6. About the Technical Reviewer
  7. About the Cover Image Artist
  8. Acknowledgments
  9. Introduction
  10. Part I: JavaScript Animation Basics
    1. Chapter 1: Basic Animation Concepts
      1. What is animation?
      2. Frames and motion
      3. Dynamic versus static animation
      4. Summary
    2. Chapter 2: Basics of JavaScript for Animation
      1. Basic animation
      2. An introduction to HTML5
      3. Animating with code
      4. JavaScript objects
      5. User interaction
      6. Summary
    3. Chapter 3: Trigonometry for Animation
      1. What is trigonometry?
      2. Angles
      3. Rotation
      4. Waves
      5. Circles and ellipses
      6. Pythagorean Theorem
      7. Important formulas in this chapter
      8. Summary
    4. Chapter 4: Trignometry for Animation
      1. Colors on the canvas
      2. The Drawing API
      3. The canvas context
      4. Removing the drawing with clearRect
      5. Drawing paths with lineTo and moveTo
      6. Creating shapes with fill
      7. Loading and drawing images
      8. Pixel manipulation
      9. Important formulas in this chapter
      10. Summary
  11. Part II: Basic Motion
    1. Chapter 5: Velocity and Acceleration
      1. Velocity
      2. Acceleration
      3. Important formulas in this chapter
      4. Summary
    2. Chapter 6: Boundaries and Friction
      1. Environmental boundaries
      2. Friction
      3. Important formulas in this chapter
      4. Summary
    3. Chapter 7: User Interaction: Moving Objects Around
      1. Pressing and releasing an object
      2. Dragging an object
      3. Throwing
      4. Summary
  12. Part III: Advanced Motion
    1. Chapter 8: Easing and Springing
      1. Proportional Motion
      2. Easing
      3. Springing
      4. Important formulas in this chapter
      5. Summary
    2. Chapter 9: Collision Detection
      1. Collision detection methods
      2. Geometric hit testing methods
      3. Distance-based collision detection
      4. Multiple-object collision detection strategies
      5. Important formulas in this chapter
      6. Summary
    3. Chapter 10: Coordinate Rotation and Bouncing Off Angles
      1. Simple coordinate rotation
      2. Advanced coordinate rotation
      3. Bouncing off an angle
      4. Important formulas in this chapter
      5. Summary
    4. Chapter 11: Billiard Ball Physics
      1. Mass
      2. Momentum
      3. Conservation of Momentum
      4. Important Formulas in this Chapter
      5. Summary
    5. Chapter 12: Particle Attraction and Gravity
      1. Particles
      2. Gravity
      3. Springs
      4. Important formulas in this chapter
      5. Summary
    6. Chapter 13: Forward Kinematics: Making Things Walk
      1. Introducing Forward and Inverse Kinematics
      2. Getting Started Programming Forward Kinematics
      3. Automating the Process
      4. Making It Really Walk
      5. Summary
    7. Chapter 14: Inverse Kinematics: Dragging and Reaching
      1. Reaching and Dragging Single Segments
      2. Dragging Multiple Segments
      3. Reaching with Multiple Segments
      4. Using the Standard Inverse Kinematics Method
      5. Important Formulas in This Chapter
      6. Summary
  13. Part IV: 3D Animation
    1. Chapter 15: 3D Basics
      1. The third dimension and perspective
      2. Velocity and acceleration
      3. Bouncing
      4. Gravity
      5. Wrapping
      6. Easing and springing
      7. Coordinate rotation
      8. Collision detection
      9. Important formulas in this chapter
      10. Summary
    2. Chapter 16: 3D Lines and Fills
      1. Creating points and lines
      2. Making shapes
      3. Creating 3D fills
      4. Modeling 3D solids
      5. Moving 3D solids
      6. Summary
    3. Chapter 17: Backface Culling and 3D Lighting
      1. Backface culling
      2. Enhanced depth sorting
      3. 3D lighting
      4. Summary
  14. Part V: Additional Techniques
    1. Chapter 18: Matrix Math
      1. Matrix basics
      2. Matrix operations
      3. Canvas transforms
      4. Summary
    2. Chapter 19: Tips and Tricks
      1. Brownian (random) motion
      2. Random distribution
      3. Timer- and time-based animation
      4. Collisions between same-mass objects
      5. Integrating sound
      6. Summary
  15. Appendix: Useful Formulas
    1. Chapter 3
    2. Chapter 4
    3. Chapter 5
    4. Chapter 6
    5. Chapter 8
    6. Chapter 9
    7. Chapter 11
    8. Chapter 12
    9. Chapter 14
    10. Chapter 15
  16. Index

Product information

  • Title: Foundation HTML5 Animation with JavaScript
  • Author(s):
  • Release date: November 2011
  • Publisher(s): Apress
  • ISBN: 9781430236658