1
00:00:06,200 --> 00:00:08,740
Hi. Welcome to this new lesson.

2
00:00:08,740 --> 00:00:10,660
In this lesson, we're
going to start writing

3
00:00:10,660 --> 00:00:12,780
the code of what we
will call behaviors.

4
00:00:12,780 --> 00:00:15,815
Ways in which objects
interact with one another.

5
00:00:15,815 --> 00:00:19,820
Let's just jump into the code.

6
00:00:19,820 --> 00:00:23,860
As we have seen already
in previous lessons,

7
00:00:23,860 --> 00:00:26,460
we are going to be
constructing classes.

8
00:00:26,460 --> 00:00:28,740
We're going to
start with a class,

9
00:00:28,740 --> 00:00:30,760
which I think we've
covered already.

10
00:00:30,760 --> 00:00:32,100
We're going to create a new tab,

11
00:00:32,100 --> 00:00:37,450
and we're going to call this
the gradient rectangle.

12
00:00:41,300 --> 00:00:43,410
If you have covered

13
00:00:43,410 --> 00:00:47,230
already the foundations of
this gradient rectangle class,

14
00:00:47,230 --> 00:00:49,370
you can feel free
to use that code,

15
00:00:49,370 --> 00:00:55,150
but I'm going to try to
write it quickly here.

16
00:00:55,510 --> 00:00:59,470
We need a gradient
rectangle object

17
00:00:59,950 --> 00:01:04,300
that will have some
internal data.

18
00:01:04,300 --> 00:01:06,860
But certainly, let's start with

19
00:01:06,860 --> 00:01:15,630
the constructor of the class.

20
00:01:15,630 --> 00:01:21,700
We are going to do position,

21
00:01:25,340 --> 00:01:33,895
rec_size, a vector for velocity.

22
00:01:33,895 --> 00:01:39,850
This is recreating the
system that we had prior.

23
00:01:39,930 --> 00:01:42,510
We're going to
construct it gradually,

24
00:01:42,510 --> 00:01:43,890
but I want to
remind you a little

25
00:01:43,890 --> 00:01:44,930
bit of what we have been doing.

26
00:01:44,930 --> 00:01:46,030
This is going to be

27
00:01:46,030 --> 00:01:47,970
a rectangle that is going to
be sitting in the screen,

28
00:01:47,970 --> 00:01:49,470
is going to be moving
left to right,

29
00:01:49,470 --> 00:01:51,650
and it's going to be
bouncing on the edges.

30
00:01:51,650 --> 00:01:53,610
But the new things

31
00:01:53,610 --> 00:01:55,050
that we're going to be
doing is that we're

32
00:01:55,050 --> 00:01:56,430
going to try to make
them bounce with

33
00:01:56,430 --> 00:01:58,070
one another as well.

34
00:01:58,070 --> 00:02:07,755
Let's just do a self.vec_position
= vec_position,

35
00:02:07,755 --> 00:02:16,270
self.rec_size = rec_size,

36
00:02:17,780 --> 00:02:25,800
and self.vec_velocity
= vec_velocity.

37
00:02:25,800 --> 00:02:27,795
We have the constructor.

38
00:02:27,795 --> 00:02:31,180
Now, we could actually start
thinking of the methods.

39
00:02:31,880 --> 00:02:36,210
As you can see, we haven't
really even started writing

40
00:02:36,210 --> 00:02:38,790
the processing part or

41
00:02:38,790 --> 00:02:41,250
what will be rendered
in the screen.

42
00:02:41,250 --> 00:02:43,570
We have started directly
into the class.

43
00:02:43,570 --> 00:02:45,795
I like starting with the class,

44
00:02:45,795 --> 00:02:47,610
thinking of the entities that I

45
00:02:47,610 --> 00:02:49,720
want to exist in this world.

46
00:02:49,720 --> 00:02:53,720
I often use the method run,

