HTML and CSS Reference
In-Depth Information
examples deal with one of the two non-90-degree angles. In this case, when we say “adjacent
,
”
it means
the adjacent leg, not the hypotenuse.
The interesting thing about triangles is the relationships between the measurements of the sides and the
measurements of the angles. These relationships become useful for animation, so let's look at them next.
Trigonometry functions
JavaScript has trigonometry functions for calculating the various triangle relationships: sine, cosine,
tangent, arcsine, arccosine, and arctangent. In this section, I'll define these and the JavaScript functions
for accessing them. Then we get to some real-life uses for these functions.
Sine
Here is your first bit of real-life trigonometry: The
sine
of an angle is the ratio of the lengths of the side of
the triangle opposite the angle and the hypotenuse. (When referring to sine, we always refer to the sine of
an angle.) In JavaScript, you can use the function
Math.sin(angle)
.
Figure 3-8 shows the sine of an angle that is 30 degrees. The opposite leg has a measurement of 1, and
the hypotenuse has a measurement of 2. The ratio is thus one to two, or mathematically speaking, 1/2 or
0.5. Thus, you can say that the sine of a 30-degree angle is 0.5. You can test this in your browser's
debugging console by entering the following:
console.log(Math.sin(30));
Figure 3-8.
The sine of an angle is the opposite leg/hypotenuse.
But that prints out -0.988031624092862, which is not even close. Can you spot the error? We forgot to
convert to radians. You will probably make this mistake on occasion, so get used to looking for it. Here's
the corrected code, with the conversion:
console.log(Math.sin(30 * Math.PI / 180));
Success! That prints 0.5.
