Main content
Computer programming
Course: Computer programming > Unit 5
Lesson 6: Angular Movement- Angles and units
- Challenge: Spinning baton
- Angular velocity
- Challenge: Falling boulder
- Trigonometry
- Trigonometric ratios in right triangles
- Pointing towards movement
- Challenge: Turning car
- Polar coordinates
- Challenge: Spiral drawer
- Project: Asteroids spaceship
© 2023 Khan AcademyTerms of usePrivacy PolicyCookie Notice
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:
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";
var angle = radians(60);
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 useMath.PIinstead ofPI?(10 votes)
You can ,but then again you would type more using Math.PI , so I would use PI. :D(5 votes)
Is there adegrees()function that does the opposite of theradians()function?(5 votes)
There is actually a PJS functiondegrees():
https://processing.org/reference/degrees_.html(5 votes)
My spinning baton is not spinning and I don't know why.
angleMode = radians;
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();
};(3 votes)
It's is useless to render the picture, and then apply the transformation function(s).
Transform; then, render.(7 votes)
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(4 votes)- It changes the rotation by that much.
For example:
would wind up rotating the canvas by 90 degrees.rotate(30);
rotate(60);(4 votes)
- How do I slow down the Spinning baton?
I am having some trouble with its rotation.(3 votes)
If you are using radians, you need to understand the system.
Think about it in degrees first, then convert it into radians:
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";)(2 votes)
which unit is translate in?(1 vote)
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.(2 votes)
Khan Academy has a tutorial on 3D shapes in the Advanced JS: Games and Visualizations course:
https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/programming-3d-shapes/a/what-are-3d-shapes(1 vote)
Why should I care about Radians?(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.(3 votes)
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:
angleMode = "radians";
var angle = radians(90);
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.(2 votes)- Would Radians make it so you don't have to use the function translate before rotate? If so, I wish I would of knew that.
draw = function(){
translate(200,200);
rotate(20);
ellipse(0,0,30,30);
};(2 votes)- No, angle measure is independent from the location of the origin. Radians are naturally the correct way to specify angle measures. KA gorked up their rendition of Processing.js by attempting to support degrees, a man-made concept.(1 vote)