In this post I will go over the trigonometric ratios in right triangles and how to use those ratios to solve for a side. Because a right triangle has one angle at 90° and two more acute angles, the side directly across from the 90° angle is always the longest. The long side is called the hypotenuse. We also have names for the other two sides but they are relative to each of the remaining acute angles. These sides are called adjacent and opposite. The adjacent side is the one which is touching (or adjacent to) the acute angle. The opposite side is the one directly across from the acute angle.

Let’s look at an example, you can see below that ∠C is our 90° angle so the hypotenuse is AB. If we click ∠A we see that the adjacent side is AC, while the opposite is side BC. Now if we click ∠B we see that the opposite and adjacent sides have swapped but the hypotenuse never stops being the hypotenuse.

Great so now we know what the sides are called, what next? We can use the names to define the trigonometric ratios. There are three ratios for calculating the length of the sides on a right triangle. sine, cosine, and tangent. There’s a great pneumonic we can use to remember these ratios “SOH CAH TOA”. Remember, each ratio is relative to one of the acute angles in the triangle. 

S      O          H
Sine = Opposite / Hypotenuse

C        A          H
Cosine = Adjacent / Hypotenuse

T         O          A
Tangent = Opposite / Adjacent

Now let’s use these ratios to solve for a side in a right triangle. If we know the length of two sides we can use the pythagorean theorem to figure out the length of the last one. But what if we only know the length of one side and the angle of one vertex? Because our trigonometric ratios are relative to a single angle we can solve all of the angles and side lengths with this limited information.

In the right triangle below we are given the value of ∠B and the length of the adjacent, let's solve the hypotenuse:

  1. Determine which ratio we need to use. Because we know the length of the adjacent side let's use cosine as it includes both adjacent and hypotenuse.
  2. Substitute the known values.
  3. Multiply both sides by AB.
  4. Divide both sides by the cosine of ∠B.
  5. Evaluate to determine AB.

Then feel free to change the values of BC and ∠B to see how it changes the triangle. This example isn't 100% accurate but it works as a visual aid.

Now if we want to solve the opposite we could use sine with the hypotenuse but let's use the tangent. It better displays the ability to solve both sides with only one angle and one side:

Congrats, now you know what the sides of a right triangle are called and how to use them in the trigonometric ratios. We also know a jazzy pneumonic to remember the ratios “SOH CAH TOA”. Go forth and solve all the sides!

Fun Note: When I first attempted to use JavaScript to evaluate these ratios my numbers came out all wonky. After a little research I discovered that Math.sin(), Math.cos(), and Math.tan() expect an argument in radians not degrees. As such, some of the first mathematical functions I’ve added to NEWT convert between radians and degrees: 

radToDeg (radians) => radians * 180 / Math.PI;
degToRad (degrees) => degrees * Math.PI / 180;

Afterward: Last time I gave you a rundown of my path to learn WebGL. Since then I’ve made quite a lot of changes to my WebGL toolkit and have decided to name it NEWT. In truth this is largely because I got tired of prefixing every class and function call with WebglToolkit. The new name is an acronym for "Nick's Efficient WebGL Toolkit". While I’m not completely sold on the meaning of the acronym, newts are neat little creatures and 'NEWT' has a certain Harry Potter nostalgia which clicked for me. Most importantly the new name is only four characters which is much less tedious to type than twelve. You may notice that I used the 2D context to create my examples for this post. NEWT really isn't ready to be used for this sort of thing so I fell back to my old jQuery / canvas2D codepen template.