PDA

View Full Version : Trigonometry 101 - Tutorial on Basic Trig Concepts to Help the Advanced Scripter



ZephyrsFury
12-07-2007, 05:11 AM
Trigonometry 101
Tutorial on Basic Trig Concepts to Help the Advanced Scripter
By ZephyrsFury


What is Trigonometry
Trigonometry is a type of maths that deals with triangles. Trigonometry literally means “triangle measure” and deals with finding angles and lengths in a triangle.



Trigonometry (from Greek trigōnon "triangle" + metron "measure"[1]), informally called trig, is a branch of mathematics that deals with triangles, particularly triangles in a plane where one angle of the triangle is 90 degrees (right angled triangles). It specifically deals with the relationships between the sides and the angles of triangles; the trigonometric functions, and calculations based upon them. The insights of trigonometry permeate other branches of geometry, such as the study of spheres using spherical trigonometry. Trigonometry has important applications in many branches of pure mathematics as well as of applied mathematics and, consequently remains applicable in natural sciences.


Using Trigonometry, you can solve any triangle (find all lengths and angles) provided that you have at least two lengths and an angle. Since I’ll only be teaching you basic stuff (solving right angled triangles) you only need two sides to find an angle or one angle and one side to find another side.

Why Is Trigonometry Important?

To us scripters, because we use a graphical computer and SCAR and because we script for Runescape, Trigonometry is extremely important. This is because computer screens use a Cartesian coordinate plane to specify each pixel. That is any point on the screen has an x coordinate and a y coordinate. I’ll be explaining the Cartesian coordinate plane later. SCAR also uses a Cartesian plane to move your mouse, store the coordinates of a colour and to find distances and angles between two points. Since the x and y axis are at right angles to each other, we can use simple trig to find distances and angles between points.

Another reason why trig is important to us is because some inbuilt SCAR and SRL functions use angles to specify search areas for colours and DTMs. For example, the famous RadialWalk requires you to specify two angles and a radius for it to search for the colour in. RadialWalk then converts this sector into a search area where it searches for a colour in. It does this by using trigonometry to convert the angle and radius into an x, y coordinate for use with FindColorTolerance. Also, FindDTMRotated which is commonly used to find a rotated DTM on the minimap requires two angles that specify how much the function rotates the DTM by. These angles aren’t in the usual degrees but are in radian measure which is a better method of angle measurement when working with circles.

The Three Trigonometric Ratios

Before we get down and dirty with all the calculations we need to understand the basis on which trig is based on. We need to understand the three common trig ratios: Sine, Cosine and Tangent, or sin, cos, tan. These are the ratios between the sides of a right angled triangle. There are more complex ones but they are useless to what we are trying to do. Before we can discuss these ratios you need to understand the way the sides of a right angle triangle is named:

http://img211.imageshack.us/img211/3914/righttriangledr5.png

The side directly opposite to the triangle is called the opposite for good reason. The opposite the right angle is the hypotenuse. The side next to the angle but not the hypotenuse is called the adjacent.

Now that you understand that we can go and look at what the trig ratios are:

http://img529.imageshack.us/img529/7129/eq1vt2.bmp

O is opposite, H is hypotenuse, A is adjacent.

Now you might ask why these ratios are so important.... well read on....

Finding Distances and Angles using Trig

So I’ll now be showing you how to find angles and distances using basic trig methods. I’m hoping that you know how to transpose equations (moving the values around so you can make something equal to something else). Anyway... by transposing any of the equations above (the trig ratios), you can manipulate it to find any the angle or either of the two sides provided that you know what at least two of the three are.

Lets look at an example (please excuse my crap Paint diagrams):

Solve for x in this diagram:

http://img340.imageshack.us/img340/8445/sinehw0.gif


