# p5.js Transformations: rotate()

## 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:

```.wp-block-code{border:0;padding:0}.wp-block-code>div{overflow:auto}.shcb-language{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal;word-break:normal}.hljs{box-sizing:border-box}.hljs.shcb-code-table{display:table;width:100%}.hljs.shcb-code-table>.shcb-loc{color:inherit;display:table-row;width:100%}.hljs.shcb-code-table .shcb-loc>span{display:table-cell}.wp-block-code code.hljs:not(.shcb-wrap-lines) {white-space:pre}.wp-block-code code.hljs.shcb-wrap-lines{white-space:pre-wrap}.hljs.shcb-line-numbers{border-spacing:0;counter-reset:line}.hljs.shcb-line-numbers>.shcb-loc{counter-increment:line}.hljs.shcb-line-numbers .shcb-loc>span{padding-left:.75em}.hljs.shcb-line-numbers .shcb-loc::before{border-right:1px solid #ddd;content:counter(line);display:table-cell;padding:0 .75em;text-align:right;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;width:1%}```let angle = 0;

function setup() {
createCanvas(400, 400);
}```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.