If you want to update your Emoji with scaling, translating and rotating shapes, we need to use matrixes. But no worries, you don’t have to understand the math behind matrixes to use them. p5.js has some commands to help you to use these matrixes without having to worry about the math.
When you use the command rotate(1.4); for example, everything that follows that command will be drawn rotated by 1.4 radians.
The rotated emoji (I cheated a bit to make it look like that)
To stop drawing everything rotated, you could change it back manually by calling it again with the same negative value, but p5.js to the rescue. p5.js provides you with a much simpler method to do that.
To influence just a certain area of your code with a command, you will first save the current drawing styles (like fill, stroke and so on) and the current transformations (rotation, translation, and scaling) with the command push();. This will save the current state for you. Now you can rotate, translate and scale as you like. If you call pop();, the state is set back to the one you saved with the last push(); command.
Sounds confusing? No worries, here you have a short video where I explain everything and it will get also more clear in the following parts of this chapter.
You can use nested push() and pop() commands to have several saved drawing styles and transformations.
Now that you understand how to work with push() and pop(), let’s move on to the next topic.