47
00:02:55,160 --> 00:02:57,840
which is going to be an outline

48
00:02:57,840 --> 00:03:00,500
of the methods that
we want to run.

49
00:03:00,500 --> 00:03:02,560
What I like this is

50
00:03:02,560 --> 00:03:06,555
more personal ways
of thinking of code,

51
00:03:06,555 --> 00:03:09,280
is to write comments that would

52
00:03:09,280 --> 00:03:14,145
signify the methods that I'm
going to be constructing.

53
00:03:14,145 --> 00:03:16,760
I would definitely
want a draw method.

54
00:03:16,760 --> 00:03:21,080
Something that would draw
this object in the screen.

55
00:03:21,080 --> 00:03:24,585
I would certainly
like a move method.

56
00:03:24,585 --> 00:03:30,880
I would bounce on the borders,

57
00:03:31,460 --> 00:03:40,410
and we will do the bounce
color if we have time.

58
00:03:40,410 --> 00:03:46,580
We can actually start without
the bouncing off color,

59
00:03:46,580 --> 00:03:49,555
and we can include
that a bit later.

60
00:03:49,555 --> 00:03:52,300
Let's start by replacing

61
00:03:52,300 --> 00:03:54,680
these comments with
actual methods.

62
00:03:54,680 --> 00:03:57,060
Let's do def draw,

63
00:04:00,530 --> 00:04:04,300
there we go, and

64
00:04:04,300 --> 00:04:07,760
let's just create a little
bit of space to center.

65
00:04:08,960 --> 00:04:12,645
As the name describes it,

66
00:04:12,645 --> 00:04:19,885
we're going to say no
stroke here and fill.

67
00:04:19,885 --> 00:04:24,340
Let's just start with
the white color, 255.

68
00:04:24,500 --> 00:04:29,710
Finally, it's going to
be a rectangle from

69
00:04:29,710 --> 00:04:38,420
the position x position
y, so self.positionx,

70
00:04:39,810 --> 00:04:50,510
self.positiony,
rec_size, self.rec_size.

71
00:05:01,820 --> 00:05:05,550
It's going to be a
square at this stage.

72
00:05:05,550 --> 00:05:09,910
That's going to be our draw
method and once we have it,

73
00:05:09,910 --> 00:05:16,325
we can actually replace our
comment here with the actual.

74
00:05:16,325 --> 00:05:21,040
Name, actually, we used
to use the self dot.

75
00:05:21,040 --> 00:05:25,360
At this point we have a class.

76
00:05:25,360 --> 00:05:27,555
A very simple one,
it's a rectangle.

77
00:05:27,555 --> 00:05:30,240
It's not really doing
all these things yet.

78
00:05:30,240 --> 00:05:32,720
But let's just try to,

79
00:05:32,720 --> 00:05:35,125
just to make sure that we
don't have any errors,

80
00:05:35,125 --> 00:05:40,595
bring this class into the
world of our simulation.

81
00:05:40,595 --> 00:05:48,190
Let's just start by importing

82
00:05:48,320 --> 00:05:59,860
the gradient rectangle as GR.

83
00:05:59,860 --> 00:06:04,795
Just let's make sure that
the name of the file,

84
00:06:04,795 --> 00:06:06,415
gradient rectangle,

85
00:06:06,415 --> 00:06:09,620
is the same one that
we're importing here.

86
00:06:13,260 --> 00:06:18,620
As usual, we are going to
start with a Canvas size.

87
00:06:25,860 --> 00:06:32,545
We will eventually add all
these rectangles to list.

88
00:06:32,545 --> 00:06:35,980
Let's just do that from
the very beginning.

89
00:06:35,980 --> 00:06:38,020
As we've done this before,

90
00:06:38,020 --> 00:06:43,120
I feel like I'm just

91
00:06:43,120 --> 00:06:46,540
going back through content
that we've covered already.

92
00:06:46,540 --> 00:06:49,450
If you feel like I'm
going a bit too fast,

