1
00:00:05,050 --> 00:00:07,750
Hi, welcome to this new video.

2
00:00:07,750 --> 00:00:10,670
We're going to start using

3
00:00:10,670 --> 00:00:12,270
the concepts that
we have developed

4
00:00:12,270 --> 00:00:14,335
and develop a bit of practice.

5
00:00:14,335 --> 00:00:16,430
To do that, we're
going to continue

6
00:00:16,430 --> 00:00:19,050
constructing some examples using

7
00:00:19,050 --> 00:00:20,420
the state machine principle.

8
00:00:20,420 --> 00:00:23,910
We're going to construct
something of a small game here,

9
00:00:23,910 --> 00:00:27,690
a very simple
interactive sketch,

10
00:00:27,690 --> 00:00:29,410
but one that will again,

11
00:00:29,410 --> 00:00:31,810
put to the test our
knowledge of state machines.

12
00:00:31,810 --> 00:00:33,410
We're going to do it
through our two videos,

13
00:00:33,410 --> 00:00:35,370
this video and the next one.

14
00:00:35,370 --> 00:00:37,150
Let's jump directly into

15
00:00:37,150 --> 00:00:38,950
processing and see
what we can do.

16
00:00:38,950 --> 00:00:41,530
We're here in our template.

17
00:00:41,530 --> 00:00:46,010
Let's just go ahead and
define a draw loop,

18
00:00:46,810 --> 00:00:52,090
where we are going to be
creating a rectangle.

19
00:00:52,090 --> 00:00:54,540
This time we're going to be
working with a rectangle.

20
00:00:54,540 --> 00:00:57,780
This rectangle we want
it to move around.

21
00:00:57,780 --> 00:01:01,650
We want to just be using
it as an animation.

22
00:01:01,650 --> 00:01:03,390
We have been seeing a little

23
00:01:03,390 --> 00:01:05,330
bit of how that could be done.

24
00:01:05,330 --> 00:01:08,490
We're going to construct
a few variables,

25
00:01:08,490 --> 00:01:11,900
so we're going to
need the variable x.

26
00:01:12,840 --> 00:01:15,145
Let's start with a variable

27
00:01:15,145 --> 00:01:18,595
x in the middle of the screen,

28
00:01:18,595 --> 00:01:23,510
something like 600 and y 300.

29
00:01:23,510 --> 00:01:27,050
If we want to use those
variables in the draw,

30
00:01:27,050 --> 00:01:31,205
we're going to do global x, y.

31
00:01:31,205 --> 00:01:33,330
Now we can do our rectangle,

32
00:01:33,330 --> 00:01:35,870
which is x, y,

33
00:01:35,870 --> 00:01:42,650
and the rectangle should
be relatively small

34
00:01:42,650 --> 00:01:46,170
because we want to
make it like some form

35
00:01:46,170 --> 00:01:50,570
of vehicle or something
along those lines.

36
00:01:50,570 --> 00:01:53,670
The next thing we
want to do is say,

37
00:01:53,670 --> 00:01:59,480
well, x += 1.

38
00:02:02,660 --> 00:02:05,490
Let's just draw this rectangle.

39
00:02:05,490 --> 00:02:07,020
Let's make sure that
we're actually having

40
00:02:07,020 --> 00:02:13,040
a fill of white and
then snow stroke.

41
00:02:16,040 --> 00:02:19,060
There we go.

42
00:02:22,910 --> 00:02:26,820
You can see our rectangle
is moving to the right,

43
00:02:26,820 --> 00:02:29,360
but we're not refreshing
the background.

44
00:02:29,360 --> 00:02:32,670
If we would want to just
see the rectangle moving,

45
00:02:32,670 --> 00:02:36,660
we will add the
background line here

46
00:02:36,660 --> 00:02:38,520
and we can see our rectangle

47
00:02:38,520 --> 00:02:41,000
moving smoothly towards
the right side,

