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!
{"ft_lang_label":"__label__en","ft_lang_prob":0.66752756,"math_prob":0.97554183,"size":2659,"snap":"2022-27-2022-33","text_gpt3_token_len":587,"char_repetition_ratio":0.15969868,"word_repetition_ratio":0.16957606,"special_character_ratio":0.20270778,"punctuation_ratio":0.0987395,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.9575494,"pos_list":[0],"im_url_duplicate_count":[null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2022-06-26T16:20:47Z\",\"WARC-Record-ID\":\"<urn:uuid:620ad71d-7997-49dc-839d-2fb58aecd8c9>\",\"Content-Length\":\"167705\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:8cc39d4f-8d7e-47ba-884d-356f73dc8200>\",\"WARC-Concurrent-To\":\"<urn:uuid:8b25673c-cd00-4b9d-b614-d64da9cc8a48>\",\"WARC-IP-Address\":\"104.17.212.81\",\"WARC-Target-URI\":\"https://www.codecademy.com/courses/learn-p5js/lessons/p5js-grouping-and-transforming-shapes/exercises/p5js-grouping-and-transforming-shapes-review\",\"WARC-Payload-Digest\":\"sha1:FKTFLXUK4UQUT3XOHAGVW4HICAXV6FWL\",\"WARC-Block-Digest\":\"sha1:MJG4Z3NMR2QOSET2UKASPONGWGSO4C5V\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2022/CC-MAIN-2022-27/CC-MAIN-2022-27_segments_1656103271763.15_warc_CC-MAIN-20220626161834-20220626191834-00496.warc.gz\"}"}