93
00:06:49,450 --> 00:06:53,500
you can certainly go back
to previous lessons.

94
00:06:53,500 --> 00:06:57,890
All of this has been explained
a little bit already.

95
00:07:01,440 --> 00:07:07,900
Let's just use the size
of our Canvas for x and

96
00:07:07,900 --> 00:07:16,280
y, background zero.

97
00:07:21,090 --> 00:07:27,350
There we go. Let's see.

98
00:07:27,350 --> 00:07:29,985
At this point, we could

99
00:07:29,985 --> 00:07:33,225
start bringing instances
of this class.

100
00:07:33,225 --> 00:07:37,070
Let's just run what we have.

101
00:07:37,070 --> 00:07:40,225
We have our black Canvas.

102
00:07:40,225 --> 00:07:44,515
Let's just create a series
of instances of this class,

103
00:07:44,515 --> 00:07:46,840
just to be able to see
them in the screen

104
00:07:46,840 --> 00:07:51,765
based on this list,

105
00:07:51,765 --> 00:07:53,415
and we'll add them to this list.

106
00:07:53,415 --> 00:08:03,250
For i in range from zero
to the number of columns,

107
00:08:03,250 --> 00:08:05,710
which is the variable that
we created to keep track of

108
00:08:05,710 --> 00:08:09,260
how many columns
we want to create.

109
00:08:10,650 --> 00:08:13,000
Here, in the for loop,

110
00:08:13,000 --> 00:08:14,935
let's just, again,

111
00:08:14,935 --> 00:08:17,260
give a bit of space
to work here.

112
00:08:17,260 --> 00:08:26,185
We will create,
let's call it my GR,

113
00:08:26,185 --> 00:08:28,510
which is going to be my
gradient and rectangle,

114
00:08:28,510 --> 00:08:31,315
which is going to be equals to,

115
00:08:31,315 --> 00:08:35,965
from the class file,

116
00:08:35,965 --> 00:08:39,250
which is in the other script,

117
00:08:39,250 --> 00:08:44,390
we use the gradient
rectangle class.

118
00:08:46,860 --> 00:08:51,860
This class requires
some information.

119
00:08:52,380 --> 00:08:55,570
Remember, we go here.

120
00:08:55,570 --> 00:08:59,150
This is misspelled, self.

121
00:09:01,320 --> 00:09:05,155
Position, size, and velocity.

122
00:09:05,155 --> 00:09:06,565
Let's just copy those,

123
00:09:06,565 --> 00:09:08,350
because those are the arguments.

124
00:09:08,350 --> 00:09:13,460
In these parentheses we
have to provide this value.

125
00:09:14,340 --> 00:09:17,395
This is going to be a vector.

126
00:09:17,395 --> 00:09:20,840
We could start with P vector.

127
00:09:21,660 --> 00:09:25,225
Let's just do a 0, 0, 0 for now.

128
00:09:25,225 --> 00:09:28,225
We're going to come
back to these values.

129
00:09:28,225 --> 00:09:34,690
The second value that we want
to construct is the size,

130
00:09:34,690 --> 00:09:39,080
which is going to
be, let's say, 50.

131
00:09:41,820 --> 00:09:45,400
We're going to calculate
that value in a minute,

132
00:09:45,400 --> 00:09:47,110
but for now we're just trying

133
00:09:47,110 --> 00:09:49,915
to have some placeholder values.

134
00:09:49,915 --> 00:09:52,345
Then the velocity,

135
00:09:52,345 --> 00:09:54,250
it's not going to be in use at

136
00:09:54,250 --> 00:09:55,330
the very beginning
because we don't have

137
00:09:55,330 --> 00:09:57,310
the move function.

138
00:09:57,310 --> 00:10:00,070
But let's just do, again,

139
00:10:00,070 --> 00:10:02,875
1, 0, 0, or something like that.