48
00:02:41,000 --> 00:02:43,280
just because we're
adding one to x.

49
00:02:43,280 --> 00:02:48,420
But let's imagine
that the direction

50
00:02:48,420 --> 00:02:49,880
of that movement is one of

51
00:02:49,880 --> 00:02:52,340
the four possible movements
so we're going to create

52
00:02:52,340 --> 00:02:54,820
a state machine of

53
00:02:54,820 --> 00:02:59,715
the possible movements
of this rectangle.

54
00:02:59,715 --> 00:03:05,680
Let's just include that
state machine up here.

55
00:03:05,680 --> 00:03:12,690
States, it's going to be up,

56
00:03:12,690 --> 00:03:29,320
right, down, and left.

57
00:03:29,320 --> 00:03:34,930
There we go. We have four
different axes and we could,

58
00:03:34,930 --> 00:03:36,330
similarly to what we did before,

59
00:03:36,330 --> 00:03:39,150
we're going to identify
the current state

60
00:03:39,420 --> 00:03:43,400
as state number.

61
00:03:44,570 --> 00:03:49,710
Let's pick state to the
right would be one,

62
00:03:49,710 --> 00:03:51,555
zero would be up,

63
00:03:51,555 --> 00:03:56,350
right would be State 1.

64
00:03:58,730 --> 00:04:00,750
Pretty straightforward.

65
00:04:00,750 --> 00:04:03,190
We have our state now.

66
00:04:03,620 --> 00:04:07,720
But this state, the movement
we're currently moving in,

67
00:04:07,720 --> 00:04:11,740
it's pre-defined to be +1 in x.

68
00:04:11,740 --> 00:04:14,285
We don't need that line.

69
00:04:14,285 --> 00:04:18,585
We will need to
create a function to

70
00:04:18,585 --> 00:04:25,850
determine how much
we're altering x.

71
00:04:25,850 --> 00:04:28,240
Let's delete this line.

72
00:04:28,240 --> 00:04:30,780
We know that that's
the movement.

73
00:04:33,050 --> 00:04:39,255
Let's just write our
change state condition.

74
00:04:39,255 --> 00:04:43,420
Let's define change state.

75
00:04:47,840 --> 00:04:51,460
Change state would like

76
00:04:51,460 --> 00:04:54,220
to understand that we're
going to have access to

77
00:04:54,220 --> 00:05:10,050
the global variable
states and current state.

78
00:05:10,050 --> 00:05:14,740
We're going to check
if the current state

79
00:05:16,580 --> 00:05:22,755
is equal to states zero.

80
00:05:22,755 --> 00:05:25,125
That's the first condition.

81
00:05:25,125 --> 00:05:27,520
Let's just remind ourselves

82
00:05:27,520 --> 00:05:29,930
that this is the up condition.

83
00:05:30,080 --> 00:05:32,430
Something will happen.

84
00:05:32,430 --> 00:05:39,200
Some code here. What kind
of code should happen?

85
00:05:39,200 --> 00:05:45,675
Well, x actually
will stay the same.

86
00:05:45,675 --> 00:05:48,360
It wouldn't change.

87
00:05:48,360 --> 00:05:55,220
We could identify that
or make a comment here,

88
00:05:55,220 --> 00:06:06,690
x stays the same, y+=.

89
00:06:06,690 --> 00:06:09,320
If we're thinking, up
we're moving upwards.

90
00:06:09,320 --> 00:06:11,200
If we want to move down,

91
00:06:11,200 --> 00:06:13,190
we would be a +1.

92
00:06:13,190 --> 00:06:15,970
Let's do a += -1.

93
00:06:15,970 --> 00:06:18,060
You could say -= 1,

94
00:06:18,060 --> 00:06:24,040
but I would like to keep
the += sign always.

95
00:06:24,300 --> 00:06:26,770
The only thing that
we're changing is are we

