1
00:00:05,080 --> 00:00:07,920
Hi, welcome to this new lesson.

2
00:00:07,920 --> 00:00:10,680
On this lesson, we're
going to start working on

3
00:00:10,680 --> 00:00:11,960
a project that
it's going to take

4
00:00:11,960 --> 00:00:14,005
several videos to complete.

5
00:00:14,005 --> 00:00:16,405
It's going to be
our final project,

6
00:00:16,405 --> 00:00:18,880
and we're going to
start working in

7
00:00:18,880 --> 00:00:20,240
converting one of the projects

8
00:00:20,240 --> 00:00:21,755
that we've done in Week 4,

9
00:00:21,755 --> 00:00:23,845
which is the Langton's
Ant algorithm.

10
00:00:23,845 --> 00:00:27,080
But we're going to write it
in object oriented manner.

11
00:00:27,080 --> 00:00:29,400
By doing so, we're
going to be able

12
00:00:29,400 --> 00:00:31,690
to not only have one
ant in the screen,

13
00:00:31,690 --> 00:00:32,920
but multiple ants and start

14
00:00:32,920 --> 00:00:35,210
seeing how those interact
with one another.

15
00:00:35,210 --> 00:00:39,510
The ants are going to
be basically a class

16
00:00:39,510 --> 00:00:40,810
that is operating and

17
00:00:40,810 --> 00:00:43,970
communicating with a grid
class in the background.

18
00:00:43,970 --> 00:00:47,320
That's going to allow us to
carry the information that

19
00:00:47,320 --> 00:00:49,960
allows the ants to perform

20
00:00:49,960 --> 00:00:52,735
their behavior as
we saw on Week 4.

21
00:00:52,735 --> 00:00:54,535
So if you haven't seen

22
00:00:54,535 --> 00:00:56,900
the behavior of
the Langton's Ant,

23
00:00:56,900 --> 00:00:59,370
I really strongly recommend
you to start there.

24
00:00:59,370 --> 00:01:01,190
We really go a little bit

25
00:01:01,190 --> 00:01:03,150
deeper on the
behavior of the ant.

26
00:01:03,150 --> 00:01:04,570
In this series of videos,

27
00:01:04,570 --> 00:01:06,240
we're going to implemented

28
00:01:06,240 --> 00:01:08,375
it as an object oriented class.

29
00:01:08,375 --> 00:01:12,160
But at the same time, we are
going to maybe go a little

30
00:01:12,160 --> 00:01:16,080
bit faster over some of the
issues that we already cover.

31
00:01:16,080 --> 00:01:22,620
So let's start working in
processing, and here we are.

32
00:01:22,730 --> 00:01:26,260
So the first thing I'm
going to do is just

33
00:01:26,260 --> 00:01:29,030
create a new tab here and

34
00:01:29,030 --> 00:01:37,470
we're going to create
this grid_data class.

35
00:01:37,470 --> 00:01:39,630
So this grid_data class,

36
00:01:39,630 --> 00:01:42,885
it's going to be
the tab in which

37
00:01:42,885 --> 00:01:46,560
we are going to
define our class.

38
00:01:46,560 --> 00:01:54,840
So class grid_data, and here,

39
00:01:54,840 --> 00:01:58,470
what we basically want
to do with this class

40
00:01:58,470 --> 00:02:01,590
is something that's going to be

41
00:02:01,590 --> 00:02:02,830
a grid that is going to be

42
00:02:02,830 --> 00:02:04,465
able to hold information for us.

43
00:02:04,465 --> 00:02:07,930
So let's start with
the constructor.

44
00:02:07,930 --> 00:02:15,620
Let's define def init
function with self.

45
00:02:20,400 --> 00:02:23,115
I think I'm missing
a space here.

46
00:02:23,115 --> 00:02:25,100
As we have discussed
in previous videos,

47
00:02:25,100 --> 00:02:30,970
a grid requires a columns, rows.

48
00:02:32,120 --> 00:02:36,280
I think that we could
start with that for now.

49
00:02:36,860 --> 00:02:44,970
Then let's equalize this
to the external data.

50
00:02:44,970 --> 00:02:48,270
If you remember this from some
of the previous sessions,

51
00:02:48,270 --> 00:02:52,205
we are creating an internal
variable to the class,