140
00:10:02,875 --> 00:10:05,020
At this point we can actually

141
00:10:05,020 --> 00:10:08,560
close the arguments
for our class.

142
00:10:08,560 --> 00:10:13,330
We have three arguments
that are required;

143
00:10:13,330 --> 00:10:16,735
position, size, and velocity.

144
00:10:16,735 --> 00:10:18,070
We are providing those three.

145
00:10:18,070 --> 00:10:22,510
We actually do not need to
declare these variables.

146
00:10:22,510 --> 00:10:24,235
If you would rather
keep it short,

147
00:10:24,235 --> 00:10:26,620
you can use the vector, the 50,

148
00:10:26,620 --> 00:10:29,590
50, the second vector,

149
00:10:29,590 --> 00:10:31,330
and that should be fine.

150
00:10:31,330 --> 00:10:34,345
I just trying to make it a
little bit more explicit,

151
00:10:34,345 --> 00:10:38,190
if you're curious of
how would that look,

152
00:10:38,190 --> 00:10:41,655
and you might see this a lot.

153
00:10:41,655 --> 00:10:46,470
If you find code written online,

154
00:10:46,470 --> 00:10:53,820
it would look
something like that.

155
00:10:53,820 --> 00:11:01,775
Then finally the
final argument here.

156
00:11:01,775 --> 00:11:07,655
You can all that into
a much shorter form,

157
00:11:07,655 --> 00:11:09,875
granted that you
have to keep track.

158
00:11:09,875 --> 00:11:12,140
Remember that each one of

159
00:11:12,140 --> 00:11:14,300
these pieces of data

160
00:11:14,300 --> 00:11:17,480
referred to the arguments
on the constructor.

161
00:11:17,480 --> 00:11:19,160
These three arguments are

162
00:11:19,160 --> 00:11:22,860
provided in the three variables.

163
00:11:22,960 --> 00:11:25,640
Let's just keep that for now.

164
00:11:25,640 --> 00:11:29,760
What we want to do
now is in my list,

165
00:11:31,710 --> 00:11:35,030
we are going to append

166
00:11:35,130 --> 00:11:38,935
the instance of the
class that we created.

167
00:11:38,935 --> 00:11:41,050
At this point we've

168
00:11:41,050 --> 00:11:43,030
constructed one
instance of that class.

169
00:11:43,030 --> 00:11:45,965
We are ready to append it.

170
00:11:45,965 --> 00:11:48,410
If everything has
worked correctly,

171
00:11:48,410 --> 00:11:54,380
we can go into our
death draw loop and say

172
00:11:54,380 --> 00:12:02,945
for x in my list,

173
00:12:02,945 --> 00:12:06,590
which is a way of saying for
every object in that list,

174
00:12:06,590 --> 00:12:10,530
let's call that object x, x.run.

175
00:12:11,980 --> 00:12:17,690
Here we have basically
restored a class set up.

176
00:12:17,690 --> 00:12:19,310
I'm building this
from scratch again

177
00:12:19,310 --> 00:12:21,170
because in this week

178
00:12:21,170 --> 00:12:23,840
we are going to be using
this set up quite a bit.

179
00:12:23,840 --> 00:12:26,315
We have a simple,

180
00:12:26,315 --> 00:12:28,760
an outline of the
possible functions

181
00:12:28,760 --> 00:12:30,920
of the functions that we're
going to be working on,

182
00:12:30,920 --> 00:12:38,420
and a call of that
class within a list.

183
00:12:38,420 --> 00:12:41,765
We're actually creating 40
instances of that class.

184
00:12:41,765 --> 00:12:44,285
Right now, all those 40
instances are going to

185
00:12:44,285 --> 00:12:46,580
be placed on top of each other.

186
00:12:46,580 --> 00:12:50,825
But I do want to say if
we misspelled something,

187
00:12:50,825 --> 00:12:52,220
we do have some errors.

188
00:12:52,220 --> 00:12:56,480
Let's just go through our code

189
00:12:56,480 --> 00:12:59,720
first and see we are missing.

190
00:12:59,720 --> 00:13:02,345
I just found a small typo.

191
00:13:02,345 --> 00:13:04,340
Make sure that we were calling

192
00:13:04,340 --> 00:13:09,530
this gradient rectangle with
a T and then again that,

193
00:13:09,530 --> 00:13:12,515
that's spelled correctly
with a T here.

194
00:13:12,515 --> 00:13:16,235
At this stage, we should
have 40 instances of

195
00:13:16,235 --> 00:13:20,525
this rectangle in the top
right corner of our screen.

196
00:13:20,525 --> 00:13:24,560
If we would spread out

197
00:13:24,560 --> 00:13:29,225
these rectangles in
the white coordinate,

198
00:13:29,225 --> 00:13:33,020
something like
changing this value,

199
00:13:33,020 --> 00:13:35,360
we would actually be able
to spread them down.

200
00:13:35,360 --> 00:13:38,000
Let's just do that calculation.

201
00:13:38,000 --> 00:13:40,070
We are going to

202
00:13:40,070 --> 00:13:43,040
start by calculating what

203
00:13:43,040 --> 00:13:44,450
should be the size
of the rectangle.

204
00:13:44,450 --> 00:13:46,310
The rectangle should be,

205
00:13:46,310 --> 00:13:51,240
let's call it the
rectangle size.

206
00:13:51,340 --> 00:13:54,170
It's going to be a
calculation between

207
00:13:54,170 --> 00:14:03,300
the size in y divided by
the number of columns.

208
00:14:04,990 --> 00:14:08,255
There we go. At this stage,

209
00:14:08,255 --> 00:14:13,490
we could use this rectangle
size instead of this 50,

210
00:14:13,490 --> 00:14:15,720
which represents the size.

211
00:14:17,140 --> 00:14:20,750
That would be basically we
change the number of columns.

212
00:14:20,750 --> 00:14:24,725
We will change the number of
the size of the rectangle.

213
00:14:24,725 --> 00:14:26,330
With that in mind as well,

214
00:14:26,330 --> 00:14:29,220
we can actually
calculate the position.

215
00:14:29,320 --> 00:14:34,470
The rectangle position in y.

216
00:14:35,710 --> 00:14:40,220
We are going to make it
a variable that takes in

217
00:14:40,220 --> 00:14:42,920
consideration the instance in

218
00:14:42,920 --> 00:14:45,665
which we're in or the
index of the loop.

219
00:14:45,665 --> 00:14:47,420
Because we don't want

220
00:14:47,420 --> 00:14:48,680
all of them to be on
top of each other,

221
00:14:48,680 --> 00:14:55,445
we want to use the
rectangle size times i.

222
00:14:55,445 --> 00:14:57,980
The white position
of the rectangle,

223
00:14:57,980 --> 00:15:04,520
which is declared here,
the second value.

224
00:15:04,520 --> 00:15:06,680
At this point we could

225
00:15:06,680 --> 00:15:09,905
actually run this and you'll
see that we have a line,

226
00:15:09,905 --> 00:15:14,150
but this is in fact, each
one of these are rectangles.

227
00:15:14,150 --> 00:15:16,955
If we want to double check
that that's the case,

228
00:15:16,955 --> 00:15:21,320
we could actually say that

229
00:15:21,320 --> 00:15:26,510
the stroke of these
rectangles will be black.

230
00:15:26,510 --> 00:15:28,460
We can comment out.

231
00:15:28,460 --> 00:15:30,740
This idea of using comments

232
00:15:30,740 --> 00:15:34,080
to suppressing part of
the code is very common.

233
00:15:34,830 --> 00:15:38,290
You'll see it especially
when you're tinkering

234
00:15:38,290 --> 00:15:41,585
with codes as a form of design,