96
00:06:26,770 --> 00:06:29,335
moving positive one
or a negative one?

97
00:06:29,335 --> 00:06:32,960
Negative one would be moving up.

98
00:06:33,330 --> 00:06:37,010
That's our first state.

99
00:06:41,280 --> 00:06:46,370
The second state would
be moving to the right.

100
00:06:47,970 --> 00:06:51,770
Let's just copy this
condition here.

101
00:06:54,390 --> 00:07:03,295
In this case, x plus equals one,

102
00:07:03,295 --> 00:07:05,410
as we wrote before,

103
00:07:05,410 --> 00:07:09,050
and y has no change.

104
00:07:09,540 --> 00:07:20,155
We could say y stays the same.

105
00:07:20,155 --> 00:07:22,450
Obviously, you don't
need that comment.

106
00:07:22,450 --> 00:07:27,025
It's just for us as we are
assuming changes to x and y,

107
00:07:27,025 --> 00:07:29,110
we are telling ourselves,

108
00:07:29,110 --> 00:07:31,150
in this case, it's only y,

109
00:07:31,150 --> 00:07:32,710
or in this case it's only x.

110
00:07:32,710 --> 00:07:34,705
It might be, if you wanted
to have a diagonal,

111
00:07:34,705 --> 00:07:39,640
you might have x and
y both incrementing.

112
00:07:39,640 --> 00:07:42,910
That's a possibility.

113
00:07:42,910 --> 00:07:46,210
Now that we have the
structure in place,

114
00:07:46,210 --> 00:07:50,870
we could copy it easier.

115
00:07:51,450 --> 00:07:54,895
We do want to make sure
that we're changing here.

116
00:07:54,895 --> 00:07:56,545
If we're going from state 0,

117
00:07:56,545 --> 00:07:58,390
now this would be state 1,

118
00:07:58,390 --> 00:08:00,070
this would be state 2,

119
00:08:00,070 --> 00:08:03,800
and the third state
would be down.

120
00:08:03,930 --> 00:08:05,755
Down is

121
00:08:05,755 --> 00:08:15,880
y plus equal one.

122
00:08:15,880 --> 00:08:20,110
We're moving one in y.

123
00:08:20,110 --> 00:08:26,710
Finally, we're going to
have the final condition,

124
00:08:26,710 --> 00:08:30,550
state 4 represents left,

125
00:08:30,550 --> 00:08:39,150
which would be x plus

126
00:08:39,150 --> 00:08:41,745
equal minus one or
minus equal one.

127
00:08:41,745 --> 00:08:44,340
Now we could get rid
of these lines as

128
00:08:44,340 --> 00:08:47,550
we understand what we have here.

129
00:08:47,550 --> 00:08:51,960
Those are the four possible
states that we want to be in.

130
00:08:51,960 --> 00:08:53,940
Similarly to the
example that we did

131
00:08:53,940 --> 00:08:55,965
with the light before,

132
00:08:55,965 --> 00:08:58,790
let's also make sure
that our current state,

133
00:08:58,790 --> 00:09:01,550
whenever we trigger
this function,

134
00:09:01,550 --> 00:09:07,130
becomes the state that follows.

135
00:09:07,130 --> 00:09:13,640
Well,

136
00:09:20,190 --> 00:09:22,510
let me just backtrack
a little bit.

137
00:09:22,510 --> 00:09:24,220
This wouldn't work as we're

138
00:09:24,220 --> 00:09:33,355
writing explicitly the movement.

139
00:09:33,355 --> 00:09:35,380
We're basically
writing a function

140
00:09:35,380 --> 00:09:37,450
that could be
executed every frame.

141
00:09:37,450 --> 00:09:39,415
Let's think like this.

142
00:09:39,415 --> 00:09:40,810
We have our current state is

143
00:09:40,810 --> 00:09:44,575
actually moving in x
in this direction.

144
00:09:44,575 --> 00:09:47,420
We're calling this
function all the time.

