Trig Functions

ActionScript has trig functions for calculating the various triangle relationships: sine, cosine, tangent, arcsine, arccosine , and arctangent. Here, Ill define these and the ActionScript functions for accessing them. Then Ill get to some real-life uses for these functions.

Sine

Here is your first bit of real-life trigonometry. The sine of an angle is the ratio of the angles opposite leg to the hypotenuse . (When referring to sine, we are always referring to the sine of an angle.) In ActionScript, you can use the function Math.sin(angle) .

Figure 3-8 shows the sine of an angle that is 30 degrees. The opposite leg has a measurement of 1, and the hypotenuse has a measurement of 2. The ratio is thus one to two, or mathematically speaking, 1/2 or 0.5. Thus, we can say that the sine of a 30-degree angle is 0.5. You can test this in Flash like so:

 trace(Math.sin(30)); 

Figure 3-8: The sine of an angle is the opposite leg/hypotenuse

Now, hold on, that traces out ˆ 0.988031624092862, which is not even close. Can you spot the error? We forgot to convert to radians. I guarantee you will make this mistake on occasion (I still do), so get used to looking out for it. Heres the corrected code, with the conversion.

 trace(Math.sin(30  * Math.PI / 180  )); 

Success! That traces 0.5.

Now, its fine for an abstract triangle like that to say that the angle is 30 degrees, and the measurements of the sides are 1 and 2. But lets move it into the real world, or at least the world of the Flash coordinate system. Remember that in Flash, positive vertical measurements go down, and positive angle measurements go clockwise. So, in this case, the opposite side and the angle are both negative, as you can see in Figure 3-9.

Figure 3-9: The same triangle in Flash coordinate space

So, the ratio becomes ˆ 1/2, and we are talking about the sine of ˆ 30. So, we say that the sine of ˆ 30 degrees is ˆ 0.5. Go ahead and alter the Flash trace statement to verify that.

 trace(Math.sin(-30  *  Math.PI / 180)); 

OK, that wasnt too painful, was it? Lets take a look at another trig function: cosine.

Cosine

You can access cosine in Flash with Math.cos(angle) . Cosine is defined as the ratio of the adjacent leg of an angle to the hypotenuse. Figure 3-10 shows that relationship.

Figure 3-10: The cosine of an angle is the adjacent leg/hypotenuse.

Figure 3-10 shows the same angle as Figure 3-9, but now Ive added the approximate measurement of the adjacent leg: 1.73. Notice that it goes to the right, so as an x measurement, its positive. The cosine of the angle is thus 1.73/2, or 0.865. So we can say that the cosine of ˆ 30 degrees is 0.865. Test it as follows :

 trace(Math.  cos  (-30 * Math.PI / 180)); 

This is the same as the last trace, but with the call to Math.cos , rather than to Math.sin . This traces to 0.866025403784439, which is pretty close to 0.865. The difference is due to the fact that I rounded off the length of the adjacent leg. For the triangle shown, the actual length would be closer to 1.73205080756888. Youll find that if you divide that by 2, youll get pretty darned close to the actual cosine of ˆ 30 degrees.

So far, everything has been taken from the lower-left angle. What if you looked at things from the viewpoint of the top-right angle? As you can see in Figure 3-11, that angle is equal to 60 degrees, and as its going clockwise, its positive. The vertical measurement now goes down from that angle, so its positive, and the horizontal measurement now goes to the left, so its negative. (I added plus signs in the figure to point out the difference, but in general, this is not necessary; values will be positive unless specifically indicated as being negative.)

Figure 3-11: Looking at the opposite angle

Now, the sine of that angle is its opposite leg over the hypotenuse, or ˆ 1.73/2 ( ˆ 0.865). And the cosine is the adjacent over the hypotenuse, 1/2 or 0.5. So, basically, the cosine of one angle is the negative sine of the other angle, and the sine is the negative cosine. Im not sure how useful that will ever be in Flash, but its important to note that these are just relationships and ratios, and everything is connected.

Tangent

Another major trig function is tangent, retrieved in Flash with Math.tan(angle) . This is the relationship of the opposite leg to the adjacent leg, as shown in Figure 3-12.

Figure 3-12: The tangent of an angle is the opposite leg/adjacent leg.

Here, the ratio works out to ˆ 1/1.73, or ˆ 0.578. For more accuracy, check it directly in Flash:

 trace(Math.tan(-30 * Math.PI / 180)); 

Youll get ˆ 0.577350269189626.