235
00:15:41,585 --> 00:15:45,140
commenting out code is
a very useful practice.

236
00:15:45,140 --> 00:15:48,365
As you can see here, you
can see the wither stroke,

237
00:15:48,365 --> 00:15:53,070
that each one of these
rectangles is in fact than.

238
00:15:55,270 --> 00:15:59,120
In a way that if we have more
or less, in this case, 20,

239
00:15:59,120 --> 00:16:03,570
we actually start changing
the number of columns.

240
00:16:05,370 --> 00:16:10,520
Let's just randomize a little
bit their position in x.

241
00:16:10,840 --> 00:16:13,950
Our position in x.

242
00:16:14,260 --> 00:16:18,080
We haven't imported
the random module.

243
00:16:18,080 --> 00:16:23,460
Also let's make sure
that we import random.

244
00:16:24,520 --> 00:16:27,110
Here, in the position in x,

245
00:16:27,110 --> 00:16:31,410
let's use random.uniform,

246
00:16:31,510 --> 00:16:33,620
which is going to give us

247
00:16:33,620 --> 00:16:40,440
a floating point or like
a decimal place number.

248
00:16:40,870 --> 00:16:43,010
It's going to be a value

249
00:16:43,010 --> 00:16:46,415
between zero and the
size of the screen in x.

250
00:16:46,415 --> 00:16:50,540
Anywhere between zero and
the size of the screen in x.

251
00:16:50,540 --> 00:16:55,730
Let's make that our
rectangles start there.

252
00:16:55,730 --> 00:16:58,460
Let's just check that.

253
00:16:58,460 --> 00:17:00,740
You can see now these
rectangles are all

254
00:17:00,740 --> 00:17:06,425
initiated at different
locations, at random.

255
00:17:06,425 --> 00:17:10,085
You can use a much larger
number of rectangles,

256
00:17:10,085 --> 00:17:13,140
and they get scattered.

257
00:17:14,380 --> 00:17:16,760
But we are going to keep

258
00:17:16,760 --> 00:17:20,210
it in a way that
they're visible.

259
00:17:20,210 --> 00:17:24,960
Twenty, they're all starting
at a random position.

260
00:17:26,560 --> 00:17:34,775
Right now, all of them have
a velocity of one in x.

261
00:17:34,775 --> 00:17:38,135
That's something that we
also want to randomize,

262
00:17:38,135 --> 00:17:43,350
but that's not being taken
into consideration in any way.

263
00:17:44,200 --> 00:17:47,990
Basically, when we
execute the run function,

264
00:17:47,990 --> 00:17:49,460
if we go into the run function,

265
00:17:49,460 --> 00:17:54,290
the only method that is being
called there is the draw.

266
00:17:54,290 --> 00:17:57,680
They display themselves
into the screen,

267
00:17:57,680 --> 00:18:01,680
but we haven't included
a move method.

268
00:18:01,690 --> 00:18:07,950
Let's just use the space here
to define a move method.

269
00:18:11,170 --> 00:18:13,640
The move method is going to be

270
00:18:13,640 --> 00:18:16,055
a relatively simple method.

271
00:18:16,055 --> 00:18:18,335
It's using vectors.

272
00:18:18,335 --> 00:18:22,160
Again, if you're not very
familiar with vector math,

273
00:18:22,160 --> 00:18:24,515
go back to the week,

274
00:18:24,515 --> 00:18:27,080
I think it's Week 3,

275
00:18:27,080 --> 00:18:28,790
where we spend quite a bit

276
00:18:28,790 --> 00:18:31,050
of time looking at vector math.

277
00:18:33,940 --> 00:18:36,500
To the position which defines

278
00:18:36,500 --> 00:18:38,180
the position of this rectangle,

279
00:18:38,180 --> 00:18:41,705
we are going to
add the velocity.

280
00:18:41,705 --> 00:18:43,820
The velocity, it's going to be

