Brief Trigonometry Tutorialhttp://cnx.org/contenthttp://cnx.org/content/m37435/latest/m37435Brief Trigonometry Tutorial1.72011/04/12 00:17:50 GMT-52011/07/02 15:50:40.090 GMT-5RichardBaldwinRichard BaldwinBaldwin@DickBaldwin.combaldwinbaldwinbaldwinaccessibleanglearccosinearcsinearctangentblindcosinegraph boardJavaScriptphysicsprotractorquadrantrefreshable Braille displayscreen readersinetangenttrigonometryScience and TechnologyMany of the computational requirements for an introductory physics course involve trigonometry. This module provides a brief tutorial on trigonometry fundamentals that is designed to be accessible to blind students.en
Table of Contents
Preface
General
Prerequisites
Viewing tip
Figures
Listings
Supplemental material
General background information
Discussion
Degrees versus radians
Sine, cosine, and tangent
The sine and arcsine of an angle
The cosine and
arccosine of an angle
The tangent
and arctangent of an angle
Dealing with quadrants
Normal (non-mirror-image) graphics
Run the scripts
Resources
Miscellaneous
<emphasis id="Preface" effect="bold">
</emphasis>
Preface
<emphasis id="General" effect="bold">
General
</emphasis>
This module is part of a collection of modules designed to make physics
concepts accessible to blind students.
See
http://cnx.org/content/col11294/latest/
for the main page of the
collection and
http://cnx.org/content/col11294/latest/#cnx_sidebar_column
for the table of
contents for the collection.
The collection is intended to supplement but not to
replace the textbook in an introductory course in high school or college
physics.
Many of the computational requirements for an introductory
physics course involve trigonometry. This module provides a brief
tutorial on trigonometry fundamentals that is designed to be accessible to blind
students.
<emphasis id="Prerequisites" effect="bold">
Prerequisites
</emphasis>
In addition to an Internet connection and a browser, you will need the
following tools (as a minimum) to work through the exercises in these modules:
A graph board for plotting graphs and vector diagrams (
http://www.youtube.com/watch?v=c8plj9UsJbg
).
A protractor for measuring angles (
http://www.youtube.com/watch?v=v-F06HgiUpw
).
An audio screen reader that is compatible with your operating system,
such as the NonVisual Desktop Access program (NVDA), which is freely
available at
http://www.nvda-project.org/
.
A refreshable Braille display capable of providing a line by line tactile output of information displayed on the computer
screen
(
http://www.userite.com/ecampus/lesson1/tools.php
).
The ability to manually create tactile graphics as described at
http://cnx.org/content/m38546/latest/
.
The minimum prerequisites for understanding the material in these modules
include:
A good understanding of algebra.
An understanding of the use of a graph board for plotting graphs and
vector diagrams (
http://www.youtube.com/watch?v=c8plj9UsJbg
).
An understanding of the use of a protractor for measuring angles (
http://www.youtube.com/watch?v=v-F06HgiUpw
).
A basic understanding of the use of sine, cosine, and tangent from
trigonometry (
http://www.clarku.edu/~djoyce/trig/
).
(The purpose of this module is to help you to gain such an understanding.)
An introductory understanding of JavaScript programming (
http://www.dickbaldwin.com/tocjscript1.htm
and
http://www.w3schools.com/js/default.asp
).
An understanding of all of the material covered in the earlier modules
in this collection.
An understanding of the manual creation and use of tactile graphics as
described at
http://cnx.org/content/m38546/latest/
.
<emphasis id="Viewing_tip" effect="bold">
Viewing tip
</emphasis>
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 figures
and listings while you are reading about them.
<emphasis id="Figures" effect="bold">
Figures
</emphasis>
Figure 1
. Output for script in Listing 1.
Figure 2
. Mirror image from file Phy1020b1.svg.
Figure 3
. Page Setup for file Phy1020b1.svg.
Figure 4
. Text values for Braille keys in file Phy1020b2svg.
Figure 5
. Output for script in Listing 2.
Figure 6
. Output for script in Listing 3.
Figure 7
. Interesting sine equations.
Figure 8
. Interesting cosine equations.
Figure 9
. Output for script in Listing 5
Figure 10
. Two very important equations.
Figure 11
. Interesting tangent equations.
Figure 12
. Output for script in Listing 7.
Figure 13
. Sinusoidal values at 90-degree increments.
Figure 14
. Sinusoidal values at 45-degree
increments.
Figure 15
. Sinusoidal values at 22.5-degree
increments.
Figure 16
. Mirror image plot of cosine and sine curves from the file named Phy1020a1svg.
Figure 17
. Algebraic signs versus quadrants.
Figure 18
. Output from the code in Listing 9.
Figure 19
. Normal image from file Phy1020b1.svg.
Figure 20
. Normal image plot of cosine and sine curves from the file named Phy1020a1svg.
<emphasis id="Listings" effect="bold">
Listings
</emphasis>
Listing 1
. Conversions between radians and degrees.
Listing 2
. Arcsin of 3-4-5 triangle.
Listing 3
. Finding length of the opposite side.
Listing 4
. Arccosine of 3-4-5 triangle.
Listing 5
. Finding the length of the adjacent side.
Listing 6
. Arctan of 3-4-5 triangle.
Listing 7
. Finding the length of the opposite side.
Listing 8
. Sinusoidal amplitude versus angle.
Listing 9
. A function to deal with quadrants.
<emphasis id="Supplemental_material" effect="bold">
Supplemental material
</emphasis>
I recommend that you also study the other lessons in my extensive collection
of online programming tutorials. You will find a consolidated index at
www.DickBaldwin.com
.
<emphasis id="General_background_information" effect="bold">
General background
information
</emphasis>
Many of the computational requirements for an introductory physics course involve trigonometry. This module provides a brief tutorial on trigonometry fundamentals that is
designed to be accessible to blind students.
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.
<emphasis id="Discussion" effect="bold">
Discussion
</emphasis>
Download files
You will need to download two svg graphics files to complete the work in
this module.
Click this link to download a zip file named
Phy1020.zip
containing those svg files.
If you don't already have it, you may also need to download and install the
free IVEO Viewer software. As of this writing, the Viewer is available for
downloading at
http://www.viewplus.com/products/software/hands-on-learning/
.
Graph board and protractor
Unless you can create tactile graphics on paper, you will need your graph board and your protractor to perform the exercises
in this module. Please prepare your graph board with perpendicular horizontal
and vertical axes with the origin located near the center of the graph board.
<emphasis id="Degrees_versus_radians" effect="bold">
Degrees versus radians
</emphasis>
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.
<emphasis id="Listing_1" effect="bold">
</emphasis>
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
Figure 1
should be
displayed in the browser window.
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
Figure 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
Figure 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 Figure
1.
And the results were...
As you can see from
Figure 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.
<emphasis id="Sine_cosine_and_tangent" effect="bold">
Sine, cosine, and tangent
</emphasis>
An exercise involving a right triangle
For the next exercise, I would like for you to create a right triangle on
your graph board by placing pushpins at the following coordinates:
The origin
x=3, y=0
x=3, y=4
(If you are able to use the svg file mentioned
below
to create tactile graphics, it probably won't be necessary for you to
do the graph-board exercise. You can explore the tactile graphics instead.)
The vertices of a right triangle
Each pushpin represents a vertex of a right triangle. If you enclose all
three pushpins with a rubber band, 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
located on the graph board 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
.
Tactile graphics
-- the file named Phy1020b1.svg
Much of the material in the next several paragraphs will only make sense to
you if you are very familiar with the module named Manual Creation of Tactile Graphics
at
http://cnx.org/content/m38546/latest/
.
When you downloaded the zip file named Phy1020.zip using the link given
above
, you should
have found that the zip file contains a file named Phy1020b1.svg.
The purpose of this file is to make it possible for you to create
tactile graphics for the right triangle. The procedure for creating the tactile
graphics is explained in the earlier module named
Manual Creation of Tactile
Graphics at
http://cnx.org/content/m38546/latest/
.
Image from file Phy1020b1.svg
For the benefit of any sighted persons that may be assisting you,
Figure 2
shows a reduced version of the graphic
contained in the file named Phy1020b1.svg. This is a mirror image of the image
that is to be presented to the student after embossing. A non-mirror-image
version is presented in
Figure 19
.
Page Setup information
If you use the IVEO Viewer software to print this svg file, you will need to
set up the page by selecting Page Setup on the IVEO File menu. The Page Setup information for this file is shown in
Figure 3
. These are the
default settings for Letter (Portrait) in IVEO.
<emphasis id="Figure_3" effect="bold">
</emphasis>
Page Setup for file Phy1020b1.svg.
Paper List: Letter (Portrait)
Paper Width: 8.5 inch
Paper Height: 11.0 inch
Orientation: portrait
Left Margin: 0.75 inch
Right Margin: 0.3 inch
Top Margin: 0.75 inch
Bottom Margin: 0.3 inch
Page Setup for file Phy1020b1.svg.
Braille keys
Note that the file named Phy1020b1.svg and
Figure 2
contain keys using the characters from
"m" through "z" and "A" that can be used to create
Braille characters during manual embossing. The key characters are shown in an
oblique font that is smaller than the normal text. The purpose of these keys is
explained in the earlier module titled Manual Creation of Tactile Graphics at
http://cnx.org/content/m38546/latest/
.
Key-value pairs
Figure 4
contains the text values associated with each of the Braille
keys.
<emphasis id="Figure_4" effect="bold">
</emphasis>
Text values for Braille keys in file Phy1020b2svg.
m: A 3-4-5 Triangle
n: 4
o: Vertical axis
p: 0
q: 0
r: Adjacent side
s: 53.13 Degrees
t: adj
u: 3
v: opp
w: Opposite side
x: hyp
y: Hypotenuse
z: Horizontal axis
A: Not drawn to scale
Text values for Braille keys in file Phy1020b2svg.
The length of the hypotenuse
Now that you have your right triangle on the graph board, or you have access
to tactile graphics created from the svg file, 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.
<emphasis id="The_sine_of_an_angle" effect="bold">
The sine and arcsine of an angle
</emphasis>
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 that you
have on your graph board, 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.
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 graph board 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.
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
Please use your protractor to measure and record the angle at the origin on
your graph board, or measure it on your tactile graphic. Then create an html file containing the code shown in
Listing
2
and open it in your browser.
<emphasis id="Listing_2" effect="bold">
</emphasis>
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
Figure 5
should appear in the browser window.
<emphasis id="Figure_5" effect="bold">
</emphasis>
Output for script in Listing 2.
radians = 0.9272952180016123
degrees = 53.13010235415598
Output for script in Listing 2.
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 on your graph board (
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
Figure 5
.
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.
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.
Please create an html file containing the code shown in
Listing 3
and open
the file in your browser.
<emphasis id="Listing_3" effect="bold">
</emphasis>
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 Figure
3 should appear in your browser window.
<emphasis id="Figure_6" effect="bold">
</emphasis>
Output for script in Listing 3.
opposite = 3.999994640742543
hypotenuse = 5
Output for script in Listing 3.
Computing length of opposite side with the Google calculator
We could also compute the length of the opposite side using the Google
calculator.
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
Figure 7
.
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
Figure 6
.
(This equation is one of the equations shown in
Figure 7
.)
Looks very close to me
As you can see, the computed value for the opposite side shown in
Figure 6
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
Figure 7
is used to perform the computation.) The output length for the hypotenuse is shown in
Figure 6
, 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
Figure 7
.
<emphasis id="The_cosine_and_arccosine_of_an_angle" effect="bold">
The cosine and arccosine of
an angle
</emphasis>
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 that you have on your graph board, 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.
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 on your graph
board is 0.6. From that, we can determine the value of the angle using either
the Google calculator or JavaScript.
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.
<emphasis id="Listing_4" effect="bold">
</emphasis>
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
Figure 5
. 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
Figure 8
are similar to equations in
Figure 7
. The
difference is that the equations in
Figure 7
are based on the use of the sine of
the angle and the opposite side whereas the equations in
Figure 8
are based on the use of the cosine
of the angle and the adjacent side.
As you can see in
Figure 8
, 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
Figure 9
.
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.
<emphasis id="Listing_5" effect="bold">
</emphasis>
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
Figure 9
, the
output values match the known lengths for the hypotenuse and the adjacent side
for the triangle on your plot board.
<emphasis id="Figure_9" effect="bold">
</emphasis>
Output for script in Listing 5.
adjacent = 3.0000071456633126
hypotenuse = 5
Output for script in Listing 5.
Computing length of adjacent side with the Google calculator
We could also compute the length of the adjacent side using the Google
calculator.
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
Figure 7
and
Figure 8
are
shown in
Figure 10
.
<emphasis id="Figure_10" effect="bold">
</emphasis>
Two very important equations.
opp = hyp * sine(angle)
adj = hyp * cosine(angle)
Two very important equations.
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
Figure 7
and
Figure 8
, 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 the triangle on your graph
board.
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
Figure 10
.
The vertical component is essentially the opposite side of our current right
triangle, and its value can be computed using the first equation in
Figure 10
.
<emphasis id="The_tangent_and_arctangent_of_an_angle" effect="bold">
The tangent and arctangent
of an angle
</emphasis>
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 that you have on your graph board, 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 on 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.
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
graph board is 1.333. From that, we can determine the value of the angle.
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.
<emphasis id="Listing_6" effect="bold">
</emphasis>
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
Figure 5
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
Figure 7
and
Figure 8
,
Figure 11
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.
An exercise involving the tangent
Please copy the code from
Listing 7
into an html file and open it in your
browser.
<emphasis id="Listing_7" effect="bold">
</emphasis>
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
Figure 12
should appear in your browser window. We can see that the values in
Figure 12
are
correct for our 3-4-5 triangle.
<emphasis id="Figure_12" effect="bold">
</emphasis>
Output for script in Listing 7.
opposite = 3.9999851132269173
adjacent = 3
Output for script in Listing 7.
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.
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
<emphasis id="Dealing_with_quadrants" effect="bold">
Dealing with different quadrants
</emphasis>
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.
Another svg file
When you downloaded the zip file named Phy1020.zip using the link given
above
, you should also have found that
the zip file contains a file named Phy1020a1.svg.
The purpose of this file is to make it possible for you to create tactile
graphics for sine and cosine curves using the procedure explained in the earlier
module named Manual Creation of Tactile Graphics at
http://cnx.org/content/m38546/latest/
.
If you have the ability to create tactile graphics, you don't need to
perform the work in the following graph board exercise. However, you should
read about it anyway because that will probably help you to better understand
the sine and the cosine of an angle.
I will get back to tactile graphics after I describe the graph board
exercise.
Another graph board exercise
In this graph board exercise, we will plot a graph of the
amplitude of the sine of an angle on the vertical axis versus the angle itself on
the horizontal.
We will also do the same thing for the cosine. It would be very good if you
could plot one curve on the top half of your graph board and the other curve on
the bottom half of your graph board so that you can easily compare the two.
Interpreting gridline values
Since I don't know how many tactile grid lines there are on your graph board,
I can't tell you exactly how to interpret the grid lines so as to make maximum
use of the space on the board. All that I can tell you is that the vertical
amplitude values for each curve will range from -1.0 to +1.0. We would like to
plot values from -360 degrees to + 360 degrees on the horizontal. You should
interpret the values of the gridlines on your graph board accordingly.
Sinusoidal amplitude versus angle
Please copy the code from
Listing 8
into an html file and open the file in
your browser.
<emphasis id="Listing_8" effect="bold">
</emphasis>
Sinusoidal amplitude versus angle.
<;!-- File JavaScriptZZ.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
Figure 13
should appear in your browser window.
Figure 13
contains the data for two different curves. One is a sine curve
and the other is a cosine curve.
Plot the points using pushpins
You should be able to plots these data values as two separate curves on your
graph board by inserting pushpins at the coordinate values shown and then
connecting the pushpins with rubber bands, pipe cleaners, yarn, flexible wire,
or something similar. (Rubber bands might not work if you are using a homemade
plot board constructed from Styrofoam, because the pins pull too easily.)
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
Figure
16
.
Plot the new points
Every other line of text in
Figure 14
should contain sine and cosine values for
angles that are half way between the points that you already have plotted.
Use pushpins to plot the new points and connect all of the points in each
curve using rubber bands, pipe cleaners, or whatever you find most useful for
this purpose.
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
Figure 15
.
A lot of data points
Once again, every other line of text in
Figure 15
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 pushpins and 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 pushpins and effort
If you are running out of pushpins or 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 graph board space,
pushpins, 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
Getting back to tactile graphics, for the benefit of any sighted person that
may be assisting you,
Figure 16
shows a cosine curve plotted above a sine
curve very similar to the curves that you have plotted on your graph board.
(
Figure 16
shows a mirror image of the actual curves because the file named
Phy1020a1.svg is intended to be used for manual embossing from the back of the
paper.) A non-mirror-image version is shown in
Figure 20
.
This image contains lines that aren't straight, but with a little care,
your assistant should be able to do a reasonably good job of embossing them when
the image is printed as the full 8.5x11 inch version.
Page setup
If you use the IVEO Viewer to print the file named Phy1020a1.svg, you should
use the default Page Setup selection for Letter (Landscape).
Grid lines
The image in
Figure 16
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. (Note once again that
Figure 16
was flipped
horizontally to crate a mirror image.)
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 that you have just plotted, 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.)
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.
Figure 17
contains a
table that shows the sign of the sine, cosine, and tangent values for each of
the four quadrants
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.
<emphasis id="Listing_9" effect="bold">
</emphasis>
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.
Figure 18
shows the output produced by this script.
<emphasis id="Figure_18" effect="bold">
</emphasis>
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
Output from the code in Listing 9.
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
Figure 18
, 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.
<emphasis id="Normal_nonMirrorImage_graphics" effect="bold">
Normal (non-mirror-image) graphics
</emphasis>
Figure 2
and
Figure 16
show the actual mirror image versions of the images
contained in the svg files.
Figure 19
and
Figure 20
show the same images in
their non-mirror-image orientation.
<emphasis id="Run_the_program" effect="bold">
Run the scripts
</emphasis>
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.
<emphasis id="Resources" effect="bold">
Resources
</emphasis>
I will publish a module containing consolidated links to resources on my
Connexions web page and will update and add to the list as additional modules
in this collection are published.
<emphasis id="Miscellaneous" effect="bold">
Miscellaneous
</emphasis>
This section contains a variety of miscellaneous information.
Housekeeping material
Module name: Brief Trigonometry Tutorial
Revised: 07/02/2011
File: Phy1020.htm
Keywords:
physics
accessible
blind
graph board
protractor
screen reader
refreshable Braille display
JavaScript
trigonometry
angle
sine
cosine
tangent
arcsine
arccosine
arctangent
quadrant
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.
Affiliation
: I am a professor of Computer Information
Technology at Austin Community College in Austin, TX.
-end-