Welcome to this new lesson. We're going to be starting
to understand how do we access information
in a grid structure. Let's look at this example. In this example, we have a grid that has been
created using a list, which is a one dimensional list, and you can see that
the distribution of the index numbers
goes until we reach, in this case, three,
which is the number of columns that we have,
and then we continue. If we select, in this case, the index 5 we
will get number 7. What we're trying
to understand here is what is the
relationship between the index number and how the index is mapped
throughout the grid. This definitely
changes depending on the grid structure
that you're using. If you're using a
nested structure, as we've seen in
previous videos, the way in which we access
that information is different. The one thing I want you
to start considering is the operations that
we could start doing, and we're going to
talk more about this, which is neighbor operations. But starting to think, well, if the index 5 is number 7 here, perhaps we can start thinking
that the adjacent elements or entities are whatever
number we're considering, the index minus one
or an index plus one. Here we mentioned
this has exceptions because when you are
in the number 4, for instance, your
neighbor to the left will not be a minus one which
would be in this case 12. This formula that we're
starting to see here, that's not really
apply all the time, especially with entities that might not have
neighbors to the left. But it's important that we start understanding that the
index of an entity, a piece of data, has
adjacent neighbors because we're going
to start seeing algorithms that use
those properties. Let's look at an example where we actually have a nested list. In the case of a nested list, we actually have the index of the first order of the list, 0, 1, so basically
zero on the first row, one on the second
row, and so on. Then we actually can
see the second index, so we have two
indices denotating basically the element that
we're actually achieving. It's actually a little
bit more straightforward. The element 1, 1 here
is the entity number 7. You see that the index
information changes and we need to be aware of what is the data
structure are we using? How is that index information is being mapped to the grid in order to achieve and get the
result that we really want. Similarly, neighbor
operations when we're looking at a nested list
will also change. We will start again. We have the exceptions,
which is something that we're going to look
in future videos. But we actually can't
start looking into the horizontal
neighbors left and right by considering the n+1, basically the index
plus one or minus one. Let's look at some piece
of data as colors. We've been using colors
as hexadecimals, but we also can
use colors as RGB, as we've been discussing. If you have a flat
list, as we see here, if we want to retrieve this
particular information, this color on this location, the location number 5, we use that in the index. It's important that
we're aware of how this index information
is mapped. Let's move into processing and do an example where
we're going to start utilizing the index
information for a design. We're going to jump into
processing and we're going to start by creating a random grid, or a grid of random colors, and we're going to try
to move quickly through this part of the code, as you probably are familiar
with this material already. Let's create some variables to create the size
of the Canvas. We're going to use image size. I'd like to parameterize
those variables, meaning create
variables for them, just because we can use that to identify and create
the grid later. Let's make sure that
things are running. Here we go. We have
a black background. If you want to make
it a different color, by all means, you can do so. What we want to do is define the resolution of the grid that we're
going to be creating. Let's do 100 units in x and resolution in y
we're going to do 50, sorry, this should have
been 1,200 I wanted to have a relationship between
2-1 something horizontal. Then a similar relationship
for the grade, so that we can actually
end up with squares. We also are going
to start a list. Let's do my position list. This is going to
be an empty list. What are we going to store here? We are going to store positions just because we
want to make a difference between understanding what is an index position and the
actual position of an entity, a piece of data in the grid. I think that that's an
important lesson to take home. Let's just start
creating a grid. We can actually define
resolution, that's 50. We can also define a cell size. The cell size is going to be
a result of a calculation. Let's do a cell size in X, and we're going to
start with a zero and so this is going to
be a placeholder. Cell size in Y, also at zero. The next thing we need is
calculate the cell size. The cell size is
something that we want to be a division between the size of our grid or our canvas divided
by the resolution. If you think of
the size 1200/100 that's going to give
us the cell size in X. We can do exactly the same
thing for our cell size in Y. Let's just divide the
size of the screen by the resolution of
the green in order to cover the grid or the screen completely with the entities that we're
going to be drawing. The next step would actually
be create a nested loop. We're going to do
for I in range. Here we want to use zero
the resolution in x. That's our first loop
we're going to do. Let me just create a
little bit of space here. Feel free to go back in
the video if you want to backtrack into certain
areas of the code that might not be visible
for J in range, let's do another loop. We have a nested loop
structure and at this point we could create entities within, or we basically
can create points. What we're going to do
is create a position in X that's going to
define one entity of the grid and we're
going to define that to be the position in X. We need to calculate
it and it needs to be right, because
we're counting, if you think about
representing the rows, we start zero up to 100. We're going to use that
as a coordinate in Y, but we also want to multiply
that by the cell size. Which in this case has been a value identified by the
division of the screen, by the resolution of the green. That's going to be our
equation for the position in x and we're going to do the same thing
for the position in Y, but this time we are
going to do it with J. All right, let's
just do a rectangle. Let's do some geometry that we could start
visualizing this because it's sometimes unclear what we're doing until we
really draw it in the screen. Let's do a rectangle
that we use, these positions,
position x, position y. Let's do a small
rectangle of 10 by 10. Obviously, we want to use
our cell size for that. Let's do a feel
for it to be red. There we go. I think
this could work. What are we missing? Okay. So we found this small mistake here. There was a typo here
in cell_size_y not j. So let's just see what we're
getting at this point. So we are getting a grid, so we have 100 units in x, we have 50 units in y. And we're creating
a rectangle in the position x and position y. If you see here, the position is identified
by the for loop that we're using and multiplying
by the cell size. If we want to make the size exactly so that
there's no gap between them, we will use the cell size. We could use cell size
x and cell size y. All right. So obviously at this point
we shouldn't see any gaps, the only thing that
we're actually seeing is the border of the rectangle. So that's quite nice. If you want to get
rid of that border, obviously you wouldn't
just see a solid red box. But you could say hear
like something like no stroke or no stroke,
just like that. Let's just see that. Let's keep it like that but I would like to switch the color, the coloration of the cubes to be a random color. Let's just create some
variables for that. And so let's do the color, the channel red it's going to be random and the range
between 0-255. The important thing
here would be if we're going to use
the random module, we definitely need
to go all the way to the top here and import random, because otherwise that's
not going to work. I just wanted to
make sure that we included the random module up there and we created a
variable for a red channel. Let's create a variable
for the green. I'm going to do three
copies of that, so green and blue. And now we can use
these random colors, random red, random
green, and random blue. What we have right now is
greed of random colors, right? We haven't stored anything
into our list yet. So we could do that
and we will do that at the very end or it doesn't matter in
which part of this list, we certainly want
to store a topple that will include the
position x and position y. Let's just do our list. If you remember, the
way in which we include something to that list
is the append command. Append, and basically
within the parentheses, we need to say what we
want to include and here because we want
to include a topple, that is the position
we will include position x, position y. We can then run making
sure that that is, well, we're having
an error here. Let's see what are we missing. I'm forgetting a
parentheses here. There we go. Everything
remains the same, but we actually are storing
everything in the list. Now, if we wanted
to make sure we can here print the list, make sure not to print it, don't print it
within the for loop. I'm trying to make sure
that we outside the for loop to print the
contents of the list. And you see here that we have stored all the
coordinates of our grid. But here's an important
first reflection in a way, I want to make a
differentiation between the index coordinate and this entity here would be
index zero, all right? But its actual coordinate
will be 0,0 index. We could address entities in
this list through its index, the position that they have
in the list or through their actual
physical coordinates within the world coordinates. That's why we're actually
storing the positions. Those two things are
different and I think that it's important
to take note of that. Again, I'm going to leave that line there in
case you want to just print the content of
the list, you can do so. What are we going to do next? We're going to move to start deleting
entities of the list. Now we created the list, we have the perfectly
randomized grid array. You can certainly play
with the resolution size. You can change those
numbers here if you want to have something less dense. It's very flexible this code to allow for
different variations, but I'm going to keep the 100, which I think works pretty well. Let's just go into
our draw function so that we can gradually, over time, maybe
every so many frames, we delete an entity
from the list. We're going to do
a draw function. Here let's just first of all draw a rectangle or
basically an entity such as, let's do a circle or an
ellipse or a rectangle that would be positioned on top of
some entities in the list. We can just maybe move it
around and understand how do we access that information. Let's do a new position x. This is going to be a
variable that we will use to access an entity, so let's use the list to
access and we're going to access the array information. Here we could say if we want to access the first element of the list that would give
us a coordinate x and y. If we want to access the x
component of that position, we will use the index zero, which represents
the first entity. The x coordinate of the first
piece of data that we have. Let's do the same
thing for position y. Here we're going to use the
second entity, position y, which is the second
coordinate that exists within the list that we created. This actually should be the
first element in the list. Let's do a rectangle in that location so that we
are able to check that, in fact we are accessing. Let's do it 10,10. Let's do it in a
white color, so fill. Let's see what we get here. I had to discover a small
bug that we were having. I didn't realize that we were in fact writing the code
that wasn't indented. As a quick reminder,
when you lose track your set up function, let's make sure that you start your draw function you have
it in the right indentation, otherwise you're going
to have an issue here. Let's return to
what we were doing. We are defining a position
which is going to be the first entity of the list. And we have the x and y. We can see very mildly, maybe there that the
first entity is white. That means that we actually
are drawing on top of that and the size is
actually slightly smaller. We can actually do something a little bit more visible.
Maybe an ellipse. We can do a 30 and a 30. You see that ellipse is there. But let's just change the
value here of the index. If we understand this correctly, the index, we have
100 units in x. Somewhere around 50
would be the middle. If we wanted to start
moving it down, we would do maybe 100*25. Let's try something like 300. Let's see where we land. You can see here we actually have the rectangle, this circle here. That's unexpected, to be honest. I thought we would actually get much further down the list. So here's what's
really going on. As we start changing the
numbers of the index, you could start
seeing that number 5 is actually going down, and let's just go back and
understand this together. We have been using i for the resolution in x and j
for the resolution in y. Our list first, it's going to do a loop in j, so it's going to go down first. Then it's going to do, when it finishes a loop in j, which is again the y direction, it's going to start doing a
loop over the right side. The way this list
is organized is different to the diagram
that we had originally. We could change that if we think that we wanted to go in
the opposite direction. We could, for instance,
flip this relationship. We could say, hey, resolution in y it's
going to be here, and resolution in x is going
to be in this direction. Let's see how we can affect. That certainly created an error. The error that I was
finding is that I had not indented this draw function. For some reason, I didn't
keep track of that. So make sure that you do so. Now we should have
the script running. What we're doing here is
identifying the first index, the first entity of the list, and we are drawing a white
rectangle in that position. If you run it, at this point, you'll see that you'll
see a white rectangle in the very first position. Let's move closely and then type a one here to
see how we're moving. If we type a one, we see that the rectangle
is moving down. If we type a two, we'll see that the rectangle
keeps moving down. So that means that our
index information is going all the way up to 50 here. Let's just try a
number such as 25, which is half of the number
of rows that we have. So we have the white rectangle
somewhere in the middle. That's the way we're
basically are going. If we actually reach 50, let's just start that 50. We are all the way back here. So we have 0-49, 50 is up here again, and we have this typewriter
distribution of the indices. We can actually access
the information of any of these entities
through its index. Now we're going to do a very small script that would gradually add rectangles
at a random position. So let's just use the
cell size in x and in y. Now, whenever we draw
that white rectangle, actually we have to bring
those in as globals. Oh, no, we actually
don't need to do that. Just realize because
the information is calculated during
the set up loops, just kind of copy that
calculation here. Let's see if that's
okay, there we go. We have our white
rectangle here so that we can actually draw this rectangle every time
in the size of the grid. That grid size could change, so we want to make sure
that that calculation is always done correctly. But let's create a random index. The random index, it's a number, it could be anything between zero and the
length of the list. Let's do a random range, or random range zero. Here we know that the size of the list is the multiplication between
its resolution in x and y. But we could also, just to be
a little bit more careful, we could use the Lend command, which is the length of the list. My position list. That's the length of the
list. Here we have a comma. We are trying to obtain
a random number that is somewhere in between that zero
and how long that list is. We can now, because the draw function, if
you think about it, the draw function is drawing a different rectangle
every frame, right? If we draw that rectangle
in the same place, it seems like it's static. But if we actually draw
it in a new location, every frame like with
this random index, we're going to start seeing
these white rectangles. In a way, eating up the grid
that we had drawn, right? Instead of using the 50 here, let's use our random
index, right, Because that was the number
that we were hard coding to start accessing a
location in the green. We could say zero index, the one index, but now we're actually going to
pick one at random. Let's see, we're kind of
reaching the end of this lesson. You see here we have, in fact, we're painting white
rectangles at random. It seems that we're eating
up some of this color green. We're starting to mix it up
with this white information. But you could say,
well, but we're not really using the
grid in any way. We're not using the
data structure. It might so happen
that we're drawing white rectangles over
prior white rectangles. How could we do that
in such a way that we could maybe remove an entity from the list once we
paint that rectangle in? Let's use delete command del. I'm going to go into
the list from the list, I'm going to remove the entity
that we just painted over. Let's just print here
the length of the list. We want to see how
long the list is. You'll see that the list
starts with 5,000 elements, and it gradually goes
down as we paint white rectangles over
covering in a way, some of the color in the grid. We are also replacing them. We do not get duplicates. We actually start
eating up our grid. We're coding it, if you want, and we are ending
up with a list that is certainly very different
from where we started. Just to do a quick recap, we're trying to
understand the difference between an index position in a grid and the
actual coordinates of an entity within the
canvas in processing. As you can see, we
could start doing interesting processes
where we could actually start using the data to create designs and
images such as this one. I'll see you in the next video.