281
00:18:43,820 --> 00:18:47,370
a force which is
expressed as a vector.

282
00:18:49,930 --> 00:18:54,560
If we add that force to each
one of these rectangles,

283
00:18:54,560 --> 00:18:57,185
these rectangles will move.

284
00:18:57,185 --> 00:19:01,355
They're basically going to
be updating their position.

285
00:19:01,355 --> 00:19:04,220
Let's just now execute

286
00:19:04,220 --> 00:19:08,735
that new function that we
just created in our outline.

287
00:19:08,735 --> 00:19:10,895
You can see all the
rectangles started

288
00:19:10,895 --> 00:19:13,265
initially in a random position,

289
00:19:13,265 --> 00:19:17,885
but they actually move
gradually to the right,

290
00:19:17,885 --> 00:19:20,870
because the vector that

291
00:19:20,870 --> 00:19:23,225
we specified as the
velocity vector,

292
00:19:23,225 --> 00:19:25,310
the third argument in

293
00:19:25,310 --> 00:19:31,130
the class is a vector
of one positive in x.

294
00:19:31,130 --> 00:19:33,800
Let's just randomize that
value so that all of them

295
00:19:33,800 --> 00:19:37,055
are moving slightly different.

296
00:19:37,055 --> 00:19:40,470
We can call this random speed.

297
00:19:47,050 --> 00:19:56,720
We're going to do uniform
between minus 2 and 2.

298
00:19:56,720 --> 00:19:58,325
Here, the random speed,

299
00:19:58,325 --> 00:20:03,155
it's a variable that we will
use in the x-coordinate.

300
00:20:03,155 --> 00:20:05,600
This coordinate, it's going

301
00:20:05,600 --> 00:20:07,850
to be a positive value
or a negative value,

302
00:20:07,850 --> 00:20:09,920
meaning that it could
move to the left or to

303
00:20:09,920 --> 00:20:12,185
the right at a speed
of maximum two,

304
00:20:12,185 --> 00:20:13,640
but somewhere in-between those,

305
00:20:13,640 --> 00:20:14,690
some will be slower,

306
00:20:14,690 --> 00:20:16,295
some of them will be faster.

307
00:20:16,295 --> 00:20:21,860
Let's try that. As you can

308
00:20:21,860 --> 00:20:29,690
see, our rectangles move.

309
00:20:29,690 --> 00:20:33,390
Why are we seeing
them not refresh?

310
00:20:36,910 --> 00:20:40,385
Basically, if we want to
print into the screen,

311
00:20:40,385 --> 00:20:42,800
we do not refresh
the background.

312
00:20:42,800 --> 00:20:45,065
If you want to just
have the illusion

313
00:20:45,065 --> 00:20:47,675
of them as moving rectangles,

314
00:20:47,675 --> 00:20:49,340
you need to make sure that you

315
00:20:49,340 --> 00:20:52,820
are redrawing that background.

316
00:20:52,820 --> 00:20:57,635
They all gradually get
away from the screen.

317
00:20:57,635 --> 00:20:59,345
We are going to reconstruct

318
00:20:59,345 --> 00:21:03,920
the bounds on borders function
and the bounds color,

319
00:21:03,920 --> 00:21:05,570
as well as starting to look

320
00:21:05,570 --> 00:21:07,325
into the interactions
between them.

321
00:21:07,325 --> 00:21:10,520
But I'm going to cut
this video here.

322
00:21:10,520 --> 00:21:12,350
We have a first setup.

323
00:21:12,350 --> 00:21:13,430
We're going to be building upon

324
00:21:13,430 --> 00:21:15,620
this setup in videos to come.

325
00:21:15,620 --> 00:21:17,810
We're going to actually
start digging into

326
00:21:17,810 --> 00:21:20,060
the interactions between
these rectangles.

327
00:21:20,060 --> 00:21:21,930
I'll see in the next one.