Day 4 – Working with these weird radian things

There are often times that we’re forced to supply angles in radians rather than degrees, here’s one you might recognise:

// startAngle and endAngle must be given in radians!
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

Luckily we can convert between degrees and radians, because one degree is equal to PI / 180 radians:

var one_degree_in_radians = 1 * Math.PI / 180;
var five_degrees_in_radians = 5 * Math.PI / 180;

Conversely, one radian is equal to 180 / PI degrees:

var one_radian_in_degrees = 1 * 180 / Math.PI;
var five_radians_in_degrees = 5 * 180 / Math.PI;

So let’s use this knowledge to create variables that make converting between degrees and radians easier:

// One degree in radians
var TO_RADIANS = Math.PI / 180;
// One radian in degrees
var TO_DEGREES = 180 / Math.PI;
var three_degrees_in_radians = 3 * TO_RADIANS;
var two_radians_in_degrees = 2 * TO_DEGREES;

Nothing can stop us now…

// 360 degree arc
ctx.arc(10, 10, 50, 0, 360 * TO_RADIANS, false);
// Sine, Cosine, etc require angles in radians:
var sineX = Math.sin(90 * TO_RADIANS);

Begone, radians!

6 thoughts on “Day 4 – Working with these weird radian things

  1. I can’t help wondering who on earth uses degrees ?
    Degrees are a nice simplification to introduce kids to trigonometry in junior high. Once you realize the same kids also know about fractions, you can use the real deal.

    Anyways, we are in “Creative JS” land, who cares how many subdivisions of a PI you use as long as it looks cool ?

    • Hi Mathieu, I would expect someone as experienced as you to be extremely comfortable using radians of course! Most lesser people, including me, still think in degrees, and we at CreativeJS are all about demystifying, so hopefully this helps with that! But you’re right of course, – it’d be good to start to think about 90° as π/2 or 30° as π/6. Maybe we’ll save that for a future post?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *