Hi. Welcome to this new video. In this video we're going
to start using loops within our compositions and drawing
primitives within loops. Let's just jump into some of what we're going
to be seeing and then see how we can
actually construct that. We have, on the left, an example of the code. As you can see, we're
operating within a loop. We have a for loop
that uses a variable i in range 0-3 in this case. We're going to have 0, 1, 2, 3. Then we're going to
do two lines that are operating within that loop. Let's look at the second
line for a second before we actually
look at the first one. The second one is a rectangle. We're going to be
drawing a rectangle, and as you remember, the primitive of a
rectangle specifies the top leftmost corner as our starting point
or anchor point, and then we specify the
width of that rectangle, and the height of that
rectangle moving down. Traditionally, we
would say, well, let's say something
like 100 and 100 would be the anchor coordinate. Then maybe we want 20 pixels of width and
then 100 pixels of height. But in this case,
because we have a loop, maybe we want to
start constructing all those rectangles not
on top of each other. If we would give the
same coordinate, those four rectangles
would overlap. But we want to change the
coordinate of those rectangles. We want to create a
series of rectangles all of them in a
different position. We know that we want to move those rectangles in the x-axis, basically align
them in the x-axis. Therefore, there's only one of those variables,
the x coordinate. That is something that
we wanted to change. Four rectangles, but each one of them using a different x. That's why we're going
to create a variable called x here. Let's just think
of that equation. What is this
equation here doing? We're using the i
variable of the for loop. The for loop, the first time we loop through this sequence, the variable I will be zero. If we think of this
equation is 0*30, that's zero, +100. The +100 is an offset and it's basically an
optional offset. If you want basically your
rectangles to start at 100, you add this +100 that
basically we start at 100. If we look at the first point, as you can see on the right, you'll see that our first
point's coordinates will be 100, 100. That's the first
rectangle that we create when the
variable i is zero. When the variable i
is one, we have i*30. That is 30+100, we have 130. The second point would be in a coordinate 130, 100, right? As you can see, the variable x, every time that we
go through the loop will be using a different value, a value of 0, 1, 2, or 3 and we can use that to change the coordinates
of the rectangle. That's the basics of it. Let's just see how we can actually implement
that within our code. We're here in processing. Let's just type right in. I really like creating
a little bit of space. I have, again, a template boilerplate
code with a setup, the size, and draw loop. We're going to be working
within the draw loop. So let's make sure that we do, first of all, a for loop. For i, remember
that this variable, you can give it
any name you want. By convention, you'll see a lot in the documentation about the code that people use i
for variable within a loop. We're going to follow those
conventions at the moment. We're going to do a range. I'm going to specify here
a range that goes 0-20. You see we'll
actually be talking about the range
function a bit more. But the range function
is something that will give us a
series of numbers. If I specify the
beginning at the end, I can specify zero being the first one and 20
being the last one. I might not need that zero, but it might make it more explicit or if you want
to manipulate that zero, you would get a
range between, let's say five and 20.
You can do that. But often, we start at zero just to know exactly how many
times you might want to loop. But again, that construct
is very flexible for you to really manipulate in something
that is useful for you. Let's just do a
rectangle first of all, and we're going to use
here what we wrote before, 100, 100, 20, 100. At this point, we might say, well, we don't want to stroke. We don't want to be
any outlines and feel. Let's just keep it wide for now. But we'll see how
we can actually manipulate that as well. What happens here,
if we ran this code, you'll see that we only
see one rectangle. We do have four and we can check on that with
the print function. Let's do the print function for a moment and let's print
what we get out of i. So the variable i, notice
that I am here operating under the indented space. We have the first indentation from within the draw function, because as you remember, functions require that we operate with our first
degree of indentation, and then the second one is
coming from within this loop. But let's print the i function and see what are we getting. If we print i, the first thing that
we will actually see is that because we're in the draw loop, this will continuously
happen every frame. But basically within
each every frame, we are printing the
values from 0-20. Not like the example here, I forgot, we're actually
doing it 20 times. If we would change this to four, you will see values from 0-3. But I do want to see it
a little bit more, 20. But what we have to
actually do here is create something that would make the x coordinate of
the rectangle change. Let's try what we saw in the
slides, which is i*30+100. Let's now use that
variable that is basically considering the variable i of the loop within the rectangle. If you don't include
that variable here, that variable x might
not do anything. Let's just comment out
the print function that right now is unnecessary. You see that we have 20
iterations of this rectangle. What if we want five of them? Well, we changed this value, the range, to a smaller number. What if we want 50? We can have more of
them, we can have 50. But we see, we are
running out of space here because we're doing an arbitrary amount of space
between those rectangles, and the for loop will continue calculating mathematically
those variables and processing will only show
us what it's in the canvas. But that doesn't mean that
we cannot create things outside the canvas that's
in fact happening. So let's just keep that 20, which is a sensible number for the size of our current canvas. But let's just think a little
bit more of what we could use this i variable for. This i variable is something
that is changing from 0-20. What if we would want the color of these rectangles to change? Let's just do a blue
color variable. Let's think that
we're going to be providing an RGB value here. Something that somehow changes
as we move in the loop. I'm going to use
the variable 255/20 and I'm going to make sure that this division
returns a float, therefore I'm going to
give it a decimal place. What I'm doing is I know
that the channel of color that goes from 0-255, I'm going to divide it by
how many iterations we have. So this 20 is
equivalent to this one. We could actually
create a variable, and the most sensible thing
here would be a variable. There would be number of loops, or how many iterations so that we could just place
that variable here and here. Therefore, we're
creating an association between how many times we're running the loop and
how many times we are dividing the channel of color. In this case we actually
have that amount, it's not really changing any time because we're not using i. Let's multiply this value by i, meaning that we start with
a little bit of blue and we incrementally get more and more in that blue channel depending on where
we are in the loop. As you can see, we could use
this i variable for anything that we want to change
within the loop, and in this case is the color
as well as the position. Let's just do 0,
200, blue color. So as you can see anywhere in any primitive or any kind of styling function that you
have in fact a float, a variable, or an integer, you can actually create
your own variables that are calculating some change
and use that in there. So you can see now
that where it's not only position that is changing in the rectangle,
but it's also color. So this is I think for me where coding and learning how to code starts
getting interesting. When you start
realizing that you have all these primitives
to your disposition, you can repeat things
in many different ways, and then you can actually
start combining things in interesting ways
especially when you're actually looping through
a series or a sequence. So really a for loop starts really opening up for
code not to be very long, but being able to create small
code that actually creates a lot of content very quickly. So we're going to
leave this here. We're going to continue talking about for loops in the next
video. I'll see you then.