We must find x by using one of the trig ratios.
To decide which one, we must look at the information given to us.
We can see that we are given the hypotenuse and an angle and we are trying to find the opposite side.
When we look at the trig ratios we see that the one that uses both opposite and hypotenuse is sin.
We write down the sin ratio:
http://img155.imageshack.us/img155/9444/eq2px4.bmp
Substitute in the values we are given:
http://img146.imageshack.us/img146/7572/eq3ud8.bmp
Rearrange the equation to give us x:
http://img227.imageshack.us/img227/6866/eq4ql7.bmp
Shove that into the calculator to get the value of x:
http://img529.imageshack.us/img529/3841/eq5az1.bmp


So now you’ve just found the length of a side without measuring it :). The same method occurs with the other trig ratios. Just remember to check what information you have then choose the correct ratio. Also remember to transpose stuff correctly. For example if we were give the opposite side and were asked to find the hypotenuse:

http://img338.imageshack.us/img338/3716/eq6le5.bmp

When we rearrange we get a different equation:

http://img155.imageshack.us/img155/1163/eq7kt7.bmp

If we are given the length of two sides and were asked to find an angle, the basic procedure is the same:


We must find angle X by using one of the trig ratios.
We are given the opposite and the adjacent.
When we look at the trig ratios we see that the one that uses both opposite and adjacent is tan.
We write down the sin ratio:
http://img502.imageshack.us/img502/1671/eq8ic8.bmp
Substitute in the values we are given:
http://img187.imageshack.us/img187/2451/eq9ii1.bmp
Now that we have the equation equal to tanX, we need to find the angle X. We do this by using inverse tan or Arc Tan.
By using the calculator (or SCAR) we can see the angle is 48.59 degrees rounded to two decimal places.


Once again the same method applies to sin and cos.

Finding Distance – Pythagoras’ Theorem

Now that you’ve had your crash course in the trig ratios you might want to use a different method of finding distances between two points. To use this method, we need two sides of the right angle triangle, usually the opposite and adjacent sides.

http://img155.imageshack.us/img155/455/pythagul9.gif

In the diagram above we want to find X. To do this we need to know the Pythagorean Theorem:

http://img529.imageshack.us/img529/8135/eq10fa6.bmp

Sound confused?:

http://img155.imageshack.us/img155/1338/eq11td0.bmp

O being opposite, A being adjacent and H being hypotenuse. This is the basis for SCAR’s Distance function.

To solve for the X in the diagram above we take the following procedure:


Write out the formula:
http://img146.imageshack.us/img146/8350/eq12fe3.bmp
Sub in the values we know:

http://img227.imageshack.us/img227/736/eq13gc2.bmp

Solve for H:
http://img529.imageshack.us/img529/8435/eq14xe9.bmp




Ok I realised that you might be confused. After all, I don’t see any right angle triangles with random letters all over my screen – certainly not in RS anyway. Let me try to explain to you why the coordinate plane can be used in trigonometry:

This diagram shows the two points and their coordinates:
http://img524.imageshack.us/img524/117/coord1rx5.gif
The distance between those points would be the black line:
http://img530.imageshack.us/img530/5812/coord2kt0.gif
Now to use Pythagoras, we need to draw a triangle:
http://img110.imageshack.us/img110/4598/coord3dy0.gif
Since we know the coordinates of the points, we can take the smaller x coordinate from the greater x coordinate to give use the horizontal distance between the points. We can do the same with y coordinates to find the vertical distance.

Now that we have the two sides, we can find the length of X:

http://img338.imageshack.us/img338/6256/eq15ew0.bmp






For those people that are lazy, here’s a simplified formula for finding the distance between two points without having to work out horizontal and vertical distances:

http://img155.imageshack.us/img155/9903/eq16ku7.bmp

The same principle with the coordinate plane applies to trig ratios.

Cartesian and Polar Coordinates

Since the computer and SCAR used the Cartesian coordinate plane, most SRL and SCAR functions use x and y variables such as FindColor which saves the x and y coordinates into your x, y variables and requires you to specify the search area using x1, y1, etc.

