1
00:00:05,160 --> 00:00:08,240
Hi, welcome to this new video.

2
00:00:08,240 --> 00:00:11,840
Now that we've understood
what a tuple is,

3
00:00:11,840 --> 00:00:15,590
we're going to start
using it in an example.

4
00:00:15,590 --> 00:00:18,320
We're going to learn
about a concept that I

5
00:00:18,320 --> 00:00:21,330
find very powerful in
programming and it

6
00:00:21,330 --> 00:00:25,300
has helped me really
start organizing my code

7
00:00:25,300 --> 00:00:27,900
and my software in

8
00:00:27,900 --> 00:00:31,385
many interesting ways and
keep things organized.

9
00:00:31,385 --> 00:00:34,220
That's the notion
of a state machine.

10
00:00:34,220 --> 00:00:36,540
We're going to start with a
very simple state machines,

11
00:00:36,540 --> 00:00:40,640
because state machines can
get quite complex over time.

12
00:00:40,640 --> 00:00:42,780
But we're going to
do the most simple

13
00:00:42,780 --> 00:00:45,080
implementation of
a state machine.

14
00:00:45,080 --> 00:00:47,780
But let's first understand
what a state machine is.

15
00:00:47,780 --> 00:00:52,380
A state machine is a computational
model used to describe

16
00:00:52,380 --> 00:00:56,100
all the possible
states and transitions

17
00:00:56,100 --> 00:00:57,220
between those states that

18
00:00:57,220 --> 00:00:59,940
a particular object or
system might be in.

19
00:00:59,940 --> 00:01:02,265
What does that mean?

20
00:01:02,265 --> 00:01:05,040
It means that, let's
say we have a switch.

21
00:01:05,040 --> 00:01:06,860
It could be in an on state

22
00:01:06,860 --> 00:01:08,440
or it could be in an off state.

23
00:01:08,440 --> 00:01:10,720
Those are the two only states

24
00:01:10,720 --> 00:01:13,440
in which the switch
can actually be.

25
00:01:13,440 --> 00:01:16,620
We might want to
identify what are

26
00:01:16,620 --> 00:01:20,080
the conditions that take us
if we are in the on state,

27
00:01:20,080 --> 00:01:21,920
that would take us
into an off state

28
00:01:21,920 --> 00:01:23,815
and the other way
around as well.

29
00:01:23,815 --> 00:01:26,200
Obviously, we could have
more than two states,

30
00:01:26,200 --> 00:01:28,420
we could have infinite
number of states.

31
00:01:28,420 --> 00:01:30,500
But what's interesting here

32
00:01:30,500 --> 00:01:32,235
is that the states
are predefined

33
00:01:32,235 --> 00:01:34,260
and the way in which
we transition from

34
00:01:34,260 --> 00:01:36,720
one end to the other.

35
00:01:36,720 --> 00:01:38,800
Those are very explicit as well.

36
00:01:38,800 --> 00:01:40,460
You can think of
these state machines

37
00:01:40,460 --> 00:01:42,420
as a further way
of modularizing or

38
00:01:42,420 --> 00:01:45,420
breaking and compartmentalizing

39
00:01:45,420 --> 00:01:46,780
the code that you're working on.

40
00:01:46,780 --> 00:01:50,140
You're going to have different
areas of the code that

41
00:01:50,140 --> 00:01:51,660
refer to a specific state

42
00:01:51,660 --> 00:01:54,040
and those may be
working perfectly.

43
00:01:54,040 --> 00:01:56,270
But maybe you have a bug that

44
00:01:56,270 --> 00:02:00,300
happens only in a specific
state that you're in.

45
00:02:00,300 --> 00:02:02,500
Well, you can clearly
isolate that,

46
00:02:02,500 --> 00:02:05,470
that is where that bug
might be happening,

47
00:02:05,470 --> 00:02:07,460
because you have
been working with

48
00:02:07,460 --> 00:02:10,170
this structure of state
machines in mind.

49
00:02:10,170 --> 00:02:14,000
We're going to write a
very simple state machine

50
00:02:14,000 --> 00:02:17,020
using tuples for describing

51
00:02:17,020 --> 00:02:18,480
the different states
that we can be in.

52
00:02:18,480 --> 00:02:20,575
Let's jump into
processing to see.

53
00:02:20,575 --> 00:02:24,240
Here we are in processing.
We have our template.

54
00:02:24,240 --> 00:02:27,900
Let's draw a simple ellipse
in the middle of the screen.

55
00:02:27,900 --> 00:02:30,800
Let's do def draw.

