Hi, welcome to the
second video of Week 4. In this video, we're
going to be learning the notion of push
and pop matrix, which is a very powerful
idea that allows us to temporarily create a
new coordinate system, change the origin or the pivot point we're going
to be working from and then restore the
coordinate system that we come by default. Let's see how this works.
The push matrix operation. Imagine that what this function would do is opens
up a new canvas or creates a new layer on top of your processing or in
your canvas screen. In this point, you
could do translations, we'll see how to do rotations
as well, other things. But you're basically creating a temporary space where the
matrix transformations, meaning the
translations, scales, and rotations are
going to be stored. After the push matrix operator, we can pop the matrix, meaning we can close that
temporary space and say, well, we're going
to restore back the default coordinate space
that we had originally. Between those two lines, push matrix and pop matrix, we can do things like
translate and start working in a new coordinate system and then return to our
default state. Let's see how that would
look. Traditionally, without any push-and-pop matrix, we would have
something like this. We would have a canvas
of 200 by 100 pixels. If we do a rectangle
in the 0,0 coordinate, it would be located in
the top left corner. If we do a push-and-pop matrix, we use it as a
beginning statement. We open a push matrix, we can use something
like translate to change the origin point to a new location and then
draw the rectangle. As we learned, we translate, it would be located at the pivot point where this new translate location
has been established. Once we pop the matrix, that means that we come back to the default where the coordinate 0,0 would be
in the top left corner. Let's see how that
would play out if the rectangle would be drawn
outside the pop matrix. If you see the rectangle is
drawn outside the pop matrix, it would be drawn exactly as if we didn't have
any translate in place. This operation is incredibly powerful because it allows us to temporarily open up
this new coordinate space, do some design work,
some graphics, and there could be a series
of geometries operating under that matrix
transformation. Then when we close it
through the pop matrix line, we basically restore the script to be running the
way we started. This is an incredibly
powerful technique. Let's see how we put it
in place within Python. Here we are again in
our template canvas. Let's start by consolidating this idea of push
and pop matrix. Let's repeat what
we just covered. Let's do a rectangle
at 0,0 and 200, 200. Let's do a field that has a
little bit of transparency, maybe something like that. Yeah, it's still quite visible. You can see a rectangle
on the top left corner. If we would actually do
something like translate, let's say we're going
to move this rectangle, 600 pixels and 300 so that would be in the
center of the screen. We would be locating it in
the center of the screen, and this would be our
new coordinate system. But let's add to that a push
matrix and a pop matrix. At this point, if we run this, it would be exactly the same. The new coordinate
system is on the center. There's no real reason for
this push-and-pop matrix. But let's repeat this line where the rectangle is drawn
outside the pop matrix. We have to translate
the rectangle which is drawn at the center of the screen and then
another rectangle that is drawn outside
the pop matrix. You see that the second
rectangle now it is drawn back at its origin. The new coordinate system of the center of the
screen being 0, 0, it's only in effect between
this line and this line. That's why we talk
about almost a layer, thinking that these few lines represent a new
coordinate system. Within this space,
we could actually do a series of geometries
would be like, again, circles, text, anything. It's really useful
if you're really trying to create, let's say, a figure or something
that it's like a group that you want all
these pieces to move together. Instead of trying to figure out the coordinates
of each one of those pieces independently in wherever you want to
place them in the screen, you just do them
in relation to 0, 0, so that they all
work in relation to 0, 0 but then the translate
allows you to move those series of objects altogether into the location
that you really want them. Let's see how to use this
concept within a for loop, because sometimes it might be counterintuitive of how much can we actually use
this push and pop matrix. Let's do for I in range, and I'm going to
do 0-100 for now, this is good to start. Let's make all the code here within a push
and pop matrix. Let's import the random
function as well. We have import random.randrange. We're going to do
just zero to 1,200, you can put the variable canvas, weight it on canvas
height if you want. Just trying to write
it relatively quickly. We're going to draw always
the rectangle at 0, 0, and let's do only maybe
20 pixels and 20 pixels. It's always going to be at 0, 0, but let's translate to be x, y. We can actually get rid of this second rectangle that
we were using for reference. What's going on here is
that within the for loop, we create a random location. We push the matrix, we translate the matrix, so we change the origin
point to a new location. Let's do two figures so
it's a little bit clearer. We draw a rectangle
and an ellipse from 0, 0, 20, 20. If we want it, we could say the ellipse
mode, it's corner. We're going to draw
a rectangle and an ellipse inside it, and then we pop the
matrix and we start over. We find a random point,
we push the matrix, we translate the pivot point, and we draw these
two figures that we always want them
to be together. Let's see if this is
actually working. As you can see here,
it's actually working, but the graphics
are not very good. It seems to be working. Let's just do a maybe
50 in the field. Hopefully you can
see that we have a rectangle and a
circle inside it. What we could do here is
actually that the ellipse, let's do them without a feel, so maybe stroke and no feel. That's a little
bit more readable. The figure that we're ultimately achieving these two drawings, they're moving always
together because they're drawn in a new origin point. We can do that
infinite number of times with this function,
push and pop matrix. We're always restoring back to a default and next
time we look around, we can create a new
coordinate system. We can certainly use this
technique within a for loop, we could use it without it
and really use it to group a series of elements
that maybe have a similar coordinate
relation to one another, and being drawn in a way
that it's a lot easier than really finding the
right coordinates for them. We're going to be
continuing using push and pop matrix throughout the following videos and
learn how we can actually introduce things like
rotation at scale. I'll see you in the next video.