AS: Trigonometry

[BleeBlap]

AS: Trigonometry

Note: I will refer to angles throughout, so if you are a visual type person having this open to the side could help.

So why should you bother doing this math stuff?
Well, because it will make your game / animation / project look that much better. It will allow for a new kind of user interaction where you can calculate many more things based on where the user's mouse is in relation to other elements. You can use this trigonomerty to calculate and set other elements of your project accordingly. In the end it will make your project look more professional.

Concepts Review
First things first, its back to Freshman year math. Everybody remember all those different types of triangles on the chalkboard? Well I do and its time to review all of the concepts before converting them into some handy Flash scripts.

There are a number of "special" triangles. The one we will focus on right now is the right triangle. This means that one of the angles in the triangle is 90 degrees (angle c) and that we can use sin cosine and tangent to convert from the lengths of sides to the degrees of angles and vice versa. SOHCAHTOA. Sacagawea huh? Itís actually an acronym to remind you how to use sin cosine and tangent. But first, if you donít remember all of the terms we need a quick review. The hypotenuse is always the side across from the right angle (angle c). The hypotenuse is also always the longest side. All of the names of the sides are in relation to which angle you choose. In the diagram above, I picked angle b. That means side A would be the adjacent side and side B would be the opposite side. Now back to SOHCAHTOA. It stands for: Sin equal Opposite over Hypotenuse. Cosine equals Adjacent over Hypotenuse. Tangent equals Opposite over Adjacent. Converting this into symbols would mean: sin(a) = A/C sin(b) = B/C cos(a) = B/C cos(b) = C/A tan(a) = A/B tan(b) = B/A. (Note we donít use angle c because we would already know that itís 90 degrees.)

With that out of the way there is only one thing left to worry about before starting in with Flash and thatís radians. So whatís a radian? Well it assigns the value of 2(PI) to an entire circle (instead of 360 degrees). This means 57.3 degrees = 1 radian and 90 degrees = (PI)/2 radians. Why in the world would they want to do a crazy thing like that? Well because when dealing with circles or advanced calculus and things, the common practice is to use radians, so we are stuck with them for now. The up side is that there is an easy way to convert back and forth from radians to degrees. 1 degree * (PI)/180 = 1 radian. 1 radian * 180/(PI) = 1 degree.