56
00:02:33,740 --> 00:02:39,765
We're going to do a
background black.

57
00:02:39,765 --> 00:02:43,805
I insist just refresh the
background every frame,

58
00:02:43,805 --> 00:02:48,090
and an ellipse that is
going to be in 600,

59
00:02:48,090 --> 00:02:55,600
300 so the center and of
200 pixels by 200 pixels.

60
00:02:57,440 --> 00:03:00,600
Let's see what we have.

61
00:03:00,600 --> 00:03:02,950
That's our ellipse.

62
00:03:03,050 --> 00:03:07,430
Let's imagine that
it's a light that can

63
00:03:07,430 --> 00:03:12,430
be in three different colors
or three different states.

64
00:03:12,750 --> 00:03:19,150
We can define our possible
states with a tuple.

65
00:03:19,150 --> 00:03:20,830
Let's say, states

66
00:03:20,830 --> 00:03:29,970
equal RED, GREEN.

67
00:03:29,970 --> 00:03:35,590
Let's just use
capitals, and BLUE.

68
00:03:40,850 --> 00:03:43,585
Now, let's imagine
that this tuple

69
00:03:43,585 --> 00:03:45,900
represents all the
possible states.

70
00:03:45,900 --> 00:03:47,640
The good thing
about tuples being

71
00:03:47,640 --> 00:03:49,580
immutable is that
we're not going to

72
00:03:49,580 --> 00:03:53,500
be changing the number
of states later.

73
00:03:53,500 --> 00:03:56,930
Software won't be able to
alter the structure so we're

74
00:03:56,930 --> 00:04:02,140
locked in these states
as we describe them.

75
00:04:02,140 --> 00:04:04,340
But we also want to know

76
00:04:04,340 --> 00:04:06,675
in which current
state are we in?

77
00:04:06,675 --> 00:04:08,890
We're going to create a variable

78
00:04:16,520 --> 00:04:19,965
and current state will be,

79
00:04:19,965 --> 00:04:23,250
let's use the variable, states.

80
00:04:23,250 --> 00:04:25,905
States 0.

81
00:04:25,905 --> 00:04:30,890
This represents that we're
going to be in the red state.

82
00:04:32,570 --> 00:04:39,135
Basically, this would be a
string variable that says

83
00:04:39,135 --> 00:04:40,740
our current state is

84
00:04:40,740 --> 00:04:45,915
the first entity of our
three possible states.

85
00:04:45,915 --> 00:04:48,615
We're using the concept
of the topple here

86
00:04:48,615 --> 00:04:51,525
to identify the
possibility space or

87
00:04:51,525 --> 00:04:55,170
the possible states in
which this system can

88
00:04:55,170 --> 00:04:59,100
be in and then using one of
them as a current version.

89
00:04:59,100 --> 00:05:03,600
That's great. Now we
could actually go ahead

90
00:05:03,600 --> 00:05:09,270
and change some condition.

91
00:05:09,270 --> 00:05:11,715
We could say, well,

92
00:05:11,715 --> 00:05:14,820
if we could change the feel,

93
00:05:14,820 --> 00:05:21,195
the color of the Canvas
based on the state we're in.

94
00:05:21,195 --> 00:05:24,130
But let's try to do
that as a function.

95
00:05:24,830 --> 00:05:35,290
Let's just create a
function change state.

96
00:05:37,340 --> 00:05:40,965
Let's create a bit of space
here to write that function.

97
00:05:40,965 --> 00:05:45,345
What are the conditions
that we want to evaluate?

98
00:05:45,345 --> 00:05:49,470
We want to evaluate an if
statement that says if

99
00:05:49,470 --> 00:05:58,810
current state is equal to zero,

100
00:06:07,460 --> 00:06:11,775
then something happens. Let's
imagine what will happen

101
00:06:11,775 --> 00:06:16,780
is the fill will be red.

102
00:06:20,630 --> 00:06:24,795
We can copy this line once more.

103
00:06:24,795 --> 00:06:26,880
Basically, we're going
to do three versions

104
00:06:26,880 --> 00:06:29,325
of that to elif.

105
00:06:29,325 --> 00:06:34,480
If the current state
is state number 1,

106
00:06:36,830 --> 00:06:47,010
the fill here,
we're going to do,

107
00:06:50,380 --> 00:06:54,180
I think we wrote green.

108
00:06:55,130 --> 00:06:59,355
There would be RGB, there we go.

109
00:06:59,355 --> 00:07:04,920
Then finally, let's do

110
00:07:04,920 --> 00:07:11,140
the final elif statement
for the final state,

