Skip to content Skip to navigation

OpenStax_CNX

You are here: Home » Content » GAME 2302-0320 Brief Trigonometry Tutorial

Navigation

Recently Viewed

This feature requires Javascript to be enabled.
 

GAME 2302-0320 Brief Trigonometry Tutorial

Module by: R.G. (Dick) Baldwin. E-mail the author

Summary: GAME 2302-0320 Brief Trigonometry Tutorial

Preface

General

This module is part of a series of modules designed for teaching the physics component of GAME2302 Mathematical Applications for Game Development at Austin Community College in Austin, TX. (See GAME 2302-0100: Introduction for the first module in the course along with a description of the course, course resources, homework assignments, etc.)

Viewing tip

I recommend that you open another copy of this document in a separate browser window and use the following links to easily find and view the Images and Listings while you are reading about them.

Images

Listings

General background information

Many of the computational requirements for an introductory physics course involve trigonometry. This module provides a brief tutorial on trigonometry fundamentals.

Sine, cosine, and tangent

There are many topics, such as identities, that are covered in an introductory trigonometry course that won't be covered in this module. Instead, this module will concentrate mainly on performing computations on right angles using the sine, cosine, and tangent of an angle.

If I find it necessary to deal with identities in a later module, I will come back and update this module accordingly.

Discussion

Degrees versus radians

The most common unit of angular measurement used by the general public is the degree. As you are probably aware, there are 360 degrees in a circle.

The most common unit of angular measurement used by scientists and engineers is the radian.