Flash Trigonometry Functions
Whew, with all that out of the way, we can finally start into Flash. Flash has 6 (technically 7 but we will get to the special one later) built in trigonometry functions: Math.sin() Math.cos() Math.tan() Math.asin() Math.acos() Math.atan(). There is also the constant Math.PI, which we can use instead of typing 3.1415926535Ö The catch is as I said before they all use radians which means we would have to do something like: Math.sin(#degrees * (Math.PI / 180)). We could say that this angle is equal to the opposite over the hypotenuse and then do some basic algebra to solve for one of the sides.

Example: Hypotenuse is 5 units long. Angle a is 30 degrees. We want to calculate the length of side B we would use: sideB = Math.sin(30 * (Math.PI/180)) * 5; This would give us an answer of 2.5 units. We could also do sideA = Math.cos(30 * (Math.PI/180)) * 5; which would give us an answer of .866 or the square root of three over two.

Example2: Hypotenuse is 5 units long. Side A is 2.5 units long. We want to calculate the length of an angle. We will need to use one of the inverse trigonometric functions (asin acos atan). It would look something like angleA = Math.asin(2.5/5) * (180/Math.PI); We can an answer of 30 degrees. We could also do angleB = Math.acos(2.5/5) * (180/Math.PI); to get an answer of 60 degrees.

Okay, now you know how to do these basic trigonometric calculations in Flash, but what are they good for? Well they are used in the overhead views of racecar games for example. You use the rotation of the car as one of your angles. You also use the speed you want it to go as the hypotenuse and then you can break that apart into x and y vectors using a basic right triangle.

So what if your triangle doesnít have a convenient 90 degree angle? Well then you can try one of the two trigonometric laws:

Law of Sin
The law of sin states that: A/sin(a) = B/sin(b) = C/sin(c). This could be used in a convoluted way if we are trying to create a "smart" AI for a pong game. So instead of having the paddle adjust to just whatever the current y value is, it will calculate where the ball is going to end up. Note that you would also have to use two regular triangles as well as the law of sin. If you want more information on who this would work you can ask.

Law of Cosine
The law of cos is a little more complicated. A^2 = B^2 + C^2 - 2*B*C*cos(a). When you translate this into Flash make sure you use Math.pow(num, 2) for all of the squaring. This could be used to find an angle when all you know is lengths of sides. Combine this with the distance formula and you have a powerful way to determine the rotation of something. It could be used in a complex platformer to allow for sloped ground.

Distance Formula
This isn't trigonometry as much as it is geometry, but I referred to it above so I thought I would include it. D^2 = (x2 - x1)^2 + (y2 - y2)^2. This can calculate the length of the line that goes straight from one point to another. It is based on the pythagorean theorem. There are countless possible uses for this one such as detecting the length of the distance between the mouse and a point to determine the power of a launch or something. Make sure you use Math.pow() and Math.sqrt() when using this one.

Pythagorean Theorem
Going back to the original example I posted, the Theorem states that C^2 = A^2 + B^2. If you know two of the lengths of a right triangle, you can use this to determine the length of the third side. You can use this in combination with any of the afore mentioned methods of finding angles to make them even more powerful.

First time with max characters exactl

[SickeningScream]

Could you be a little more in-depth please. My masters degree in advanced mathematics with extra mega advanced trigonometry eclipses you feeble mathmatical knowledge :P

Nah... good post, informative, interesting, well thought out and above all... interesting.

Nice one... thank you!

[gorman2001]

this post will surely be classified as "Usefull Help for Advanced AScripters" lol

[SickeningScream]

Sh*t... I meant, and above all... '''useful!'''

[JeremysFilms]

You should make an example flash movie/game or w/e using what you taught, to show how it's useful. I know I could learn a lot, but I'm not willing to read it right now, if you have an example of what it can do, that'll make me, and many other people want to read it and find out how to use it!

[Ssilver7]

At 7/3/05 09:01 PM, BleeBlap wrote: First time with max characters exactl

Haha, I found that pretty funny because it looks like you stepped over the max.

I actually found this tutorial very interesting, I didn't think I'd be able to do all of this complex actionscript, but I have learnt all of this triganometry stuff in school and find it quite easy. Who knows, if I try and apply myself to this I could learn it without too much difficulty. Thanks for that BleeBlap.

[23450]

I leanred all of this stuff in math this year, but the thing is i dont know how to put it inot a useful script. Saying you can use law of sins to creat smart pong AI will not help to much. I just dont know how to creat the formula correcly in flash and what to do with the numbers. But this was a good tut. I did not really think of using these forulas to do anything in flash.

[Rustygames]

Yeah this is the kind of stuff I slept through during GCSE's (which I recently took a year early so I am eager to see my results) and yeah though the concepts are easy to grasp it is quite annoying having to transform them into flash with that radian stuff so yeah cheers for that

[Starogre]

The math part of the tutorial was very good. However, the flash part lacked a little bit. I don't think from reading this i could go and make a rotating turret enemy in a game. You need to go a bit more indepth with the part about how to use it all in flash.

[dELtaluca]

all trigometric function in flash deal only with radians, like degrees radians is the measurment of an angle however degrees are measured by the numbers 0-360 (360 being equal to 0) whereas radians are measured by the 0-2pi

conversions:
Radians = Degrees*(pi/180);
Degrees = Radians*(180/pi);

to use the functions sin, cos and tan with degrees in flash you have to convert the degree to a radian

functions asin, scos, atan, atan2 return a radian and have to be converted into degrees

whenever using trigometric functions in flash i always like to set to global variables as so:
_global.pi = Math.PI/180; << conversion for degrees to radians
_global.pi2 = 180/Math.PI; << conversion for radians to degrees

ok: lets say you want to make a bullet shoot out towards the mouse at a speed of 5 pixels per frame

to find the angle you can use atan2;
//attach the bullet to the stage
var ang:Number = Math.atan2(_ymouse-gun._y, _xmouse-gun._x);
var speed:Number = 5;
bullet._rotation = (ang*pi2)+90; //<< remember ive defined pi2 as 180/Math.PI;
bullet._x = gun._x;
bullet._y = gun._y;
bullet.x = speed*Math.cos(ang);
bullet.y = speed*Math.sin(ang);
bullet.onEnterFrame = function()
{
this._x += this.x;
this._y += this.y;
}

note that i havnt used any conversions between radians and degress, that is because atan2 returns a radian and cos and sin must take in a radian however i have used a conversion when setting the bullets rotation, that is because the _rotation property of a movieclip takes degrees for its values

[Rustygames]

At 7/3/05 09:11 PM, gorman2001 wrote: this post will surely be classified as "Usefull Help for Advanced AScripters" lol

No no thats the thing advanced actionscripters already know this. From 15 years old you should have learned this in school. This just TEACHES people which is why its good. Read it carefully before you say its too hard and you'll go a long way

[GeoKureli]

nice tut, i made one too
not as indepth but it has pictures XD

[MC3IG]

Can anyone explain to me how i could use these functions to make a rotation script for a gun like the one in heli attack 3

[Elfer]

Oh boy, basic trig! :D :D :D

This is useful stuff though. I'm going to be using the lookup tables to create procedural smoke particles for an animator friend of mine.

[DragonFruit-Rock]

this is unfair! of the one thing i have to be bad at....its math!! but ill work on it...my best freind is a math wiz though!

[Rantzien]

At 2/22/06 10:26 AM, DragonFruit_Clock wrote: this is unfair! of the one thing i have to be bad at....its math!! but ill work on it...my best freind is a math wiz though!

Could you stop bumping every old thread you find, unless you have something useful to say?

[fLaShMaN538]

Hey, I was wondering if someone could be a little more in-depth about this part for me please, I really don't understand what BleepBlap means

So whatís a radian? Well it assigns the value of 2(PI) to an entire circle (instead of 360 degrees). This means 57.3 degrees = 1 radian and 90 degrees = (PI)/2 radians.

[Resist-Refuse]

Geometry sets out from certain conceptions such as “plane,” “point,” and “straight line,” with which we are able to associate more or less definite ideas, and from certain simple propositions (axioms) which, in virtue of these ideas, we are inclined to accept as “true.” Then, on the basis of a logical process, the justification of which we feel ourselves compelled to admit, all remaining propositions are shown to follow from those axioms, i.e. they are proven. A proposition is then correct (“true”) when it has been derived in the recognised manner from the axioms. The question of the “truth” of the individual geometrical propositions is thus reduced to one of the “truth” of the axioms. Now it has long been known that the last question is not only unanswerable by the methods of geometry, but that it is in itself entirely without meaning. We cannot ask whether it is true that only one straight line goes through two points. We can only say that Euclidean geometry deals with things called “straight line,” to each of which is ascribed the property of being uniquely determined by two points situated on it. The concept “true” does not tally with the assertions of pure geometry, because by the word “true” we are eventually in the habit of designating always the correspondence with a “real” object; geometry, however, is not concerned with the relation of the ideas involved in it to objects of experience, but only with the logical connection of these ideas among themselves.

[fLaShMaN538]

Hmm, what does that have to do with my question?

Can someone help me out, I'm interested in learning this stuff!

[Johnny]

At 3/25/06 11:03 AM, fLaShMaN538 wrote: Hmm, what does that have to do with my question?

Can someone help me out, I'm interested in learning this stuff!

To make things easier for you to understand... many programs and computer applications use "radians" INSTEAD of "degrees" to measure things.

Picture a circle cut in 4 equal sized pieces. Each one of those is ONE radian.

All of the built in functions for math use radians, but since flash is also used by silly artists, they incorperated "degrees" to be used with the _rotation property.

so, _rotation = 60 would give a 60 degree angle.

But Flash's built in math commands use radians!! wtf!

You can just convert like Blee said like so...

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

(I remember this by thinking about someone with a college degree eating pie. degrees * PI. Don't ask... it works for me.)

So, say you get a distance in radians, because that's what the math functions use...and that number is stored in a variable called "angle" If you need to find out what the degrees is for angle (since it's in radians) and you want to make that the rotation, you can do this.

this._rotation = angle*180/Math.PI

[T-H]

At 3/25/06 11:03 AM, fLaShMaN538 wrote: Hmm, what does that have to do with my question?

Can someone help me out, I'm interested in learning this stuff!

the definition of a radian is the angle formed by stretching a circle's radius along its perimeter.

As you get further and further into math, you will use radian measure more and more, for example integrating more complex functions, perticularly tirgonometric ones, due to things such as small angle proof, where if angle X is small, then sin X tends to zero, (sin 0.5 = 0.4794 sin 0.1 = 0.0998), but this only works properly in radiens.

This basically allows us to differentiate trig functions using

f'(x) = lim cx->0 [ (f(x +cx)-f(x)) / cx]

which multiplies out to cos x when subbing f(x) = sin x in.

so derivative of sin x = cos x
derivative of cos x = -sin x if we do this again
and derivative of tan x = sec^2 x

degrees also cannot be taken as a tangeble measure in stuff like trig graphs with time as an axis measure ( 60 degrees-seconds apparently not being tangeble, but instead Pi/3 seconds is)

Basically, without blabbering on more, when you start out maths and tirg, you grow up on degrees, but as you get further into it, you use less and less degrees and more radiens.

[Rustygames]

I cannot wait to do A-level math (and further math ;) )

