Home / Articles / Flash Game Design: Trigonometry 101

Flash Game Design: Trigonometry 101

Chapter Description

Brush up on the basics of trigonometry, which should handle almost every Flash game development need you'll have.

Vectors

A vector is a mathematical object that has both magnitude (a numeric value) and direction. Velocity is a vector because it has both magnitude and direction. For example, a velocity of 33 kilometers per hour (kph) southeast has a magnitude of 33 and a direction of southeast. Speed is not a vector, and direction is not a vector, but speed and direction together, modifying the same object, form a vector. Here are some other examples of vectors.

  • Displacement can be a vector when describing the location of one point with respect to another point (whether those points represent two objects, or one object in motion). For example, "New York is 500 miles north of Virginia" or "The ball rolled 3 feet to the left."

  • Force can be a vector, since the gravitational force that pulls you toward the earth has both a magnitude and a direction.

  • Rotation, when modified with a direction, is a vector. Think of a clock hand, rotated 90° clockwise.

Graphically, a vector is usually represented as an arrow (in other words, if you had to show a vector in a graph, that's how you'd sketch it). Mathematically, a vector's direction is often specified by an angle. To use the example given above, "33 kph southeast" may alternatively be described as "33 kph at 45 degrees."

Figure 18


In Flash, vectors are used primarily with physics applications. This is because multiple vectors (of the same type) can be added together to form one resultant vector. Adding vectors is called superposition. For example, if a balloon is floating in the air, several forces are being exerted on it simultaneously, such as force from the wind, gravitational force, and a buoyant force (that is, the force that is pushing the balloon up). With three forces acting on one balloon, it might be difficult to figure out what the balloon will do. Will it rise or will it fall? Using superposition, you can add the vectors together to find the resultant vector (and determine the balloon's next move). One vector is much easier to work with than three.

Vectors can be divided up into x and y components (in this context, the word components refers to pieces). This is called resolving a vector. You already did this same thing in the "Projection" section. Resolving a vector is nothing more than projecting it along the coordinate system axes. To add vectors together, you must

  1. Resolve all of the vectors into their x and y components. Those pieces are the remaining two sides of the right triangle.

  2. Add all of the x components together.

  3. Add all of the y components together.

Figure 19


Let's use the example we started above. Imagine a balloon in the air with three forces acting on it:

  • A gravitational force with a magnitude of 10 at an angle of 90°

  • A buoyant force with a magnitude of 8 at an angle of 270°

  • A wind force with a magnitude of 5 at an angle of 45°

To add the vectors together (looking back at our three-step checklist above), the first step is to resolve each vector into its components.

What follows is the balloon example we've been using, written in ActionScript. Nothing will appear on the screen; this is purely a mathematical exercise to introduce you to the role of ActionScript in this process. Later in the book, after I've introduced you to the other concepts necessary to understanding them, we'll delve into many more practical examples.

In the code below, I've used the number 1 appended to the ends of all variables associated with the gravitational force; 2 for the buoyant force; and 3 for the wind force. (The lines that begin with // are comment lines, for information only.) To try this ActionScript yourself, open the Actions panel in Flash and enter the ActionScript below, or open the force_example.fla file from the Chapter03 folder on the CD-ROM.

//Gravitational force
angle1 = 90;
magnitude1 = 10;
//Buoyant force
angle2 = 270;
magnitude2 = 8;
//Wind force
angle3 = 45;
magnitude3 = 5;
//Resolve the vectors into their components
x1 = magnitude1*Math.cos(angle1*Math.PI/180);
y1 = magnitude1*Math.sin(angle1*Math.PI/180);
x2 = magnitude2*Math.cos(angle2*Math.PI/180);
y2 = magnitude2*Math.sin(angle2*Math.PI/180);
x3 = magnitude3*Math.cos(angle3*Math.PI/180);
y3 = magnitude3*Math.sin(angle3*Math.PI/180);

Notice the Math.PI/180 factor in each line of ActionScript above. Remember that the trigonometric functions only work with angles measured in radians. This factor converts the angle from degrees to radians.

The next two steps are to add all of the x components and y components together to form two resultant vectors:

//Add the x pieces
x = x1 + x2 + x3;
//Add the y pieces
y = y1 + y2 + y3;

You now have the sum of all the forces in the x direction and the sum of all the forces in the y direction. Add these two lines of ActionScript to display the result in the output window:

trace("Force in the x direction="+x);
trace("Force in the y direction="+y); 

When you test the SWF file, you will see that the force in the y direction is 1.53. Since this number is greater than 0, the balloon will be forced to move toward the ground. The force in the x direction is 3.53. This means that the balloon will be forced to move to the right.

Still lost? There is hope!

To many people, math is a dry subject. It is understandable if, when you've finished this chapter, you feel like you have grasped only part of it. Everything will make more sense when you start to see the practical uses of the math you've seen here, and the concepts will become more solidified in your mind. It may make sense for you to reread parts of this chapter when you start to use trigonometry in your games.

With the concepts and techniques in this chapter, you are adding practical skills to your programming toolkit. You will find that these things will come in handy frequently. We will revisit vectors and explore more examples of vector uses in the chapters on physics and collision reactions.

7. Points to Remember | Next Section Previous Section