Hi. Welcome to this new lesson. In this lesson, we're
going to start writing the code of what we
will call behaviors. Ways in which objects
interact with one another. Let's just jump into the code. As we have seen already
in previous lessons, we are going to be
constructing classes. We're going to
start with a class, which I think we've
covered already. We're going to create a new tab, and we're going to call this
the gradient rectangle. If you have covered already the foundations of
this gradient rectangle class, you can feel free
to use that code, but I'm going to try to
write it quickly here. We need a gradient
rectangle object that will have some
internal data. But certainly, let's start with the constructor of the class. We are going to do position, rec_size, a vector for velocity. This is recreating the
system that we had prior. We're going to
construct it gradually, but I want to
remind you a little bit of what we have been doing. This is going to be a rectangle that is going to
be sitting in the screen, is going to be moving
left to right, and it's going to be
bouncing on the edges. But the new things that we're going to be
doing is that we're going to try to make
them bounce with one another as well. Let's just do a self.vec_position
= vec_position, self.rec_size = rec_size, and self.vec_velocity
= vec_velocity. We have the constructor. Now, we could actually start
thinking of the methods. As you can see, we haven't
really even started writing the processing part or what will be rendered
in the screen. We have started directly
into the class. I like starting with the class, thinking of the entities that I want to exist in this world. I often use the method run, which is going to be an outline of the methods that
we want to run. What I like this is more personal ways
of thinking of code, is to write comments that would signify the methods that I'm
going to be constructing. I would definitely
want a draw method. Something that would draw
this object in the screen. I would certainly
like a move method. I would bounce on the borders, and we will do the bounce
color if we have time. We can actually start without
the bouncing off color, and we can include
that a bit later. Let's start by replacing these comments with
actual methods. Let's do def draw, there we go, and let's just create a little
bit of space to center. As the name describes it, we're going to say no
stroke here and fill. Let's just start with
the white color, 255. Finally, it's going to
be a rectangle from the position x position
y, so self.positionx, self.positiony,
rec_size, self.rec_size. It's going to be a
square at this stage. That's going to be our draw
method and once we have it, we can actually replace our
comment here with the actual. Name, actually, we used
to use the self dot. At this point we have a class. A very simple one,
it's a rectangle. It's not really doing
all these things yet. But let's just try to, just to make sure that we
don't have any errors, bring this class into the
world of our simulation. Let's just start by importing the gradient rectangle as GR. Just let's make sure that
the name of the file, gradient rectangle, is the same one that
we're importing here. As usual, we are going to
start with a Canvas size. We will eventually add all
these rectangles to list. Let's just do that from
the very beginning. As we've done this before, I feel like I'm just going back through content
that we've covered already. If you feel like I'm
going a bit too fast, you can certainly go back
to previous lessons. All of this has been explained
a little bit already. Let's just use the size
of our Canvas for x and y, background zero. There we go. Let's see. At this point, we could start bringing instances
of this class. Let's just run what we have. We have our black Canvas. Let's just create a series
of instances of this class, just to be able to see
them in the screen based on this list, and we'll add them to this list. For i in range from zero
to the number of columns, which is the variable that
we created to keep track of how many columns
we want to create. Here, in the for loop, let's just, again, give a bit of space
to work here. We will create,
let's call it my GR, which is going to be my
gradient and rectangle, which is going to be equals to, from the class file, which is in the other script, we use the gradient
rectangle class. This class requires
some information. Remember, we go here. This is misspelled, self. Position, size, and velocity. Let's just copy those, because those are the arguments. In these parentheses we
have to provide this value. This is going to be a vector. We could start with P vector. Let's just do a 0, 0, 0 for now. We're going to come
back to these values. The second value that we want
to construct is the size, which is going to
be, let's say, 50. We're going to calculate
that value in a minute, but for now we're just trying to have some placeholder values. Then the velocity, it's not going to be in use at the very beginning
because we don't have the move function. But let's just do, again, 1, 0, 0, or something like that. At this point we can actually close the arguments
for our class. We have three arguments
that are required; position, size, and velocity. We are providing those three. We actually do not need to
declare these variables. If you would rather
keep it short, you can use the vector, the 50, 50, the second vector, and that should be fine. I just trying to make it a
little bit more explicit, if you're curious of
how would that look, and you might see this a lot. If you find code written online, it would look
something like that. Then finally the
final argument here. You can all that into
a much shorter form, granted that you
have to keep track. Remember that each one of these pieces of data referred to the arguments
on the constructor. These three arguments are provided in the three variables. Let's just keep that for now. What we want to do
now is in my list, we are going to append the instance of the
class that we created. At this point we've constructed one
instance of that class. We are ready to append it. If everything has
worked correctly, we can go into our
death draw loop and say for x in my list, which is a way of saying for
every object in that list, let's call that object x, x.run. Here we have basically
restored a class set up. I'm building this
from scratch again because in this week we are going to be using
this set up quite a bit. We have a simple, an outline of the
possible functions of the functions that we're
going to be working on, and a call of that
class within a list. We're actually creating 40
instances of that class. Right now, all those 40
instances are going to be placed on top of each other. But I do want to say if
we misspelled something, we do have some errors. Let's just go through our code first and see we are missing. I just found a small typo. Make sure that we were calling this gradient rectangle with
a T and then again that, that's spelled correctly
with a T here. At this stage, we should
have 40 instances of this rectangle in the top
right corner of our screen. If we would spread out these rectangles in
the white coordinate, something like
changing this value, we would actually be able
to spread them down. Let's just do that calculation. We are going to start by calculating what should be the size
of the rectangle. The rectangle should be, let's call it the
rectangle size. It's going to be a
calculation between the size in y divided by
the number of columns. There we go. At this stage, we could use this rectangle
size instead of this 50, which represents the size. That would be basically we
change the number of columns. We will change the number of
the size of the rectangle. With that in mind as well, we can actually
calculate the position. The rectangle position in y. We are going to make it
a variable that takes in consideration the instance in which we're in or the
index of the loop. Because we don't want all of them to be on
top of each other, we want to use the
rectangle size times i. The white position
of the rectangle, which is declared here,
the second value. At this point we could actually run this and you'll
see that we have a line, but this is in fact, each
one of these are rectangles. If we want to double check
that that's the case, we could actually say that the stroke of these
rectangles will be black. We can comment out. This idea of using comments to suppressing part of
the code is very common. You'll see it especially
when you're tinkering with codes as a form of design, commenting out code is
a very useful practice. As you can see here, you
can see the wither stroke, that each one of these
rectangles is in fact than. In a way that if we have more
or less, in this case, 20, we actually start changing
the number of columns. Let's just randomize a little
bit their position in x. Our position in x. We haven't imported
the random module. Also let's make sure
that we import random. Here, in the position in x, let's use random.uniform, which is going to give us a floating point or like
a decimal place number. It's going to be a value between zero and the
size of the screen in x. Anywhere between zero and
the size of the screen in x. Let's make that our
rectangles start there. Let's just check that. You can see now these
rectangles are all initiated at different
locations, at random. You can use a much larger
number of rectangles, and they get scattered. But we are going to keep it in a way that
they're visible. Twenty, they're all starting
at a random position. Right now, all of them have
a velocity of one in x. That's something that we
also want to randomize, but that's not being taken
into consideration in any way. Basically, when we
execute the run function, if we go into the run function, the only method that is being
called there is the draw. They display themselves
into the screen, but we haven't included
a move method. Let's just use the space here
to define a move method. The move method is going to be a relatively simple method. It's using vectors. Again, if you're not very
familiar with vector math, go back to the week, I think it's Week 3, where we spend quite a bit of time looking at vector math. To the position which defines the position of this rectangle, we are going to
add the velocity. The velocity, it's going to be a force which is
expressed as a vector. If we add that force to each
one of these rectangles, these rectangles will move. They're basically going to
be updating their position. Let's just now execute that new function that we
just created in our outline. You can see all the
rectangles started initially in a random position, but they actually move
gradually to the right, because the vector that we specified as the
velocity vector, the third argument in the class is a vector
of one positive in x. Let's just randomize that
value so that all of them are moving slightly different. We can call this random speed. We're going to do uniform
between minus 2 and 2. Here, the random speed, it's a variable that we will
use in the x-coordinate. This coordinate, it's going to be a positive value
or a negative value, meaning that it could
move to the left or to the right at a speed
of maximum two, but somewhere in-between those, some will be slower, some of them will be faster. Let's try that. As you can see, our rectangles move. Why are we seeing
them not refresh? Basically, if we want to
print into the screen, we do not refresh
the background. If you want to just
have the illusion of them as moving rectangles, you need to make sure that you are redrawing that background. They all gradually get
away from the screen. We are going to reconstruct the bounds on borders function
and the bounds color, as well as starting to look into the interactions
between them. But I'm going to cut
this video here. We have a first setup. We're going to be building upon this setup in videos to come. We're going to actually
start digging into the interactions between
these rectangles. I'll see in the next one.