[authorblues]

At 3/25/06 01:37 PM, T-H wrote: stuff

well, to be perfectly honest, youre slightly more than half right.

integrating more complex functions, perticularly tirgonometric ones, due to things such as small angle proof, where if angle X is small, then sin X tends to zero, (sin 0.5 = 0.4794 sin 0.1 = 0.0998),

though both correct (though the small angle "proof" is nothing more than a postulate. it serves no real purpose aside from being a poor-mans representation of the limit formula), the small angle proof has no bearing on the integration of trigonometric functions, which is mainly found because of the properties of a infinite taylor series sharing a limit with the derivative.

but this only works properly in radiens.

youve only learned to do it in radians. since PI radians = 180 degrees, degrees are a perfectly valid medium for doing triginometry. youre just more comfortable with the calculations in radians.

This basically allows us to differentiate trig functions using
f'(x) = lim cx->0 [ (f(x +cx)-f(x)) / cx]

ick, i hate that formula. only problem is that limit definition for derivation is no real help for finding the derivative, even in general cases. the taylor approximation is how they actually proved the derivatives of trigonometric functions.

which multiplies out to cos x when subbing f(x) = sin x in.

not in this case, but yes, that is correct for what youre attempting to say.

degrees also cannot be taken as a tangeble measure in stuff like trig graphs with time as an axis measure ( 60 degrees-seconds apparently not being tangeble, but instead Pi/3 seconds is)

