Tip:
Highlight text to annotate it
X
This is Coding Math Mini #7, Radians and Degrees.
I've touched on this subject a bit during the early videos on trigonometry, but I thought
it deserved a little more in-depth discussion. For most of the work you'll do with angles
in many languages, you'll need to use radians rather than degrees. Some languages use a
hybrid, such as Flash's ActionScript, which uses radians for most mathematical operations,
but the rotation property of a movie clip uses degrees. In CSS, you specify the units
directly, such as 90deg or 2rad.
Anyway,radians are common enough that you should understand them thoroughly.
The term "radian" comes from "radius". Now you should know what a radius is. If we have
a circle here, the radius is the distance from the center of the circle to the edge.
Of course, a circle is the set of points that are all the same distance from a center point,
so no matter what angle you measure the radius from, it will be the same.
Now, say you stretched a piece of string along the radius here, snipped it off to exactly
that length, and then wrapped it along the edge of the circle here. The string would
now form an arc. The angle of that arc would be one radian.
In degrees, that would be about 57.295 degrees. To get a little insight on that, let's look
at an equilateral triangle. All three sides are the same length, so all three angles are
the same. We know that the angles of a triangle will always add up to 180 degrees, so these
angles must equal 60 degrees each.
Now, if we go back to our 1-radian arc, and we connect this last side to form a triangle,
we see that we have two sides equal, as they are both one radius long. But this last side
is slightly less than one radius, so this angle will be slightly less than 60 degrees.
Right around 57.295 to be a bit more accurate.
Next, let's continue wrapping this string around the circle. Two lengths, and we have
an angle of two radians, or about 114.59 degrees. Three times gives us 171.89. Just a little
bit more gives us 180 degrees. It's actually right around 3.14 or PI radians. And if we
wrap it all the way around to 360 degrees, it's 6.28 or 2 PI radians.
This makes sense when you consider the definition of PI itself. It's the ratio of the diameter
of a circle to its circumference. So, PI = circumference / diameter. Doing some algebra, we can transform
that to circumference = diameter * PI. Now the diameter is basically two times the radius,
so we can say circumference = 2 * radius * PI. or 2 PI * radius. And since the circumference
represents 360 degrees around the circle, and a radius defines one radian, we can say
that 360 degrees = 2 PI radians.
Now, we can create some conversion formulas. Since we know that 180 degrees = PI radians,
we can divide any degree value by 180 and multiply by PI to get radians. So radians
= degrees / 180 * PI.
And some simple algebra transforms that into the opposite formula, degrees = radians * 180
/ PI. I'll add those to our utils library as functions called degreesToRads and radsToDegrees.
I've set up a simple demo file that will draw a shape rotated to a specified angle. This
just translates the drawing context to the center of the canvas, rotates the context,
and then draws a circle and line. So if we want to rotate 37 degrees, for example, we
can convert that to radians by saying angle = utils.degreesToRads(37).
And you see it draws the shape rotated to 37 degrees. Try this with some other angles
to see that it works.
Now, for some common angles, you should know the radian values without needing to resort
to a conversion formula. For example, 0 radians is obviously 0 degrees. 2 PI radians is 360
degrees and PI radians is 180 degrees. You should just know those without thinking about
them.
From there, it's easy to derive that 90 degrees is simply PI / 2 radians and 45 degrees is
PI / 4 radians.
So we can say angle = Math.PI / 4 and that will draw the shape rotated 90 degrees.
Now remember that for canvas, angles will go around clockwise, so if you wanted 90 degrees
counter-clockwise, you could either use -Math.PI / 2 to rotate it in the opposite direction,
or you could just rotate it 270 degrees, which would simply be Math.PI * 1.5 or Math.PI * 3
/ 2.
So that's all for today. Nothing crazy, but hopefully that gives you a little better understanding
of degrees and radians.