Creating realistic animation effects

Thanks to the HTML5 canvas element, it is now possible to create animations without the need for plug-ins such as Flash. With a little JavaScript and some familiarity with physics, it is also possible to make animations that look and behave like the real thing. For example, suppose you are animating a scene in which someone kicks a ball and it bounces off the ground. You could try to create an animation that mimics the ball’s behavior, but however hard you might try, it would probably look less than realistic. With just a little bit of coding and some knowledge of elementary physics, you could produce a far more realistic animation. And if, like the authors, you are programmers rather than designers, you might even find it easier! We’ll show you just how easy it can be in the example at the end of this chapter.

Creating realistic games

Web-based games are extremely popular. As the capabilities of modern web browsers continue to improve, better and more powerful games can be built. Hardware acceleration and 3D support are just two of the emerging developments that have the potential to improve the online gaming user experience dramatically. But apart from performance and appearance, it is equally important for games to feel and look realistic. If a player throws a ball, it should fall according to the law of gravity; if a player fires a torpedo underwater, it should move differently from a ball falling in air. In other words, your game needs to incorporate real physics.

How do you build physics awareness into your games? This book will show you how.

Building simulations and models

A computer simulation or computer model is a program that attempts to imitate certain key aspects of a physical system. Simulations vary in completeness or accuracy, depending on purpose and resources. Let’s take a flight simulator program as an example. We would expect a flight simulator designed for training pilots to be much more comprehensive and accurate than one designed for a game. Simulations are extremely common in e-learning, training, and scientific research. In the final chapter of this book, you’ll build simulations—namely a submarine, a basic flight simulator, and a model of the solar system. In fact, many of the coded examples throughout the book are simulations, even if generally simpler.

Generating art from code

Generative art has gained popularity in recent years. A lot of fun can be had with some basic physics—for example, elaborate visual effects and motions can be produced using particles (small graphic objects that you can create and animate with code) and different kinds of forces. These effects can include realistic-looking animation such as smoke and fire, as well as more abstract examples of generative art that can be created using a mixture of algorithms, randomness, and user interaction. Adding some physics in the mix can result in enhanced realism and/or richer effects.

We will explore the world of generative art and provide additional tools and algorithms that can be used to create original and interesting effects such as particle trajectories in complex force fields.

Everything behaves according to the laws of physics

Without getting too philosophical, it is fair to say that the laws of physics are truly universal, as far as physicists have been able to observe. What this means is that everything must behave according to physics. This is different from say, the laws of biology, which pertain only to living things. A stone thrown in the air, a planet orbiting the Sun, the workings of the human body, and the operation and motion of a man-made machine must all obey the laws of physics. Moreover, many seemingly diverse phenomena are governed by the same subset of laws. In other words, a single law or group of laws can explain many types of observed facts or patterns of behavior in the physical world. For example, a falling stone and a planet orbiting the Sun both obey the laws of gravity. Another example is that all electrical, magnetic, and radiation phenomena (such as light and radio waves) are governed by the laws of electromagnetism.

The laws can be written as math equations

The great thing is that the laws of physics can be written as mathematical equations. Okay, that may not sound too great if you don’t like math! But the point here is that for a law to be useful, it has to be made precise. And math equations are as precise as anything can be. There is no possible ambiguity in how to apply a law that is expressed mathematically, in contrast with the laws that are fought over in courtrooms! Second, this means that centuries of developments in mathematics prove to be applicable to physics, making it possible to solve many physics problems. Third, and what is of most relevance for us: math equations are readily convertible into code.

Predicting motion

Let’s get more specific. As a JavaScript programmer, you are mostly interested in how things move. Much of physics deals with how things move under the action of different types of influences. These “influences” can be from other things and from the environment. Examples include gravity, friction, and air resistance. In physics we have a special name for these influences: they are called forces. The really good news is that the forces have precise mathematical forms. Although the motion of objects is usually complicated, the underlying mathematical laws that describe the forces are usually quite simple.