52
00:02:52,205 --> 00:02:56,040
which is the self.columns
and the self.rows,

53
00:02:56,040 --> 00:03:01,890
which basically are created

54
00:03:01,890 --> 00:03:07,290
outside the class,
and parses arguments.

55
00:03:08,110 --> 00:03:11,050
Sorry about that. There we go.

56
00:03:11,050 --> 00:03:15,380
The other important bit
of data we will need,

57
00:03:15,380 --> 00:03:17,040
and this is not something that I

58
00:03:17,040 --> 00:03:19,520
will include in the constructor.

59
00:03:19,520 --> 00:03:22,040
It's going to be a data

60
00:03:22,040 --> 00:03:26,545
which is going to be
an array, so a list.

61
00:03:26,545 --> 00:03:29,280
So what is important
here is that we are

62
00:03:29,280 --> 00:03:32,330
going to do a flat list,

63
00:03:32,330 --> 00:03:36,460
meaning the index of
entities in the grid.

64
00:03:36,460 --> 00:03:39,965
It's not going to be a
multi dimensional list,

65
00:03:39,965 --> 00:03:43,160
so it's going to be
a single flat list.

66
00:03:43,160 --> 00:03:44,920
So that will determine how we

67
00:03:44,920 --> 00:03:48,135
actually compute
neighbor operations.

68
00:03:48,135 --> 00:03:53,200
So this is the minimums that
we need for this class.

69
00:03:53,200 --> 00:03:57,900
Let's also include as we have
been doing, main function,

70
00:03:57,900 --> 00:04:00,060
which we're going to call run,

71
00:04:00,330 --> 00:04:05,855
and it's going to use
our self and then self.

72
00:04:05,855 --> 00:04:09,610
Here, we're going to
use the functions

73
00:04:09,610 --> 00:04:14,005
or methods in a way that
this class will execute.

74
00:04:14,005 --> 00:04:16,230
We want to for now,

75
00:04:16,230 --> 00:04:18,810
maybe we're just going to
do something like display.

76
00:04:18,810 --> 00:04:21,070
We don't have this function yet.

77
00:04:21,070 --> 00:04:25,590
We have to construct it, so

78
00:04:25,590 --> 00:04:27,955
we can get to that in a minute.

79
00:04:27,955 --> 00:04:32,050
So this is the foundation
of our grid class.

80
00:04:32,050 --> 00:04:37,145
Let's just go back to our main
class or to our main tab,

81
00:04:37,145 --> 00:04:40,720
and just create the boiler
plate of what is going to

82
00:04:40,720 --> 00:04:45,215
be the calling of this
class into the canvas.

83
00:04:45,215 --> 00:04:49,080
So the first thing
we want to do is,

84
00:04:51,250 --> 00:04:54,390
as we have been doing.

85
00:04:56,510 --> 00:05:04,580
Set up. Here,

86
00:05:04,580 --> 00:05:07,350
I'm going to repeat
our convention

87
00:05:10,360 --> 00:05:14,610
1,200 pixels in this direction,

88
00:05:17,290 --> 00:05:21,200
600 in this direction.

89
00:05:21,200 --> 00:05:24,620
Let's use our variables

90
00:05:24,620 --> 00:05:33,305
now for our size.

91
00:05:33,305 --> 00:05:40,260
Background, it's
going to be black.

92
00:05:41,210 --> 00:05:46,215
Basically, we should
have a window right now.

93
00:05:46,215 --> 00:05:51,945
That's all good. We haven't
called the class yet.

94
00:05:51,945 --> 00:05:54,885
The class exists as

95
00:05:54,885 --> 00:06:00,195
an extension or an additional
file within our system,

96
00:06:00,195 --> 00:06:02,205
but we are not
calling that class.

97
00:06:02,205 --> 00:06:07,680
Let's just start bringing
that class in by importing,

98
00:06:07,680 --> 00:06:11,850
first of all, we're going
to import the file.

99
00:06:11,850 --> 00:06:22,125
Let's just go into grid data
class as grid data or GD.

100
00:06:22,125 --> 00:06:25,530
It's going to be our
short code for accessing

101
00:06:25,530 --> 00:06:30,490
all the functionality that
this grid class will have.

102
00:06:31,610 --> 00:06:35,235
We also are going to include an