60 degrees == PI/3 radians, so this is incorrect.

Basically, without blabbering on more, when you start out maths and tirg, you grow up on degrees, but as you get further into it, you use less and less degrees and more radiens.

absolutely true. degrees are rarely used for anything, until you get to later work in calculus on a 3d scale, since its easier to define a 3d region and vectors in terms of degrees, not radians. its both easier visually, and computationally.

[fLaShMaN538]

Thanks for the help, radians make a little more sense now. Johnny_Krysis(sp?) said something though that really helped, about the cutting of a circle into 4 equal pieces. So if I were to have 4 radians, then that would equal the measurement of a circle?

Well, I get confused a lot byt his stuff. So let me post a script that I got from one of Flash's built in fla things...

This code only works for Flash Player 6 settings, but I'd still like to know how and why Math.sin and Math.cos are used to calculate the thrust and rotation or whatever...

onClipEvent (load) {
thrust = 1;
decay = .97;
maxSpeed = 15;
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.RIGHT)) {
_rotation += 10;
}
if (Key.isDown(Key.LEFT)) {
_rotation -= 10;
}
if (Key.isDown(Key.UP)) {
xSpeed += thrust*Math.sin(_rotation*(Math.PI/180));
ySpeed += thrust*Math.cos(_rotation*(Math.PI/180));
flames._visible = 1;
} else {
xSpeed *= decay;
ySpeed *= decay;
flames._visible = 0;
}
speed = Math.sqrt((xSpeed*xSpeed)+(ySpeed*ySpeed))
;
if (speed>maxSpeed) {
xSpeed *= maxSpeed/speed;
ySpeed *= maxSpeed/speed;
}
_y -= ySpeed;
_x += xSpeed;
}