The general relationship between force and motion can be written symbolically as follows:

motion = function{forces}

Here the use of the word function is not intended to represent an actual code function. Rather, it is meant to emphasize two things. First, it signifies a cause-and-effect relationship. Forces cause objects to move in different ways. Second, it also points to an algorithmic relationship between forces and motion in code, in that the motion of an object can be seen as the output of a function with forces as input. In practical terms, it means this: specify the forces acting on an object and put them in a mathematical equation, and then you can calculate the motion of the object.

To be able to put the principle stated in this note to use, you need to know the following:

• Definitions. The precise definitions of motion and force.
• The law of motion. In other words, the precise mathematical form of the function that relates a force to the motion it produces.
• Force laws. In other words, how to calculate the forces. There are equations that tell you how to calculate each type of force.

So there are two kinds of laws you need to know about: laws of motion and force laws. You will also need to know the proper concepts (known as physical quantities) to describe and analyze motion and forces and the relationship between them. Finally, you will need to know the mathematics for manipulating and combining these quantities. We’ll cover the relevant math in Chapter 3, the basic physics concepts in Chapter 4, the laws of motion in Chapter 5, and the force laws for various types of forces in Chapters 6–10.

The difference between animation and simulation

Some wise guy once said “A picture is worth a thousand words” or something like that. One could extend this by saying “A movie is worth a thousand pictures.” A movie (or animation) adds so much more to our perception than a static image because it includes the element of change in time, an extra dimension. But there is a sense in which an animation is still static rather than dynamic. No matter how many times you play it, the animation has the same beginning and the same end. Everything happens in exactly the same way. While we might see a progression in capturing the real world from written words to visual images to animated movies, there is still something missing: the power to interact with the medium and to influence the outcome in a way that duplicates the behavior of things in real life. This next step is what we call simulation. As we use the word in this book, simulation entails realism and also interactivity. When you simulate something, you don’t just depict how it behaves under one set of conditions; you allow for many, even infinitely many, conditions. Building interactive simulations including physics makes things behave as they do in the real world: interacting with the environment and with the user to produce diverse and complex outcomes.

There is more. If you really pay attention to accuracy, you can even build a simulation that is so realistic it can be used as a virtual lab. You’ll be able to experiment with it to learn how things actually work out there in the real world, on your computer! In fact, you will build such simulations in this book.

The laws of physics are simple equations

We have already said that the laws of physics are mathematical equations. The good news is that most of the laws (and hence the equations) you’ll come across are actually quite simple. The apparently bad news is that these laws can produce very complex motions. In fact, that is probably a good thing, too; otherwise the universe would have been a rather boring place.

For example, the laws that govern gravity can be written down as just two simple-looking equations (they are given in Chapter 6). But they are responsible for the motion of the Moon around the Earth, the motion of planets around the Sun, and the motion of stars in a galaxy. The net effect of all these motions, plus the gravitational interactions between different celestial bodies, is to create very complicated motions that arise from just two equations.

Equations can be readily coded up!

We are now in a position to answer the first two questions asked at the beginning of this section. The laws of motion and forces are simple; the actual motions they produce are complex. If you know the laws, you can calculate the motions under different conditions. Hence, it makes much more sense to code the laws and forces, rather than the motions that result from them.

Animation attempts to reproduce the motion of an object directly. Simulation programs the laws of motion and then derives the motion of the object. It is much easier to code up the cause of motion than its effect. Moreover, an animation generally depicts a single scenario. But a simulation can potentially handle an infinite number of different scenarios.

Simulation is like playing God. You re-create a virtual world, not by blindly duplicating all the behavior you see, but by reproducing the laws that govern the way things behave and then letting it all happen.

The four steps for programming physics

To answer the third question we asked at the beginning of this section, the process of programming physics can be broken down into four steps, as shown schematically in Figure 1-1.

