Welcome to this new
video on grids. We are going to
continue working with the same previous example where we actually constructed
a grid from scratch. But this time we're
going to see how you go about if you wanted to
do a nested structure. There's a little
bit of a difference on how data could be organized, and some people would
prefer this style just because it lends itself maybe more clearly to a
grid structure. But again, it's about what
you want to use it for. We wanted to show both styles. Let's see what is
the difference. What we have here is a data
structure that has been, it's a nested structure,
so we have a list, as you can see down
here, a general list. Then within each
one of the columns, or the rows are represented
by an additional list. We have a nested list. If we start thinking
about this spatially, the index of our data will have two indices for
each one of the data points. We have to think of the first
element of the first list, the second element
of the first list, the third element of the
first list, and so forth. Then if we move in the rows, we would
start thinking, well, this is the first element
of the second list, and it's the second element
of the second list. The indices here. I hope that the distance
is enough to understand. There are two different indices, pair entry of data. But one that represents
more accurately are columns and rows structure. Before we were actually
having a flat list that was folding itself into a spatial
organization if you want. Therefore, the last index was a multiplication of
the columns and rows. It could get quite an intuitive. This organization,
the data structure, is slightly maybe more complex, but it makes it more
intuitive to read. This is the second entry
on the second column. You actually are matching
the data structure to have more correlation to the spatial organization
it's actually fulfilling. How would this look when
you write it in code, you start with a single
list as you see here. As you go through a loop, you actually create another
list within that first loop. You basically are using
a two loop structure. One that represents looping
through the columns, another one that represents
looping through the rows, so that you actually store the information in a
way that is nested. We have a list or series
of lists within a list. Let's see how we can transform our example and get rid of that logic that
would manually, if you want, create the
grid organization and allow the fore loop to carry the
weight of the organization. This is where we left off. I'm going to bring
it back to a 10*10, if you remember correctly. In the last session, we were showing how to do a grid using this
singular let structure. We're going to
continue because we will be using mostly of
the same ingredients. We will use image size, we will use resolution. We're basically going to change a little bit of the logic
here with the loop. What can we get rid of unchange? Hopefully you can
follow along and at this point start
understanding that we can transform quite
a bit of script or quite drastically a script by starting to do
incisions in it. We will move all the way down
and get rid of this logic. This logic here had to do with the increment of the
list in x and in y, using this typewriter style. I'm going to just go
ahead and delete that. Right now, we might not
need the current index. The other thing that we want
to do is that we want to introduce a nested
loop structure. Instead of using a loop
that goes through x*y, we're going to just use a loop
that organizes itself by, let's go through
resolution in x and we're going to copy
paste this here. Let's use a second variable, j, and we're going to use
that to loop through y. That means that all
this code now should live within this
two loop structure. At this point we could
try to run this. We're not going to get a very
interesting result because we changed the logic of what is the current
x and current y. But if you think about it now, i and j, because one is actually
looping through x is doing the job that this
typewriter code was doing before. It will actually move from 0-10 Then the next one will
also be moving from 0-10. We could actually replace
this current x variable by i and current
y variable by j. Let's see if at this point we are having something reasonable. You see we still remain and we have exactly
what we had before. But we actually got
rid a little bit of this extra code that felt like we're manually folding the data into the
shape of a grid. Almost the way we're
constructing the data, it's equivalent to the way in which we're
constructing a grid. It seems to make more
sense, and again, a lot of people like this
data structure for grids. I've moved between using both. Sometimes it's very
useful to have a nested or a flat list, which might keep things very
simple to access as well. The way you search through a
list may be simpler as well. But in this case, it's interesting to
start seeing how this nested data structure
is allowing us to construct a different
organization of the rectangles. But you might say,
wait a second, the list right now is
still a flat list. We are not having
the information being organized in
any different way than what we had before. It's actually in
fact, a flat list. We are just displaying these rectangles differently,
and that's correct. Let's just print the list. If we print the list of colors, let's just close this for a
moment and look at the data. If you can see, we actually
opened square brackets. Then we have our
first color entry, the second color entry, and we keep going
until the very end. We still have basically a
flat list under the hood. How would we organize
the data to have this double index configuration
that we discussed before? Well, let's do a variable here which will
represent the columns. A column would be an empty list. What we will be adding to is instead of appending
to the larger list, we will be appending
to a column list. Let's append one entry
to the list of columns. At this point, this column will only exist
within this loop, and every time we loop again, we're going to be
replacing that. Here's where indentation
is going to be important. At the end of every one
of the first for loop, we are able to append. Let's do this here. It's important that it's
not within this loop, but rather within
the second loop. We will append the
column that we created. We're creating a column, we are appending it to the
list at the end of every loop. If you think about
it, instead of just going through each entity and adding those
entities to the list, we are actually
creating a sub list, which is a column, appending
entries to that list. Then when we finish,
we add it to the second list or
the larger list, the umbrella list and we flush. The column starts
from scratch again in the next iteration of
the loop and we do that over and over until we conclude the number of columns
that we have. Let's see if we created any
errors in that process. The script seems to
be running well. Let's close this for a second. I like the code, but I also want to be looking
at the data here. You can see a little bit
differently what we're having. Which is we have a nested list. The list opens up, then we have the
series of numbers. If we just try to find here, we finish the first list
all the way to the right, and basically that's a column, and then we move to the
next one and so forth. If we go back to our
slide for a second, you'll see that this syntax applies and we can actually
understand that the data of the list is being
organized with two indices that represent their position both in rows and in the column. That will be the
variation that we did. It's a similar
result graphically, but it will really change
the way we access the data, perhaps more
intuitively accessing that data in a spacial format. We'll see how to
access the data, how to start manipulating the
data, and more importantly, how do we create operations
that take advantage of the data structure to create
interesting algorithms? I'll see you in the next video.