A quick note before we start: You will need the Vitalize plug-in for some of the examples in this article to work. You can get it by following this link:
http://www.clickteam.com/vitalize4/download.html
For regular Internet Explorer users, your computer will automatically ask if you would like to install Vitalize. All you need to do is say yes.

This will be a four part article, and each part will be fairly long, so be prepared for a lengthy read! Btw, I will call each part of this article an "Articlette"

Now that that's out of the way...


Trigonometry Part 1 - Going the Distance!

We've all heard of it. We all know it can be used in games. So what of it?

I know what you're thinking, "Yes yes, I've done trigonometry before and I know how to calculate angles!", and if you're not thinking that then this article will be very useful to you! If you are thinking that, then you're still going to find this article very useful! There are many people who know the code for calculating distance, angles, directions etc. but there are few who know what's really going on behind Sine, Cosine, and Tangent.


First of all, a few quick details about triangles. Since your days as a young'n, triangles have always had three sides; and they still do! Only this time, these sides have more meaning, and I'm here to explain these meanings to you. Triangles also have 3 angles, (hence the name "tri-angles") which is pretty logical, although I don't know why squares are called squares as they have 4 angles... Perhaps they could combine them and call them "Squangles". Anyway, back on topic, the important thing to remember is that when talking about trigonometry, any triangles mentioned within the conversation are going to be right angled triangles. For explanation's sake, a right angle is an angle that is exactly 90 degrees. A right angled triangle is a triangle with a right angle. That sentence probably didn't need to be said.

Back to the three sides. The truth is, each side in a right angled triangle has a name. The three names are: "Adjacent", "Opposite" and get ready for this one... "Hypotenuse" (pronounced 'Hi-pot-eh-nyoos'). Here is a nifty little picture from Wikipedia that shows which side is which:

Image

First of all, I'll explain the hypotenuse as it's easier. The hypotenuse is the longest side of a right angled triangle. Coincidently, it is also the side that is opposite the right angle, as can be seen here:

Image

Something special about the hypotenuse; you can calculate the exact length of the hypotenuse if you know the lengths of the other two sides. To find the hypotenuse, simply square each of the other two lengths (eg: 4 squared = 16, 3 squared = 9), and then add those two numbers together (16 plus 9 = 25), then find the square root of that number (square root of 25 = 5). So we can say that when side A = 4 and side B = 3, the hypotenuse of that right angled triangle is 5. This method is known as the "Pythagorean theorem". The hypotenuse is almost never going to be a whole number, usually it will be something like 7.6157731058639082856614110271583, keeping in mind that the other two lengths don't have to be whole numbers either.


Now onto the "Adjacent" and "Opposite". The special thing about the adjacent and opposite sides is that they switch around, depending on which angle you are talking about. Remember there are 3 angle's in a right angled triangle, one of them is of course the right angle (90 degrees), so there are still two other angles that you might need to find out as they can vary. The "Opposite" side is the side that is always opposite the angle you are talking about.

Image

In this picture, we're trying to find out angle A, so the side opposite this will be called the "Opposite" which is another one of those logically obvious sentences.

The "Adjacent" is always the left-over side. Once you know which sides are the hypotenuse and opposite, there's only one more side left and this is called the adjacent. It is called the adjacent because it is touching the angle you are trying to find. "But the hypotenuse is also touching it!" I hear you say, well it's still called the hypotenu- "But it should be called the adjacent 2. There should be two sides called the adjacent!", look, the longest side is called the hypotenuse so live with it.




Distance and the such

Wow, that last section turned out longer than I'd expected, but now that you're familiar with triangles and squangles, it's time for the big question.

What can I use any of this stuff for??!

Since we really haven't covered Sine, Cosine, or Tangent yet, I'll tell you how to use the Pythagorean theorem in a useful way.

Distances. How handy would that be? Being able to instantly know the distance between two objects?! Well my friend, the Pythagorean theorem is here to satisfy! Our method mentioned in the previous section can be expressed as a nifty little formula:

Image

Where C is the hypotenuse. As you can tell, it's basically just doing what we did before; squaring A and B then adding them together, then finding the square root of that total. So how can you use this to find the distance between two objects?? Well now it's time for our Vitalized example!


You can drag point 1 and point 2 with the mouse.

