nach oben

2011 | Buch

Foundation HTML5 Animation with JavaScript

verfasst von: Billy Lamberta

Verlag: Apress

Enthalten in: Springer Professional "Wirtschaft+Technik" , Springer Professional "Technik" , Springer Professional "Wirtschaft"

Einloggen, um Zugang zu erhalten

Über dieses Buch

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.

Inhaltsverzeichnis

Frontmatter

JavaScript Animation Basics

Frontmatter

Chapter 1. Basic Animation Concepts

Abstract

Oh, how far the web browser has come! What started as a program for accessing text files over the network, soon revolutionized how we communicate and share, and has now evolved into a fully graphical, interactive programming environment. The most recent markup standard for these documents, HTML5, adds graphics capabilities that were previously available only with native applications. After a period of stagnation, modern web browsers benefit from a new wave of competition and innovation with HTML5 and JavaScript. The new canvas element provides a way to create standards-compliant games, applications, and animations that work across modern web browsers and mobile devices, including popular phones and tablets such as iPhones, iPads, and Android devices.

Billy Lamberta

Chapter 2. Basics of JavaScript for Animation

Abstract

If the first chapter is a somewhat philosophical overview of animation, this one is a technical overview of what it takes to create an HTML5 document and how to animate using a canvas element and JavaScript. This chapter covers the essentials of document structure, animation loops, JavaScript objects, and user interaction. The techniques you learn here are used throughout the rest of the book.

Billy Lamberta

Chapter 3. Trigonometry for Animation

Abstract

This chapter is near the beginning of the book because trigonometry is used extensively for animation techniques, starting with the examples in Chapter 5. And in fact, we’ll even touch on it in Chapter 4 on rendering techniques. However, feel free to jump ahead if you already know basic trigonometry or are just anxious to animate things. You can always come back here when you come across something you don’t understand.

Billy Lamberta

Chapter 4. Trigonometry for Animation

Abstract

So far, the graphics drawn in the book example programs have used a few simple commands, and the “canvas drawing API” has been alluded to a number of times. But for the most part, the code has been provided without much explanation.

Billy Lamberta

Basic Motion

Frontmatter

Chapter 5. Velocity and Acceleration

Abstract

Well, congratulations! You made it to the point in the book where the action finally starts. This means that (a) you persevered through all the chapters so far, (b) you skimmed over the previous chapters and felt like you knew enough of it to get by, or (c) you got bored and jumped ahead. However it happened, here you are. Just remember, if you start having trouble, you can probably find help in an earlier chapter.

Billy Lamberta

Chapter 6. Boundaries and Friction

Abstract

You covered a lot of ground in the preceding chapters. You can create graphics with the canvas drawing API and use all kinds of forces to move them around the screen. However, you’ve probably run into a small annoyance with many of the examples: If an object moves off the screen, it’s gone. Sometimes, you have no way of knowing how to get it back and your only option is to reload the web page.

Billy Lamberta

Chapter 7. User Interaction: Moving Objects Around

Abstract

One of the goals of these interactive animations is to create a smooth user experience, and this interaction is usually through the mouse or touch screen. Mouse and touch events were introduced in Chapter 2, but, so far, you haven’t done much with them; now, you’ll get some hands-on practice.

Billy Lamberta

Advanced Motion

Frontmatter

Chapter 8. Easing and Springing

Abstract

It’s hard to believe that it took seven chapters to get through “the basics,” but here you are at Chapter 8, the beginning of the advanced stuff. Or, the point where things start to get really interesting. Up to now, each chapter covered more general techniques and concepts. Beginning with this chapter, we’ll be concentrating on one or two specialized types of motion per chapter.

Billy Lamberta

Chapter 9. Collision Detection

Abstract

As you’ve progressed through the book, you’ve seen how to make objects move and make them interact with the space they occupy. Now, you’re going to make these objects interact with each other. For the most part, this will involve determining when two objects have touched each other. This is a subject known as collision detection or hit testing.

Billy Lamberta

Chapter 10. Coordinate Rotation and Bouncing Off Angles

Abstract

This chapter covers a technique known as coordinate rotation, which as its name implies, involves rotating a coordinate around a point. While useful all by itself, coordinate rotation is indispensable for several very interesting effects, including how to bounce something off an angled surface. We’ll cover how to do that in this chapter.

Billy Lamberta

Chapter 11. Billiard Ball Physics

Abstract

As you might expect in a technical book like this, things start off simple and gradually become more complex. With this chapter, you reach a pinnacle of complexity. Not that the rest of the chapters after this are all downhill, but this one requires that you don’t skimp on the material that came earlier. That said, we’ll walk through the concepts step by step, and if you’ve followed along reasonably well up to now, you should be fine.

Billy Lamberta

Chapter 12. Particle Attraction and Gravity

Abstract

During the progression of this book, each chapter has added a new concept to enhance the motion quality of our animations. At first, you just had things moving around. Then things started interacting with the environment, then with the user, and then with each other through collisions. In this chapter, we expand on the ways objects interact with each other, particularly from a distance. Specifically, we cover particles, gravity (a little differently this time), springs (again!), and have them all interact with each other.

Billy Lamberta

Chapter 13. Forward Kinematics: Making Things Walk

Abstract

The previous chapters covered the basics of interactive JavaScript animations using the canvas element, and even some advanced “basics.” Now, we branch off and explore some other interesting techniques that use kinematics.

Billy Lamberta

Chapter 14. Inverse Kinematics: Dragging and Reaching

Abstract

In Chapter 13, we covered the basics of kinematics and the difference between inverse and forward kinematics. The last chapter was about forward kinematics, and now you’re ready for its close relative, inverse kinematics: the movements for dragging and reaching.

Billy Lamberta

3D Animation

Frontmatter

Chapter 15. 3D Basics

Abstract

Up to now, everything in this book has been in just two (and sometimes only one) dimensions, and you’ve created some pretty interesting animations. Now, let’s take it to the next level.

Billy Lamberta

Chapter 16. 3D Lines and Fills

Abstract

The last chapter introduced 3D, but the objects were only positioned in 3D space by calculating their size and screen position—the objects themselves were actually 2D. If you were to move your viewpoint position in this space, the object would always seem to turn and face you. However, that object is not turning. It only appears to turn because, as a 2D object, it’s the only view you have of it.

Billy Lamberta

Chapter 17. Backface Culling and 3D Lighting

Abstract

In the previous chapter, we looked at the basics of modeling 3D solids: how to create the points, lines, and polygons that make up a form, and how to give each polygon a color. But if you recall, that color was left at 50% transparency, so you could see right through it. Although we created some complex 3D shapes, the models still lack a lot in terms of realism.

Billy Lamberta

Additional Techniques

Frontmatter

Chapter 18. Matrix Math

Abstract

Although this chapter does not introduce any new types of motion or methods of rendering graphics, it does introduce matrices, which provide an alternative way of applying visual transformations, something we’ve done throughout the book.

Billy Lamberta

Chapter 19. Tips and Tricks

Abstract

Well, you made it to the last chapter. This chapter has been set aside for all the little things that didn’t really fit in anywhere else. Because these various topics are just random bits and pieces (albeit useful bits), each section is a stand-alone unit.

Billy Lamberta

Backmatter

Titel: Foundation HTML5 Animation with JavaScript
verfasst von: Billy Lamberta
Verlag: Apress
Electronic ISBN: 978-1-4302-3666-5
Print ISBN: 978-1-4302-3665-8
DOI: https://doi.org/10.1007/978-1-4302-3666-5