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.