p5.js Transformations: rotate()
Objectives and Overview
Lesson Objectives
Rotation in p5.js
Let’s take a look at rotate(). This is an incredibly powerful transformation but it requires understanding translate() before using. This lesson also introduces push() and pop(). These functions can be thought of as save and restore. You can bracket a transformation inside push() and pop() and essentially isolate the transformation from the rest of your sketch. This will become clearer as you practice, so let’s jump in!
Introducing rotate()
The rotate() function rotates your shapes along a specified axis. This is a basic yet highly effective motion graphic tool. There are two points that you need to consider before using rotation. The first is that if you want to rotate your shapes you must also use translate() first! This may seem strange at first, but it’s a crucial step. Second, you’ll need to specify an angle of rotation.
Take a look at this animation of an example rotation. The pink rectangle is rotating around a set point. This point is specified with translate() before the rotation starts.
If you were to only specify rotate(90) in your code, the shape would rotate a single time. For this reason, you need to create a way for the rotation angle to update. Fortunately, you’re able to tap into the refresh rate in the draw() function to do this! Let’s look at some code.
Rotation: Code Breakdown
For this section, the code will be explained in chunks since there are lots of important connected concepts. Let’s start by examining the global space and the setup() function:
Creating a Global Variable and the setup() Function:
let angle = 0;
function setup() {
createCanvas(400, 400);
angleMode(DEGREES); //tell p5 to use degrees instead of radians
}Code language: JavaScript (javascript)P5 supports two angle measurements: radians (default) and degrees. Since rotation uses the angle as a parameter, you’ll need to include this value. However, by default p5 uses radians as the angle measurement instead of the more familiar degrees.
While it’s beneficial to understand the relationship between the two, for now, you’ll be using degrees. This requires one extra line of code to be placed in the setup() function of your sketch:
angleMode(DEGREES); Once this line of code is included in the setup, you’ll be able to specify rotations using degree values instead of radians! In the above code, this is included in the setup() function so that any rotations used in the sketch can be interpreted as degrees. Note that DEGREES must be in all caps.
The angle is stored in the global variable named angle. This is important as it’ll be used to constantly pass an updating value into rotate().
The draw() Function:
background(0);
translate(100, 100); //set the new origin/point of rotation
rotate(angle);
fill(255, 0, 100);
rect(0, 0, 50, 50);
angle = angle + 1;
}Code language: JavaScript (javascript)The first line is familiar – you’re setting the background to black. Next, translate(100, 100) is used to set the new origin to x:100, y:100. Remember, from this point forward in the sketch (0, 0) refers to (100, 100).
Next is the new command, rotate(). Since the angleMode() is set to degrees for this sketch, the value of angle that’s passed into rotate() will be a degree. The angle global variable is now passed into rotate(), and the shape rotates by the angle amount. Remember, the angle variable is constantly updating because of the angle = angle + 1 at the end of the draw function.
Bonus Question: What do you think would happen if you removed this line of code? Try to predict it and then test it out!
Rotation Around the Shape Center
You’ve now likely noticed that the shapes rotate around a specific point of origin. In the examples, this was the top left corner of the rectangle. This is the default behavior for rotation, but there is a way to change it! It’s likely that you’ll want your shapes to rotate around the center, so let’s take a look at how to do that.
Introducing rectMode()
Just like angleMode() sets degrees or radians, rectMode() modifies the location that the rectangle is drawn from. The default mode is rectMode(CORNER) and parameters passed into rect() are set to draw from the upper left corner. This is how rectangles are drawn unless you tell p5 otherwise.
However, if you change this to rectMode(CENTER) the first two parameters passed into rect() will be set as the center of the rectangle. Note that CENTER must be in all caps. Let’s look at an example:
function draw() {
background(0);
translate(100, 100); //set the new origin/point of rotation
rotate(angle);
fill(255, 0, 100);
rectMode(CENTER);
rect(0, 0, 50, 50);
angle = angle + 1;
}Code language: JavaScript (javascript)The only change from the previous code is the addition of rectMode() before the rectangle is drawn. Run this code and you’ll be able to see the difference between the two rotating rectangles.
If you know that you’re going to be drawing lots of rotating rectangles and you want them all to be drawn from the center, you can put rectMode(CENTER) in the setup() function of the sketch instead of inside the draw() function. The most important thing is that it is in the code before drawing any rectangles, otherwise, they’ll default to being drawn from the upper left corner.
Rotation: Key Tips
Shapes rotate around the point of origin. To program rotations, you must also set the origin with translate(). This will be the point that your shape rotates around. In the animation in this lesson, translate(100, 100) sets the origin to a x-value of 100 and a y-value of 100. This is also the point of rotation for the rectangle. You can see that the rectangle rotates around its upper left corner, which has a (x, y) coordinate of (100, 100).
Troubleshooting Tip: If your rotations aren’t behaving the way that you thought they would double-check that you’ve included angleMode(DEGREES) in the sketch’s setup function.
Additional Resources
If you want to expand your understanding of how p5 handles angles, here are some additional resources from the p5 Reference: