Welcome to this new lesson. In this new lesson, we're going to continue our series on drawing
with vectors. We have been doing this for
a couple of sessions now. We started learning about some vector operations, how
addition, substraction, scaling, normalizing
these vector operations allow us to really
manipulate how vectors move. Then we started creating
something like a drawing tool. Let's jump directly
into processing. What we're going to
be doing this session is instead of just
following the mouse, is starting to learn how we can predefine particular motions
that we might want to have. We don't always want to create these fluid motions and if that's what you're
going forward, by all means you can work with some of the
previous sessions. But we also want to
give you options to have very purposeful, maybe orthogonal, or
particular motions that have specific angles. How could we play
with data structures that we've been doing in the past on this session
or in this Week 1, and also mix that with the
tools that we have right now. Let's go into
processing. We're going to continue where we left off. We have this drawing
tool which is very nice. We have things
working very well. Let's get rid a little
bit of the material here. All the vector motion
content is something we can get rid of because we're not going to be
following the mouse anymore. But we do want to keep this
ellipse that changes color. This is going to be our
framework for the drawing. If we go further back, we won't need the
acceleration vector, but I'm going to leave it
there just for good measure. In case we actually
do need it we can actually use it, so we have it. What I would like to
do here is first to start identifying what I
would call possible vectors. This is going to be a list. Let's do a list of possible vectors or
possible velocities. Because it's going to
be a series of vectors, but they're going to represent the possible motions
of our entity. To this list, we're going to append a vector. Before we haven't
been using vectors. Now we understand vectors, we can actually
copy paste a vector here and let's just include
that into our list. The first vector that
we want to include, it's going to be moving
five units in x. It's going to be a motion
towards the right. It could be a one if you want, but we can keep it five for now. I'm going to copy this line four times because
I want to create four possible motions that
this vector might have. It could be 5 in x, 5 in y, -5 in x, and -5 in y. What this is giving us is a list of four possible motions. What we're going to be calling it is the possible movements
that our entity can have. If you remember some
old video games, the characters could
only move forward, backwards, left, or right. There's only a handful of moves that those characters
could make. Along those lines, those are predefined motions. In graphic design, and
within a particular design, you might know that you have a vocabulary of
moves if you want, vocabulary of motions that
you might want to consider. If you are considering
specific orthogonal moves, maybe of different distances, those could be pre written
within a list structure. That's what we're doing
right now. We're going to be mixing a data structure of a list and to give ourselves
some possible motions. Again, you could include
other motions, diagonals, if you want, or particular
angles that you find. Interesting, but
right now I'm just going to keep it
quite orthogonal. The next thing I would like
to do is identify which is the current motion
we are following. For that I'm going
to use a variable that will be an index variable, so an integer, and I'm going to call current velocity index. I'm going to start with zero. This variable, I like
these long names because they're
quite descriptive of what they're trying to do, it's an integer of
the current velocity. Out of the four
velocities we're going to be picking the first one, so the index 0 in the list. That is the velocity that we're
going to be working with. Then let's assign that velocity
to the vector velocity. So velocity vector equals, we can use the list axis. This is the way the list with all the vectors with
square brackets, we can now identify which is the index that we're
going to be working with, and we're going to
use this variable which is a variable zero. The current velocity will be the first entity
of this list. I hope that you're following
like if you're unfamiliar with the data structure
of the list and how indices are used to identify multiple
entities within a list. But go back to see Week 1, we spent quite a bit of time working with
list operations. We're hoping that
you are up to speed with that content at this point. So now that we
have the velocity, let's just see how this
velocity affects our ellipse. Or we can actually change a
little bit the graphic of it, but we want to add this
velocity to the motion. All the way down here where we actually are drawing
this ellipse, let's just say vector_position.add
the vector of, you can go and find it,
the vector of velocity. Let's just play that. Let's
see if we're having an error. As expected, we are moving
five units to the right. This time we're going to bring
back this to a rectangle. I think this drawing, because we're going to be
working with orthogonal motion, make most sense if we use
a rectangular graphic. What do we want to happen? We want to change direction
at a given point. So we are moving to the right, and at some point we want to
shift and start moving down. Or basically the next
vector in the list. For that, I would like
to create a function. So let's just create a function maybe before the set up here, I think we need to
start getting more used to defining functions. Let's call it change_direction. So change_direction,
we are going to get the global velocity vector, and the current index. These are two variables that we will be needing
in this function. Whenever we change direction, this is going to be
executed whenever we call this function once, we're going to say
that the current index plus equals one. If it's zero, it's going
to go to the next vector. We're going to looping through the vector list that we have. We also want to make sure that if the index is
bigger than three, then the index becomes zero. It's a way of making sure that whenever we reach the
last element of the list, if you think of the list
being these four elements, we start at zero,
we move to one, and then we move
to two, to three. When we reach three, and we're supposed to do four, we go back to zero. So we are looping through
those four possible options. Finally, we are going to say
that the velocity vector, basically the same operation
here that we actually copy, we can copy paste that here. The last line of this function says the velocity vector will become out of the list of all possible options,
the current index. Basically what we're doing
is just manipulating the index of the list to loop through the four
possible vectors that we have pre-described. Instead of calculating
new vectors all the time, we are actually
pre-defining a series of moves and then
looping through those. The function is
ready. We can use it. The question is when
and how do we use it? Just before here, if we would change
direction every frame, we will basically stay
practically in the same place. It's just going to be
like five units moving very quickly between
the different motion. We're going to do a little
trick here which is, or a line of code that
would allow us to execute this function every 25 frames. We're going to use
time to execute this function every 25 frames. We're going to say if frame
count modulo 25 equals zero. Let's just understand
what this line means. This line is saying
the frame count is an internal variable that works within processing that
is counting every frame, 1, 2, 3, 4 forever. This modulo operation gives me the remainder. What
is the remainder? If I divide the number 100/25 it fits four
times within that 100, so the remainder is zero. That means that I've gone in the increment of 25 frames
without any remainder. If the remainder is
one, for instance, the number is 101, 25 will fit four times and
the remainder will be one. This won't happen. This is a quick way of saying I want this to happen
every 25 frames, and the function, we need to use the name of the
function which is, let's just go and
get the exact name, just not to misspell it. We're going to say
every 25 frames. Traditionally we've written if statements down here indented, but we could also
write it in line. You can say this, if every 25 frames we
can change direction. As you prefer, I can
leave it indented here, but for this particular case, we can leave it as a one line. Just make a comment
here, because this is a very important line, a call the change direction function every 25 frames. At this point, let's
see what we are having. We should be able to see our rectangle moving
and creating a square. This is in fact working. We have the behavior
that we intended. If we would like this to operate at the center of the screen, the only important thing that we need to make
sure is that we actually position the
vector initially. The position, we could
say something like what would be something like 500 and maybe 200
understanding the motion. If you want to be more precise about how you can do the math, basically to calculate that this rectangle is
exactly in the center, but I think that for now
this could be good enough. As you can see, these are
the four motions that we pre-described and we are triggering them every 25 frames, changing through the function. If you make this
variable 25 ever, so slightly bigger 30, you're going to increment
the size of that rectangle. You can actually
go even further. Obviously you're going
to start getting out of the screen at some point. We're mixing a few things here. We're mixing vector motion. We're mixing lists to pre-define the vector motions
that we would like to us, and we are using a function and the temporality of invoking this function over time just to execute this
change of direction, purposefully to achieve
a larger figure. We're going to leave it
here. There's a lot of interesting things what we
can do with this set up, so we're going to
continue exploring those in the next few videos.
I'll see you then.