You should already be very familiar with the Cartesian plane. Cartesian coordinates are the most commonly used method of specifying the position of a point. Usually, the x coordinate is the horizontal distance from the origin. The Y coordinate is the vertical distance from the origin. The only problem with using Cartesian coordinate geometry with a computer is that the Y axis is inverted. That is as you go down the screen, the y coordinates increase instead of decreasing in a normal Cartesian plane. That means everything is flipped horizontally.

Another method of specifying the position of points is by using Polar coordinates. Polar coordinates do not use x and y but instead use radius (or distance from the origin) and angle (from the positive x axis and going anticlockwise). This method is used in RadialWalk and FindColorCircle where you are required to specify the centre, the radius and the angle. This method is usually useful in places where the graph is required to be round. This is why I personally think we should use polar coordinates on the minimap. :).

Here’s what the polar coordinate plane looks like:

http://img211.imageshack.us/img211/886/polarcoordplaneoi7.gif

Basically it’s a series of concentric circles (they share the same centre) with lines sticking out to represent the angles. Notice the coordinate of the point in the graph above. When using Polar coordinates instead of the ordered pair being (x, y), it is (r, theta). R is the radius, theta is the angle from the positive x axis.

Converting Polar to Cartesian and Vice Versa

When using two different coordinate planes, it is important that you know how to convert it back and forth. To do this we need to take a look at our right angle triangle again:

http://img205.imageshack.us/img205/3482/polar1yk2.gif

We need to find the polar coordinate of the point A.


Since R is the distance from the origin, we can use Pythagoras to find it:
http://img502.imageshack.us/img502/3674/eq17fb0.bmp




Since theta is the angle between the horizontal and the point, we can use tan to find theta:
http://img155.imageshack.us/img155/1369/eq18vt9.bmp



Therefore the Polar coord of the point (50, 70) is (86.023, 54.46)


Usually if the answer is a long decimal then we leave it in its exact value. i.e. with the square root (a surd).

To convert polar coordinates back into Cartesian coordinates we need to use the trig ratios above. We need to convert the polar point (2, 45°) into Cartesian coords:

http://img110.imageshack.us/img110/9430/polar2hl7.bmp


We need to find x and y. Remember when I talked about the trig ratios I said that you can find the length of any side provided you have one length and one angle. With the point above, the x coordinate is the adjacent side to the angle while y is the opposite side.
By using the cos and sin ratios we can find x and y:
http://img147.imageshack.us/img147/5447/eq19bo5.bmp




Same thing with y except by using cos:
http://img187.imageshack.us/img187/2637/eq20xq3.bmp




So then cartestian coordinate of (2, 45°) is approx (1.414, 1.414).


To simplify:

http://img146.imageshack.us/img146/1359/eq21zt0.bmp



Different Angle Measurements – Radians and Degrees

Most if not all or you would be familiar with degrees. You’ve probably been learning it since primary school. Now I’ll introduce you to another type of angle measurement – Radians. Radians are more powerful and work better with circles. This is because radians are based on Pi. You might know that the circumference of a circle is:
http://img227.imageshack.us/img227/6623/eq22zg0.bmp

So the length if an arc (part of the radius) would be:
http://img337.imageshack.us/img337/2702/eq27sf1.png
Θ is the angle (in degrees) that defines the arc.
If you are using radians however, the length of an arc would be:
http://img529.imageshack.us/img529/1696/eq23bn1.bmp

This is because 360° is 2*Pi thus it cancels out.

The reason I’m explaining this is because SCAR’s native angle measurement is radians (all its inbuilt angle-related functions use radians). That’s why it helps to know how to use radians.

Here’s some common conversions:
http://img338.imageshack.us/img338/1594/eq24sk0.bmp

From these we can convert any angle to radians then back to degrees:

Convert 105° to radian measure:
http://img155.imageshack.us/img155/5724/eq25ku9.bmp


Now the other way:

Convert Pi/8 to degrees:
http://img187.imageshack.us/img187/8070/eq26vb7.bmp



