Chapter 1

Basic Animation Concepts

What we’ll cover in this chapter:

• What is animation?
• Frames and motion
• Dynamic versus static animation

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.

This book covers programming, math, and physics techniques used to make animations with the HTML5 canvas element and JavaScript. As you'll see, this provides developers with levels of power, control, and interactivity that, for the first time, are available in a standards-compliant web browser.

Before we dive into specific techniques and formulas for moving things around with JavaScript, let's take a quick look at exactly what animation is, some of the basic techniques behind it, and some concepts that you can use for your animations to make them more dynamic and interesting.

Whether this is your first time drawing with computers or you have previous experience using tools such as Adobe Flash, this book is a great guide to programmed animation. This book has undergone many changes since being ported from Flash to JavaScript, but it also demonstrates that the underlying techniques and mathematical concepts are language-agnostic. We target the web browser here, but given modest graphics support wherever your coding environment, these formulas and examples are applicable anywhere.

Sure, you can skip this chapter if you can't wait to write some code. But it's strongly suggested you come back to it at some point. If nothing else, you'll find some insights into how animation works.

What is animation?

Animation is motion. Motion is a change in the position of an object over time—one minute it is here, the next minute it is over there—and space between those two points. By applying mathematical formulas to an object's location, you can determine its next position and affect the behavior of the movement—breathe life into it.

But animation is not just movement, it's change in any visual attribute: shape, size, orientation, color, etc. A ball squishes, plants grow, faces contort—something changes. Some of the earliest computer animations cycled colors to simulate movement; for instance, you can make a waterfall composed of pixels in various shades of blue that appears to alternate hues with such frequency to look like falling water, though nothing on the screen has actually changed position.

Time is a fundamental component of animation. It is the mechanism used to express change in an object from one position to the next. And without time, there is no motion—it is a still image and not an animation. Consequently, without motion, we have no sense of time, even if it is present. Take for example, a video of an empty parking garage from a security camera. Without movement, it is impossible to decide if you are watching a live stream, a frame from 5 seconds ago, or an unchanging still image. Only when a plastic bag blows across the screen are you assured that time is present and further change can occur. Without time, nothing else happens in the picture.

This brings up another point, animation keeps us interested. If something changes, our brains naturally become curious. What changed? Why did it change? Did I cause it to change? Does this change fit within the mental model I've constructed for this object or do I need to adjust my assumptions? Temporal media types such as music and film are compelling because, as in life, we are not sure what will happen next. We may have a general idea, and discerning these patterns is pleasurable, but we find joy in tickling the boundaries of the unexpected. Nontemporal media—images, paintings, text—do not change; we may explore the details of the work and our understanding and interpretation might change over time, but the work will not. This is what makes animation so gripping. Change is inherent to the medium; it captures a part of our experience that we are naturally attuned to. Thus, we are able to get lost in a movie for hours or enthralled by a video game for days. If something is going to happen, generally we want to know what that is.

Frames and motion

Animation is a process that creates the illusion of motion. Nearly every form of projected motion media uses frames to accomplish this.

Frames are a series of discrete images shown in rapid succession to simulate motion or change in an object. Frames are the basis for anything you see on a computer, television, or movie screen. This idea goes back to the earliest cartoons. Animators drew individual pictures on sheets of cellophane (known as cells), and the earliest motion pictures used a similar technique with multiple photographs.

The concept is simple: You show a bunch of images that vary slightly from one to the next, and the mind blurs them together as a single, moving image. But why do we insist on calling it an illusion of motion? If you see a man walk across the room on a movie screen, is that not motion? Of course it's only an image of a man, not a real person, but that's not the reason we don't consider it motion.

Remember, moving objects travel from a point here to a point there by passing through the intervening space. That is real motion; objects move through space smoothly, not in several jumps. But frame-based motion does just that. It doesn't move from spot to spot, it disappears and reappears in another location in the next frame. The faster it's moving, the bigger jump it takes.

If you were shown a picture of a man on the left side of a room and then a few seconds later another picture of the same man on the right side of the room, you'd infer that there are two pictures, not an animation. If you were shown a half dozen pictures of the man in the process of crossing the room, you'd still interpret these as a series of individual photographs. (See Figure 1-1 for an example of this.) If the images were presented fast enough, it wouldn't change the fact they remain a bunch of still photos, but, you would no longer see it that way. Your mind will process it all as a man moving across the room. It is no more real motion than the original two photos were, but at some point, the mind gives up and buys into the illusion.

Figure 1-1. A series of still photographs by Eadweard Muybridge

This point has been extensively examined by the film industry. Researchers have found that at a rate of 24 frames per second, people will accept these frames as a single moving image. Go much slower than that, and the jumpiness gets annoying and starts to break the illusion. And it seems that the human eye can't distinguish frame rates higher than that—showing 100 frames per second won't make your animation seem any more realistic (although higher frame rates in a programmed animation can result in more responsive interaction and will seem smoother).

Frames as records

