Hi. Welcome to this new video. In this video, we're
going to start learning how we can actually leverage the nested
loops as a composition, as a design resource to start constructing
geometry with them. Let's look at the
example of a grid. Let's imagine that we
have this nested loop where we have the
variables i and j ranging from 0-3. We're going to create
two variables, x and y, one of which for
basically using those as coordinates in a composition. The only thing that
we're going to do in x is multiply times 20, give it a bit of space to these rectangles to be
separated from each other. If we have i*20, we would actually
get zero initially. So we have 0, 1, 2. For y, we also have 0, 1, and 2, but let's understand that
first the inner loop is associated to the y variable. That means that
the inner loop is going to be defined in
the columns of a grid. For every instance y, we're going to be
constructing a column. As opposed to just creating one rectangle as we
have done previously, we would actually be
moving down a column. Once we go back to
the outer loop where the i value goes 1+1 in x, we would then construct
another column. If we start repeating
the sequence, this is a small example
of that sequence, we could actually start
creating a grid, right, as large as we want, and where we could
actually identify the inner and outer loop to be associated to the columns
and rows of that grid. We have the simple example, let's just see how it
actually runs in code. Here we have our template. Let's just start writing
some of these for loops and see how we can manipulate the information
that they have. For i in range, let's do 0, 20 for now, we might change that later. Remember that Python uses indentation to define what
happens within the loop. Once we're using nested loops, it's very important
that we keep track of the indentation we're in. For j in range, let's also do 0,20. You see that now we're
further indented here. We're going to create
the same example that we did and we'll manipulate
it a little bit as we go. X = i*20 and y, center that a little bit more, j*20, Let's create an
ellipse that is x, y, 20, 20. The size of the
ellipse at this point, it's not particularly relevant. We could do it slightly
smaller to understand that. Let's just see what we have and then we can actually start looking at the styling. Here we go. We have a grid of circles or ellipses
in this case. Let's just see if
we can control, let's understand, maybe
create variables for this. The 20s, they're
not very explicit. What happens if I change
this for a number 10? Meaning the outer
loop is reduced. That means that the number
of columns decreases. The number of columns is different than how
long it's a column, which represents
the number of rows. Let's associate the number
of columns with x or i. Let's just create a variable. I'm going to just
shorten columns to cols, and I'm going to do
that a number 20, and copy paste that here. Then rows is going to be, let's just do 40, let's
just do something higher. I'm going to
associate that here. Now we have a variable
that determines more explicitly the number of
rows and number of columns. If we know that we are
going to be multiplying or basically the spacing of
our geometries times 20, we could basically calculate how many entities we would
need to fill the screen. That could be achieved by using some math
with Canvas here, but we can probably
derive that pretty simply by putting a 60 and 30 here. Let's see how that looks. You can see we can
actually make a full grid. The only thing, because
we're starting at 00, it feels like there's
missing one at the very end. If you want, you can
always add an extra one, let's call it a plus one to
make sure that the effect, if we start with
half, we end up with half as well on
the opposite end, and that happens both on the
top and the bottom as well. We have a system
for creating grids, understanding how nested loops really are very beneficial
for creating grids. You could create all sorts of interesting
effects with this. If you start making
these circles slightly, you could actually
create a variable here, something like size = 30. Let's just call it ellipse_size just not to interfere with
any inbuilt variable. Then let's style this a
little bit as well by using a fill of 255,50, meaning a white color, but some transparency, and also no stroke. I don't want to see the
outer edge of this. What you could start
seeing is that we actually have a bit of overlap. We're creating this grid, where we actually
could start creating a pattern between these
overlapping geometries. If we actually want
that size to be exact, that will be 20 because
we're multiplying it, the spacing is 20. You could actually create something like a
background grid. There's all sorts of different interesting patterns that you could start creating. Maybe even overlapping a
series of grids that have different spacings and
starting to create resonances between
the different colors. There's so much you
can achieve with understanding how you can create grid patterns using
nested loops. We're going to do a little bit
of that in the next video, we're going to just jump
into a little bit more of a composition if you want
using this technique, but for now, we're going to leave this video here. I'll
see you in the next one.