Math for Game Development and WebGL Part 4: Sine, Cosine, and Tangent

Now we’re going to talk about math with triangles and certain measurements and properties of triangles. Also known as, trigonometry. It’s not as scary as it sounds. We already know the Pythagorean theorem, we used it to find the magnitude (aka length) of our vector. It turns out that other properties of triangles are very helpful for dealing with angles and rotating vectors. Before we get into how they are used, I want to show you how to find the sine, cosine, and tangent of an angle in a triangle.

Have a look at this triangle, and the angle in it that has been pointed out:

This is a right triangle, as denoted by the square there in the lower right corner. That means that angle is 90°, or 1/2π radians. The other angle, the one we care about in this case, is 0.64 radians, or 36.87 degrees, and the third angle, while not specified, can actually be easily figured out, because the angles of a triangle must add up to 180° (or π radians). For our purposes we don’t care about that angle, just a little fact to keep in mind.

You may have heard of the trigonometric functions sine, cosine and tangent. These are really just ratios of a triangle from a given acute (less than 90°) corner. To understand how to find these ratios, you need to know the names for the sides of a triangle from a given angle:

You can see the names I’ve applied here. I’ve also drawn an arrow to explain why “opposite” is called opposite. It’s the side of the triangle opposite of the angle in question. The hypotenuse is longest side in the triangle, and adjacent is the side next to the angle that isn’t the hypotenuse. Keep in mind this means that while the hypotenuse is always the same, opposite and adjacent would swap places if we wanted to find these ratios from the other acute angle:

But lets go back to our initial triangle and find these ratios for the given angle. The ratios are defined as follows:

  • The sine of a given angle is the opposite side divided by the hypotenuse
  • The cosine of a given angle is the adjacent side divided by the hypotenuse
  • The tangent of a given angle is the opposite side divided by the adjacent side

This can be memorized by remembering “SOH-CAH-TOA”. If you can remember that “word”, you can remember: Sine=Opposite/Hypotenuse, Cosine=Adjacent/Hypotenuse, Tangent=Opposite/Adjacent

Now lets look at our initial triangle again and actually calculate these ratios. Here’s that triangle again:

So, we can work the math out like this:

sine of    0.64 rads = 3/5 = 0.6
cosine of  0.64 rads = 4/5 = 0.8
tangent of 0.64 rads = 3/4 = 0.75

This is hopefully self explanatory but just to walk through sine, we know that the sine of an angle is opposite over hypotenuse. Opposite is 3, hypotenuse is 5, so the sine of 0.64 rads is 3/5, which is 0.6.

Okay but so what?

You now have these ratios, but why are they useful? Well first try a little experiment. Let’s ignore tangent for now, and try something with just sine and cosine. Try multiplying the sine and cosine by the hypotenuse of the triangle and see what you get:

sine: 0.6 * 5 = 3
cosine: 0.8 * 4 = 4

Multiplying by the hypotenuse, we’ve now gotten back the height and width of our triangle’s sides. Of course this makes sense because all we did to find these ratios was divide those sides by they hypotenuse, so of course multiplying back by the hypotenuse gives us back the height and width.

 

Now, think of the hypotenuse as a vector:

This vector has a magnitude of 5, it’s x position is 4, and it’s y position is 3. We could even make this more obvious by drawing in the triangle:

With this in mind, let’s remember what we learned about the sine and cosine of an angle. If we multiply the sine of an angle by the hypotenuse, we’ll get back it’s height. If we multiply the cosine of an angle by the hypotenuse, we’ll get back it’s width.

Another way to think of this though, is that if you multiply the sine of an angle by a vector’s magnitude, you’ll get back the y component of that vector. And if you multiply the cosine of an angle by the vectors magnitude, you get back the x component of that vector.

Hopefully knowing what you now know about these ratios this seems obvious, but we’ve actually learned something very useful: how to find the x and y position of an angle. And when it comes to rotating vectors, that is exactly what we need! We want to rotate by some angle, and then we need to find out the new x and y positions of those vectors after rotating by that angle.

You might be realizing a problem though. In order to even find the sine and cosine in the first place, we had to already know the x and y positions. If we want to rotate a vector to a new position, we don’t know the x and y coordinates of that new position. Luckily Math.sin() and Math.cos() handle this for us. The reason they can is that the sine and cosine of any given angle is always between -1 and 1. This is because both are divided by the hypotenuse, and the hypotenuse is always the longest side of a triangle. This means that regardless of a triangles size some clever interpolation can be used to find the sine and cosine with just an angle. That means both sine and cosine always put us in the unit circle!

Math.sin(), Math.cos(), Math.tan()

Math.sin(), Math.cos(), and Math.tan() use some clever math to come up with their respective positions in the unit circle when passed an angle. The details of that math are beyond the scope of this post, as I just want you to know what sine, cosine, and tangent are, and how to use them to find vector values. If you want to see how these can be figured from just an angle, you can see this document on the Taylor series.

So this means that if you pass an angle (in radians) to Math.sin(), you will get back the y position of that angle in the unit circle. If you pass an angle to Math.cos(), you will get back the x position of that angle in the unit circle.

Let’s use this to draw a rectangle that spins around the origin. Keep in mind that in html canvas, the origin is the upper left corner, unlike our coordinate system we’ve been seeing where (0, 0) is in the center. To make it more obvious that we are working in the unit circle, I’ve translated the canvas origin to 0,0. Try playing with the rate at which the angle increases and the distance from the unit circle variables.

See the Pen
Rotate square around origin
by Rob Louie (@rlouie)
on CodePen.

So we can rotate now?

Unfortunately…not quite. We can draw something at a given angle now, but that is a little different from changing the angle it’s already at. Any vector already has an angle. If we’re going to rotate that vector we have to change its existing angle by the angle we rotate by. This will be explained in the next post.

Summary

  • Sine, cosine, and tangent are simply ratios of sides of a right triangle
  • Math.sin() will give you the y position of an angle in the unit circle
  • Math.cos() will give you the x position of an angle in the unit circle
  • Using vector multiplication, we can scale up a vector created from Math.sin() and Math.cos() to any size

Further Study

Unit Circle

Sine, Cosine, Tangent