Angles

As trigonometry is mostly about angles, lets tackle that subject first. An angle is simply the shape formed by two intersecting lines, or the space in between those lines. The more space, the higher the measurement of the angle. Actually, two intersecting lines will form four angles, as you can see in Figure 3-1.

Figure 3-1: Two lines form four angles

Radians and degrees

The two major systems for measuring angles are degrees and radians. You are probably very familiar with degrees, and no doubt you could draw a 45- or 90-degree angle in your sleep. The system of 360 degrees in a circle has become a part of our culture. We talk about doing a 180, meaning going in the opposite direction, even when we are not talking about physical direction, but referring to taking an opposite viewpoint. But it turns out that computers have a lot more affinity for radians when it comes to talking about angles. So, like it or not, you need to know about radians.

A radian is equal to approximately 57.2958 degrees. Now, youre probably rolling your eyes and saying, Well, isnt that logical? But there is some actual logic to it. A full circle, or 360 degrees, works out to 6.2832 radians. Still not making any sense? Well, remember pithat symbol, ? That is equal to about 3.1416, meaning that a circle (6.2832 radians) measures exactly 2 pi. It still may not seem too logical now, but work with it enough, and youll get used to thinking of a 360 degrees as 2 pi, 180 degrees as pi, 90 degrees as pi/2, and so on. Figure 3-2 illustrates some common radian measurements.

Figure 3-2: Radians and degrees

Now, I could pretty much leave the discussion there and just tell you that youll be using radians from here on out. You might sigh a bit, and then get used to it and live happily ever after. But youre going to encounter many situations where youll need to use degrees along with radians. For example, it just so happens that the _rotation property of a movie clip is measured in degrees, and youll often need to use or set that property.

For example, say you have a vehicle that needs to turn in the direction of its motion. If you figure out the motion using trig, the angle you get will be in radians, but to rotate the vehicle, you need degrees. Or, conversely, suppose you want to move something in the direction it happens to be pointing. You can check its _rotation to get the angle, but thats going to be degrees, and to use it in any trig formula, you need radians.

Why the heck are they using two completely different systems in the same program? Well, its kind of indicative of Flashs dual nature. On one hand, its a designer tool. You have all your drawing and transformation tools to make pretty graphics. Im sure most designers would look at you cross-eyed if you told them to enter a radian value to rotate the text for the logo they are creating. On the other hand, Flash is a developer tool, and like most programming languages, ActionScript uses radians. So, like it or not, youll be working with both, and youll need to know how to convert degrees to radians and vice versa. Here are the formulas:

 radians = degrees * Math.PI / 180 degrees = radians * 180 / Math.PI 

As you go through this book, youll be running into a lot of formulas. Here and there, I will point out a formula as one that you should memorizeburn into the backs of your eyelids. These are the first ones. If you need to look up this formula every time you want to use it, youll never get any code written. It should just roll off your fingers onto the keyboard whenever you need it. I even wrote it in ActionScript for you, with Math.PI rather than just pi or its funny symbol, because thats how youll be typing it over and over.

From this, you can easily see that 180 degrees is about 3.14. . . radians. In other words, half a circle is pi radians, which makes sense, since a full circle is 2 pi. Going the other way, you can see that one radian is indeed roughly 57.29. . . degrees.

Flashs coordinate system

While were on the subject of angles, this would be a good time to say a word about how space is laid out in Flash, numerically speaking. If youve dealt with any coordinate systems prior to Flash, youre probably going to get a little dizzy here, as everything is pretty much upside down and backwards .

The most common two-dimensional coordinate systems signify horizontal measurements with x and vertical measurements with y. Flash does this, too. However, the zero x, zero y position (0, 0) is usually shown in the center, with positive x going off to the right, negative x to the left, positive y going up, and negative y going down, as shown in Figure 3-3.

Figure 3-3: Standard coordinate system

Flash, however, is based on a video screen coordinate system, where 0, 0 is at the top left, as shown in Figure 3-4. The x values still increase from left to right, but the y axis is reversed , with positive values going down and negative values going up. I believe this system has its historical roots in the way the electron gun scans the screen to build the pictureleft to right, top to bottombut it doesnt really matter. Thats the way it works, and its probably not going to change very soon.

Figure 3-4: Flashs coordinate system

It is possible to build a system where you can work with numbers in a standard coordinate system, and convert them to Flashs coordinates just before rendering. Basically, you would flip the y values, and offset everything half a screen to move the center to the top-left corner. However, the problem is that all those calculations take time. Flash already suffers a bit in the performance department compared with other languages, so personally , I trade my brainpower for CPU cycles. Learn to live with the backward coordinates, and reserve the calculations for the cool effects.

But wait, theres more! Lets talk about measuring angles. In most systems, angles are measured counterclockwise, with 0 degrees being shown as a line extending into the positive x axis, as shown in Figure 3-5.

Figure 3-5: Usual angle measurements

Again, Flash has it backwards, as illustrated in Figure 3-6. It rotates its angles clockwise as they go positive. Counterclockwise means a negative angle.

Figure 3-6: Flashs angle measurements

And again, you can work out a system to reverse the angles before rendering, or conserve the computation and learn to live with it. I suggest the latter, and this is the tactic I will use for all the code in this book.

Triangle sides

Theres not too much to say about the sides of a triangle by themselves , but there are some specific terms to cover. Until further notice, I will be talking about right triangles , where one of the angles is 90 degrees. In this case, the sides have special names , as shown in Figure 3-7. The two sides that touch the 90-degree angle are called legs , and the opposite side is called the hypotenuse . The hypotenuse is always the longest side.

Figure 3-7: The parts of a right triangle

When we refer to the side opposite an angle, we are talking about the side that does not touch that angle. When we refer to an adjacent side, we mean one of the sides that does touch the angle. Mostly, we will deal with one of the two non-90 degree angles. In this case, when we say adjacent , we mean the adjacent leg, not the hypotenuse.

The interesting thing about triangles is the relationships between the measurements of the sides and the measurements of the angles. These relationships become useful for animation, so lets take a look at them next .