There's a lot of calculations going on in that example! The only objects used in this example are Actives and Edit Boxes for the text, no movements are used, so you can already see the awesome power of the Pythagorean theorem working with no extensions required!

Here's what's going on behind the scenes:

Obviously the triangle in my example is just there for demonstration, when calculating distances in your own application's you don't need anything except the two objects you wish to find out the distance of. Just try and imagine a triangle there

Firstly, we get the length of one of the sides. We'll start by getting the length of the horizontal side, or the "base" of the triangle. As we know, horizontal calculations involve X coordinates! So to find the horizontal length of our imaginary triangle, we need the difference between the two object's X positions which can be easily found like this:

Abs( X( "Object 2" ) - X( "Object 1" ) )

The "Abs" will always make the number in it's brackets positive. This isn't really necessary, and I will explain why later on.
Secondly, we get the length of the other side (the vertical one). It's very similar to our first calculation:

Abs( Y( "Object 2") - Y( "Object 1" ) )

Note the only difference is that the X's have changed to Y's! How easy is that?!
Both these equations will give us the lengths of 2 sides of our imaginary triangle. What comes next? That's right, we squangle them both! Ahem, "square" them both, sorry about that.

Abs( X( "Object 2" ) - X( "Object 1" ) ) Pow 2

Abs( Y( "Object 2" ) - Y( "Object 1" ) ) Pow 2

And POW! They're squared! (pun intended)

Next step, add them together!

Abs( X( "Object 2" ) - X( "Object 1" ) ) Pow 2 + Abs( Y( "Object 2" ) - Y( "Object 1" ) ) Pow 2

The code is getting pretty long and complicated right about now, so I've "unbolded" the plus sign so you can tell the two different "sides" apart. We're up to the final step! The square root of that calculation will give us the EXACT distance between the two objects!

So here we go:

Sqr( Abs( X( "Object 2" ) - X( "Object 1" ) ) Pow 2 + Abs( Y( "Object 2" ) - Y( "Object 1" ) ) Pow 2 )

And it's as easy as that! Sqr will give the square root of whatever is inside it's brackets.

Now how about we put this to the test, we're nearing the end of this "Articlette" so not far to go now!

Let's use the above method in a real life situation: As with all life's problems, this one can be easily explained with fruit. We have two fruits, Apple’s coordinates are X = 13, Y = 37. Banana's coordinates are X = 17, Y = 34. Now let's roll:

First, find the sides. Oh and by the way, we won't use the "Abs" this time. Let's see what happens...

Side 1:
( 17 - 13 ) = 4

(Side 1 is 4 pixels long)


Side 2:
( 34 - 37 ) = -3

(Side 2 is -3 pixels long. Hold on, that can't make sense! Well it does so read on)

Ok, our two sides turned out to be 4 and -3. Now time to square them both!

4 * 4 = 16

(It's better to use the "Pow" function, but this works just the same)


Now this is why we didn't necessarily need the "Abs" function earlier. Watch what happens when we square -3:

-3 * -3 = 9

It came out positive anyway! -3 squared is the same as 3 squared. Any negative number squared, will give you a positive number. I'm sorry to say that there are numbers in this world called "impossible" numbers. "Impossible numbers? But numbers are infinite!" I hear you say. Well the square root of a negative number is impossible! Think about it; what number when multiplied by itself, will give you -9? The answer is: No number can do that, not even 12 hundred billion. So out of all the numbers in the entire universe (including negative), if you decide to square any of them, the answer will always be positive.

Anyway, back to the calculations! We've squared both of the sides, so now add them together!

16 + 9 = 25

(Fairly self explanatory)

Now for the grand finale!! We... FIND THE SQUARE ROOT!!!

Sqr( 25 ) = 5

It's done! The distance between the Apple and the Banana is 5 pixels! Even though side 2 was -3 pixels long, we still got the same answer, which means we don't need the "Abs" function at all!

Conclusion

Now you know how to find the length of any side in a right angled triangle! This articlette is getting lengthier by the minute, so now it must come to an end.

But before we go, I will paste the distance formula down here at the bottom, so if you should ever need it, it will be right here waiting for you.

Sqr( ((X( "Object 2" ) - X( "Object 1" )) Pow 2) + ((Y( "Object 2" ) - Y( "Object 1" )) Pow 2) )


Link to Part 2 - Give Me a Sine:

http://create-games.com/article.asp?id=1966