A
A
A
A
A
A
A
A
A

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Relative coordinates

The push() and pop() functions of p5js can help us in handling our shapes and position them on screen without having to calculate the individual position of every coordinate for every shape. These functions are used to create local drawing states, for now you can thing of them as local coordinate systems that apply only to the shapes in between these two functions. This notion is quite important and it will come back later when we move into 3D graphics and animation.

When you see a push() and pop() operation you can normally read it as "ok, this person is changing the frame of reference so that the (0,0) positions is somewhere else in the screen now".

Let's look at some practical examples of how this looks like:

Observe how the instruction that draws the ellipse hasn't changed at all, same parameters, yet these two circles are drawn at different positions. The trick is that the translate statement changes the origin of the coordinate system, what we put in translate(x, y) becomes our new (0,0).

The rotate() statement when given only one parameter will rotate our coordinate system by whatever angle we give it.

Let's draw the clock again using push(), pop(), translate(), and rotate().

At first it might seem boringly simple but push and pop have a hidden superpower in that they can be compounded, to create recursive visuals that can be visually quite complex.

Follow the rabbit into the hole 🐰