Truth be told, you wont use tangent too much by itself in your day-to-day ActionScript animation code. Youll find yourself using sine and cosine a lot more, though tangent can be used to create some interesting effects now and then.

On the other hand, arctangent can be extremely useful, as youll see shortly, so keep that tangent ratio in your head.

Arcsine and arccosine

Similar to tangent, arcsine and arccosine are not that useful in your normal Flash animation endeavors. However, its important to know that they are there and how to use them. Basically, all these do is the reverse of sine and cosine. In other words, you feed in a ratio, and you get back an angle (in radians). The ActionScript functions are Math.asin(ratio) and Math.acos(ratio) . Lets just give them a quick test to make sure they work.

OK, you learned that the sine of 30 degrees is 0.5. Thus, it follows that the arcsine of 0.5 should be 30 degrees. Check it out:

 trace(Math.asin(0.5) * 180 / Math.PI); 

Remember to convert back to degrees in order to see 30, not 0.523, which is the equivalent value in radians.

And you know that the cosine of 30 degrees is roughly 0.865. Remember that if you test this value, which is rounded off, you arent going to get exactly 30, but it will be close enough to prove the point. Heres the test:

 trace(Math.acos(0.865) * 180 / Math.PI); 

You should get 30.1172947473221 as the result. If you want to go back and plug in the actual cosine of 30 degrees, you should get a more accurate result.

See this stuff isnt so hard, is it? And youre almost finished learning the basic functions. You just have one more to go, and then youll start looking at what you can actually do with trig.

Arctangent

As you no doubt have already guessed, arctangent is simply the opposite of tangent. You feed it the ratio of the opposite and adjacent sides, and it gives you back the angle. In Flash, you actually have two functions to check arctangent. The first is named and works just as youd expect from the previous examples. Its Math.atan(ratio) , and you supply it the fraction you got by dividing the opposite and adjacent sides.

For example, you know from the earlier discussion that the tangent of 30 degrees is 0.577 (rounded off). You can try this:

 trace(Math.atan(0.577) * 180 / Math.PI); 

Youll get back something pretty close to 30. Now, that seems so basic and straightforward, why would you ever need another function to do the same thing? Well, to answer that, look at the diagram shown in Figure 3-13.

Figure 3-13: Angles in four quadrants

Figure 3-13 shows four different triangles: A, B, C, and D. Triangles A and B have a positive x value, and triangles C and D extend into negative x dimensions. Likewise, triangles A and D are in the negative y space, while triangles B and C have positive y measurements. So, for the ratios of the four inner angles, you get this:

• A: ˆ 1/2 or ˆ 0.5

• B: 1/2 or 0.5

• C: 1/ ˆ 2 or ˆ 0.5

• D: ˆ 1/ ˆ 2 or 0.5

So, say you divide your opposite leg by your adjacent leg and come up with a ratio of 0.5. You feed in that with Math.atan(0.5) , convert it to degrees, and you get approximately 26.57. But which triangle are you talking about now: B or D? There is really no way of knowing, since they both have a ratio of 0.5. This may seem like a minor point, but as you will see in some real-life examples coming up shortly, it becomes quite important.

Welcome Math.atan2(y, x) . This is the other arctangent function in Flash, and it is quite a bit more useful than Math.atan(ratio) . In fact, I would go so far to say you will probably wind up using this one exclusively. This function takes two values: the measurement of the opposite side and the measurement of the adjacent side. For most purposes in Flash, this means the y measurement and the x measurement. A common mistake is to enter them as x, y, rather than y, x, as specified. For the example given, youd enter Math.atan2(1, 2) . Go ahead and try it out, remembering to convert to degrees:

 trace(Math.atan2(1, 2) * 180 / Math.PI); 

This should give you the angle, 26.565051177078, which is correct for triangle B as shown earlier. Now, knowing that ˆ 1/ ˆ 2 (triangle D) gave us some confusion, lets try that out.

 trace(Math.atan2(-1, -2) * 180 / Math.PI); 

This gives you the possibly unexpected result of ˆ 153.434948822922. What is that all about? Perhaps the diagram in Figure 3-14 will explain.

Figure 3-14: Two ways of measuring an angle

While the inner angle of triangle D is indeed +26.57, as taken from its own bottom leg, remember that in Flash, angles are measured clockwise from the positive x axis. Thus, from Flashs viewpoint of screen measurements, the angle you are looking at is ˆ 153.43.

How is this useful? Well, lets get to your first practical application of trigonometry in Flash.