Inputting Maths into SCAR
So now that you’ve learn all the trig you must be wondering “how the hell am I supposed to put this into SCAR”. After all, I don’t see and fancy square root signs or cos keys on my keyboard.

I’ll go through the most common maths operators and functions that are the equivalent to the maths operators I used here.

Plus or subtraction is easy because we have the + and the – signs in the keyboard already. Multiplication and division uses the * and the / respectively. When you want to use the exact value of Pi (3.141592654...) we use constant “Pi” which is inbuilt into scar.

To square something we can go multiply the number together or we can use SCAR’s Sqr function:

function Sqr(X: Extended): Extended;


To get the square root of a number we use the sqrt function:

function Sqrt(e: Extended): Extended;


To use one of the trig ratios we must use these functions:


function Sin(e: Extended): Extended;



function Cos(e: Extended): Extended;



function Tan(e: Extended): Extended;


Where e is the angle IN RADIANS.

If you want to use degrees you must either convert it into radians by using the Radians function:


function Radians(Degrees: Extended): Extended;


or you can use SRL’s Cose and Sine functions. These functions use degrees instead. There is no Tan function though.

To get inverse tan, cos or sin we must use SCAR’s ArcTan, ArcSin and ArcCos functions:

function ArcTan(e: Extended): Extended
//same with ArcCos and ArcSin.


Remember that its returns the angle in RADIANS.

SCAR also has functions that do pretty much all that I covered above:


function Distance(x1, y1, x2, y2: Integer): Integer;
//Returns Distance between Points.



function Radians(Degrees: Extended): Extended;
//Converts Degrees to radians



function Degrees(Radians: Extended): Extended;
//Converts radians to degrees



They also have a range of polar to Cartesian and vice versa functions that I haven’t used. Check the SCAR Manual for a list.

So thats it for now. Hope you learnt something. Geez... my tutorials are long aren't they. :p

Zeph.

BobboHobbo
12-07-2007, 05:28 AM
WOWA MOTHER FKER!!!!!!!

Nice tut man. REPPP for uu

ZephyrsFury
12-07-2007, 10:11 AM
WOWA MOTHER FKER!!!!!!!

Nice tut man. REPPP for uu

So it makes sense? :p

Santa_Clause
12-07-2007, 11:30 AM
Ben's a bit too happy :p

Nice tutorial Eric.

ZephyrsFury
12-07-2007, 11:50 AM
Ben's a bit too happy :p

Nice tutorial Eric.

Its Erik.

Santa_Clause
12-07-2007, 12:35 PM
So I comment on your tutorial, and you comment on my misspelling of your name?

Nice tutorial Erik.

:)

ZephyrsFury
12-07-2007, 12:38 PM
Thank you Samual :p

n3ss3s
12-07-2007, 01:09 PM
Thank you, rep++, its always nice to see good, clean and detailed tutorial :)

I can't find if you put it somewhere like this, but

Radians = Degrees / 180 * Pi
Degrees = Radians * 180 / Pi

Expecting another tutorial as good as this :)

Maybe about how to calculate the angle of a point, very useful for stuff done with MM, using ArcTan / ArcSin / ArcCos :)

Dangit, seems like you already have Tut cup, I would've nominate ya xD

Bobarkinator
12-07-2007, 01:18 PM
Thanks, great tut. I only read a little bit as I have to go to school, but I'll finish reading when I get home.

pwnaz0r
12-07-2007, 10:02 PM
Pretty nice, seems you have put some time into it. This stuff is still kinda basic, don't know if it should be in "advanced" unless you haven't really taken geometery or something. I do like you included the polar coordinate system, many dont understand and will never use though :D.

EDIT: Second pretty big tutorial, now maybe I actually have someone who will start writing up to date tutorials like I try to do :)

mastaraymond
12-22-2007, 07:42 PM
Nice tutorial! Would have helped me a lot when i was finding out all this stuff ^^.

Nava2
08-28-2008, 06:15 PM
Thanks a lot. Wow, learned quite a bit.

After a long summer, its a good refresher.

Repped.

