So in this first video, we're going to learn how to construct
a grid using a flat list, right? And this is going to be important because
we're going to learn how to do it in two different ways. The first one is just going to
basically pick a list and organize that list spatially. So let's see how a grid
would actually work. We have a list, in this case a flat list, meaning that there's
no lists within lists. There's no kind of additional
data structures to it. And we can start organizing
a string of numbers. As you can see here, we're kind of trying
to represent these numbers a little bit like how they would actually
operate within a list. But this is just one
long string of numbers. There's nothing that is suggesting that
they're in a spatial configuration. But if we start thinking
of them in a grid, we might start kind of placing
them in this fashion, right? The index of the list would be,
we would have to assume that if they're going to be operating within a grid, they
would be organized in this way, right? So the blue here,
you can see the data and the index. If we move further, we can actually think that we can
do a grid also with a for loop. We've done this before, which is
just multiplying columns and rows. That's the number of entities
that we're going to have. We're going to have four,
in this case, columns, four rows, and that's the total number
of entities that we have in the list. And we can populate that with
a random integer, in this case, something that is random. This is not really working as code,
but it's just giving us a hint that we're creating a random value
within that list, right? But we could also, as we've done before,
we can make a grid of colors. And this is how pixels really work, right? If you think of pixels in screen,
this is a grid arrangement that contains, in each one of its indexes,
in indices of the pixels, a grid will contain a particular color,
in this case, a RGB color, right, or a hectadecimal color,
as we've seen in past week. But in this point, we're not so
concerned about the color information. Let's just think that a pixel arrangement
is an arrangement of pixels in a screen. So let's learn how to build one of these
grids from scratch in processing, right? So we're here in processing. Important things, as usual, we're going to create our image_size_x = 1200, 600 for x and y. I like this canvas size. I'm going to use the variable, I mean we want to keep track of
what are the variables of a list. We want to have columns, we can use
them calls or we can actually think of. The columns could be thought as
the resolution of the grid in x, right? So I'm going to use something that
represents, I like thinking of resolution because sometimes you want to increase
the resolution of the grid or reduce the resolution of the grid and
it makes more sense for me to think of resolution, right? But that's my way of thinking
of the variable columns, right? The columns of the grid,
the rows of the grid. So I'm going to call it resolution in x, reso_x, and that's going to be 10. And reso_y, it's 10 as well, right? So let's start with just the same
number of columns and rows. And here we're going to
start our empty list. So let's just store colors. So my_color_list = [], right? So so far we've declared a few variables,
one that has to do with the window size. Let's just actually use those for
our setup, our window. And we can, let's start with a background,
a black background as we do. And then also the size of the window will be determined by the size of the image. So that's kind of pretty standard. We will be constructing our list here. The way we will construct the list
will be with a for loop, right? So let's just first start with that for
loop. And we're going to say,
well, for i in range, The range will be from 0
to the maximum resolution. So how do we calculate the total number
of entities that we have in that grid? Well, we can use the reso_x * reso_y,
right? Because we know that that number,
if we multiply the number of columns and the number of rows, that will give us
the total number of entities that we want to have in this list, right? So that is going to be our Q for
the size of the list. So what do we want to include here? Let's just start thinking that
we want to populate in the list. So my list dot append, something like, we could append the value. We're going to add color to this list. So we could think of it this way,
maybe like RGB, right? Or for now we could just say, hey,
let's just add the same color information, something like 255, 0, 0, right? So something like this,
a tuple that represents the color red. So we're adding that to
that list at this point. Let's just make sure that
this is actually running. Nothing should happen. We're not displaying anything yet, but I just want to make sure we're
not running into errors, right? That's the way we actually have
populated data to the list. The challenge right now has to do
with visualizing what we have. Basically, we're going to
replace this placeholder for something that is a random color, right? So maybe we could start with that. We could say, hey, well,
why don't we just do c_red? That could be a random color, randrange between 0 and 255, right? So we're going to copy
this line three times for red, green, and blue, and all of them will have the same random range, right? So instead of storing or
appending red on every frame, let's just append the red,
green, and blue colors. Let's see if we are there. So we have this, right? So within the loop,
we're basically storing this information as in a flat list, right? There's nothing, again,
that that list is saying, I am spatial. But we do have variables that
we use to create that list that signify that we will be
using this as a grid, right? So the size of the list is in
relation to the number of columns and number of rows that we currently have. So at this point,
what we want to start considering is how do we draw a rectangle, right? Let's think that we want to draw that
color just to represent the grid in some fashion. So let's imagine that we
want to do a rectangle. We know that we need a position,
a position in X, a position in Y. We need a size as well. And we want that to follow
the random color in each one case, but also the grid configuration. So let's put some values
here as a placeholder. Let's say 50, 50 and 20, 20, all right? So it's going to be a square. Every frame that we go through this
is going to be the same square in the same place. We want to change that so
that the position in X and the position in Y keeps changing in
a way that we can convey a grid. So let's just create some variables
that would allow us to do that, right? So let's create a variable
called the current x. Or I'm going to specify it's
going to be an integer current x. We're going to start with zero, right? So integer current Y equals zero. And.
Why am I saying current, right? Why don't we just use X and Y? Well, I like to kind of specify here. Here, it's going to be an integer. So it's not going to be a 0,1. It's going to be an integer number and
it's going to start in zero. And we are going to increase that
number progressively over time, right? So we could say that this rectangle
is going to use the current X and Y as its x and y coordinate. But every time that we do one rectangle,
we finish doing one of these rectangles, we basically
start creating one of them and we start moving a little bit to the right. So let's just say current y plus equals, let's say something like 50 for now. Understand that every time
that we create this rectangle, we will move 50 units in x, right. We might want to make sure that the color
of this rectangle is displayed correctly as well. So we can use the fill and
we could use, in this case, this list entry or
basically the same color coding. Let's just use basically
this information here. It's the color that that
rectangle should have, right? So we will do a rectangle
which has those random colors. We want to make sure that we start
visualizing what we are doing here. So what do we have here? We don't see anything at all. Let's see what's wrong here. So the current x and
current y, at this point, we're trying to run this, but
it seems to be having an error, right? Something missing. We're using a kind of big font, so I forgot here all the way to the top
to import the random module, right? If we don't import random, all this
functionality will not really work, right? So let's import the random module and see if we could actually get
this to run well, all right? So we're still having some issue here. What I like doing often when
I run into an error, right, I start kind of commenting out some code,
right? So we could see,
would this script run with that? We're still having some issues. Let's see here. Okay, so there's something in this
particular line that is causing a problem. We are creating these rectangles
moving in this direction, right? That's exactly what we wanted. We wanted to create rectangles that's
starting to skip basically infinitely. We're starting to build a grid,
but in this case, we're starting with a line, right? So let's try to bring up some of those
lines and see what's the problem here. What is like that doesn't
seem to have a problem. That doesn't solve. Here, we are seeing some issue here. So let's see why, This is, in fact, not working, right? So we will append,
That tuple, there we go. So we couldn't just append three entries,
right? We needed them to be a data
structure in itself. So we are using, in this case, a tuple. We could have used a list as well. So that's kind of a common error here. Just making sure that we are appending
just three things, right? The append command doesn't allow us to
append three things, but rather one. The fill command does allow us to provide
three entries independently, right, RGB. So I think this one should be fine. As you can see,
we can actually create that first line of squares in random colors
without any issues, right? So what are we missing here? We are actually, first of all,
these squares are not really matching. They're kind of an arbitrary size. They are 20 units in x and 20 units in y. We definitely want to have what we
described as a cell size, right? Just for
them to match the entirety of the screen. So let's call cell_size_x. Let's start with zero, right? Or we could actually already
incorporate the equation, right, that would be defining
the cell size before we were using an arbitrary number like 20. But if we think about it, the cell size
should be a division of the totality of the screen,
which is described by the image size. So image size, that's 1200. Let's divide that by the resolution in x,
right? So the cell will be a division
between the entirety of the screen by the resolution,
the number of columns we want, right? And that should give us a cell size. If we do this same equation,
we're going to copy paste that and switch it from x to y. We will have a way of defining a cell that occupies the entirety of the screen. So let's try that. Cell x is going to be used here. Instead of the 20, we're going to
be using the size of the cell in x. >> And the size of the cell in Y. So let's see if this is
actually working as intended. So what we see here is that
the rectangles changed in proportion, and now they're actually of equal size,
right? But we are actually reaching
the end of the screen. And what is actually happening is that
these rectangles keep going in that direction in X. There's nothing telling them that they
are actually aligned in a grid or they're actually thinking
of a grid structure, right? So let's just add some logic for
the construction of this grid. And because we are working within a single
for loop or working in a flat list, we're doing this in a bit of a manual way,
if you want. So we are going to say, Actually, this plus 50,
you could say it's incorrect, right? Because the movement that we want in x should be equals to the cell size, right? Let's see if that's actually more like it. So before, what we were seeing is that
these rectangles were overlapping with each other. And because we had enough of them,
they were covering the screen. But if we think about it, the cell size,
in order to have ten, one, two, three, four, five, six, seven,
eight, nine, ten, we needed them to be displacing the next one by
the size of the cell as well, right? So the current increment is in Y. So how do we actually do some
logic that will determine that? We go to the next row, right,
we transition to the next row in the grid. So let's do an if statement. We're going to do something
like a typewriter. If you think. If you're familiar with typewriters,
you write one line, you move back to square one
on the second line, but you shift down a little bit for
that next line to start, right? So we're going to say, well,
if current x is bigger or equal. Bigger or equal. That's an if statement, right? One of the Boolean symbols
that we currently have. Bigger or equal than what? The resolution, right? The resolution is what? The maximum number of entities
that we can have in x. So if we reach ten in this case, or the
resolution's maximum number, what happens? Well, we reset our current
index in X will return to zero. So we go back all the way to zero and
we increment the y. So, The y, We could say plus equals how much? The amount that we go down should be
determined by the cell size in y, right? So in this way, the current x keeps incrementing
always by the size of the cell in x. But then once we reach ten units, we flip, we return to zero and
we increase y by the cell size. One way that you might
want to do this slightly different is always counting
by the number of one. So you're saying current x is one,
two, three. And every time we move down,
we know that we're in the second row. And then instead of using
the current x and y directly here, you could actually use
a variable like position. But take in consideration,
then we can create an equation. We could actually do that method
here as well to kind of clarify. How would that look? That might give you more information,
like the current x and current y might represent the current
row and column we're working in, as opposed to the actual
values of the cell. But in this case,
this small amount of logic here, it starts determining that
we are transitioning. After we finish a column, sorry, a row,
we move to the next, and so forth, right? Let's see what we're getting from this. So something is not really working still. We end up with these columns all together,
right? Let's just check how our logic is
somehow still missing something, right? So we are increasing in x. So here's the problem that I see. So because we are incrementing
the cell size constantly by this large amount, the cell size,
we should not do this. We should actually just put a one here. So every time we increment in x, we add
a one, because we are actually counting in which column are we and which row
are we, not the cell information, right? And whenever we want to increase y,
we also do a one. That means that the current x and
current y are not representative of the actual position of the rectangle,
but they're, in fact, representative of the index of
the current column and the current row. So let's just create
a couple of variables, which will be position x and position y, which will take in consideration
this new definition of x. So what would be position x here? Well, it would have to take in
consideration the current index, which could be zero, one, two,
up to ten, and then return back to zero. Times, right, let's just make
a parenthesis here to make sure that this is fine, times the cell size, right? So what we're doing here,
let's imagine that this index, the current x, represents zero column. Then column number zero
times the cell size. Then that will give us the actual
position of the rectangle. And if we do exactly the same thing for y, The position of
the rectangle will be using the current count in x
times the cell size. And I think that if we actually
replace these two variables here. This could fix the problem
that we were having, right? Let's see. Okay, so here we go. We actually have this grid
that is using random colors, but it's not just a grid graphically. It's also containing
an associated data structure, in this case, a list,
which, as we discussed, doesn't have anything
inherently special to it. But we are having enough data, enough
information, in this case, the columns and rows that will allow us to retrieve. Let's say if we test
the position of the mouse, we can identify that the position
of the mouse spatially, it's in a region of that grid
with disassociated color, right? So this is one of the interesting
ways in which we could start thinking of grids as a way of building spatial
structures that contain data, not only as a data structure, but also how
that data structure is organized in space. The good thing about a script like this,
as you already probably know, is that you can increase the resolution. Let's try that. It might be a bit slow, but
you could still see that we created a pretty dense grid of 100 by 100,
and that seems to scale. You can actually try it
with different numbers. I wouldn't recommend to go
too high if you don't want to melt your computer, but
you can certainly see what if we actually have a much higher
resolution in one direction and another one, we can actually
end up with different patterns. So the spatial organization, this grid can
certainly change resolution more intense on one direction than the other one. So we're going to leave this one here. This is a construction of
a grid using a single list or a list that is in a flat format. We're going to learn how to use a nested
list to construct a different kind of grid. I'll see you in the next video.