Moving the Origin

Fortunately, if we want to change where the origin is on the canvas, we have a few functions built in to p5 that let us do just that. For making a 2D Camera that pans left and right, we can make good use of the translate() function.

Translate()

As you already know, the orgin position (0,0) is at the top left of the p5 canvas. Here's a sketch with a red circle drawn at the origin to illustrate.

But the cool thing about translate() is that we can change where this dot is being draw on the canvas without changing the coordinates that it's being drawn at.

To do this, call translate() with two arguments. The first is how the origin moves along the x-axis, and the second argument controlls how the origin moves along the y-axis. By using the arguments width/2, height/2 the circle can move to the center.

But what about push() and pop()?

These functions act as 'bookmarks' of a sort for the translate() function. When push() executes, p5 is remembering where the origin was when the push() function was called. pop() then reverts the origin back to where push() recorded. It's also common practice (but not required) to indent between each push() and pop(). In the example above, using them isn't necessary, but it comes in handy if you want to do a whole bunch of translations in a row.

Animate the translation

The amount of translation that the origin does can also be amiated over time, like so:

By passing the frameCount (the number of frames that the program has completed) into the sin() and cos() functions, we can make the circle revolve around the center of the screen while still drawinging it at (0,0).

Why are you multiplying the framecount by a small number, and the result of sine/cosine by a larger number?

This largely has to do with the scale of sin() and cos()'s inputs. Because their inputs are interpreted as radians (from 0 to about 6.28) counting in full inrements would result in a very fast animation of the translation. (Maybe, you want that, but for most that can be a little over-stimulating.) Sine and Cosine always return values that are between -1 and 1, so in order to makethe area in which the circle moves larger, the resulting value is multiplied by a larger number.

Next steps

Now that you're a little more familiar with doing matrix transformations by using translate(), you're ready to start making a camera for your friend.