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 4

Lesson 6: Transformations

# Rotation

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);`.

## 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.
• How are you supposed to know how much you have to translate something to make it remain on it's pivot point while rotating?
• Whatever point you translate to will become the new pivot point. Do it like this:
``translate(x, y); //Move to the center of the shaperotate(angle);//Draw your shape at (0, 0)``
• 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!
• You just have to make 1 loop. You don't make two loops
• Is it possible to rotate by a position other than the top left?
• on the color wheel challenge, how do you make the colors on the last step? I am very confused.
• 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??
• 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.
• i'm having a problem with the values of r,g, and b in the last step of the Challenge: Rotation.
• 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;