103
00:06:35,235 --> 00:06:38,070
import random because I

104
00:06:38,070 --> 00:06:41,280
know we're going to need
this a bit later on.

105
00:06:41,280 --> 00:06:44,445
What we're trying to do
is get the instance of

106
00:06:44,445 --> 00:06:47,250
the grid class in the
screen and for that,

107
00:06:47,250 --> 00:06:50,505
we have to construct one
instance of this class.

108
00:06:50,505 --> 00:06:54,190
Let's call it main grid.

109
00:06:54,890 --> 00:06:59,340
That's going to be the
name of our main grid,

110
00:06:59,340 --> 00:07:01,290
and that's going to
be our only one so

111
00:07:01,290 --> 00:07:03,750
perhaps it could be
just called grid.

112
00:07:03,750 --> 00:07:09,195
But we're going to keep
that for now, so GD.

113
00:07:09,195 --> 00:07:11,175
We're accessing the class,

114
00:07:11,175 --> 00:07:13,545
and now we can actually
use the constructor.

115
00:07:13,545 --> 00:07:18,910
The constructor is the name
of the class, so grid data.

116
00:07:23,240 --> 00:07:25,470
Here we need to provide

117
00:07:25,470 --> 00:07:30,495
D columns so let's just
use this convention

118
00:07:30,495 --> 00:07:37,955
of specifying what are we
giving as an argument, columns.

119
00:07:37,955 --> 00:07:41,580
I'm going to do rows as well.

120
00:07:42,820 --> 00:07:45,815
I think that's it for now.

121
00:07:45,815 --> 00:07:51,765
We have two variables

122
00:07:51,765 --> 00:07:55,380
that are being passed
on to our class,

123
00:07:55,380 --> 00:07:57,450
which are the requirements
of columns and

124
00:07:57,450 --> 00:08:00,195
rows for our grid.

125
00:08:00,195 --> 00:08:02,490
There's nothing actually making

126
00:08:02,490 --> 00:08:05,740
this class being drawn
in the screen yet.

127
00:08:06,620 --> 00:08:09,930
Well, we have to
write that function.

128
00:08:09,930 --> 00:08:12,930
Let's just still construct.

129
00:08:12,930 --> 00:08:16,305
We have our first
instance of the class.

130
00:08:16,305 --> 00:08:19,930
I just double-checked
that everything is,

131
00:08:25,190 --> 00:08:27,990
so we are having an issue here.

132
00:08:27,990 --> 00:08:31,995
Let's just double-check
what are we doing wrong.

133
00:08:31,995 --> 00:08:34,665
Because we're actually
calling this function,

134
00:08:34,665 --> 00:08:37,300
I think we have to include

135
00:08:38,870 --> 00:08:42,585
some information in our method.

136
00:08:42,585 --> 00:08:51,160
Let's just do def
draw or display.

137
00:09:00,440 --> 00:09:03,180
We are going to do the display.

138
00:09:03,180 --> 00:09:05,280
Let's just do something
simple just to check if

139
00:09:05,280 --> 00:09:09,180
our class is working,

140
00:09:09,180 --> 00:09:12,675
let's do a rectangle at 20,

141
00:09:12,675 --> 00:09:16,695
20 by 20 pixels by 20 pixels,

142
00:09:16,695 --> 00:09:22,680
and with a stroke rect.

143
00:09:22,680 --> 00:09:25,245
Now that we have our
display function,

144
00:09:25,245 --> 00:09:34,510
we can do our self.display.

145
00:09:36,110 --> 00:09:39,210
With this function now, run,

146
00:09:39,210 --> 00:09:45,300
if we would like to see the
small display in the main,

147
00:09:45,300 --> 00:09:51,550
we can actually run it
here, so main_grid.run.

148
00:09:55,190 --> 00:09:58,395
We're creating the
sense of the class.

149
00:09:58,395 --> 00:10:01,380
We're actually executing
it in the setup,

150
00:10:01,380 --> 00:10:04,540
and that is it.

151
00:10:07,850 --> 00:10:11,820
We're seeing that
we're having an issue.

152
00:10:11,820 --> 00:10:15,135
The spelling rows.

153
00:10:15,135 --> 00:10:22,020
We did row instead of rows
and there we go. Let's see.

