Main content
Course: Computer programming - JavaScript and the web > Unit 4
Lesson 6: TransformationsRotation
In addition to moving the grid, you can also rotate it with the
rotate() function. This function takes one argument, which is the number of degrees that you want to rotate.In the version of ProcessingJS that we use on Khan Academy, all of the functions that have to do with rotation default to measuring angles in degrees, but they can also be configured to measure angles in radians, the standard unit of angular measure. If you want to use radians instead, you can set
angleMode = "radians"; at the top of your program.When we talk about angles in degrees, we say that a full circle has 360°. When we talk about angles in radians, we say that a full circle has 2π radians. Here's a diagram to remind you of the degrees and radians in a circle:
Want to review or learn angular measurements? You can go through our "Angle basics and measurement" here on Khan Academy.
Let's try something simple: rotating a square 45 degrees:
Hey, what happened? How come the square got moved and cut off? The answer is: the square did not move. The grid was rotated. Here is what really happened. As you can see, on the rotated coordinate system, the square still has its upper left corner at (40, 40).
Rotating the correct way
The correct way to rotate the square is to:
- Translate the coordinate system’s origin (0, 0) to where you want the upper left of the square to be.
- Rotate the grid 45° (π/4 radians)
- Draw the square at the origin.
Here's the rotated square program, done the correct way. Notice the difference in the code: this program does
translate(40, 40); and then rect(**0, 0,** 40, 40); in place of just rect(**40, 40,** 40, 40);.This article is an adaptation of 2D Transformations by J David Eisenberg, used under a Creative Commons Attribution-NonCommercial-ShareAlike License.
Want to join the conversation?
Is there a way to reflect a shape? I think this would entail drawing the shape from other corners than just the top left.(78 votes)
Sure, check out thescale()function. You can use -1 as a parameter to flip in a certain direction.
https://www.khanacademy.org/cs/scalex-y/6712922034143232(27 votes)
How are you supposed to know how much you have to translate something to make it remain on it's pivot point while rotating?(15 votes)- Whatever point you translate to will become the new pivot point. Do it like this:
translate(x, y); //Move to the center of the shape
rotate(angle);
//Draw your shape at (0, 0)(20 votes)
I'm having trouble on the Rotation Challenge. On Step 2, it shows a for loop and three blanks. I did that. On Step 3, it shows another for loop with three blanks. When I made that for loop, it says "You shouldn't have to make more than one loop." Please help!(16 votes)- You just have to make 1 loop. You don't make two loops(6 votes)
Is it possible to rotate by a position other than the top left?(4 votes)
on the color wheel challenge, how do you make the colors on the last step? I am very confused.(7 votes)- Me too. It says I'm not supposed to use another for loop. I try a while loop, but I can't seem to do it.(1 vote)
- What do I put in the for loop on the last step of the rotation challenge??(5 votes)
- Before I tell you what I was having trouble with. I will tell you what I wrote. I wrote:
for(r ;g ;b) {
}
I'm having trouble on part 3 because there was a Oh Noes! The Oh Noes said r was used before it was defined, g was used before it was defined, and b was used before it was defined.(3 votes)
i'm having a problem with the values of r,g, and b in the last step of the Challenge: Rotation.(5 votes)
This is what your values should be. I had trouble with that too I think and this helped me pass.
r -= 20;
g += 10;
b += 20;(4 votes)
In the challenge Rotation in the next step...we are having trouble with the rotate and where it should go and what is the counter inside? Thanks!(5 votes)- Is it possible to spin a line?
Like from the centre of the line?(4 votes) 
Why can't you just use 40 and 40 as the rectangles parameters and skip the translation?(2 votes)
As discussed in the article, we have to translate before rotating the rect in order to rotate the rect around its corner. By rotating then passing (40, 40) to the rect function, you are essentially rotating first, then drawing the rect at (40, 40) on the rotated coordinate system; as illustrated, the order of transformations matter.(6 votes)
