Learn how to translate, rotate, scale, and shear shapes using grouping and transforming functions.

Grouping and Transforming Shapes

Interesting and complex sketches can be created when you combine the `translate()`, `rotate()`, and `scale()` functions. 

When you apply multiple transformations, the order makes a big difference. A `translate()` followed by a `rotate()` then a `scale()` function will not create the same results if the order of operations were changed. 

Look at the code below to see how each transformation functions are pieced together to create the animation of a rectangle, placed in the middle of the canvas, rotating from its center.

```js
rectMode(CENTER);
translate(width/2, height/2); 
rotate(radians(frameCount)); 

fill(255,0,0);
rect(0, 0, 100, 100);
```

![Rotating a Shape From its Center](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/rotate_from_center.gif)  

Now, let's change the order of operations. This time, we call the `translate()` function before the `rotate()` function. Everything else will remain the same, but notice how the resulting animation is wildly different. 

```js
rectMode(CENTER);
rotate(radians(frameCount)); 
translate(width/2, height/2); 

fill(255,0,0);
rect(0, 0, 100, 100);
```

![Rotating a Shape](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/rotate_from_center_2.gif)  

As you can see that the rectangle rotates from the upper left corner of the canvas in this new version. The rectangle is still translated to the center of the canvas, but only after the `rotate()` function has been applied. The rectangle leaves the canvas for a time because the rotation is happening at the default origin of the canvas at its top-left corner.

Using Combinations of Transform Functions

Rotating an element in p5.js means rotating the canvas from its top-left corner at (0, 0). Therefore, all the elements drawn on the coordinate system rotates together with the canvas.  
 
The diagram below shows that the coordinate system is being rotated, along with the rectangle drawn on the canvas. The red rectangle shows the original location, while the gray rectangle shows its positions when rotated. Notice how the gray square goes off the canvas. This happens because the shape is situated on the rotating p5.js coordinate system.

![Example of how rotation works in p5.js](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/rotation_grid_5.gif)  

You can rotate the canvas using the `rotate()` function:
    
```js
rotate(angle);
```