(If you would like more background on radians, go to http://www.clarku.edu/~djoyce/trig/ .)

Conversions between radians and degrees

You may or may not be aware that one radian is equal to approximately 57.3 degrees. It is easier to remember, however, that 180 degrees is equal to PI radians where PI is the mathematical constant having an approximate value of 3.14159. We will use this latter relationship extensively to convert from degrees to radians and to convert from radians to degrees while working through the exercises in these modules.

An exercise involving degrees and radians

Let's do a short exercise involving degrees and radians. Please create an html file containing the code shown in Listing 1 and open it in your browser.

1
Listing 1: Conversions between radians and degrees.
<!-- File JavaScript01.html -->
<html><body>
<script language="JavaScript1.3">

function toRadians(degrees){
  return degrees*Math.PI/180
}//end function toRadians
//============================================//

function toDegrees(radians){
  return radians*180/Math.PI
}//end function toDegrees
//============================================//

var degrees = 90
var radians = toRadians(degrees)
document.write("degrees = " + degrees + 
               " : radians = " + radians + "<br/>")
radians = 1
degrees = toDegrees(radians)
document.write("radians = " + radians + 
               " : degrees = " + degrees + "<br/>")

radians = Math.PI
degrees = toDegrees(radians)
document.write("radians = " + radians + 
               " : degrees = " + degrees)

</script>
</body></html>

Output for script in Listing 1

When you open the file in your browser, the text shown in Image 1 should be displayed in the browser window.

2
Image 1: Output for script in Listing 1.
degrees = 90 : radians = 1.5707963267948965
radians = 1 : degrees = 57.29577951308232
radians = 3.141592653589793 : degrees = 180

The toRadians and toDegrees functions

Because it will frequently be necessary for us to convert between degrees and radians, I decided to write two functions that we will use to make those conversions. That will eliminate the need for us to stop and think about the conversion (and possibly get it backwards) when writing code. We will simply call the function that performs the conversion in the required direction.

The toRadians function expects to receive an input parameter describing an angle in degrees and returns the value for that same angle in radians.

The toDegrees function expects to receive an input parameter describing an angle in radians and returns the value for that same angle in degrees.

Global variables named degrees and radians

The code in Listing 1 begins by declaring global variables named degrees and radians . The variable named degrees is initialized to 90 degrees.

The toRadians function is called to convert that value of degrees to radians. The returned value in radians is stored in the variable named radians .

Display contents of both variables

Then the document.write method is called to display the values contained in both variables, producing the first line of output text shown in Image 1 .

Modify variable contents, convert, and display again

Following that, a value of 1 is assigned to the variable named radians . The toDegrees function is called to convert that value to degrees, and the result is stored in the variable named degrees .

Once again, the document.write method is called to display the current contents of both variables, producing the second line of output text shown in Image 1 .

One more time

Finally, the mathematical constant, PI, is stored in the variable named radians . Then that value is converted to degrees and stored in the variable named degrees . The current values in both variables are displayed, producing the last line of output text shown in Image 1 .

And the results were...

As you can see from Image 1 ,

  • Ninety degrees is equal to 1.57 radians
  • One radian is equal to 57.296 degrees
  • 3.14 (PI) radians is equal to 180 degrees

A template

You might want to save your html file as a template for use with future exercises that require conversions between radians and degrees. This will be particularly useful when we write scripts that use JavaScript's built-in trigonometric methods. Those methods deal with angles almost exclusively in radians while we tend to think of angles in degrees. We will use these two functions to perform conversions between degrees and radians when required.

Sine, cosine, and tangent

An exercise involving a right triangle

For the next exercise, I would like for you to use pencil and graph paper to draw a right triangle formed by points at the following coordinates:

  • The origin
  • x=3, y=0
  • x=3, y=4

The vertices of a right triangle

Each point represents a vertex of a right triangle. If you connect the imaginary points with lines, you will have "drawn" a right triangle with its base on the horizontal axis.

The base of the triangle will have a length of three units. Another side of the triangle will have a length of four units. The hypotenuse of the triangle will have still another length.

The angle at the origin

The base and the hypotenuse will form an angle at the origin opening outward to the right. As mentioned before, the base will be on the horizontal axis. The side that connects the base and the far end of the hypotenuse will be parallel to the vertical axis.

Names for the three sides of the right triangle

Lets establish some names for the three sides of the right triangle when drawn in this manner.

We will continue to refer to the hypotenuse as the hypotenuse and abbreviate it hyp . We will refer to the base as the adjacent side relative to the angle at the origin and abbreviate it adj . We will refer to the third side as the opposite side relative to the angle at the origin and abbreviate it opp .

Image 2 shows such a 3-4-5 triangle (which may not be drawn to scale) using the notation given above for the three sides.

(Note that this image, and many of the other images in this collection of physics modules were re-purposed from an earlier set of modules. The lower-case characters that you will see scattered throughout the images were needed there but will generally have no meaning in these modules. They should be ignored.)

3
Image 2: A 3-4-5 triangle.
Missing image

The length of the hypotenuse

Now that you have your right triangle and you know the lengths of the adjacent and opposite sides, do you remember how to calculate the length of the hypotenuse?

The Pythagorean theorem

Hopefully you know that for a right triangle, the square of the hypotenuse is equal to the sum of the squares of the two other sides. Thus, the length of the hypotenuse is equal to the square root of the sum of the squares of the other two sides.

In this case we can do the arithmetic in our heads to compute the length of the hypotenuse. (I planned it that way.)

The square of the adjacent side is 9. The square of the opposite side is 16. The sum of the squares is 25, and the square root of 25 is 5. Thus, the length of the hypotenuse is 5.

A 3-4-5 triangle

You have created a rather unique triangle. You have created a right triangle in which the sides are either equal to, or proportional to the integer values 3, 4, and 5.

I chose this triangle on purpose for its simplicity. We will use it to investigate some aspects of trigonometry.

The sine and arcsine of an angle

You will often hear people talk about the sine of an angle or the cosine of an angle. Just what is the sine of an angle anyway?

Although the sine of an angle is based on very specific geometric considerations involving circles (see http://www.clarku.edu/~djoyce/trig/ ), for our purposes, the sine of an angle is simply a ratio between the lengths of two different sides of a right triangle.

A ratio of two sides

For our purposes, we will say that the sine of an angle is equal to the ratio of the opposite side and the hypotenuse. Therefore, in the case of the 3-4-5 triangle , the sine of the angle at the origin is equal to 4/5 or 0.8.

If we know the lengths of the hypotenuse and the opposite side, we can compute the sine and use it to determine the value of the angle. (We will do this later using the arcsine.)

Conversely, if we know the value of the angle but don't know the lengths of the hypotenuse and/or the opposite side, we can obtain the value of the sine of the angle using a scientific calculator (such as the Google calculator) or lookup table.

Note:

The sine of an angle -- sample computation

Enter the following into the Google search box:

sin(53.13010235415598 degrees)

The following will appear immediately below the search box:

sin(53.13010235415598 degrees) = 0.8

This matches the value that we computed above as the ratio of the opposite side and the hypotenuse.

The arcsine (inverse sine) of an angle

The arcsine of an angle is the value of the angle having a given sine value. In other words, if you know the value of the sine of an unknown angle, you can use a scientific calculator or lookup table to find the value of the angle.

For example, we know that the sine of the angle at the origin on your 3-4-5 triangle is 4/5. From that, we can determine the value of the angle. However, we probably can't do this calculation in our heads so we will use the Google calculator to compute the value of the angle.

Note:

The arcsine of an angle -- sample computation

Enter the following into the Google search box:

arcsin(4/5) in degrees

The following will appear immediately below the search box:

arcsin(4/5) = 53.1301024 degrees

This is the angle that corresponds to a ratio of the opposite side to the hypotenuse of 4/5.

We can also write a JavaScript script to perform the calculation, which we will do shortly.

Getting the angle for a known sine value

If you have access to a protractor, use it to measure and record the angle at the origin on your triangle. Then create an html file containing the code shown in Listing 2 and open it in your browser.

4
Listing 2: Arcsin of 3-4-5 triangle.
<!-- File JavaScript02.html -->
<html><body>
<script language="JavaScript1.3">

function toRadians(degrees){
  return degrees*Math.PI/180
}//end function toRadians
//============================================//

function toDegrees(radians){
  return radians*180/Math.PI
}//end function toDegrees
//============================================//

var opp = 4
var hyp = 5
var ratio = opp/hyp
var angRad = Math.asin(ratio)
var angDeg = toDegrees(angRad)

document.write("radians = " + angRad + "<br/>")
document.write("degrees = " + angDeg)

</script>
</body></html>

The output for the angle

When you open your html file in your browser, the output shown in Image 3 should appear in the browser window.

5
Image 3: Output for script in Listing 2.
radians = 0.9272952180016123
degrees = 53.13010235415598 

Did you measure the angle to be 53 degrees with your protractor. If so, congratulations. If not, you should probably take another look at it.

Define conversion functions

The code in Listing 2 begins by defining the functions named toRadians and toDegrees that we developed earlier in Listing 1 . (In this case, we will only need the function named toDegrees so I could have omitted the code for the function named toRadians .)

Declare and initialize variables

Then the code in Listing 2 declares and initializes variables to represent the lengths of the opposite side and the hypotenuse for the triangle ( opp and hyp ). Then it computes and saves the ratio of the two. (We learned earlier that the ratio is the value of the sine of the angle at the origin even though we don't know the value of the angle.)

The built-in Math.asin method

JavaScript has a built-in method named Math.asin that receives the sine value for an unknown angle and returns the value of the corresponding angle in radians. (The Math.asin method has the same purpose at the word arcsin in the Google calculator.)

The returned value is an angle between -PI/2 and PI/2 radians. (I will have more to say about this later.)

Listing 2 calls the Math.asin method, passing the ratio (sine of the angle) as a parameter, and stores the returned value in a variable named angRad .

Then Listing 2 calls the toDegrees method, passing the value of angRad as a parameter and stores the returned value in a variable named angDeg .

Finally, Listing 2 calls the document.write method twice in success to display the angle values shown in Image 3 .

Another exercise with a different viewpoint

Now let's approach things from a different viewpoint. Assume that

  • you know the value of the angle in degrees,
  • you know the length of the hypotenuse, and
  • you need to find the length of the opposite side.

Assume also that for some reason you can't simply measure the length of the opposite side. Therefore, you must calculate it. This is a common situation in physics, so let's see if we can write a script that will perform that calculation for us.

Create an html file containing the code shown in Listing 3 and open the file in your browser.

6
Listing 3: Finding length of the opposite side.
<!-- File JavaScript03.html -->
<html><body>
<script language="JavaScript1.3">

function toRadians(degrees){
  return degrees*Math.PI/180
}//end function toRadians
//============================================//

function toDegrees(radians){
  return radians*180/Math.PI
}//end function toDegrees
//============================================//

var hyp = 5
var angDeg = 53.13
var angRad = toRadians(angDeg)
var sine = Math.sin(angRad)

var opp = hyp * sine

document.write("opposite = " + opp + "<br/>")

hyp = opp/sine

document.write("hypotenuse = " + hyp + "<br/>")

</script>
</body></html>

The output for the opposite side

When you open your html file in your browser, the output shown in Image 3 should appear in your browser window.

7
Image 4: Output for script in Listing 3.

opposite = 3.999994640742543
hypotenuse = 5

Computing length of opposite side with the Google calculator

We could also compute the length of the opposite side using the Google calculator.

Note:

The length of the opposite side -- sample computation

Enter the following into the Google search box:

5*sin(53.1301024 degrees)

The following will appear immediately below the search box:

5 * sin(53.1301024 degrees) = 4

This is the length of the opposite side for the given angle and the given length of the hypotenuse.

Interesting equations

We learned earlier that the sine of the angle is equal to the ratio of the opposite side and the hypotenuse. We also learned that the angle is the arcsine of that ratio.

If we know any two of those values ( angle , opp , hyp ), we can find the third (with a little algebraic manipulation) as shown in Image 5 .

8
Image 5: Interesting sine equations.

sine(angle) = opp/hyp

angle = arcsine(opp/hyp)
opp = hyp * sine(angle)
hyp = opp/sine(angle)

Getting back to Listing 3

After defining the radian/degree conversion functions, Listing 3 declares and initializes variables representing the length of the hypotenuse and the angle in degrees. (Note that the angle in degrees was truncated to four significant digits, which may introduce a slight inaccuracy into the computations.)

Get and use the sine of the angle

That angle is converted to radians and passed as a parameter to the Math.sin method, which returns the value of the sine of the angle.

The value for the sine of the angle is then used in an algebraic equation to compute the length of the opposite side, which is displayed in Image 4 . (This equation is one of the equations shown in Image 5 .)

Looks very close to me

As you can see, the computed value for the opposite side shown in Image 4 is extremely close to the known value of 4 units.

Re-compute the length of the hypotenuse

After that, the value of the hypotenuse is re-computed (as though it were the unknown in the problem) using the value of the sine and the recently computed value of the opposite side. (Once again, one of the equations from Image 5 is used to perform the computation.) The output length for the hypotenuse is shown in Image 4 , and it matches the known value.

Example usage of Math.asin and Math.sin methods

Listing 2 and Listing 3 provide examples of how to use the JavaScript Math.asin and Math.sin methods to find the angle, the opposite side, or the hypotenuse of a right triangle when the other two are known as shown by the equations in Image 5 .

The cosine and arccosine of an angle

You are going to find the discussion in this section to be very similar to the discussion in the previous section on the sine and the arcsine of an angle.

Once again, although the cosine of an angle is based on very specific geometric considerations involving circles (see http://www.clarku.edu/~djoyce/trig/ ), for our purposes, the cosine of an angle is simply a ratio between the lengths of two different sides of a right triangle.

A ratio of two sides

For our purposes, we will say that the cosine of an angle is equal to the ratio of the adjacent side and the hypotenuse. Therefore, in the case of the 3-4-5 triangle, the cosine of the angle at the origin is equal to 3/5 or 0.6.

As before, if we know the lengths of the hypotenuse and the adjacent side, we can compute the cosine and use it to determine the value of the angle. (We will do this later.)

Conversely, if we know the value of the angle but don't know the lengths of the hypotenuse and/or the adjacent side, we can obtain the cosine value (the ratio of the adjacent side and the hypotenuse) using a scientific calculator or lookup table and use it for other purposes later.

Note:

The cosine of an angle -- sample computation

Enter the following into the Google search box:

cos(53.13010235415598 degrees)

The following will appear immediately below the search box:

cos(53.13010235415598 degrees) = 0.6

This matches the ratio of the adjacent side to the hypotenuse for a 3-4-5 triangle.

The arccosine (inverse cosine) of an angle

The arccosine of an angle is the value of the angle having a given cosine value. In other words, if you know the value of the cosine of an unknown angle, you can use a scientific calculator or lookup table to find the value of the angle.

Getting the angle for a known cosine value

For example, we know that the cosine of the angle at the origin of the 3-4-5 triangle is 0.6. From that, we can determine the value of the angle using either the Google calculator or JavaScript.

Note:

The arccosine of an angle -- sample computation

Enter the following into the Google search box:

arccos(3/5) in degrees

The following will appear immediately below the search box:

arccos(3/5) = 53.1301024 degrees

This is the angle that corresponds to a ratio of the adjacent side to the hypotenuse of 3/5.

As you should expect. the computed angle is the same as before. We didn't change the angle, we simply computed it using a different approach.

Getting the angle using JavaScript

Please create an html file containing the code shown in Listing 4 and open it in your browser.

9
Listing 4: Arccosine of 3-4-5 triangle.
<!-- File JavaScript04.html -->
<html><body>
<script language="JavaScript1.3">

function toRadians(degrees){
  return degrees*Math.PI/180
}//end function toRadians
//============================================//

function toDegrees(radians){
  return radians*180/Math.PI
}//end function toDegrees
//============================================//

var adj = 3
var hyp = 5
var ratio = adj/hyp
var angRad = Math.acos(ratio)
var angDeg = toDegrees(angRad)

document.write("radians = " + angRad + "<br/>")
document.write("degrees = " + angDeg)

</script>
</body></html>

Similar to a previous script

If you examine the code in Listing 4 carefully, you will see that it is very similar to the code in Listing 2 with a couple of exceptions:

  • The variable opp having a value of 4 was replaced by the variable adj having a value of 3.
  • The call to the Math.asin method was replaced by a call to the Math.acos method.

The output

When you load your html file into your browser, it should produce the output shown earlier in Image 3 . In other words, we know that the angle at the origin didn't change. What changed was the manner in which we computed the value of that angle.

Different approaches to the same solution

In Listing 2 , we used the length of the hypotenuse and the length of the opposite side, along with the arcsine method to compute the angle.

In Listing 4 , we used the length of the hypotenuse and the length of the adjacent side, along with the arccosine method to compute the angle.

Which approach should you use?

As would be expected, since the angle didn't change, both approaches produced the same result. Deciding which approach to use often depends on the values that are available to use in the computation.

Sometimes you only have the lengths of the hypotenuse and the opposite side available, in which case you could use the arcsine. Sometimes you only have the lengths of the hypotenuse and the adjacent side available, in which case you could use the arccosine. Sometimes you have the lengths of both the opposite side and the adjacent side in addition to the length of the hypotenuse, in which case you can use either approach.

Both approaches use the length of the hypotenuse

It is important to note however that both of these approaches require you to have the length of the hypotenuse. Later in this module we will discuss the tangent and arctangent for an angle, which allows us to work with the opposite side and the adjacent side devoid of the length of the hypotenuse. (Of course, if you have the lengths of the opposite side and the adjacent side, you can always find the length of the hypotenuse using the Pythagorean theorem.)

Interesting cosine equations

The equations in Image 6 are similar to equations in Image 5 . The difference is that the equations in Image 5 are based on the use of the sine of the angle and the opposite side whereas the equations in Image 6 are based on the use of the cosine of the angle and the adjacent side.

As you can see in Image 6 , if you know any two of the values for angle , adj , and hyp , you can find the other value. This is illustrated in the script shown in Listing 5 , which produces the output shown in Image 7 .

10
Image 6: Interesting cosine equations.

cosine(angle) = adj/hyp

angle = arccosine(adj/hyp)
adj = hyp * cosine(angle)
hyp = adj/cosine(angle)

Finding the length of the adjacent side

The code in Listing 5 is very similar to the code in Listing 2 . The main difference is that Listing 2 is based on the use of the sine of the angle and the length of the opposite side whereas Listing 5 is based on the use of the cosine of the angle and the length of the adjacent side.

11
Listing 5: Finding the length of the adjacent side.
<!-- File JavaScript05.html -->
<html><body>
<script language="JavaScript1.3">

function toRadians(degrees){
  return degrees*Math.PI/180
}//end function toRadians
//============================================//

function toDegrees(radians){
  return radians*180/Math.PI
}//end function toDegrees
//============================================//

var hyp = 5
var angDeg = 53.13
var angRad = toRadians(angDeg)
var cosine = Math.cos(angRad)

var adj = hyp * cosine

document.write("adjacent = " + adj + "<br/>")

hyp = adj/cosine

document.write("hypotenuse = " + hyp + "<br/>")

</script>
</body></html>

No further explanation needed

Because of the similarity of Listing 5 and Listing 2 , no further explanation of the code in Listing 5 should be needed. As you can see from Image 7 , the output values match the known lengths for the hypotenuse and the adjacent side for the 3-4-5 triangle.

12
Image 7: Output for script in Listing 5.

adjacent = 3.0000071456633126
hypotenuse = 5

Computing length of adjacent side with the Google calculator

We could also compute the length of the adjacent side using the Google calculator.

Note:

The length of the adjacent side -- sample computation

Enter the following into the Google search box:

5*cos(53.1301024 degrees)

The following will appear immediately below the search box:

5 * cos(53.1301024 degrees) = 3

This is the length of the adjacent side for the given angle and the given length of the hypotenuse.

Two very important equations

From an introductory physics viewpoint, two of the most important and perhaps most frequently used equations from Image 5 and Image 6 are shown in Image 8 .

13
Image 8: Two very important equations.

opp = hyp * sine(angle)
adj = hyp * cosine(angle)

These two equations are so important that it might be worth your while to memorize them. Of course, you will occasionally need most of the equations in Image 5 and Image 6 , so you should try to remember them, or at least know where to find them when you need them.

Vectors

As you will see later in the module that deals with vectors, you are often presented with something that resembles the hypotenuse of a right triangle whose adjacent side is on the horizontal axis and whose opposite side is parallel to the vertical axis.

The thing that looks like the hypotenuse of a right triangle is called a vector . It has a length and it has a direction. Typically, the direction is stated as the angle between the vector and the horizontal axis. Thus, the direction is analogous to the angle at the origin in your triangle.

Horizontal and vertical components

For reasons that I won't explain until we get to that module, you will often need to compute the horizontal and vertical components of the vector. The horizontal component is essentially the adjacent side of our current right triangle. Thus, the value of the horizontal component can be computed using the second equation in Image 8 .

The vertical component is essentially the opposite side of our current right triangle, and its value can be computed using the first equation in Image 8 .

The tangent and arctangent of an angle

Once again, although the tangent of an angle is based on very specific geometric considerations involving circles (see http://www.clarku.edu/~djoyce/trig/ ), for our purposes, the tangent of an angle is simply a ratio between the lengths of two different sides of a right triangle.

A ratio of two sides

For our purposes, we will say that the tangent of an angle is equal to the ratio of the opposite side and the adjacent side. Therefore, in the case of the 3-4-5 triangle, the tangent of the angle at the origin is equal to 4/3 or 1.333.

Not limited to 1.0

Note that the absolute value for the sine and the cosine of an angle is limited to a maximum value of 1.0. However, the tangent of an angle is not so limited. In fact, the tangent of 45 degrees is 1.0 and the tangent of 90 degrees is infinity. This results from the length of the adjacent side, which is the denominator in the ratio, going to zero at 90 degrees.

Dividing by zero in a script is usually not a good thing. This is a pitfall that you must watch out for when working with tangents. I will provide code later that shows you how deal with this issue.

Computing the tangent

If we know the lengths of the opposite side and the adjacent side, we can compute the tangent and use it for other purposes later without having to know the value of the angle.

Conversely, if we know the value of the angle but don't know the lengths of the adjacent side and/or the opposite side, we can obtain the tangent value using a scientific calculator or lookup table and use it for other purposes later.

Note:

The tangent of an angle -- sample computation

Enter the following into the Google search box:

tan(53.13010235415598 degrees)

The following will appear immediately below the search box:

tan(53.13010235415598 degrees) = 1.33333333

This agrees with the ratio that we computed earlier .

The arctangent (inverse tangent) of an angle

The arctangent of an angle is the value of the angle having a given tangent value. (For example, as mentioned above, the arctangent of infinity is 90 degrees and the arctangent of 1.0 is 45 degrees.) In other words, if you know the value of the tangent of an unknown angle, you can use a scientific calculator or lookup table to find the value of the angle.

For example, we know that the tangent of the angle at the origin on your 3-4-5 triangle is 1.333. From that, we can determine the value of the angle.

Note:

The arctangent of an angle -- sample computation

Enter the following into the Google search box:

arctan(4/3) in degrees

The following will appear immediately below the search box:

arctan(4/3) = 53.1301024 degrees

We can also write a JavaScript script to perform the calculation.

Getting the angle for a known tangent value using JavaScript

Please create an html file containing the code shown in Listing 6 and open it in your browser.

14
Listing 6: Arctan of 3-4-5 triangle.
<!-- File JavaScript06.html -->
<html><body>
<script language="JavaScript1.3">

function toRadians(degrees){
  return degrees*Math.PI/180
}//end function toRadians
//============================================//

function toDegrees(radians){
  return radians*180/Math.PI
}//end function toDegrees
//============================================//

var opp = 4
var adj = 3
var ratio = opp/adj
var angRad = Math.atan(ratio)
var angDeg = toDegrees(angRad)

document.write("radians = " + angRad + "<br/>")
document.write("degrees = " + angDeg)

</script>
</body></html>

The output from the script

Once again, when you open this file in your browser, the output shown in Image 3 should appear in your browser window.

The code in Listing 6 is very similar to the code in Listing 2 . They both describe the same right triangle, so the output should be the same in both cases.

The code in Listing 2 uses the opposite side and the hypotenuse along with the arcsine to compute the angle. The code in Listing 6 uses the opposite side and the adjacent side along with the arctangent to compute the angle. Otherwise, no further explanation should be required.

Interesting tangent equations

In the spirit of Image 5 and Image 6 , Image 9 provides some interesting equations that deal with the angle, the opposite side, and the adjacent side. Given any two, you can find the third using either the tangent or arctangent.

15
Image 9: Interesting tangent equations.

tangent(angle) = opp/adj

angle = arctangent(opp/adj)
opp = tangent(angle) * adj
adj = opp/tangent(angle)

An exercise involving the tangent

Please copy the code from Listing 7 into an html file and open it in your browser.

16
Listing 7: Finding the length of the opposite side.
<!-- File JavaScript07.html -->
<html><body>
<script language="JavaScript1.3">

function toRadians(degrees){
  return degrees*Math.PI/180
}//end function toRadians
//============================================//

function toDegrees(radians){
  return radians*180/Math.PI
}//end function toDegrees
//============================================//

var adj = 3
var angDeg = 53.13
var angRad = toRadians(angDeg)
var tangent = Math.tan(angRad)

var opp = adj * tangent

document.write("opposite = " + opp + "<br/>")

adj = opp/tangent

document.write("adjacent = " + adj + "<br/>")

</script>
</body></html>

When you open your html file in your browser, the output shown in Image 10 should appear in your browser window. We can see that the values in Image 10 are correct for our 3-4-5 triangle.

17
Image 10: Output for script in Listing 7.
opposite = 3.9999851132269173
adjacent = 3

Very similar code

The code in Listing 7 is very similar to the code in Listing 3 and Listing 5 . The essential differences are that

  • Listing 3 uses the sine along with the opposite side and the hypotenuse.
  • Listing 5 uses the cosine along with the adjacent side and the hypotenuse.
  • Listing 7 uses the tangent along with the opposite side and the adjacent side.

You should be able to work through those differences without further explanation from me.

The cotangent of an angle

There is also something called the cotangent of an angle, which is simply the ratio of the adjacent side to the opposite side. If you know how to work with the tangent, you don't ordinarily need to use the cotangent, so I won't discuss it further.

Computing length of opposite side with the Google calculator

We could also compute the length of the opposite side using the Google calculator.

Note:

The length of the opposite side -- sample computation

Enter the following into the Google search box:

3*tan(53.1301024 degrees)

The following will appear immediately below the search box:

3 * tan(53.1301024 degrees) = 4.00000001

Dealing with different quadrants

Up to this point, we have dealt exclusively with angles in the range of 0 to 90 degrees (the first quadrant). As long as you stay in the first quadrant, things are relatively straightforward.

As you are probably aware, however, angles can range anywhere from 0 to 360 degrees (or more). Once you begin working with angles that are greater then 90 degrees, things become a little less straightforward.

Sinusoidal amplitude versus angle

Please copy the code from Listing 8 into an html file and open the file in your browser.

18
Listing 8: Sinusoidal amplitude versus angle.
<;!-- File JavaScript08.html -->
<;html><;body>
<;script language="JavaScript1.3">

function toRadians(degrees){
  return degrees*Math.PI/180
}//end function toRadians
//============================================//

function toDegrees(radians){
  return radians*180/Math.PI
}//end function toDegrees
//============================================//

var angInc = 90
var angStart = -360
var ang = angStart
var angEnd = 360
var sine
var cosine

while(ang <;= angEnd){
  //Compute sine and cosine of angle
  sine = Math.sin(toRadians(ang))
  cosine = Math.cos(toRadians(ang))
  
  //Reduce the number of digits in the output
  sine = (Math.round(100*sine))/100
  cosine = (Math.round(100*cosine))/100
  
  //Display the results
  document.write("Angle: " + ang + 
                 " Sine: " + sine + 
                 " Cosine: " + cosine +
                 "<;/br>")
                 
  //Increase the angle for next iteration
  ang = ang + angInc
}//end while loop

<;/script>
<;/body><;/html>

Output from the script

When you open your html file in your browser, the output shown in Image 11 should appear in your browser window.

19
Image 11: Sinusoidal values at 90-degree increments.
Angle: -360 Sine: 0 Cosine: 1
Angle: -270 Sine: 1 Cosine: 0
Angle: -180 Sine: 0 Cosine: -1
Angle: -90 Sine: -1 Cosine: 0
Angle: 0 Sine: 0 Cosine: 1
Angle: 90 Sine: 1 Cosine: 0
Angle: 180 Sine: 0 Cosine: -1
Angle: 270 Sine: -1 Cosine: 0
Angle: 360 Sine: 0 Cosine: 1

Image 11 contains the data for two different curves. One is a sine curve and the other is a cosine curve.

Plot the points

You should be able to plots these data values as two separate curves on your graph paper.

Remember, the angle values from -360 degrees (-2*PI radians) to +360 degrees (+2*PI radians) are horizontal coordinates while the corresponding values for the sine and cosine are vertical coordinates.

Saw tooth curves

Once you have plotted the points, you should be able to discern two curves, each of which is a saw tooth.

The two curves have exactly the same shape, but one is shifted horizontally relative to the other. For example, the sine curve has a value of zero at an angle of zero (the origin) and it is asymmetric about the vertical axis.

The cosine curve, on the other hand has a value of 1 at an angle of zero and it is symmetric about the vertical axis.

Periodic curves

These are periodic curves. For example, the shape of the sine curve between -360 and 0 is the same as the shape of the sine curve between 0 and +360. Each of those ranges represents one cycle of the periodic curve.

We only computed the values from -360 to +360. However, if we had computed the values from -3600 to + 3600, the overall shape of the curve would not differ from what we have here. The shape of each cycle of the curve would be identical to the shape of the cycle to the left and the cycle to the right.

Not really a saw tooth

The sine and cosine curves don't really have a saw tooth shape. That is an artifact of the fact that we didn't compute enough points to reliably describe the shape of the curves. Let's improve on that.

Modify the script

Modify the code in your script to initialize the value of the variable named angInc to 45 degrees instead of 90 degrees and then load the revised version into your browser. This will cause the script to fill in data points between the points that we already have producing the output shown in Image 16 .

20
Image 12: Sinusoidal values at 45-degree increments.
Angle: -360 Sine: 0 Cosine: 1
Angle: -315 Sine: 0.71 Cosine: 0.71
Angle: -270 Sine: 1 Cosine: 0
Angle: -225 Sine: 0.71 Cosine: -0.71
Angle: -180 Sine: 0 Cosine: -1
Angle: -135 Sine: -0.71 Cosine: -0.71
Angle: -90 Sine: -1 Cosine: 0
Angle: -45 Sine: -0.71 Cosine: 0.71
Angle: 0 Sine: 0 Cosine: 1
Angle: 45 Sine: 0.71 Cosine: 0.71
Angle: 90 Sine: 1 Cosine: 0
Angle: 135 Sine: 0.71 Cosine: -0.71
Angle: 180 Sine: 0 Cosine: -1
Angle: 225 Sine: -0.71 Cosine: -0.71
Angle: 270 Sine: -1 Cosine: 0
Angle: 315 Sine: -0.71 Cosine: 0.71
Angle: 360 Sine: 0 Cosine: 1

Plot the new points

Every other line of text in Image 12 should contain sine and cosine values for angles that are half way between the points that you already have plotted.

Plot the new points and connect all of the points in each curve.

Same shape but shifted horizontally

The two curves still have the same shape, although shifted horizontally relative to one another and they are still periodic. However, they no longer have a saw tooth shape. They tend to be a little more rounded near the peaks and they are beginning to provide a better representation of the actual shapes of the sine and cosine curves.

Let's do it again

Change the value of the variable named angInc from 45 degrees to 22.5 degrees and load the new version of the html file into your browser. Now the output should look like Image 13 .

21
Image 13: Sinusoidal values at 22.5-degree increments.
Angle: -360 Sine: 0 Cosine: 1
Angle: -337.5 Sine: 0.38 Cosine: 0.92
Angle: -315 Sine: 0.71 Cosine: 0.71
Angle: -292.5 Sine: 0.92 Cosine: 0.38
Angle: -270 Sine: 1 Cosine: 0
Angle: -247.5 Sine: 0.92 Cosine: -0.38
Angle: -225 Sine: 0.71 Cosine: -0.71
Angle: -202.5 Sine: 0.38 Cosine: -0.92
Angle: -180 Sine: 0 Cosine: -1
Angle: -157.5 Sine: -0.38 Cosine: -0.92
Angle: -135 Sine: -0.71 Cosine: -0.71
Angle: -112.5 Sine: -0.92 Cosine: -0.38
Angle: -90 Sine: -1 Cosine: 0
Angle: -67.5 Sine: -0.92 Cosine: 0.38
Angle: -45 Sine: -0.71 Cosine: 0.71
Angle: -22.5 Sine: -0.38 Cosine: 0.92
Angle: 0 Sine: 0 Cosine: 1
Angle: 22.5 Sine: 0.38 Cosine: 0.92
Angle: 45 Sine: 0.71 Cosine: 0.71
Angle: 67.5 Sine: 0.92 Cosine: 0.38
Angle: 90 Sine: 1 Cosine: 0
Angle: 112.5 Sine: 0.92 Cosine: -0.38
Angle: 135 Sine: 0.71 Cosine: -0.71
Angle: 157.5 Sine: 0.38 Cosine: -0.92
Angle: 180 Sine: 0 Cosine: -1
Angle: 202.5 Sine: -0.38 Cosine: -0.92
Angle: 225 Sine: -0.71 Cosine: -0.71
Angle: 247.5 Sine: -0.92 Cosine: -0.38
Angle: 270 Sine: -1 Cosine: 0
Angle: 292.5 Sine: -0.92 Cosine: 0.38
Angle: 315 Sine: -0.71 Cosine: 0.71
Angle: 337.5 Sine: -0.38 Cosine: 0.92
Angle: 360 Sine: 0 Cosine: 1

A lot of data points

Once again, every other line of text in Image 13 contains new sine and cosine values for angles that you don't have plotted yet.

Plotting all of these point is going to require a lot of effort. Before you do that, let's think about it.

Two full cycles

You should have been able to discern by now that your plots for the sine and cosine graphs each contain two full cycles. An important thing about periodic functions is that once you know the shape of the curve for any one cycle, you know the shape of the curve for every cycle from minus infinity to infinity. The shape of every cycle is exactly the same as the shape of every other cycle.

Saving patience and effort

If you are running out of patience, you might consider updating your plots for only one cycle.

You should be able to discern that your curves no longer have a saw tooth shape. Each time we have run the script, we have sampled the amplitude values of each curve at twice as many points as before. Therefore, the curves should be taking on a smoother rounded shape that is better representation of the actual shape of the curves.

Continue the process

You can continue this process of improving the curves for as long as you have the space and patience to do so. Just divide the value of the variable named angInc by a factor of two and rerun the script. That will produce twice as many data points that are only half as far apart on the horizontal axis.

If you choose to do so, you can plot only the new points in one-half of a cycle to get an idea of the shape. By now you should have discerned that each half of a cycle has the same shape, only one half is above the horizontal axis and the other half is a mirror image below the axis.

Plot of cosine and sine curves

Image 14 shows a cosine curve plotted above a sine curve very similar to the curves that you have plotted on your graph paper.

22
Image 14: Plot of cosine and sine curves.
missing image

Grid lines

The image in Image 14 contains 7 vertical grid lines. The vertical grid line in the center represents an angle of zero degrees. The space between each grid line on either side of the center represents an angle of 90 degrees or PI/2 radians.

There are two horizontal grid lines. One is one-fourth of the way down from the top. The other is one-fourth of the way up from the bottom.

The curves

A cosine curve is plotted with vertical values relative to the top grid line. It extends from -360 degrees on the left to +360 degrees on the right.

A sine curve is plotted with vertical values relative to the bottom grid line. It also extends from -360 degrees on the left to +360 degrees on the right.

Return values for the Math.asin, Math.acos, and Math.atan methods

I told you earlier that the Math.asin method returns a value between -PI/2 and PI/2. However, I didn't tell you that the Math.acos method returns a value between 0 and PI, or that the Math.atan method returns a value between -PI/2 and PI/2. You now have enough information to understand why this is true.

Smooth curves

If you examine the two curves in Image 14 and the data in Image 13 , you can surmise that the sine and cosine functions are smooth curves whose values range between -1 and +1 inclusive. For every possible value between -1 and +1, there is an angle in the range -PI/2 and PI/2 whose sine value matches that value. There is also an angle in the range 0 and PI whose cosine value matches that value.

(Although you haven't plotted the curve for the tangent, a similar situation holds there also, but the maximum value is not limited to 1.0.)

An infinite number of angles

Therefore, given a specific numeric value between -1 and +1, there are an infinite number of angles whose sine and cosine values match that numeric value and the method has no way of distinguishing between them. Therefore, the Math.asin method returns the matching angle that is closest to zero and the Math.acos method returns the matching positive angle that is closest to zero.

What can we learn from this?

One important thing that we can learn is there is no difference between the sine or cosine of an angle and the sine or cosine of a different angle that differs from the original angle by 360 degrees. Thus, the Math.asin and Math.acos methods cannot be used to distinguish between angles that differ by 360 degrees. (As you learned above, the situation involving the Math.asin and Math.acos methods is even more stringent than that.)

One-quarter cycle contains all of the information

Another thing that we can learn is that once you know the shape of the cosine curve from 0 degrees to 90 degrees, you have enough information to construct the entire cosine curve and the entire sine curve across any range of angles. Every possible value or the negative of every possible value that can occur in a sine or cosine curve occurs in the cosine curve between 0 degrees and 90 degrees. Furthermore, the order of those values is also well defined.

Think about these relationships

You should think about these kinds of relationships. As I mentioned earlier, as long as we are working with angles between 0 and 90 degrees, everything is relatively straightforward. However, once we start working with angles between 90 degrees and 360 degrees (or greater), things become a little less straightforward.

If you have a good picture in your mind of the shape of the two curves between -360 degrees and +360 degrees, you may be able to avoid errors once you start working on physics problems that involve angles outside the range of 0 to 90 degrees.

Quadrants

We often think of a two-dimensional space with horizontal and vertical axes and the origin at the center in quadrants. Each quadrant is bounded by half the horizontal axis and half the vertical axis.

It is common practice to number the quadrants in counter-clockwise order with the upper-right quadrant being quadrant 1, the upper-left quadrant being quadrant 2, the bottom-left quadrant being quadrant 3, and the bottom-right quadrant being quadrant 4.

Angles fall in quadrants

If you measure the angle between the positive horizontal axis and a line segment that emanates from the origin, quadrant 1 contains angles between 0 and PI/2, quadrant 2 contains the angles between PI/2 and PI, quadrant 3 contains the angles between PI and 3*PI/2, and quadrant 4 contains the angles between 3*PI/2 and 2*PI (or zero). (Note that I didn't attempt to reconcile the inclusion of each axis in the two quadrants on either side of the axis.)

Algebraic signs versus quadrant number

It is sometimes useful to consider how the algebraic sign of the sine, cosine, and tangent values varies among the four quadrants. Image 15 contains a table that shows the sign of the sine, cosine, and tangent values for each of the four quadrants

23
Image 15: Algebraic signs versus quadrants.

        1 2 3 4
sine    + + - -
cosine  + - - +
tangent + - + -

Working with arctangents is more difficult than arcsine or arccosine

Working with arctangent is somewhat more difficult than working with arcsine or arccosine, if for no other reason than the possibility of dividing by zero when working with the arctangent.

Listing 9 shows a JavaScript function named getAngle that deals with this issue.

24
Listing 9: A function to deal with quadrants.
<!---------------- File JavaScript09.html --------------------->
<html><body>
<script language="JavaScript1.3">

document.write("Start Script <br/>");

//The purpose of this function is to receive the adjacent
// and opposite side values for a right triangle and to
// return the angle in degrees in the correct quadrant.
function getAngle(adjacent,opposite){
  if((adjacent == 0) && (opposite == 0)){
    //Angle is indeterminate. Just return zero.
    return 0;
  }else if((adjacent == 0) && (opposite > 0)){
    //Avoid divide by zero denominator.
    return 90;
  }else if((adjacent == 0) && (opposite < 0)){
    //Avoid divide by zero denominator.
    return -90;
  }else if((adjacent < 0) && (opposite >= 0)){
    //Correct to second quadrant
    return Math.atan(opposite/adjacent)*180/Math.PI + 180;
  }else if((adjacent < 0) && (opposite <= 0)){
    //Correct to third quadrant
    return Math.atan(opposite/adjacent)*180/Math.PI + 180;
  }else{
    //First and fourth quadrants. No correction required.
    return Math.atan(opposite/adjacent)*180/Math.PI;
  }//end else
}//end function getAngle


//Modify these values and run for different cases.
var adj = 3;
var opp = 4;

document.write("adj = " + adj.toFixed(2) +
" opp = " + opp.toFixed(2) + " units<br/>");

document.write("angle = " + getAngle(adj,opp).toFixed(2) 
  + " units<br/>");

var adj = -3;
var opp = 4;

document.write("adj = " + adj.toFixed(2) +
" opp = " + opp.toFixed(2) + " units<br/>");

document.write("angle = " + getAngle(adj,opp).toFixed(2) 
  + " units<br/>");

var adj = -3;
var opp = -4;

document.write("adj = " + adj.toFixed(2) +
" opp = " + opp.toFixed(2) + " units<br/>");

document.write("angle = " + getAngle(adj,opp).toFixed(2) 
  + " units<br/>");
  
var adj = 3;
var opp = -4;

document.write("adj = " + adj.toFixed(2) +
" opp = " + opp.toFixed(2) + " units<br/>");

document.write("angle = " + getAngle(adj,opp).toFixed(2) 
  + " units<br/>");

</script>
</body></html>

The code in Listing 9 begins by defining a function named getAngle that accepts the signed values of the adjacent side and the opposite side of the right triangle and returns the angle that the hypotenuse makes with the positive horizontal axis.

Then the code in Listing 9 tests the result for four different triangles situated in each of the four quadrants.

Image 16 shows the output produced by this script.

25
Image 16: Output from the code in Listing 9.
Start Script
adj = 3.00 opp = 4.00 units
angle = 53.13 units
adj = -3.00 opp = 4.00 units
angle = 126.87 units
adj = -3.00 opp = -4.00 units
angle = 233.13 units
adj = 3.00 opp = -4.00 units
angle = -53.13 units

This is an issue that will become important when we reach the module that deals with vectors in all four quadrants.

Structure of the script

The script shown in Listing 9 begins by defining a function named getAngle . The purpose of this function is to return an angle in degrees in the correct quadrant based on the lengths of the adjacent and opposite sides of an enclosing right triangle. As mentioned above, the returned angle is the angle that the hypotenuse makes with the positive horizontal axis.

An indeterminate result

The getAngle function calls the Math.atan method to compute the angle whose tangent is the ratio of the opposite side to the adjacent side of a right triangle.

If the lengths of both the opposite and adjacent sides are zero, the ratio opposite/adjacent is indeterminate and the value of the angle cannot be computed. In fact there is no angle corresponding to the ratio 0/0. However, the function must either return the value of an angle, or must return some sort of flag indicating that computation of the angle is not possible.

In this case, the function simply returns the value zero for the angle.

Avoiding division by zero

If the length of adjacent side is zero and the length of opposite side is not zero, the ratio opposite/adjacent is infinite. Therefore, the value of the angle cannot be computed. However, in this case, the angle is known to be 90 degrees (for opposite greater than zero) or 270 degrees (-90 degrees, for opposite less than zero). The getAngle function traps both of those cases and returns the correct angle in each case.

Correcting for the quadrant

The Math.atan method receives one parameter and it is either a positive or negative value. If the value is positive, the method returns an angle between 0 and 90 degrees. If the value is negative, the method returns an angle between 0 and -90 degrees. Thus, the angles returned by the Math.atan method always lie in the first or fourth quadrants.

(Actually, as I mentioned earlier, +90 degrees and -90 degrees are not possible because the tangent of +90 degrees or -90 degrees is an infinitely large positive or negative value. However, the method can handle angles that are very close to +90 or -90 degrees.)

A negative opposite/adjacent ratio

If the opposite/adjacent ratio is negative, this doesn't necessarily mean that the angle lies in the fourth quadrant. That negative ratio could result from a positive value for opposite and a negative value for adjacent. In that case, the angle would lie in the second quadrant between 90 degrees and 180 degrees.

The getAngle function tests the signs of the values for opposite and adjacent. If the signs indicate that the angle lies in the second quadrant, the value returned from the Math.atan method is corrected to place the angle in the second quadrant. The corrected angle is returned by the getAngle function.

A positive opposite/adjacent ratio

Similarly, if the opposite/adjacent ratio is positive, this doesn't necessarily mean that the angle lies in the first quadrant. That positive ratio could result from a negative opposite value and a negative adjacent value. In that case, the angle would lie in the third quadrant between 180 degrees and 270 degrees.

Again, the getAngle function tests the signs of the values for opposite and adjacent. If both values are negative, the value returned from the Math.atan method is corrected to place the angle in the third quadrant.

No corrections required...

Finally, if no corrections are required for the quadrant, the getAngle function returns the value returned by the Math.atan method. Note however, that in all cases, the Math.atan method returns the angle in radians. That value is converted to degrees by the getAngle function and the returned value is in degrees.

Positive and negative angles

As you can see from the results of the test shown in Image 16 , angles in the first, second, and third quadrants are returned as positive angles in degrees. However, angles in the fourth quadrant are returned as negative angles in degrees.

Run the scripts

I encourage you to run the scripts that I have presented in this lesson to confirm that you get the same results. Copy the code for each script into a text file with an extension of html. Then open that file in your browser. Experiment with the code, making changes, and observing the results of your changes. Make certain that you can explain why your changes behave as they do.

Miscellaneous

This section contains a variety of miscellaneous information.

Note:

Housekeeping material
  • Module name: GAME 2302-0320 Brief Trigonometry Tutorial
  • File: Game0320.htm
  • Published: 10/12/12
  • Revised: 12/31/12

Note:

Disclaimers:

Financial : Although the Connexions site makes it possible for you to download a PDF file for this module at no charge, and also makes it possible for you to purchase a pre-printed version of the PDF file, you should be aware that some of the HTML elements in this module may not translate well into PDF.

I also want you to know that, I receive no financial compensation from the Connexions website even if you purchase the PDF version of the module.

In the past, unknown individuals have copied my modules from cnx.org, converted them to Kindle books, and placed them for sale on Amazon.com showing me as the author. I neither receive compensation for those sales nor do I know who does receive compensation. If you purchase such a book, please be aware that it is a copy of a module that is freely available on cnx.org and that it was made and published without my prior knowledge.

Affiliation : I am a professor of Computer Information Technology at Austin Community College in Austin, TX.

-end-

Content actions

Download module as:

PDF | EPUB (?)

What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

Downloading to a reading device

For detailed instructions on how to download this content's EPUB to your specific device, click the "(?)" link.

| More downloads ...

Add module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks