Learn
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 therect()
function are for the rectangle’s center.rectMode(CORNER)
specifies that the x and y coordinates passed into therect()
function are for the rectangle’s top left corner. If you don’t specify therectMode()
, p5.js will automatically assign the origin of rectangles to be theCORNER
.- The
ellipseMode()
function specifies the origin point from which the ellipse is drawn. ellipseMode(CENTER)
specifies that the x and y coordinates passed into theellipse()
function are for the center of the shape. If you don’t specify theellipseMode()
, p5.js will automatically assign the origin of ellipses to beCENTER
.ellipseMode(CORNER)
specifies that the x and y coordinates passed into theellipse()
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. Therotate()
function requires one argument—the angle for rotation in radians. - The
radians()
function converts a degree measurement into radians. - The
angleMode()
function changes whether angle values are interpreted asRADIANS
orDEGREES
. - 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. Thepop()
function restores it back to the settings that were in effect prior to the most recent call topush()
. - The order makes a difference when combining multiple transformations.
Instructions
Take a look at sketch.js.
Play around with some of the values and functions. Notice what happens when you remove and add back in the push()
and pop()
functions. Tweak the rotation value inside the rotate()
functions. See how these edits change the animation!
Take this course for free
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.