The `rotate()` function takes one argument&mdash;the angle of rotation represented by the `angle` variable in the above code. By default, the angle of rotation is interpreted as a [radian](https://en.wikipedia.org/wiki/Radian) value&mdash;a unit of measuring angles. A single rotation, or a full circle, has 360° in degrees or 2π (6.28) in radians. A half rotation has a 180° in degrees or π (3.14) in radians.   

![Rotation in Radians and Degrees](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/rotation_radians_2.jpg)  

p5.js provides representations of pi (π) values, which you can use by spelling out the words like below:
* π = `PI`
* π / 2 =  `HALF_PI`
* π / 4 = `QUARTER_PI`
* 2 π = `TWO_PI`

The code below shows how you would pass in the `PI`, `HALF_PI`, `QUARTER_PI` or `TWO_PI` value to the `rotate()` function:

```js
rotate(HALF_PI);
``` 

You can also convert a degree value into a radian value by calling the `radians()` function. For example, `radians(180)` would equate to `3.14`, the equivalent to one π. It is possible to use the `radians()` function inside the `rotate()` function. 

```js
rotate(radians(180));
```

Alternatively, you can specify the unit of measurement of angles by calling the `angleMode()` function. Similar to how you set the `rectMode()` and `ellipseMode()` to change the shape's origin, the `angleMode()` determines if the value inside the `rotate()` function is interpreted as either degrees or radians. 

You can set the mode to `DEGREES` by writing:

```js
angleMode(DEGREES);
```

You can also specify the mode to be `RADIANS`, but keep in mind that the default mode for angles and the `rotate()` function is already `RADIANS`.

```js
angleMode(RADIANS);
```

Rotate

As we have seen in the previous exercise, the `rotate()` function on its own is not enough to rotate a shape around its center. When we `rotate()` an element, it often moves off the screen because the whole p5.js canvas is being rotated. In order to rotate a shape around its center, you first need to `translate()` the shape to be in the middle of the canvas. 

```js
// Move the origin to the center of the canvas
translate(width / 2, height / 2);
```

Then, you need to rotate your shape to the desired radian value. You can use the `radians()` function to convert the value passed to the `rotate()` function is in radians. In the example below, we use the p5.js `frameCount` variable to get the shape to rotate incrementally. 

```js
// Rotate by frameCount radians 
rotate(radians(frameCount));
```

Lastly, you need to draw the shape and set its origin point to be at the `CENTER` of the shape. 

```js
// Set the origin point to be the rectangle's center 
rectMode(CENTER);
rect (0, 0, 1, height); 
```

In order to rotate a shape around its top-left corner, you can set the mode to `CORNER` instead of `CENTER`. Since `CORNER` is the default origin point for drawing rectangles, you don't need to explicitly call the `rectMode()` function. The two code examples below would produce the same result&mdash;a rectangle rotating around its top-left corner.

```js
// Rotates from rectangle's top-left corner
rectMode(CORNER);
rotate(radians(frameCount));
rect (0, 0, 1, height); 

// Also rotates from rectangle's top-left corner because rectMode() is CORNER by default
rotate(radians(frameCount));
rect (0, 0, 1, height); 
```

The diagram below shows the difference between rotating a shape with a `CORNER` versus a `CENTER` origin point. 

![Rotating from the Corner Versus Center](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/rotation_from_center_corner_3.gif)  

Remember that the values for the transformation functions are accumulative. For example, the values passed into the first `rotate()` function will be added to any of the `rotate()` functions that are called afterward. 

Rotate Around a Shape's Center

Previously, we learned how to directly edit the shape's style and position. However, there are instances when you may want to change the appearance of a shape without altering its original form. With grouping and transformation functions you can translate, rotate, scale, and shear shapes without changing the code of the shape functions. It is possible to do this because the transformation functions modify the coordinate system of the p5.js sketch, not the shape itself. Understanding these grouping and transformation concepts will show you new ways to create dynamic p5.js sketches!  

By the end of this lesson, you will be able to: 
* Change the origin point from which the shape is drawn from.
* Change the location of where the shape is drawn without editing its code. 
* Rotate a shape by rotating the p5.js coordinate system. 
* Rotate a shape around its center point.
* Transform a shape's size without editing its code.
* Shear a shape.
* Isolate styles and transformations using `push()` and `pop()`.
* Combine multiple transformation functions to create intricate animations.



Introduction

Great job! In this lesson, you learned how to alter shapes by using transformation functions, such as `translate()`, `rotate()`, `scale()`, and `shear()`. You also learned how to group style and transformation functions with `push()` and `pop()`. 

Let's take a moment to review everything we have covered:
* The `rectMode()` function specifies the origin point from which the rectangle is drawn. 
* `rectMode(CENTER)` specifies that the x and y coordinates passed into the `rect()` function are for the rectangle's center. 
* `rectMode(CORNER)` specifies that the x and y coordinates passed into the `rect()` function are for the rectangle's top left corner. If you don't specify the `rectMode()`, p5.js will automatically assign the origin of rectangles to be the `CORNER`. 
* The `ellipseMode()` function specifies the origin point from which the ellipse is drawn. 
* `ellipseMode(CENTER)` specifies that the x and y coordinates passed into the `ellipse()` function are for the center of the shape. If you don't specify the `ellipseMode()`, p5.js will automatically assign the origin of ellipses to be `CENTER`.
* `ellipseMode(CORNER)` specifies that the x and y coordinates passed into the `ellipse()` function are for the top left corner. 
* The `translate()` function changes the origin of the p5.js canvas to the coordinates passed to the function. 
* The `rotate()` function rotates the p5.js coordinate system, not a specific shape. The `rotate()` function requires one argument&mdash;the angle for rotation in radians. 
* The `radians()` function converts a degree measurement into radians. 
* The `angleMode()` function changes whether angle values are interpreted as `RADIANS` or `DEGREES`.
* The `scale()` function sets the size of the p5.js canvas and all the elements on it. Scale values are written in decimal percentages. 
* The `shearX()` function horizontally angles a shape by the amount specified in the argument. 
* The `shearY()` function vertically angles a shape by the amount specified in the argument. 
* The `push()` function saves the current drawing styles and transformations. The `pop()` function restores it back to the settings that were in effect prior to the most recent call to `push()`.
* The order makes a difference when combining multiple transformations. 

Review

There are two ways to move a shape across your canvas. Let's say you wanted to move your rectangle 60 pixels right and down, you can add 60 pixels to the x and y coordinates given to the `rect()` function. For example, `rect(0, 0, 100, 100)` would change to `rect(60, 60, 100, 100)`. This is how we've been drawing and positioning shapes so far.

Another method is to move the p5.js coordinate system itself instead of moving the shape. The `translate()` function does exactly this&mdash;it changes the (0, 0) origin of the p5.js coordinate system to be the location specified as the function's arguments. 

For example, `translate(60, 60)` will move the coordinate system 60 pixels to the right and 60 pixels to the bottom. The first argument in the parentheses represents the amount of pixels to move along the x-axis. The second argument represents the amount of pixels to move along the y-axis.   

Both ways would change the position of your shape, but the main difference is that instead of moving the shape itself, the `translate()` function moves the entire sketch's coordinate system to the new position specified within the parentheses.  

The diagram below shows the rendering of `rect(0, 0, 140, 140)`. As you can see, the shape's origin point is at (0, 0).

![Example of Shape with translate(0, 0)](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/rect_no_translate.png)  

Notice what happens to the rectangle when you apply `translate(40, 40)` to it. The rectangle moves `40` pixels right and down without having to change the x and y arguments for the `rect()` function&mdash;the first and second arguments of the `rect()` function remain at (0, 0). 

```js
translate(40,40);
rect(0,0,140,140);
```

![Example of Shape with translate(40,40)](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/rect_once_translate.png)  

Keep in mind that transformation functions, like `translate()`, accumulate. This means that the x and y values given to a second `translate()` function will not represent the exact position of the new origin. Instead, the values inside the first and second `translate()` functions will add up to become the new position. 

In the diagram below, you can see that while the second rectangle is translated by 160 pixels to the right and the bottom, the top-left corner of the shape is not at the x and y coordinate of (160, 160). This is because the second translation by 160 pixels to the right and the bottom is added onto the first translation by 40 pixels to the right and the bottom. Together, this adds up to set the new origin at the coordinates (200, 200). 

```js
//First rectangle is at (40, 40)
translate(40,40);
rect(0, 0, 80, 80);

//Second rectangle is at (200, 200) because translate() accumulates
translate(160,160);
rect(0, 0, 80, 80);
```

![Example of multiple translations](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/rect_double_translate.png)  

The main benefit of the `translate()` function is that the shapes become independent of the position. This means that you can reuse the code for a shape multiple times to be drawn in various locations without having to assign new x and y variables for the shape functions. 

Translate

Isolating transformations is very helpful when you have multiple elements that you want to transform individually on a canvas. As we have learned, all transformation functions accumulate&mdash;this is where the `push()` and `pop()` functions come in handy. By surrounding code blocks with the `push()` and `pop()` functions, you can isolate transformations to be applied to targeted elements and not affect any elements that come after it. 
 
The `push()` function saves the current style settings and transformations, while `pop()` restores it back to the original settings. 

The example code below shows how the `push()` and `pop()` functions can be used to contain style and transformation functions for a particular shape:

```js
push(); 
translate(30,50);
fill(255, 0, 0);
rect(0, 0, 100, 100);
pop();
``` 

Keep in mind that every `push()` needs a `pop()`! Also notice how the `push()` function always comes before the `pop()`. Sandwiched in-between `push()` and `pop()` are any style and transformation functions intended for one shape, but not for another.

Notice in **pushpop.js** on the right, we are able to isolate all three rectangles using `push()` and `pop()`.

Push and Pop

The origin of the shape determines which point the shape is transformed from. For example, some built-in p5.js drawing functions, such as `rect()`, are oriented around the upper left corner of the shape&mdash;but you can always change your shape's origin point.

The `rectMode()` and `ellipseMode()` functions allow you to modify the location from which the shape is drawn by changing how the x and y arguments passed to `rect()` and `ellipse()` functions are interpreted. 

When the `rectMode(CENTER)` function is called, the x and y coordinates passed to the `rect()` function changes to represent the center of the rectangle, instead of the top left corner. 

The code below shows how to specify a rectangle's origin point to be its center:  

```js
rectMode(CENTER);
rect(200, 200, 250, 250); 
```

Here, the first argument of the `rect()` function represents the x position of the origin point, which is now the horizontal center of the rectangle. The second argument, which represents the y position of the origin point, is now the vertical center of the rectangle. Since p5.js reads the code from top to bottom, the origin of a shape should be determined before the shape is drawn. 

The diagram below shows that the rectangle's origin point is now in the center of the rectangle. 

![Example of rectMode(CENTER)](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/rect_mode_center_2.png)  

With `rectMode(CORNER)`, the x and y coordinates passed into the `rect()` function represents the rectangle's top-left corner. If you don't explicitly call `rectMode(CORNER)`, p5.js will automatically assign the origin to be the `CORNER`.

```js
rectMode(CORNER);
rect(20,20,250,250);    
```

The above code will produce the same results as the code below, which draws the rectangle without specifying the `rectMode(CORNER)`. Both examples result in the rectangle having a top left corner orientation.

```js
rect(20,20,250,250);    
```

![Example of rectMode(CORNER)](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/rect_mode_corner_2.png) 

In p5.js, ellipses are automatically drawn from the shape's center. The first and second values that are passed to the `ellipse()` function represent the x and y coordinates of its center point. 

The code below explicitly calls `ellipseMode(CENTER)` which keeps the ellipse's origin point at the shape's center.

```js
ellipseMode(CENTER); 
ellipse(200,200,250,250); 
```

Above code will produce the same results as the one below, which draws the ellipse without specifying `ellipseMode(CENTER)`.

```js
ellipse(200,200,250,250); 
```

![Example of ellipseMode(CENTER)](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/ellipse_mode_center_2.png)

You can also change the ellipse's origin to be from its center to its top-left corner by giving `CORNER` as the argument of the `ellipseMode()` function. When you use `ellipseMode(CORNER)`, the arguments for the x and y positions given to the `ellipse()` function will represent the top-left corner of the bounding box of the ellipse. 

```js
ellipseMode(CORNER);
ellipse(25,25,250,250); 
``` 

![Example of ellipseMode(CORNER)](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/ellipse_mode_corner_3.png)

Origin

`scale()` is another function that transforms the p5.js coordinate system. As shown in the image below, you can see that the `scale()` function changes the size of the coordinate system as well the elements placed on it.  

![Example of how the scale function works](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/scale_graph.jpg)  

Notice how the size of the shape's strokes also gets larger. This is because `scale()` enlarges the whole p5.js coordinate system, not just the shape. In a sense, the `scale()` function is like zooming in and out of the canvas. 

The `scale()` function can take two arguments but must have at least one to represent the percentage amount for scaling the canvas. Scale values are written in decimal percentages. For example, `scale(2.0)` multiplies the size of the coordinate system and all of its elements by 200%. The default scale for the p5.js canvas is 1.0 or 100%. 

```js
scale(s, y);
```

Let's take a closer look at the syntax above:
* `s` represents the percentage value to scale the canvas. It is also the percentage to scale the canvas along the x-axis if the second `y` argument is given.
* `y` can optionally be given to represent the percentage value to scale the canvas along the y-axis.
   
Similar to the `rotate()` function, if you want to scale a shape from its center, you would need to set the origin point of the shape to `CENTER`. In the image below, you can see the difference between scaling from a shape's `CORNER` versus its `CENTER`. 

![Scale from Corner Versus Center](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/scale_corner_center.jpg)  

Scale

Shear functions skew a shape in a specific direction. The shape is sheared by the angle amount specified as the function's argument. In p5.js, shapes are sheared in a clockwise direction. If the angle value is negative, the shape will shear in a counter-clockwise direction. 

The image below shows a rectangle being sheared in both the x- and y-axis with angle values ranging from positive to negative.

![Shearing a Shape Horizontally and Vertically](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/shearX_and_Y.gif)  

The `shearX()` function angles a shape around the x-axis by the amount given as its argument. The below code horizontally shears the rectangle by 0.5 radians.

```js
shearX(0.5);
rect(100, 100, 150, 200);
```

The image below shows a rectangle sheared along the x-axis. 

![Shearing a Shape Horizontally](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/shearX_1.gif)  


The `shearY()` function angles a shape around the y-axis by the amount specified as the argument. The below code vertically shears the rectangle by `QUARTER_PI` radians.

```js
shearY(QUARTER_PI);
rect(100, 100, 150, 200);
```

The image below shows a rectangle sheared along the y-axis. 

![Shearing a Shape Vertically](https://static-assets.codecademy.com/Courses/Learn-p5/grouping-transforming-shapes/shearY_1.gif)  

Note that the arguments of the `shearX()` and `shearY()` functions are interpreted in radians by default but can be changed calling the `angleMode()` function before a shear function is called.