145
00:09:48,840 --> 00:09:52,300
Let's figure out what we
are doing wrong here.

146
00:09:52,300 --> 00:09:55,195
Well, we need access
to the variable x

147
00:09:55,195 --> 00:09:58,930
and y. That could be it.

148
00:09:58,930 --> 00:10:03,740
We have state 1 working.

149
00:10:05,010 --> 00:10:07,360
Our function currently works as

150
00:10:07,360 --> 00:10:10,070
a conditional
movement, if you want.

151
00:10:10,080 --> 00:10:17,080
Let's check that if state
0 works. Moving up.

152
00:10:17,080 --> 00:10:20,440
It's good practice to just
check that all our states work

153
00:10:20,440 --> 00:10:24,475
before we actually do
further implementation.

154
00:10:24,475 --> 00:10:26,470
We're moving down, that works,

155
00:10:26,470 --> 00:10:29,965
2, 3, we move left.

156
00:10:29,965 --> 00:10:31,400
Great.

157
00:10:38,370 --> 00:10:40,795
It's working fine.

158
00:10:40,795 --> 00:10:43,120
What I would like to
do is this function

159
00:10:43,120 --> 00:10:45,980
is currently called every frame.

160
00:10:46,650 --> 00:10:49,910
We have a lot of logic here.

161
00:10:51,270 --> 00:10:54,685
An if statement that is
evaluating all these conditions.

162
00:10:54,685 --> 00:10:56,425
I would like to evaluate this

163
00:10:56,425 --> 00:11:01,270
only when we change
state, not every frame.

164
00:11:01,270 --> 00:11:04,695
I don't want to be calling the
function in the draw loop.

165
00:11:04,695 --> 00:11:06,405
I want to call it,
as we did before,

166
00:11:06,405 --> 00:11:09,465
only in the mouse click event.

167
00:11:09,465 --> 00:11:13,990
Let's write that definition.

168
00:11:15,450 --> 00:11:20,895
Mouse, it's capital,

169
00:11:20,895 --> 00:11:22,875
like that I think.

170
00:11:22,875 --> 00:11:25,215
If it turns bright,

171
00:11:25,215 --> 00:11:27,180
it's that same build function.

172
00:11:27,180 --> 00:11:28,890
Let's assume, as before,

173
00:11:28,890 --> 00:11:35,425
that I want to call this
function only on change.

174
00:11:35,425 --> 00:11:36,955
That means that the movement of

175
00:11:36,955 --> 00:11:42,950
the rectangle needs to be
explicitly stated prior.

176
00:11:43,410 --> 00:11:47,030
We can create a variable here.

177
00:11:50,750 --> 00:11:52,770
Let's create a variable

178
00:11:52,770 --> 00:12:03,410
called move_x,

179
00:12:05,940 --> 00:12:09,115
and this is going to be one,

180
00:12:09,115 --> 00:12:16,690
and move_y =

181
00:12:16,690 --> 00:12:19,420
0.

182
00:12:19,420 --> 00:12:20,680
Instead of saying one,

183
00:12:20,680 --> 00:12:23,090
these variables
could be different.

184
00:12:25,530 --> 00:12:32,815
We're going to say every
frame x plus equal,

185
00:12:32,815 --> 00:12:37,160
whatever move x is, a variable.

186
00:12:37,560 --> 00:12:46,120
This way, we don't
have to identify.

187
00:12:46,120 --> 00:12:48,295
This is going to be our
move function, if you want.

188
00:12:48,295 --> 00:12:50,185
We can make another
function for move.

189
00:12:50,185 --> 00:12:52,735
Move will actually
add to x whatever

190
00:12:52,735 --> 00:12:55,675
the move_x variable
is and move_y.

191
00:12:55,675 --> 00:12:58,240
Our if statement, the only
thing that it should do,

192
00:12:58,240 --> 00:13:01,270
it's not change the actual x,

