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” Let’s try something simple: rotating a square 45 degrees:
background(255, 255, 255);
fill(194, 194, 194);
noStroke();
rect(40, 40, 40, 40);
pushMatrix();
rotate(45);
fill(0, 0, 0);
rect(40, 40, 40, 40);
popMatrix();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).