111
00:07:11,540 --> 00:07:14,755
that is state number 2.

112
00:07:14,755 --> 00:07:17,120
We have repeated this line three

113
00:07:17,120 --> 00:07:20,345
times or almost repeated it.

114
00:07:20,345 --> 00:07:23,195
Changing the if
statement condition

115
00:07:23,195 --> 00:07:26,060
being are we in the first
state, the second state,

116
00:07:26,060 --> 00:07:27,425
or the third state,

117
00:07:27,425 --> 00:07:29,910
and changing the fill that

118
00:07:29,910 --> 00:07:33,130
we are using in each
one of those cases.

119
00:07:35,030 --> 00:07:37,530
That's good.

120
00:07:37,530 --> 00:07:39,600
But the problem that we
have here is we're using

121
00:07:39,600 --> 00:07:41,310
a function and we're

122
00:07:41,310 --> 00:07:43,305
accessing something that
is a global variable.

123
00:07:43,305 --> 00:07:47,700
Both states and current
state are global variables.

124
00:07:47,700 --> 00:07:50,145
Variables have been described
outside that function.

125
00:07:50,145 --> 00:07:54,000
We're going to have
to add global states

126
00:07:54,000 --> 00:07:57,130
and current state.

127
00:08:02,240 --> 00:08:09,420
There we go. In many places,

128
00:08:09,420 --> 00:08:11,685
you will see that it's
not a very good practice

129
00:08:11,685 --> 00:08:16,755
to use these global variables.

130
00:08:16,755 --> 00:08:19,860
We're going to learn further
down the line in the course,

131
00:08:19,860 --> 00:08:21,240
how to start getting
rid of this,

132
00:08:21,240 --> 00:08:23,430
how do you avoid using

133
00:08:23,430 --> 00:08:25,650
global variables and what
are the best practices

134
00:08:25,650 --> 00:08:28,200
within programming?
But for now, I

135
00:08:28,200 --> 00:08:31,320
think that we want to do,

136
00:08:31,320 --> 00:08:33,930
it's a simple implementation
where we are accessing

137
00:08:33,930 --> 00:08:35,700
these variables that we

138
00:08:35,700 --> 00:08:38,430
declared here within
this function.

139
00:08:38,430 --> 00:08:43,930
Notice that I named this
function, change state.

140
00:08:44,410 --> 00:08:50,540
At this time, we are not
changing the state at all,

141
00:08:50,540 --> 00:08:52,400
we're just changing
the color based on

142
00:08:52,400 --> 00:08:55,530
the state so we're
evaluating the state.

143
00:08:56,140 --> 00:08:59,420
How could we change the states?

144
00:08:59,420 --> 00:09:01,760
Maybe we want to test
if this is in fact

145
00:09:01,760 --> 00:09:04,430
working we could put
this line of code,

146
00:09:04,430 --> 00:09:07,740
this function,
before the ellipse,

147
00:09:08,140 --> 00:09:12,425
just to see if we
remember that the ellipse

148
00:09:12,425 --> 00:09:15,860
was white but if we are
in fact in state 0,

149
00:09:15,860 --> 00:09:17,210
which is the red state,

150
00:09:17,210 --> 00:09:20,610
we would be, it should be red.

151
00:09:21,480 --> 00:09:24,265
We're facing a problem.

152
00:09:24,265 --> 00:09:26,890
The problem here is
that we should be not

153
00:09:26,890 --> 00:09:30,760
assigning but checking
for equality.

154
00:09:30,760 --> 00:09:33,550
We're asking the question
in an if statement.

155
00:09:33,550 --> 00:09:39,875
Is this current state the
first state, and there we go.

156
00:09:39,875 --> 00:09:42,335
It is working.

157
00:09:42,335 --> 00:09:44,090
If we would change that,

158
00:09:44,090 --> 00:09:45,905
the current state up here,

159
00:09:45,905 --> 00:09:49,260
if we would start with state 1,

160
00:09:50,470 --> 00:09:56,370
we would be green and then
let's check the final one.

161
00:09:58,210 --> 00:10:01,610
That's great. Our function

162
00:10:01,610 --> 00:10:04,745
is able to identify the states,

163
00:10:04,745 --> 00:10:08,825
but let's not just
change it every frame.

164
00:10:08,825 --> 00:10:10,625
Let's not call this
function automatically.

165
00:10:10,625 --> 00:10:12,620
Let's call this function

166
00:10:12,620 --> 00:10:15,300
whenever we want to
change this state.

167
00:10:16,840 --> 00:10:24,410
We are going to maybe start
just to make sure that we