154
00:10:22,020 --> 00:10:26,385
Now we can see a
small rectangle here.

155
00:10:26,385 --> 00:10:29,700
Things are working.
Obviously, we are not doing,

156
00:10:29,700 --> 00:10:30,870
in fact, a grid yet.

157
00:10:30,870 --> 00:10:33,430
We are just doing a rectangle.

158
00:10:33,980 --> 00:10:36,600
Let's go into the grid, now that

159
00:10:36,600 --> 00:10:38,655
we have it being executed.

160
00:10:38,655 --> 00:10:42,390
We can actually start
doing some initiating

161
00:10:42,390 --> 00:10:49,090
the data and basically
creating a grid.

162
00:10:50,420 --> 00:10:53,190
The first thing we want
to do is that the display

163
00:10:53,190 --> 00:10:55,020
is not going to be
just one rectangle,

164
00:10:55,020 --> 00:10:57,315
but a series of rectangles.

165
00:10:57,315 --> 00:11:01,500
Let's just do a for loop,

166
00:11:01,500 --> 00:11:03,780
or a nested four
loop in this case.

167
00:11:03,780 --> 00:11:13,240
For i in range 0,2 self columns.

168
00:11:14,390 --> 00:11:17,775
That is the first
part of the loop.

169
00:11:17,775 --> 00:11:22,470
The second loop will be 4j in

170
00:11:22,470 --> 00:11:30,970
range 0, self dot rows.

171
00:11:32,360 --> 00:11:36,750
We've created a nested
structure so now we would

172
00:11:36,750 --> 00:11:39,000
have the number of

173
00:11:39,000 --> 00:11:41,985
rectangles equivalent to
the columns and rows,

174
00:11:41,985 --> 00:11:49,420
if we actually put these
rectangles within those loops,

175
00:11:50,990 --> 00:11:54,780
and we want to change the data.

176
00:11:54,780 --> 00:11:57,480
Let's just do the feel,

177
00:11:57,480 --> 00:12:01,320
the strokes which is the line,

178
00:12:01,320 --> 00:12:03,135
it's going to be zero,

179
00:12:03,135 --> 00:12:07,330
and then the feel let's
just keep it wide.

180
00:12:08,480 --> 00:12:11,280
If we actually do this,

181
00:12:11,280 --> 00:12:13,485
we actually need to calculate

182
00:12:13,485 --> 00:12:15,930
where would these rectangles be.

183
00:12:15,930 --> 00:12:20,310
In x, we're going
to say i, in y,

184
00:12:20,310 --> 00:12:22,650
we're going to say
J and right now,

185
00:12:22,650 --> 00:12:26,160
we will keep 20 by 20.

186
00:12:26,160 --> 00:12:30,825
But we don't really know
from within the class,

187
00:12:30,825 --> 00:12:32,610
if you can imagine, we cannot

188
00:12:32,610 --> 00:12:34,365
know how big the screen is yet.

189
00:12:34,365 --> 00:12:39,490
We don't have information
of the image size.

190
00:12:39,710 --> 00:12:43,005
We are going to pass
that information,

191
00:12:43,005 --> 00:12:45,480
the size of the screen
or the size of the grid

192
00:12:45,480 --> 00:12:47,445
in a way how big would the grid

193
00:12:47,445 --> 00:12:50,190
be distributed and we're

194
00:12:50,190 --> 00:12:52,005
going to pass it
on as an argument.

195
00:12:52,005 --> 00:12:53,820
If you think about it right now,

196
00:12:53,820 --> 00:12:56,175
we could put a
multiplier here so

197
00:12:56,175 --> 00:13:03,450
i*10 and j*10 just

198
00:13:03,450 --> 00:13:08,170
to see this grid somehow
distributed over space.

199
00:13:08,600 --> 00:13:13,600
First of all, let's just
fix our issues or errors.

200
00:13:14,900 --> 00:13:16,920
We have deep,

201
00:13:16,920 --> 00:13:26,775
the I know, I spell rich.

202
00:13:26,775 --> 00:13:28,740
Let's go with that.

203
00:13:28,740 --> 00:13:30,940
You can see here this grid

204
00:13:30,980 --> 00:13:33,570
we've created so
many rectangles,

