Welcome to this new lesson. We're going to continue
working on the tool that we have been producing
in the past few videos. We're working with
different vector operations to construct a drawing. In the last session, we actually looked at predefined motions. We had four different
vectors and we can move between those four. In this session, we're going
to look into random motion. We have looked at random
motion in the past, but I would like to
bring back some of those ideas and expand
upon them so that we have something somewhere in
between complete randomness and also a predefined motion, a random that operates within a predefined set of variables. Let's jump into it. We're
here in processing. We're going to continue this
group that we started off. As you remember, we have
this rectangle that moves across four predefined vectors
that we have established. An invitation is to play with different movements,
different predefined vectors. The invitation is
also to consider, how do we change direction? This is a function in a way, so it really encapsulates all the logic of
changing direction. Currently, we are
moving in a loop, going from the first entity in the list to the second third, and then back to the first one. This is where we're going to
spend a bit of time today, really looking at what
we could do differently. I'm going to comment out. I like sometimes when
I'm tinkering with code, think maybe I'll come back
to some of these ideas. But instead of deleting this
completely and removing it, I would like to offer an alternative. What
would be the alternative? What we are calculating
is the index value. Here it's actually been swapped to the next one in the list, but we could also
use randomness. Let's make sure that we haven't imported the random
module from Python. Import random. We will need that. Now that
we have this index variable, we know that this
variable can be 0, 1, 2, or three. Let's use random.randint
between 0-3. This is very much
what we have done in the past as a form
of random movement. Let's see what we're getting
out of this equation. I think we actually just got
the drawing left the screen. We will have to draw something that doesn't escape
the screen necessarily, or write a function that will keep the drawing
within the Canvas. The problem we're having
is that currently, if we look down here, this variable is set up
to a very high value. The change direction only
happens every 50 frames. Therefore, we're
allowing the rectangle to move quite a bit. Let's just reduce that to a 10. See what we're getting. You see we are getting
some random movement. This entity seems to go away
and come back sometimes. But that's actually
completely random. I still think that it's quite interesting where
it's happening, but this variable
is quite important. We're realizing
that the number of frames that we are using here, it's a key value to
manipulate the system. Let's create a variable, a variable that
will control that. Right here we have
been using that index. Let's just do one that
is called an integer. Next we're going to say that we're going to start with something
small, like five. Before that number, we were
hard coding that number. Just typing that number specifically in the code
where we needed it. But now if we make
it a variable, we can actually manipulate
it in different ways. Instead of being a
10 that is explicit, let's just use our variable. Now we're using a Number 5. We can control it all the way
from the top of our script. As you can see, the random movement it's
happening every five frames. There's nothing
stopping this rectangle to get out of the Canvas. That's something that
perhaps we want to avoid, but certainly it's working. We can actually do
something slightly smaller. There we go; three. You can see that this random
behavior is in fact working. But what happens is
that the change of direction is happening
every three frames, all the time, no matter what. We're moving
left-right basically in a random direction
every three frames. What if we would like
sometimes this distance to be small and
sometimes to be large. I like the sense of pixel graphic that is emerging
out of this behavior. But there's layers to the randomness that
we are producing. Because this is a
variable, now we can use the same random function
once more here. We could say that
the random flip, it's going to be also a
random int, a random value. Let's say when we were
working with three pixels, when we wanted to be very small. But maybe when we
want it to be larger, we want to make 20 pixels. It's going to be
a value between. Every time that we
calculate a new flip. We spend three frames in the first flip or in the
first change of direction, we calculate a new orientation
and we calculate how long it's going to
be the next cycle. If it's a 20 frame cycle, the motion is going to continue
straight for 20 frames, if it's a short cycle,
it's going to be three, but every cycle will
determine a random size or the random length of a
new cycle that comes after. This is a way of layering two different forms
of randomness. You can see some
of them are short. We're not seeing too
many longer ones. Let's just include this here to make sure that we are using in fact, the
global variable. You can see here now it's
actually registering. Some of them are long,
some of them are short. But we're starting to control that there's some
detail to the drawing, but sometimes there's a stretch. If we want the
stretch to be higher, we can put a much
larger number here, and you see here that the
drawing is heavily affected, I mean, if it stays
within the screen. Let's just do a function
that would actually fix the staying within
the screen situation. What we actually need is
a function that would be, let's call it stay
within canvas. Define. We have done a function like this before. We would like to say that
if the vector of position, let's just find the
variable that we are, the x coordinate of
the vector position, is bigger than the
size of the canvas. Let's find that variable. That's why everything we have done has been done with
variables because we want to make sure that
in case you decide to change the size of your
screen, you can do so. What happens if we reach
the limit of the canvas? Well, we want to make sure
that the velocity vector, let's find the velocity vector
which we are using here, the velocity vector
gets inverted. We can say velocity
vector.x *= -1. We flip the orientation
of the x axis. That's because we're reaching this particular boundary on x. Just for good measure as well, in case we added a large amount and
we somehow ended up quite far away in the canvas, we want to make sure
that the position, it's never bigger than
the position in x, is never bigger than
the size of the canvas. In case, for whatever reason we add a vector
that is let's say 20 pixels or 20 units
outside the canvas, we want to make sure
that the vector never gets outside
that condition. That's the condition for one of the thresholds of the screen. We have to repeat
these four times. We're going to do, if x
is smaller, times zero, zero being the leftmost
edge of the screen. We will make sure the vector doesn't become anything
smaller than zero, and we also invert, maintain the inversion
of the velocity. With then these two
conditions for the x and y, we can do that now for the x in both sides and now we're going to do it
to the y coordinate as well. Let's make sure we add. Y everywhere, here. I think this staying canvas
function should work, is just a series of if
statements that are creating certain constraints
for our velocity. We do need to invoke this function somewhere
within our draw. Stay within canvas. We'll do it just after
the velocity gets added. We could do it actually
just before here, making sure that the
velocities are correct. Let's see if we get, we have this motion. Sometimes it's randomly very small and sometimes
actually stretch, but we could see that as
much as it might want to. I do see some diagonals
here and some errors here. I think our function, it's having some errors. Let's just double check. I spent a bit of time debugging and really calibrating
the behavior. I think that we
realized that we had a few missing elements here. Let's just make sure
that we include some of the global flag here. Make sure that we're
affecting in fact the position and
the actual position of the entity and the velocity. That's one thing. The
other important thing, you can play with some
of these variables. I don't think the
bouncing effect is necessarily what
we're looking for. We just want to make
sure that we want the behavior of the entity never to go outside the canvas. I'm going to comment out
the velocity change. We're only going to constrain
the position of the vector at the moment with the
size of the canvas. The caveat here is that
because the rectangle is drawn from the top
left most corner, if you want to consider that the rectangle
itself doesn't get out, it would look in the bottom, and in the right it
actually gets out, but it would actually
just be on the edge. You might want to
include an offset for the size y and the size x. The offset should be the
size of the rectangle, which in our case is all the
way down here, value of 50. Let's just see if
this is working, and then we can add the offset and we can actually discuss
the final behavior. As you can see here, we have
the two forms of randomness, one being very small, another one being larger. We can actually get very
granular moments in the piece, but sometimes we actually
get this kind of stretch. Of course, it looks something
like a screen saver, something like a snake game. But there's so many
places where you can take a design like this. You are having the
power to define very specific vectors that
define your composition. You are also looking
at ingredient of time, basically color
being manipulated by the bouncing effect of colors operating between
the spectrum of RGB. You are also randomizing
the intervals of movement. You can actually have
very regular movements as we saw in the last screen, where you could actually
create a rectangle or open up the door to do something quite abstract with a sense of randomness to it. We really wanted to provide a tool in the second lesson that use vectors not only in
a very fluid motion, which is certainly impossible, but also something that
could be very compositional and a good driver for
interesting graphic design. We're going to leave
this session here. We're going to be having
a discussion about the design outputs and what you will be doing with the content. But I'll see you in the next week where we're
going to start looking at object oriented code and
classes. I'll see you then.