The whole concept of frames makes three things possible: storage, transmission, and display. You can't store, transmit, and display an actual man walking across a room, but you can store many pictures of that man walking across the room. You can also transmit the images and display them. Thus, you can show an animation almost anywhere and at any time, as long as you can interpret the stored images and have a means to display them.

Now, we need a more general definition of what a frame is. So far, we've referred to a frame as a still image or a drawing. Let's call it a record of a system at a specific point in time. That system can be the midway point of a man walking across a room; then the record is that image. On the other hand, that system can be a collection of virtual objects, and the record is their shapes, colors, and positions at a particular moment in time. Thus, your animation becomes not a series of still images, but rather, it is a series of image descriptions. Instead of displaying only the image, the computer takes that description, creates the image from it, and then displays it. You can even take this idea a step further by using programmed frames.

Programmed frames

Because you have at your disposal a computer that can perform calculations as needed, you don't need a long list of frame descriptions. You can cut it down to a description of the first frame, and then you follow some rules for building the subsequent frames. Now the computer is not merely creating an image from a description; it's creating the description first, creating the image based on this description, and then finally displaying the image.

Consider how much file space you can save using this approach. Images take up hard disk space and bandwidth, and 24 images per second will add up fast. If you can decrease that to one description and a set of rules, you can possibly reduce the file size to a fraction of what it was. Even a complex set of rules for how the objects should move and react takes up less space than a single medium-sized image. Indeed, one of the first things people notice about programmed animation is just how small the files are.

Naturally, there is a trade-off. As your system gets larger and your rules get more complex, the computer must work furiously to calculate the next description, and then it must work additionally to display it. If you're trying to maintain a particular frame rate, that gives the computer a limited amount of time (milliseconds) to process it. If the computer can't calculate the scene in time, your frame rate suffers. On the other hand, image-based animation doesn't care about what's in the scene or how complex it is; it just shows the next picture, and generally it is right on time.

Dynamic versus static animation

The great advantage of programming an animation is that it becomes dynamic. The images are not defined until runtime. Instead of watching a predetermined sequence of frames—such as a movie's ending that will never change no matter how many times you watch it—you can generate new images, effectively creating a unique visual experience for each viewing. If you calculate an object's position using user-provided values, such as a mouse cursor, the media can responsively update the display to interact with the user, creating a level of immersion not capable with other media types.

But a coded animation isn't necessarily interactive. You can take an object and, using code, move it from a particular position across the screen. Each time the animation is played, the same code runs, causing the same movement. This is an example of what we'll call a static animation. Each frame, from start to finish, is predefined. Similar to a movie, you're watching a predetermined sequence of images that do not change on another viewing.

But what if you create an object, and again, using code, determine a random point to place it and a random direction and speed to move it? Now, each time you play the animation, something different happens. Or, what happens if, when the animation starts, you determine the time of day and month of the year, and use that data to create a scene—a winter morning, a summer afternoon, visually distinct images depending on the date the program is run?

Or, maybe you have some factors in your animation that change using input from the keyboard and mouse while it runs. This enables the user to interact with the objects on the screen, and about as far from static as you can get.

Perhaps the most interesting aspect of dynamic animation, and the focus of this book, is the application of real-world mathematics and physics principles to objects in the animation. You're not limited to moving an object in some random direction; you can also give it some gravity, so that as it moves, it falls down. When it hits the “ground,” it bounces, but not as high as it started out. Then it eventually settles down and just sits there. You can also add some user interaction, enabling the user to “pick up” the object with the mouse or move it around with the keyboard. As the user throws the object around, she gets the feeling of handling a physical object.

With this kind of animation, the user is no longer a passive recipient of a sequence of frames that plays out, but has entered an environment you created. You can construct a world that models the physical constraints of your own, providing a more realistic experience, or, you can completely disregard such worldly confines. As the programmer, you are free to express your vision as you see fit. These are the joys of creative coding; by offloading tasks to the computer and having a constantly updating visual display, you can create rich scenes that involve the viewer in a way no medium in human history has been able to do before. How long will viewers stay there? They will remain as long as the environment keeps them interested. The more they interact with it, the more likely they'll come back for more.

Summary

In this opening chapter, the basics of animation theory have been summarized. We build on the concepts of frames and dynamism to create motion and interactivity in our animations.

In the following chapters, we examine the mathematical elements of movement and build a collection of tools that you'll incorporate into your programmed animations to create motion, and include lessons on how to use them. What you create with these tools is entirely your decision. The most obvious applications of the techniques in this book are for game creation. Games are essentially interactive animations with some goals for players to achieve. But this is not simply a game-programming book. These techniques are applicable to a wide range of animated projects—from navigational systems, to advertisements, to educational applications, and to interactive art.

A new era of web programming creativity has begun thanks to the innovation driving modern browsers. With the HTML5 canvas element, you have a standards-compliant, cross-platform component for creating advanced web graphics. This book is an exploration into the principles of programmatically generated movement for creating these next-generation graphic interactions.