[authorblues]

At 3/25/06 01:49 PM, fLaShMaN538 wrote: Thanks for the help, radians make a little more sense now. Johnny_Krysis(sp?) said something though that really helped, about the cutting of a circle into 4 equal pieces. So if I were to have 4 radians, then that would equal the measurement of a circle?

no, 2PI is the measurement of a circle, but its often divided into four quadrants of PI/2

This code only works for Flash Player 6 settings, but I'd still like to know how and why Math.sin and Math.cos are used to calculate the thrust and rotation or whatever...

Math.sin is a representation of the magnitude of y on the unit circle, and likewise, Math.cos is a representation of the magnitude of x. and that code will work on any form of AS, since it doesnt use strict datatyping. its backwards compatible.

[Johnny]

Yeah, my bad there... I'm so used to thinking about "4" radians because of the way I remember stuff...The 4 key degrees chart with the circle cut into 4 with the radians listed.

90 degrees = pi/2 radians
180 degreed = 1 pi radian
270 degrees = 3 pi/2 radians
360 degrees = 2 radians

[fLaShMaN538]

Well... if Math.sin is a representation of _y and Math.cos is a representation of _x, then why is it that on this code:
xSpeed += thrust*Math.sin(_rotation*(Math.PI/180));
ySpeed += thrust*Math.cos(_rotation*(Math.PI/180));

Math.sin is being += by the xSpeed and Math.cos is being += by the ySpeed

Also, if I were to define a variable that equals Math.PI/180 and I called that variable angle, would it be the same thing as saying:
xSpeed += thrust*Math.sin(_rotation*(angle));

And also, by declaring angle as Math.PI/180, Math.PI/180 is only half the circle? So you would be declaring half the circle as a variable right?

[fLaShMaN538]

Don't mean to nag but, still a little curious, can anyone answer my above questions?

[Resist-Refuse]

At 3/25/06 05:38 PM, fLaShMaN538 wrote: Don't mean to nag but, still a little curious, can anyone answer my above questions?

Nag nag nag nag, is that all you can do!? lol joking.

[Vengeance]

xSpeed += thrust*Math.sin(_rotation*(Math.PI/180));
ySpeed += thrust*Math.cos(_rotation*(Math.PI/180));
ok, let's break the second part of the code up:
thrust:
definative number for showing how fast the bullet will movie
Math.sin(_rotation*(Math.PI/180))
the more complex part. _rotation. the rotation of the object. (Math.PI/180) used to convert the rotation into radian's instead of degrees. *not 100% sure on this, correct me if i'm wrong* it's Math.sin()*rotation in radians. now. after that you have a number like 0.78241 that is then multiplied by the thrust and added to the xSpeed to make it go faster. so it's something like xSpeed+=5*0.78241 which is like xSpeed+=4.6146
do you understand now?