For your sketch with Pacman you actually don’t need to think in separate “mouth animation for facing right” and “mouth animation for facing left”. You just make one “mouth animation”. (As it stands, that animation is pointing right, but that’s somewhat arbitrary).
The magic happens when you apply translate and rotate (and push/pop). And as I mentioned, those operations are not intuitive. Let’s brake it down:
So you know about the coordinate system in p5.js, right? The origin (0, 0) is in the top-left corner. The x-axis is pointing to the right. The y-axis is pointing down. This is called the global space.
But now let’s say that you call translate(width/2, height/2) in your sketch. What this does is shift the origin point of the coordinate system from the top-left corner to the center of your sketch (width/2, height/2).
And a similar thing happens if you apply rotate(HALF_PI) in your code. This rotates the whole coordinate system around by 90° (clockwise), around the current point of origin After this command, the x-axis is pointing down and the y-axis is pointing left.
We’ll investigate push/pop later.
[I believe the proper term for what we’re doing here is a matrix transformation, but I’ll leave it to someone more qualified than me to provide details]
Let’s look at our code:
// 1st Pacman, facing RIGHT
arc(50, 50, 80, 80, startAngle, endAngle, PIE); // draw arc/pacman
// 2nd Pacman, facing DOWN
push();
translate(150, 50); // shift the origin point
rotate(radians(90)); // rotate the coordinate system
arc(0, 0, 80, 80, startAngle, endAngle, PIE); // draw pacman AT THE NEW origin point
pop();
At the top, we draw the first Pacman, in the global coordinate system, no changes there. It’s facing right, doing it’s waka waka animation.
The second Pacman is where we utilize the aforementioned transformations to the coordinate system.
translate(150, 50);
This makes 150, 50 the new 0, 0. For the time being, we’re no longer thinking in a global coordinate system, but a local coordinate system.
rotate(radians(90));
This rotates the coordinate system (around the new local point of origin) by 90°. x-axis is pointing down, y-axis is pointing left.
arc(0, 0, 80, 80, startAngle, endAngle, PIE);
The code for drawing Pacman is nearly the same as the first, right-facing Pacman. But why is this Pacman pointing down? Because our coordinate system has rotated. Remember, the first Pacman is pointing towards the global (positive) x-axis direction, i.e. right. This second Pacman is still pointing in the (positive) x-axis direction, but since that axis is locally pointing down – because of the transformations – the Pacman also points down.
But why is this arc()/Pacman drawn at 0,0? Since we’re rotating Pacman by 90° we need to make sure that the rotation point is at his centerpoint. And any rotation transformation is applied at 0,0, so we need to draw Pacman at 0,0 as well.
Now, let’s finally introduce push() and pop().
Push means as mush as “save the current state of the coordinate system”.
Pop means as much as “restore the last saved state of the coordinate system”.
After calling push(), you can apply any transformations to the coordinate system you like. As long as you finish with calling pop(), everything will return back to the global coordinate system again. Push/pop essentially limit the effects of transformations to only what you draw in between them.