193
00:13:01,270 --> 00:13:05,530
but rather change the
variable of movement.

194
00:13:05,530 --> 00:13:07,960
This is where we would actually

195
00:13:07,960 --> 00:13:13,300
specify that in the first state,

196
00:13:13,300 --> 00:13:17,000
move_x = 0,

197
00:13:17,760 --> 00:13:20,545
as we had been thinking before,

198
00:13:20,545 --> 00:13:24,895
and move_y = 2.

199
00:13:24,895 --> 00:13:26,365
This is not a plus equals

200
00:13:26,365 --> 00:13:28,255
because we're not
moving the item,

201
00:13:28,255 --> 00:13:30,910
it's going to be an equal.

202
00:13:30,910 --> 00:13:33,550
Note that we're doing
here differently.

203
00:13:33,550 --> 00:13:35,920
Instead of making the function

204
00:13:35,920 --> 00:13:40,780
altering the movement
of our rectangle,

205
00:13:40,780 --> 00:13:42,100
we are actually only changing

206
00:13:42,100 --> 00:13:43,630
the variables that we

207
00:13:43,630 --> 00:13:46,220
know are going to be
dictating the movement.

208
00:13:46,560 --> 00:13:49,240
I'm going to copy these
two variables because we

209
00:13:49,240 --> 00:13:51,970
want all states to

210
00:13:51,970 --> 00:13:59,275
be pointing to replacing the
values of these variables.

211
00:13:59,275 --> 00:14:04,430
To the right would be
one in x and zero in y.

212
00:14:06,000 --> 00:14:11,455
Down would be zero in x,

213
00:14:11,455 --> 00:14:19,615
one in y, and left would
be -1 in x and zero in y.

214
00:14:19,615 --> 00:14:21,430
What do we have here? We have

215
00:14:21,430 --> 00:14:25,070
a constant condition
of movement.

216
00:14:28,020 --> 00:14:31,735
When we change state,
which we haven't done yet,

217
00:14:31,735 --> 00:14:33,910
if you remember, we
are only evaluating,

218
00:14:33,910 --> 00:14:35,425
but we're not
changing the state.

219
00:14:35,425 --> 00:14:39,320
We are changing how much
those variables are.

220
00:14:39,630 --> 00:14:41,770
Let's just do that final step.

221
00:14:41,770 --> 00:14:43,105
I think we're almost there.

222
00:14:43,105 --> 00:14:44,890
We want to make sure that when

223
00:14:44,890 --> 00:14:47,785
we're in the current state 0,

224
00:14:47,785 --> 00:14:51,680
this transition to state 1.

225
00:14:57,020 --> 00:15:04,890
We're going to copy
this line here.

226
00:15:04,920 --> 00:15:08,080
If we're in state 1, we
transition to state 2,

227
00:15:08,080 --> 00:15:09,130
if we're in state 2,

228
00:15:09,130 --> 00:15:11,570
we transition to state 3.

229
00:15:12,150 --> 00:15:15,710
Finally, if we're in state 3,

230
00:15:15,990 --> 00:15:18,835
we transition to state 0,

231
00:15:18,835 --> 00:15:22,040
so we returned back
to the beginning.

232
00:15:23,910 --> 00:15:27,115
Let's see if we have
any errors first.

233
00:15:27,115 --> 00:15:30,610
We might be having the
same error that we had

234
00:15:30,610 --> 00:15:34,075
before with missing
some global variables,

235
00:15:34,075 --> 00:15:38,890
so move_x and move_y.

236
00:15:38,890 --> 00:15:41,590
Now, x and y are not

237
00:15:41,590 --> 00:15:46,250
using this function
anymore. Let's see.

238
00:15:47,130 --> 00:15:51,280
As you can see here, we
can alter the movement of

239
00:15:51,280 --> 00:15:55,990
this rectangle by
pressing "Click".