205
00:13:33,570 --> 00:13:37,320
but it doesn't really match
the size of our screen,

206
00:13:37,320 --> 00:13:41,490
and they're actually
overlapping with each other.

207
00:13:41,490 --> 00:13:43,515
That's because we
multiply it times 10,

208
00:13:43,515 --> 00:13:46,380
and the size of the
rectangle is 20.

209
00:13:46,380 --> 00:13:48,600
This is not very precise.

210
00:13:48,600 --> 00:13:52,230
We would like to keep things
very precise and making sure

211
00:13:52,230 --> 00:13:57,435
that we have a way of knowing
how big the screen will be.

212
00:13:57,435 --> 00:13:59,700
The first thing I would
like to do is expand

213
00:13:59,700 --> 00:14:02,310
this constructor a little bit.

214
00:14:02,310 --> 00:14:09,000
Let's expand with the
variable screen width

215
00:14:09,000 --> 00:14:14,610
and screen height in

216
00:14:14,610 --> 00:14:17,025
this way and we're going
to do the same thing,

217
00:14:17,025 --> 00:14:22,980
Self dot screen width equals

218
00:14:22,980 --> 00:14:32,130
screen width and self.screen

219
00:14:32,130 --> 00:14:34,290
height equals screen height.

220
00:14:34,290 --> 00:14:37,245
Now we actually should
have the information.

221
00:14:37,245 --> 00:14:40,290
At least the constructor
requires this information.

222
00:14:40,290 --> 00:14:42,450
If we try to run this,
we're going to have

223
00:14:42,450 --> 00:14:44,610
an error because we
are not providing

224
00:14:44,610 --> 00:14:51,150
that information basically in
the arguments of the class.

225
00:14:51,150 --> 00:14:52,905
Let's provide those now.

226
00:14:52,905 --> 00:15:00,820
Screen. The first one is width.

227
00:15:01,160 --> 00:15:07,005
This is going to be
equals to the image size.

228
00:15:07,005 --> 00:15:08,940
Because we've identified this to

229
00:15:08,940 --> 00:15:12,190
be 1,200 pixels is the
size of the screen.

230
00:15:13,070 --> 00:15:16,740
But this information now is
being parsed to the class.

231
00:15:16,740 --> 00:15:20,475
Let's copy-paste the variable
here from the class.

232
00:15:20,475 --> 00:15:22,920
Here, this one.

233
00:15:22,920 --> 00:15:24,690
In the screen height,

234
00:15:24,690 --> 00:15:28,600
it's going to be equivalent
to the image size in y.

235
00:15:34,280 --> 00:15:37,380
Nothing will change from
what we had before,

236
00:15:37,380 --> 00:15:40,660
but we actually have

237
00:15:41,060 --> 00:15:45,855
some information of the
screen in the grid class.

238
00:15:45,855 --> 00:15:48,465
Now we can actually
use this information

239
00:15:48,465 --> 00:15:50,325
to actually draw a grid

240
00:15:50,325 --> 00:15:54,825
that matches the edges.
How do we do that?

241
00:15:54,825 --> 00:15:59,595
Well, let's go into the
display function again.

242
00:15:59,595 --> 00:16:08,895
Here, we are going to
define the rectangle size,

243
00:16:08,895 --> 00:16:18,040
x equals to self.screen_width.

244
00:16:18,980 --> 00:16:22,110
We actually taking the width of

245
00:16:22,110 --> 00:16:26,740
the screen and dividing
it by the columns.

246
00:16:28,700 --> 00:16:30,750
Imagine that we're dividing

247
00:16:30,750 --> 00:16:32,280
the size by the number
of columns we want,

248
00:16:32,280 --> 00:16:34,050
so we are going
to get rectangles

249
00:16:34,050 --> 00:16:36,330
proportionate to the size

250
00:16:36,330 --> 00:16:38,040
of the screen depending on
how we're dividing them.

251
00:16:38,040 --> 00:16:40,515
But that's going to be
consistent every time we run it.

252
00:16:40,515 --> 00:16:42,405
If we provide the
size of the screen

253
00:16:42,405 --> 00:16:43,800
and the number of
columns and rows,

254
00:16:43,800 --> 00:16:49,020
our grid will adapt to the
entirety of the screen.