EvilChicken!
08-28-2008, 08:11 PM
Wowowow.


I just read the whole thing for the fourth or fifth time..
You truly deserve that cup.

But. You need more SCAR/RS examples! Like, trig in an actual script i.e.
Something .. A function or whatever that uses it so I can study it. :rolleyes:

Naum
08-30-2008, 01:36 PM
So does SCAR support Inverse Tan, you can use that to work out the angle. Though it wouldn't be used alot. Still If SCAR support Sin, Tan maybe it will support inverse?

Nava2
08-30-2008, 02:54 PM
So does SCAR support Inverse Tan, you can use that to work out the angle. Though it wouldn't be used alot. Still If SCAR support Sin, Tan maybe it will support inverse?

function ArcTan(e: Extended): Extended

hubbard1989
01-07-2010, 04:24 AM
Excellent tut on right angle trig. Rep+

one of the most important things i learned when i took trig back in highschool was how to memorize the trigonometric ratios.

if sine = opposite/hypotenuse, cosine = adjacent/hypotenuse and tangent is adjacent/hypotenuse, then you can write the first letter of each of them to make an acronym
SOHCAHTOA my math teacher said it's a made up indian word
sine opp hyp, cos adj hyp, tan opp adj

YoHoJo
01-07-2010, 04:55 AM
@hubbard1989

Although tutorials are timeless, the last post made on this thread was
"08-30-2008" which is over a year ago. Make sure on your later posts that you do not 'gravedig' older threads. Thanks.

bullzeye95
01-07-2010, 05:18 AM
@hubbard1989

Although tutorials are timeless, the last post made on this thread was
"08-30-2008" which is over a year ago. Make sure on your later posts that you do not 'gravedig' older threads. Thanks.

There is no rule against "gravedigging" tutorials.

YoHoJo
01-07-2010, 05:24 AM
There is no rule against "gravedigging" tutorials.

Never said there was. "tutorials are timeless" meaning his post was fine and ok. I was just telling him to make sure not to gravedig other threads, that's all.

wantonman
06-28-2012, 06:38 PM
is it possible to convert this using trig functions?



program cube;

var
x,y,a,b:Variant;
buffer1:integer;
buffer2:tcanvas;
bmp1:integer;
player:TMufasaBitmap;



begin

cleardebug;

bmp1:=BitmapfromString(10,10,'meJz7/38UEAsAuQ8q5A==');
DisplayDebugImgWindow(100,100);

a:=(1);
b:=(1);

x:=(0)
y:=(50)

repeat
begin
repeat

x:=x+a;
y:=y+b;

writeln(x);
writeln(y);

buffer1:=CreateBitmap(100,100);
FastDrawTransparent(x,y,bmp1,buffer1);
DrawBitmapDebugImg(buffer1);
FreeBitmap(buffer1);
wait(1);
until((x=100) or (y=99))
end;

begin
repeat
x:=x+a;
y:=y-b;

writeln(x);
writeln(y);

buffer1:=CreateBitmap(100,100);
FastDrawTransparent(x,y,bmp1,buffer1);
DrawBitmapDebugImg(buffer1);
FreeBitmap(buffer1);
wait(1);
until((x=99) or (y=50))
end;


begin
repeat

x:=x-a;
y:=y-b;

writeln(x);
writeln(y);

buffer1:=CreateBitmap(100,100);
FastDrawTransparent(x,y,bmp1,buffer1);
DrawBitmapDebugImg(buffer1);
FreeBitmap(buffer1);
wait(1);
until((x=50) or (y=0))
end;


begin
repeat

x:=x-a;
y:=y+b;

writeln(x);
writeln(y);

buffer1:=CreateBitmap(100,100);
FastDrawTransparent(x,y,bmp1,buffer1);
DrawBitmapDebugImg(buffer1);
FreeBitmap(buffer1);
wait(1);
until((x=0) or (y=50))
end;

until(false);

FreeBitmap(buffer1);
freebitmap(bmp1);
end.