If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Course: Computer programming - JavaScript and the web>Unit 5

Lesson 6: Angular Movement

Angles and units

In the vectors and forces sections, we carefully worked out an object-oriented structure to make something move on the screen, using the concept of a vector to represent location, velocity, and acceleration driven by forces in the environment. We could move straight from here into topics such as particle systems, steering forces, group behaviors, etc. If we did that, however, we’d skip an important area of mathematics that we’re going to need: trigonometry, or the mathematics of triangles, specifically right triangles.
Trigonometry is going to give us a lot of tools. We’ll get to think about angles and angular velocity and acceleration. Trig will teach us about the sine and cosine functions, which when used properly can yield an nice ease-in, ease-out wave pattern. It’s going to allow us to calculate more complex forces in an environment that involves angles, such as a pendulum swinging or a box sliding down an incline.
So this section is a bit of a mishmash. We’ll start with the basics of angles in ProcessingJS and cover many trigonometric topics, tying it all into forces at the end. And by taking this break now, we’ll also pave the way for more advanced examples that require trig later in this course.

Angles

OK. Before we can do any of this stuff, we need to make sure we understand what it means to be an angle in ProcessingJS. If you have experience with ProcessingJS, you’ve undoubtedly encountered this issue while using the rotate() function to rotate and spin objects.
The first order of business is to cover radians and degrees. You’re probably most familiar with the concept of an angle in degrees. A full rotation goes from 0 to 360 degrees. 90 degrees (a right angle) is 1/4th of 360, shown below as two perpendicular lines.
It’s fairly intuitive for us to think of angles in terms of degrees. For example, the square in the diagram below is rotated 45 degrees around its center.
But sometimes we may find it better to specify our angles in radians. A radian is a unit of measurement for angles defined by the ratio of the length of the arc of a circle to the radius of that circle. One radian is the angle at which that ratio equals one (see the first diagram). 180 degrees = PI radians, 360 degrees = 2*PI radians, 90 degrees = PI/2 radians, etc.
The formula to convert from degrees to radians is:
$radians=2\ast PI\ast \left(degrees/360\right)$
Thankfully, ProcessingJS makes it easy to decide which unit we want to use, radians or degrees, when using the functions that deal with angles, like sin() and atan(). In the Khan Academy environment, the default is degrees, but it can be changed to radians like so:
angleMode = "radians";
In addition, ProcessingJS also provides functions to make it easy to switch between the two units. The radians() function will automatically convert values from degrees to radians, and the constants PI and TWO_PI provide convenient access to these commonly used numbers (equivalent to 180 and 360 degrees, respectively).
For example, the following code will rotate the grid by 60 degrees:
angleMode = "radians";
rotate(angle);
If you're new to rotating shapes in ProcessingJS, you'll benefit from reading through this article on rotation or the entire tutorial on transformations.
What is PI?
The mathematical constant pi (or π) is a real number defined as the ratio of a circle’s circumference (the distance around the perimeter) to its diameter (a straight line that passes through the circle’s center and has endpoints on its perimeter). It is equal to approximately 3.14159 and can be accessed in ProcessingJS with the built-in variable PI, or in any JavaScript program with Math.PI.
This "Natural Simulations" course is a derivative of "The Nature of Code" by Daniel Shiffman, used under a Creative Commons Attribution-NonCommercial 3.0 Unported License.

Want to join the conversation?

• Can't you use Math.PI instead of PI?
• You can ,but then again you would type more using Math.PI , so I would use PI. :D
• Is there a degrees() function that does the opposite of the radians() function?
• My spinning baton is not spinning and I don't know why.

var angle = 3.14;
draw = function() {
background(255);
pushMatrix();
translate(200,200);
fill(127, 127, 127);
stroke(0, 0, 0);
line(-50, 0, 50, 0);
strokeWeight(2);
ellipse(-50, 0, 16, 16);
ellipse(50, 0, 16, 16);
rotate(angle);
angle=angle+3.14;
popMatrix();
};
• It's is useless to render the picture, and then apply the transformation function(s).

Transform; then, render.
• so when I call "rotate" does it change the rotation by that much like a motor, or does it set the orientation to what I put into "rotate" like a servo
• It changes the rotation by that much.
For example:
rotate(30);rotate(60);
would wind up rotating the canvas by 90 degrees.
• Is it just me or do I feel like this is turning into math class and physics class?
• Yeah, that's the problem with simulating nature; you are forced into Physics and the underlying Math.
• How do I slow down the Spinning baton?
I am having some trouble with its rotation.
• If you are using radians, you need to understand the system.
1. Divide the value in degrees (the one you just decided) by 360 degrees (a full turn)
2. Take that value and multiply by 2
3. Take that value and times by pi (which is written as PI in code)
4. Change the unit to radians (done in code with angleMode = "radians";)
• this is off topic but,
i want to know all about making 3d shapes of
ever polygon(including decagon) and making curves like
on a car.
• which unit is translate in?
(1 vote)
(1 vote)
• The short answer is "Because Trigonometry and Calculus may be in your future."

Radians measure angles by distance traveled, which makes it possible to relate a linear measure and an angle measure.
• Can someone help me with Step 2 on the spinning baton challenge? I feel like I'm really close but I'm not sure what I'm doing wrong.

Here is my code:
draw = function() {
background(255);
pushMatrix();
translate(200,200);
fill(127, 127, 127);
stroke(0, 0, 0);
line(-50, 0, 50, 0);
strokeWeight(2);
ellipse(-50, 0, 16, 16);
ellipse(50, 0, 16, 16);
rotate(angle);
popMatrix();
return(200,200);
};
Any help is much appreciated.