255
00:16:49,020 --> 00:16:51,825
We've done that for x.

256
00:16:51,825 --> 00:16:56,590
We will do that for y as well.

257
00:17:00,110 --> 00:17:03,645
Let's just use the
right variables here,

258
00:17:03,645 --> 00:17:08,880
screen height, and instead
of columns, we need rows.

259
00:17:08,880 --> 00:17:14,060
We're dividing x in
columns and y in rows.

260
00:17:14,060 --> 00:17:16,730
Now we actually have
this variable size,

261
00:17:16,730 --> 00:17:18,080
which is a rectangle size,

262
00:17:18,080 --> 00:17:20,820
which as you see here,

263
00:17:20,820 --> 00:17:23,100
this 20 is equivalent
to an arbitrary size

264
00:17:23,100 --> 00:17:25,425
of the rectangle for our grid,

265
00:17:25,425 --> 00:17:30,435
and we can actually use
the x and y that are

266
00:17:30,435 --> 00:17:32,610
computed by the size of

267
00:17:32,610 --> 00:17:36,330
the screen divided by the
number of columns and rows.

268
00:17:36,330 --> 00:17:40,815
We can also use the same
variables as a multiplier.

269
00:17:40,815 --> 00:17:44,220
The multiplier here, this 10,

270
00:17:44,220 --> 00:17:45,690
it's an arbitrary
number that we're

271
00:17:45,690 --> 00:17:48,225
multiplying the
index of the loop.

272
00:17:48,225 --> 00:17:49,470
You're counting 0,

273
00:17:49,470 --> 00:17:51,000
1, 2, 3, and so on.

274
00:17:51,000 --> 00:17:55,470
You're multiplying it by
the size of the rectangle,

275
00:17:55,470 --> 00:17:56,940
so to create separation between

276
00:17:56,940 --> 00:17:59,100
each one of the rectangles.

277
00:17:59,100 --> 00:18:01,020
Otherwise, they would be really,

278
00:18:01,020 --> 00:18:02,805
really close to each other.

279
00:18:02,805 --> 00:18:05,400
Let's just use rectangle size x

280
00:18:05,400 --> 00:18:08,340
here as a multiplier
for the size,

281
00:18:08,340 --> 00:18:10,470
and also, I'm just giving

282
00:18:10,470 --> 00:18:13,620
a bit of space so you can
read it a bit better.

283
00:18:13,620 --> 00:18:18,840
This 10 here, it's going
to be the rectangle y.

284
00:18:18,840 --> 00:18:24,840
The x-coordinate is the
i times the rectangle x.

285
00:18:24,840 --> 00:18:28,110
The y-coordinate is j
times the rectangle y,

286
00:18:28,110 --> 00:18:31,050
and then rectangle x
and y are going to be

287
00:18:31,050 --> 00:18:34,930
the size of the rectangle.
Let's see what we have.

288
00:18:34,970 --> 00:18:43,140
Here we go. At least,

289
00:18:43,140 --> 00:18:45,285
let's double-test
that this is working.

290
00:18:45,285 --> 00:18:50,520
We could change the
size of the grid to

291
00:18:50,520 --> 00:18:58,480
something with less resolution
or with more resolution.

292
00:19:04,040 --> 00:19:07,680
You can see that in all cases it

293
00:19:07,680 --> 00:19:10,305
matches quite perfectly the size

294
00:19:10,305 --> 00:19:12,165
of the screen that
we have provided.

295
00:19:12,165 --> 00:19:14,550
You can also change
the size of the screen

296
00:19:14,550 --> 00:19:19,540
and that should
remain consistent.

297
00:19:19,790 --> 00:19:23,145
That's a pretty flexible class.

298
00:19:23,145 --> 00:19:26,130
This is going to be
our first video.

299
00:19:26,130 --> 00:19:29,130
We're going to move on to
then start giving some data

300
00:19:29,130 --> 00:19:32,400
to this grid. It's
not just a grid.

301
00:19:32,400 --> 00:19:34,395
It's actually starts
containing some data,

302
00:19:34,395 --> 00:19:36,735
and we're going to start
seeing how to operate

303
00:19:36,735 --> 00:19:39,750
with additional entities on

304
00:19:39,750 --> 00:19:42,550
top of this screen. I'll
see you in the next video.