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 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—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.

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.
Already have an account?