Hi, welcome to this new video. We're going to start using the concepts that
we have developed and develop a bit of practice. To do that, we're
going to continue constructing some examples using the state machine principle. We're going to construct
something of a small game here, a very simple
interactive sketch, but one that will again, put to the test our
knowledge of state machines. We're going to do it
through our two videos, this video and the next one. Let's jump directly into processing and see
what we can do. We're here in our template. Let's just go ahead and
define a draw loop, where we are going to be
creating a rectangle. This time we're going to be
working with a rectangle. This rectangle we want
it to move around. We want to just be using
it as an animation. We have been seeing a little bit of how that could be done. We're going to construct
a few variables, so we're going to
need the variable x. Let's start with a variable x in the middle of the screen, something like 600 and y 300. If we want to use those
variables in the draw, we're going to do global x, y. Now we can do our rectangle, which is x, y, and the rectangle should
be relatively small because we want to
make it like some form of vehicle or something
along those lines. The next thing we
want to do is say, well, x += 1. Let's just draw this rectangle. Let's make sure that
we're actually having a fill of white and
then snow stroke. There we go. You can see our rectangle
is moving to the right, but we're not refreshing
the background. If we would want to just
see the rectangle moving, we will add the
background line here and we can see our rectangle moving smoothly towards
the right side, just because we're
adding one to x. But let's imagine
that the direction of that movement is one of the four possible movements
so we're going to create a state machine of the possible movements
of this rectangle. Let's just include that
state machine up here. States, it's going to be up, right, down, and left. There we go. We have four
different axes and we could, similarly to what we did before, we're going to identify
the current state as state number. Let's pick state to the
right would be one, zero would be up, right would be State 1. Pretty straightforward. We have our state now. But this state, the movement
we're currently moving in, it's pre-defined to be +1 in x. We don't need that line. We will need to
create a function to determine how much
we're altering x. Let's delete this line. We know that that's
the movement. Let's just write our
change state condition. Let's define change state. Change state would like to understand that we're
going to have access to the global variable
states and current state. We're going to check
if the current state is equal to states zero. That's the first condition. Let's just remind ourselves that this is the up condition. Something will happen. Some code here. What kind
of code should happen? Well, x actually
will stay the same. It wouldn't change. We could identify that
or make a comment here, x stays the same, y+=. If we're thinking, up
we're moving upwards. If we want to move down, we would be a +1. Let's do a += -1. You could say -= 1, but I would like to keep
the += sign always. The only thing that
we're changing is are we moving positive one
or a negative one? Negative one would be moving up. That's our first state. The second state would
be moving to the right. Let's just copy this
condition here. In this case, x plus equals one, as we wrote before, and y has no change. We could say y stays the same. Obviously, you don't
need that comment. It's just for us as we are
assuming changes to x and y, we are telling ourselves, in this case, it's only y, or in this case it's only x. It might be, if you wanted
to have a diagonal, you might have x and
y both incrementing. That's a possibility. Now that we have the
structure in place, we could copy it easier. We do want to make sure
that we're changing here. If we're going from state 0, now this would be state 1, this would be state 2, and the third state
would be down. Down is y plus equal one. We're moving one in y. Finally, we're going to
have the final condition, state 4 represents left, which would be x plus equal minus one or
minus equal one. Now we could get rid
of these lines as we understand what we have here. Those are the four possible
states that we want to be in. Similarly to the
example that we did with the light before, let's also make sure
that our current state, whenever we trigger
this function, becomes the state that follows. Well, let me just backtrack
a little bit. This wouldn't work as we're writing explicitly the movement. We're basically
writing a function that could be
executed every frame. Let's think like this. We have our current state is actually moving in x
in this direction. We're calling this
function all the time. Let's figure out what we
are doing wrong here. Well, we need access
to the variable x and y. That could be it. We have state 1 working. Our function currently works as a conditional
movement, if you want. Let's check that if state
0 works. Moving up. It's good practice to just
check that all our states work before we actually do
further implementation. We're moving down, that works, 2, 3, we move left. Great. It's working fine. What I would like to
do is this function is currently called every frame. We have a lot of logic here. An if statement that is
evaluating all these conditions. I would like to evaluate this only when we change
state, not every frame. I don't want to be calling the
function in the draw loop. I want to call it,
as we did before, only in the mouse click event. Let's write that definition. Mouse, it's capital, like that I think. If it turns bright, it's that same build function. Let's assume, as before, that I want to call this
function only on change. That means that the movement of the rectangle needs to be
explicitly stated prior. We can create a variable here. Let's create a variable called move_x, and this is going to be one, and move_y = 0. Instead of saying one, these variables
could be different. We're going to say every
frame x plus equal, whatever move x is, a variable. This way, we don't
have to identify. This is going to be our
move function, if you want. We can make another
function for move. Move will actually
add to x whatever the move_x variable
is and move_y. Our if statement, the only
thing that it should do, it's not change the actual x, but rather change the
variable of movement. This is where we would actually specify that in the first state, move_x = 0, as we had been thinking before, and move_y = 2. This is not a plus equals because we're not
moving the item, it's going to be an equal. Note that we're doing
here differently. Instead of making the function altering the movement
of our rectangle, we are actually only changing the variables that we know are going to be
dictating the movement. I'm going to copy these
two variables because we want all states to be pointing to replacing the
values of these variables. To the right would be
one in x and zero in y. Down would be zero in x, one in y, and left would
be -1 in x and zero in y. What do we have here? We have a constant condition
of movement. When we change state,
which we haven't done yet, if you remember, we
are only evaluating, but we're not
changing the state. We are changing how much
those variables are. Let's just do that final step. I think we're almost there. We want to make sure that when we're in the current state 0, this transition to state 1. We're going to copy
this line here. If we're in state 1, we
transition to state 2, if we're in state 2, we transition to state 3. Finally, if we're in state 3, we transition to state 0, so we returned back
to the beginning. Let's see if we have
any errors first. We might be having the
same error that we had before with missing
some global variables, so move_x and move_y. Now, x and y are not using this function
anymore. Let's see. As you can see here, we
can alter the movement of this rectangle by
pressing "Click". You could say, well, you mentioned that this
would be a game. This doesn't sound
like really fun. Well, there's one final thing
that I would like to add, and I hope that it starts making this slightly
more interesting. As you can see, we're using a
variable of one everywhere. One determines the speed
of this rectangle. What if that speed
would gradually increment every
time that we call this function of
change of state? We're trying to
get to the point, which is quite difficult to keep the rectangle within the
canvas of the screen. Let's just try to implement something like
that, something more playful. Let's do speed = 1. That's going to be
our initial speed. Instead of using
Number 1 everywhere, let's just remember to
include it as a global. We're going to say minus speed x with positive speed
here, positive speed here. We're replacing
where the ones are with a variable that
currently is a one. But every time that we click, we could say one must click, change state and speed + = 1. Every time that we click, the
speed will be increasing. Let's see. We are running into the
same global problem that I keep forgetting. You can see. My inputs are not really very
responsive at the moment but probably in your
computer is going to hopefully work better. We're making these, every time we click the
speed will be increasing therefore keeping this
rectangle within the canvas. It's going to be more
and more difficult. Again, this is not the entirety of the game that
we're setting up, but we're going to continue
seeing how to implement more advanced or
layering states to this simulation so that we can actually identify
states of the software. But we're going to
leave this video here and I'll see
you in the next one.