240
00:15:55,990 --> 00:15:58,060
You could say, well, you

241
00:15:58,060 --> 00:15:59,515
mentioned that this
would be a game.

242
00:15:59,515 --> 00:16:01,705
This doesn't sound
like really fun.

243
00:16:01,705 --> 00:16:05,710
Well, there's one final thing
that I would like to add,

244
00:16:05,710 --> 00:16:08,185
and I hope that it starts

245
00:16:08,185 --> 00:16:09,790
making this slightly
more interesting.

246
00:16:09,790 --> 00:16:13,105
As you can see, we're using a
variable of one everywhere.

247
00:16:13,105 --> 00:16:17,665
One determines the speed
of this rectangle.

248
00:16:17,665 --> 00:16:19,510
What if that speed
would gradually

249
00:16:19,510 --> 00:16:21,160
increment every
time that we call

250
00:16:21,160 --> 00:16:23,260
this function of
change of state?

251
00:16:23,260 --> 00:16:25,030
We're trying to
get to the point,

252
00:16:25,030 --> 00:16:26,875
which is quite difficult to keep

253
00:16:26,875 --> 00:16:30,440
the rectangle within the
canvas of the screen.

254
00:16:30,960 --> 00:16:33,400
Let's just try to

255
00:16:33,400 --> 00:16:35,440
implement something like
that, something more playful.

256
00:16:35,440 --> 00:16:38,710
Let's do speed = 1.

257
00:16:38,710 --> 00:16:42,290
That's going to be
our initial speed.

258
00:16:42,810 --> 00:16:46,120
Instead of using
Number 1 everywhere,

259
00:16:46,120 --> 00:16:49,870
let's just remember to
include it as a global.

260
00:16:49,870 --> 00:16:53,690
We're going to say minus speed

261
00:16:53,850 --> 00:16:59,875
x with positive speed
here, positive speed here.

262
00:16:59,875 --> 00:17:01,840
We're replacing
where the ones are

263
00:17:01,840 --> 00:17:05,110
with a variable that
currently is a one.

264
00:17:05,110 --> 00:17:08,960
But every time that we click,

265
00:17:12,510 --> 00:17:15,640
we could say one must click,

266
00:17:15,640 --> 00:17:21,110
change state and speed + = 1.

267
00:17:25,620 --> 00:17:29,155
Every time that we click, the
speed will be increasing.

268
00:17:29,155 --> 00:17:36,735
Let's see. We are

269
00:17:36,735 --> 00:17:38,940
running into the
same global problem

270
00:17:38,940 --> 00:17:41,080
that I keep forgetting.

271
00:17:49,350 --> 00:17:57,310
You can see. My inputs

272
00:17:57,310 --> 00:18:00,550
are not really very
responsive at the moment

273
00:18:00,550 --> 00:18:02,140
but probably in your
computer is going

274
00:18:02,140 --> 00:18:05,050
to hopefully work better.

275
00:18:05,050 --> 00:18:07,930
We're making these,

276
00:18:07,930 --> 00:18:11,140
every time we click the
speed will be increasing

277
00:18:11,140 --> 00:18:15,490
therefore keeping this
rectangle within the canvas.

278
00:18:15,490 --> 00:18:18,500
It's going to be more
and more difficult.

279
00:18:18,930 --> 00:18:21,580
Again, this is not the entirety

280
00:18:21,580 --> 00:18:23,185
of the game that
we're setting up,

281
00:18:23,185 --> 00:18:25,705
but we're going to continue
seeing how to implement

282
00:18:25,705 --> 00:18:28,915
more advanced or
layering states to

283
00:18:28,915 --> 00:18:31,930
this simulation so that we can

284
00:18:31,930 --> 00:18:36,550
actually identify
states of the software.

285
00:18:36,550 --> 00:18:38,140
But we're going to
leave this video

286
00:18:38,140 --> 00:18:40,190
here and I'll see
you in the next one.