168
00:10:24,410 --> 00:10:31,835
are in fact having ready
lips to start with.

169
00:10:31,835 --> 00:10:34,280
Our first state it's
just going to be

170
00:10:34,280 --> 00:10:37,910
our base condition
but we want to

171
00:10:37,910 --> 00:10:43,640
change this state now by
creating a mouse function.

172
00:10:43,640 --> 00:10:46,230
Let's do a mouse-click function.

173
00:10:48,910 --> 00:10:51,860
This is one of the
inbuilt functions in

174
00:10:51,860 --> 00:10:54,290
processing that allow us

175
00:10:54,290 --> 00:10:57,530
to identify once the
mouse is clicked,

176
00:10:57,530 --> 00:11:00,875
we can call a function
in this case.

177
00:11:00,875 --> 00:11:02,390
We're going to use

178
00:11:02,390 --> 00:11:05,060
this function only when
we click the mouse.

179
00:11:05,060 --> 00:11:11,570
We're starting in a red state.

180
00:11:11,570 --> 00:11:17,150
If we click, we're having there,

181
00:11:17,150 --> 00:11:19,880
let's see what's going wrong.

182
00:11:19,880 --> 00:11:22,870
Well, as I mentioned before,

183
00:11:22,870 --> 00:11:24,580
we are actually
checking for color,

184
00:11:24,580 --> 00:11:25,885
but we're not
changing the state.

185
00:11:25,885 --> 00:11:27,550
We're not really
getting to the point at

186
00:11:27,550 --> 00:11:29,485
which we're altering the states.

187
00:11:29,485 --> 00:11:36,750
How would we do that? Let's
just pick the current state.

188
00:11:40,420 --> 00:11:45,170
What would be the next
state to zero would be one?

189
00:11:45,170 --> 00:11:47,975
If we are in state zero,

190
00:11:47,975 --> 00:11:54,845
we would transition to state
1 and if we're in state 1,

191
00:11:54,845 --> 00:11:56,420
we're going to do
this for each one

192
00:11:56,420 --> 00:11:59,120
of the different states.

193
00:11:59,120 --> 00:12:01,010
We're going to
transition to state

194
00:12:01,010 --> 00:12:03,260
2 and if we're in state 2,

195
00:12:03,260 --> 00:12:08,330
we're going to transition
to state 0 so we look back.

196
00:12:08,330 --> 00:12:11,525
This is what we're
identifying as a transition.

197
00:12:11,525 --> 00:12:14,210
On mouse click, we are moving

198
00:12:14,210 --> 00:12:18,560
from the current state to
the next state in the list.

199
00:12:18,560 --> 00:12:22,535
We're moving from red
to green to blue,

200
00:12:22,535 --> 00:12:25,025
back to red and we look around.

201
00:12:25,025 --> 00:12:27,245
Let's see, we have
the red state,

202
00:12:27,245 --> 00:12:29,675
we click again.

203
00:12:29,675 --> 00:12:32,850
Here it's working.

204
00:12:38,470 --> 00:12:41,850
Yeah, it seems to
be working well.

205
00:12:42,220 --> 00:12:44,480
It's having an issue
with the input,

206
00:12:44,480 --> 00:12:46,430
but it seems that

207
00:12:46,430 --> 00:12:51,290
it's not a problem
with the code, right?

208
00:12:51,290 --> 00:12:54,560
As you can see, we
have the transitions.

209
00:12:54,560 --> 00:12:56,780
So this is where we're
kind of starting to

210
00:12:56,780 --> 00:12:59,030
get into how we can actually

211
00:12:59,030 --> 00:13:03,155
construct a piece of
software that might have

212
00:13:03,155 --> 00:13:04,850
a whole range of

213
00:13:04,850 --> 00:13:08,030
different states and
different functionality.

214
00:13:08,030 --> 00:13:10,850
We're going to be
breaking and using

215
00:13:10,850 --> 00:13:12,275
this structure quite a bit

216
00:13:12,275 --> 00:13:14,720
to not only identify
the movement,

217
00:13:14,720 --> 00:13:15,845
sometimes of an object,

218
00:13:15,845 --> 00:13:18,185
but sometimes the entirety of

219
00:13:18,185 --> 00:13:20,600
how the software is
actually operating.

220
00:13:20,600 --> 00:13:22,535
A very useful technique,

221
00:13:22,535 --> 00:13:25,100
and again, this is a very
simple implementation of that.

222
00:13:25,100 --> 00:13:27,290
We will be seeing more
advanced versions as we move

223
00:13:27,290 --> 00:13:30,390
along. I'll see you
in the next video.