The first step is to identify the physics principles that apply to the situation you are modeling. This can be tricky if you have no physics background. This book will help you: it is not just a how-to book but is also intended to teach you some physics. The second step is to recall, research, or derive the relevant equations. Obviously, this step involves some math. Don’t worry; we’ll give you all the help you need! The third step is to develop algorithms to solve the equations. Sometimes the equations can be solved analytically (we’ll explain what that means in later chapters), in which case the algorithms are pretty straightforward. More often, one needs to employ numerical methods, which can be simple or less so, depending on the problem and on the desired level of accuracy. Although the first two steps may seem obvious, the third step is often overlooked. Indeed, many developers may even be unaware of its existence or necessity. Again, we’ll spend some time on this aspect, especially in Part IV of the book. The fourth and last step is to write the code in your favorite programming language. You are already good at this, aren’t you?

The physics of a bouncing ball

As you already know by now, forces are what cause things to move. So the first clue to understanding why the volleyball moves the way it does is to find out what forces are acting on it. As you’ll learn later, there are generally many forces acting together on objects in everyday situations. But in this case there is one force that is much more important than any other. It’s the force of gravity that the Earth exerts on the ball.

So let us assume that gravity is the only force acting on the ball once it has been thrown in the air. Thankfully, gravity acts in a straightforward way. Close to the Earth’s surface, as in the present example, it is a constant force that points vertically downward. Its effect is therefore to pull objects downward, making them accelerate as they do so. Accelerate? Yes, that means it increases the speed of the object. As we’ll discuss in much greater detail in later chapters, gravity increases the vertical speed of an object by a constant amount in each second. But because gravity acts downward, it does not affect the horizontal speed of an object.

Every time the ball hits the ground, the latter exerts a contact force on it (a contact force is a force that two solid objects exert on each other when in direct contact). This force acts upward for a very brief time. Unlike gravity, it is not easy to model this contact force directly. Therefore, we’ll simplify things and model its effect instead. Its effect is to reverse the motion of the ball from downward to upward while reducing the speed of the ball.

Coding up a bouncing ball in 2D

To simplify the scenario and the resulting code, we’ll pretend we’re living in a 2D world. An object in 2D can move along two independent directions: horizontal and vertical. We’ll denote the position of the ball at any given time by two numbers, x and y, where x refers to the horizontal position, and y refers to the vertical position. We’ll denote the speed at which the ball is moving along these two directions as vx and vy.

According to what we said, each time the clock ticks, gravity will cause vy to increase by a constant amount, but vx will remain the same.

Because vx and vy are speeds, they tell us how much the object moves each time the clock ticks. In other words, at each tick of the clock, x increases by an amount vx, and y increases by an amount vy.

This implements the effect of gravity. To implement the effect of the ground, what we have to do is reverse the sign of vy and reduce its magnitude each time the ball hits the ground. And, believe it or not, that’s pretty much it.

Here is the code that does it all:

var canvas = document.getElementById('canvas'),
var context = canvas.getContext('2d'),
var radius = 20;
var color = "#0000ff";
var g = 0.1; // acceleration due to gravity
var x = 50;  // initial horizontal position
var y = 50;  // initial vertical position
var vx = 2;  // initial horizontal speed
var vy = 0;  // initial vertical speed

window.onload = init;

function init() {
     setInterval(onEachStep, 1000/60); // 60 fps
};
function onEachStep() {
     vy += g; // gravity increases the vertical speed
     x += vx; // horizontal speed increases horizontal position
     y += vy; // vertical speed increases vertical position
     if (y > canvas.height - radius){ // if ball hits the ground
          y = canvas.height - radius; // reposition it at the ground
          vy *= -0.8; // then reverse and reduce its vertical speed
     }
     if (x > canvas.width + radius){ // if ball goes beyond canvas
          x = -radius; // wrap it around
     }
     drawBall(); // draw the ball
};
function drawBall() {
     with (context){
          clearRect(0, 0, canvas.width, canvas.height);
          fillStyle = color;
          beginPath();
          arc(x, y, radius, 0, 2*Math.PI, true);
          closePath();
          fill();
     };
};