1
00:00:05,660 --> 00:00:08,420
Hi. Welcome to this new lesson.

2
00:00:08,420 --> 00:00:11,855
We are going to
start constructing

3
00:00:11,855 --> 00:00:13,380
a drawing class this

4
00:00:13,380 --> 00:00:16,150
time using the knowledge
that we have from classes.

5
00:00:16,150 --> 00:00:17,480
We're going to be combining some

6
00:00:17,480 --> 00:00:18,940
of the information
and the knowledge

7
00:00:18,940 --> 00:00:22,655
that we have from Week 3,

8
00:00:22,655 --> 00:00:23,920
where we are actually using

9
00:00:23,920 --> 00:00:26,360
a gradient rectangle to
move across the screen.

10
00:00:26,360 --> 00:00:28,380
We're going to start
constructing a class that can

11
00:00:28,380 --> 00:00:31,000
actually do those things and see

12
00:00:31,000 --> 00:00:33,640
how we can actually
use classes to make

13
00:00:33,640 --> 00:00:36,885
this behavior part of the class.

14
00:00:36,885 --> 00:00:39,165
Let's jump into the code.

15
00:00:39,165 --> 00:00:41,460
This is where we left off.

16
00:00:41,460 --> 00:00:46,860
We have 200 instances of a
class running in a loop.

17
00:00:46,860 --> 00:00:49,480
What I would like to
start doing is reducing

18
00:00:49,480 --> 00:00:51,920
this number to something a
little bit more manageable,

19
00:00:51,920 --> 00:00:56,180
something like 20 or even
something like five.

20
00:00:56,180 --> 00:00:59,715
Let's see if that should work.

21
00:00:59,715 --> 00:01:03,600
It's a very low
resolution. That's fine.

22
00:01:03,600 --> 00:01:05,040
That's just going to
make it a little bit

23
00:01:05,040 --> 00:01:07,520
more visible to us.

24
00:01:08,790 --> 00:01:13,260
We'll go through the process
of as you prototype.

25
00:01:13,260 --> 00:01:15,780
As you prototype a
class like this one,

26
00:01:15,780 --> 00:01:18,460
you might want to
do certain changes

27
00:01:18,460 --> 00:01:22,260
to the class structure,
to the class data.

28
00:01:22,260 --> 00:01:25,980
We would actually see how
we could actually convert

29
00:01:25,980 --> 00:01:30,460
a design that we did
outside a class structure,

30
00:01:30,460 --> 00:01:31,580
or something that we did without

31
00:01:31,580 --> 00:01:34,405
a class structure and
convert it into a class.

32
00:01:34,405 --> 00:01:38,055
We're going to start
adapting the class

33
00:01:38,055 --> 00:01:40,170
for it to have

34
00:01:40,170 --> 00:01:41,530
the functionality that we had

35
00:01:41,530 --> 00:01:43,840
with our gradient rectangle.

36
00:01:43,840 --> 00:01:46,420
We need to create
a few variables.

37
00:01:46,420 --> 00:01:56,790
A variable that is
going to be a self.r,

38
00:01:57,290 --> 00:02:02,655
self.g, and a self.b.

39
00:02:02,655 --> 00:02:03,900
These are going to stand for

40
00:02:03,900 --> 00:02:10,510
the internal RGB colors
that we will manipulate.

41
00:02:10,510 --> 00:02:13,460
We will also include,

42
00:02:13,460 --> 00:02:15,410
if you remember the
rate of change,

43
00:02:15,410 --> 00:02:16,990
the rate of change of red,

44
00:02:16,990 --> 00:02:19,230
the rate of change of green,

45
00:02:19,230 --> 00:02:21,820
and the rate of change of blue.

46
00:02:23,390 --> 00:02:31,770
Self.r_change and let's just

47
00:02:31,770 --> 00:02:33,850
create three
versions of that for

48
00:02:33,850 --> 00:02:39,430
the other attributes RGB.

49
00:02:43,820 --> 00:02:46,670
These values here,
we might not need

50
00:02:46,670 --> 00:02:50,530
to include them in
the constructors,

51
00:02:50,530 --> 00:02:53,290
because they're going
to be values that we

52
00:02:53,290 --> 00:02:56,180
will use to manipulate
the color value.

53
00:02:56,180 --> 00:02:58,250
We could decide we're going
to start with this color,

54
00:02:58,250 --> 00:03:00,530
but this color is
going to change.

55
00:03:01,250 --> 00:03:06,820
But the change is something
that we want to change.

56
00:03:08,580 --> 00:03:15,610
Let's just do r_change
here and assign

57
00:03:15,610 --> 00:03:24,210
it here, g_change.

58
00:03:24,210 --> 00:03:25,960
If you want to have
less variables,

59
00:03:25,960 --> 00:03:29,230
this could have been done
with vectors, as well.

60
00:03:29,360 --> 00:03:32,080
If you think about it,
you could actually have

61
00:03:32,080 --> 00:03:34,340
one vector that has three values

62
00:03:34,340 --> 00:03:37,280
and just use the r_change

63
00:03:37,280 --> 00:03:39,020
being the x component
of the vector,

64
00:03:39,020 --> 00:03:40,460
the y component could be g,

65
00:03:40,460 --> 00:03:43,910
and the z component could be b.

66
00:03:43,910 --> 00:03:48,100
But we're doing it explicitly
with different variables.

67
00:03:48,100 --> 00:03:56,390
The R color will be the color.r,

68
00:04:00,960 --> 00:04:09,970
the green information and
the blue information.

69
00:04:15,380 --> 00:04:19,395
Just double checking
the documentation here.

70
00:04:19,395 --> 00:04:21,030
What we actually need is to

71
00:04:21,030 --> 00:04:25,030
invoke the red command
for the color.

72
00:04:25,030 --> 00:04:28,690
The red is going to
give us the red channel

73
00:04:28,690 --> 00:04:32,590
being the first
attribute of that color,

74
00:04:32,590 --> 00:04:35,770
the green attribute
of that color,

75
00:04:35,770 --> 00:04:39,440
and the blue attribute
of that color.

76
00:04:45,140 --> 00:04:48,850
Still, if we try to run
this at this point,

77
00:04:48,850 --> 00:04:52,590
we will run into an error
because we have basically

78
00:04:52,590 --> 00:04:54,290
requested this class to have

79
00:04:54,290 --> 00:04:57,245
a lot more information
than before.

80
00:04:57,245 --> 00:04:59,510
Whenever we try to run this,

81
00:04:59,510 --> 00:05:02,745
we won't be providing
these three attributes.

82
00:05:02,745 --> 00:05:05,170
Let's just put some
placeholder values for

83
00:05:05,170 --> 00:05:08,160
now into our attributes.

84
00:05:08,160 --> 00:05:09,840
We could say that
the rate of change

85
00:05:09,840 --> 00:05:16,215
for the first value
is going to be one,

86
00:05:16,215 --> 00:05:17,880
the next one is going to be one,

87
00:05:17,880 --> 00:05:19,500
and the next one is
going to be one.

88
00:05:19,500 --> 00:05:22,350
The rate of change, we

89
00:05:22,350 --> 00:05:25,200
will use to see
how much change of

90
00:05:25,200 --> 00:05:28,080
color we will have every
frame in each one of

91
00:05:28,080 --> 00:05:31,420
those different channels,

92
00:05:31,420 --> 00:05:32,680
the change for red,

93
00:05:32,680 --> 00:05:34,900
the change for green,
and change for blue.

94
00:05:34,900 --> 00:05:36,340
But right now, we're
just providing

95
00:05:36,340 --> 00:05:38,520
those placeholder
values in order

96
00:05:38,520 --> 00:05:40,500
to make sure that
we are satisfying

97
00:05:40,500 --> 00:05:42,730
the new constructor we have.

98
00:05:42,730 --> 00:05:47,070
We've added a lot more
data here. Let's see.

99
00:05:49,890 --> 00:05:53,710
Let's see what we are
having an issue here with.

100
00:05:53,710 --> 00:06:00,010
We need to specify
what we are doing.

101
00:06:00,010 --> 00:06:04,810
The rate of change
is going to be r,

102
00:06:04,810 --> 00:06:13,550
g and b.

103
00:06:14,880 --> 00:06:19,585
Let's see. Now things
are working again.

104
00:06:19,585 --> 00:06:22,030
We have those new
attributes working,

105
00:06:22,030 --> 00:06:23,515
but obviously,
they're not changing.

106
00:06:23,515 --> 00:06:25,195
They're not creating
any gradient.

107
00:06:25,195 --> 00:06:27,760
But we actually have
the values that we

108
00:06:27,760 --> 00:06:30,850
could use for a new function.

109
00:06:30,850 --> 00:06:33,190
If you remember a little
bit, if you go back

110
00:06:33,190 --> 00:06:37,435
into our previous session,

111
00:06:37,435 --> 00:06:40,360
we can actually
create a variable

112
00:06:40,360 --> 00:06:42,235
here or a function here.

113
00:06:42,235 --> 00:06:44,380
Let's do it before the display.

114
00:06:44,380 --> 00:06:53,035
To calculate the actual RGB
values of the gradient.

115
00:06:53,035 --> 00:06:59,000
Let's call it a
calculate gradient.

116
00:07:00,540 --> 00:07:13,300
The gradient uses
the r += r_change.

117
00:07:13,300 --> 00:07:15,610
The red color, whatever it is,

118
00:07:15,610 --> 00:07:16,960
will start kind of gradually

119
00:07:16,960 --> 00:07:21,440
increasing at a rate
of one per frame.

120
00:07:21,660 --> 00:07:33,020
Let's do the same
thing for g. and b.

121
00:07:36,810 --> 00:07:40,480
All of this as the
values go from

122
00:07:40,480 --> 00:07:43,525
zero being black and
255 being white,

123
00:07:43,525 --> 00:07:46,735
we would gradually
tend to white.

124
00:07:46,735 --> 00:07:47,920
What we will be missing in

125
00:07:47,920 --> 00:07:50,530
this calculation would be
to bounce the values once

126
00:07:50,530 --> 00:07:52,795
they reach 255 or the

127
00:07:52,795 --> 00:07:56,800
maximum numeric value
within the color spectrum,

128
00:07:56,800 --> 00:07:58,600
bounce back and starts moving to

129
00:07:58,600 --> 00:08:00,190
zero and then bounce back again.

130
00:08:00,190 --> 00:08:01,975
It's something that
we've done again

131
00:08:01,975 --> 00:08:03,700
outside a class structure,

132
00:08:03,700 --> 00:08:08,920
but we're seeing how would
we do it within the class.

133
00:08:08,920 --> 00:08:10,990
Now we're actually ready to use,

134
00:08:10,990 --> 00:08:15,260
instead of fill(self.color)
we could actually do fill(r,

135
00:08:15,260 --> 00:08:17,700
g, b) because we have

136
00:08:17,700 --> 00:08:20,790
those explicit values that are
being pre calculated here.

137
00:08:20,790 --> 00:08:22,290
We can use those.

138
00:08:22,290 --> 00:08:24,180
We need to just make
sure that we're using

139
00:08:24,180 --> 00:08:26,730
the calculate gradient function,

140
00:08:26,730 --> 00:08:31,570
which is a new function here.

141
00:08:32,750 --> 00:08:35,420
X.calculate_gradient.

142
00:08:35,420 --> 00:08:37,285
We first calculate the gradient,

143
00:08:37,285 --> 00:08:41,060
then we display the
rectangle, and then we move.

144
00:08:42,570 --> 00:08:45,070
We're having an error.
Let's just go and

145
00:08:45,070 --> 00:08:48,710
find where that error is.

146
00:08:48,930 --> 00:08:55,540
We need to use self dot,

147
00:08:55,540 --> 00:08:57,040
kind of move too quickly here,

148
00:08:57,040 --> 00:09:04,130
self.b and same here.

149
00:09:05,670 --> 00:09:09,025
This is kind of some
of the challenges

150
00:09:09,025 --> 00:09:12,250
of the class to
remembering what is

151
00:09:12,250 --> 00:09:15,970
internal attributes
to the class so

152
00:09:15,970 --> 00:09:17,620
that we could actually
make sure that we're

153
00:09:17,620 --> 00:09:20,810
using those across
different functions.

154
00:09:21,780 --> 00:09:23,995
Let's just make
sure that those are

155
00:09:23,995 --> 00:09:25,780
all internal attributes of

156
00:09:25,780 --> 00:09:30,020
the class that we're
manipulating throughout.

157
00:09:30,450 --> 00:09:32,980
We're still having an issue.

158
00:09:32,980 --> 00:09:36,860
Let's just keep digging
and see what it is.

159
00:09:46,290 --> 00:09:50,930
Let's see if we don't
calculate the gradient.

160
00:09:53,160 --> 00:09:55,930
We can identify
that the error is

161
00:09:55,930 --> 00:09:57,805
certainly within that function.

162
00:09:57,805 --> 00:09:59,260
If we don't invoke
that function,

163
00:09:59,260 --> 00:10:02,090
we do not run into the error.

164
00:10:03,360 --> 00:10:11,800
It could be that we're having
an issue with this color.

165
00:10:11,800 --> 00:10:14,270
Let's just start with zero.

166
00:10:20,250 --> 00:10:23,530
We'll come back to
this a minute ago.

167
00:10:23,530 --> 00:10:25,840
But I think that it's possible

168
00:10:25,840 --> 00:10:27,460
that what we're actually

169
00:10:27,460 --> 00:10:30,650
getting from that
calculation is not a number.

170
00:10:36,960 --> 00:10:48,055
That doesn't seem to be
a problem. I see it.

171
00:10:48,055 --> 00:10:53,990
Here calculate gradient,
we were missing the self.

172
00:10:54,120 --> 00:10:56,305
You can see here,

173
00:10:56,305 --> 00:10:58,300
it actually looks quite
interesting when we're

174
00:10:58,300 --> 00:11:01,015
doing it with black and white.

175
00:11:01,015 --> 00:11:06,115
Let's just bring back the
definition of red that we had

176
00:11:06,115 --> 00:11:12,110
here. Green and blue.

177
00:11:21,390 --> 00:11:25,240
It's working. All the
values are increasing,

178
00:11:25,240 --> 00:11:29,210
but once they get to
white, they remain there.

179
00:11:30,660 --> 00:11:34,660
I guess I'm moving a bit too

180
00:11:34,660 --> 00:11:38,100
quickly through the material
of the class construction.

181
00:11:38,100 --> 00:11:39,980
Let's make sure that
we have access to

182
00:11:39,980 --> 00:11:42,230
all the self and all
the internal variables

183
00:11:42,230 --> 00:11:43,820
before we use them
that internally

184
00:11:43,820 --> 00:11:46,460
can trouble, as you could see.

185
00:11:46,460 --> 00:11:49,685
Let's create as we've done
before, the bouncing effect,

186
00:11:49,685 --> 00:11:51,950
meaning that the color when

187
00:11:51,950 --> 00:11:54,200
it reaches the maximum value,

188
00:11:54,200 --> 00:11:56,970
so if the color red,

189
00:12:01,330 --> 00:12:04,910
if(slef.r < 0),

190
00:12:04,910 --> 00:12:07,890
let's just make the

191
00:12:09,460 --> 00:12:22,540
slef.r_change*
times=-1.8, so let's just

192
00:12:22,540 --> 00:12:27,920
make sure that we
type that correctly,

193
00:12:27,920 --> 00:12:30,500
if the red color is
smaller than zero,

194
00:12:30,500 --> 00:12:33,770
we flip or multiply
it by minus one.

195
00:12:33,770 --> 00:12:35,240
The change which is

196
00:12:35,240 --> 00:12:38,855
going plus one is going
to become negative one.

197
00:12:38,855 --> 00:12:45,590
Let's just make also
the attribute of,

198
00:12:45,590 --> 00:12:48,245
want to copy those
things two times,

199
00:12:48,245 --> 00:12:58,640
so r,g and b and
g_change and b_change.

200
00:12:58,640 --> 00:13:00,665
This is not really happening yet

201
00:13:00,665 --> 00:13:02,990
because we're actually
moving upwards,

202
00:13:02,990 --> 00:13:04,400
so what we actually
want to do is

203
00:13:04,400 --> 00:13:08,000
a condition that is meant
for the upper boundary,

204
00:13:08,000 --> 00:13:17,210
which is bigger than 255,

205
00:13:17,210 --> 00:13:18,350
basically we do the same thing.

206
00:13:18,350 --> 00:13:19,820
We multiply that by minus one.

207
00:13:19,820 --> 00:13:21,200
The rate of change
is a value that

208
00:13:21,200 --> 00:13:22,730
starts at one when it reaches

209
00:13:22,730 --> 00:13:24,620
its maximum boundary will

210
00:13:24,620 --> 00:13:27,425
become minus one or
its negative number.

211
00:13:27,425 --> 00:13:30,380
That's why we're multiplying
it by minus one.

212
00:13:30,380 --> 00:13:32,570
Another that we
have that template,

213
00:13:32,570 --> 00:13:34,880
we can actually copy
paste it for each

214
00:13:34,880 --> 00:13:37,745
one of the three
conditions r,g and b,

215
00:13:37,745 --> 00:13:43,910
and making sure we're

216
00:13:43,910 --> 00:13:49,240
doing that right for each
one of the variables.

217
00:13:49,240 --> 00:13:51,460
This is what we have
constructed already in

218
00:13:51,460 --> 00:13:55,960
Week 3 within the vector
class and now we're

219
00:13:55,960 --> 00:13:59,360
actually rewriting it
as a class so that we

220
00:13:59,360 --> 00:14:03,870
can reuse it for a series
of multiple rectangles.

221
00:14:08,290 --> 00:14:12,620
Think that all my
statements are missing

222
00:14:12,620 --> 00:14:19,950
the column. There we go.

223
00:14:21,700 --> 00:14:23,810
As you can see here,

224
00:14:23,810 --> 00:14:30,470
all these entities get to
white or close to white,

225
00:14:30,470 --> 00:14:36,815
and they start bouncing back
towards black, and so on.

226
00:14:36,815 --> 00:14:40,880
All of them, depending on
the speed of movement will

227
00:14:40,880 --> 00:14:44,720
be doing this gradient shift and

228
00:14:44,720 --> 00:14:49,460
that's certainly very different

229
00:14:49,460 --> 00:14:52,505
from what we had before and
it's certainly working.

230
00:14:52,505 --> 00:14:54,050
If we like the rate of

231
00:14:54,050 --> 00:14:57,440
change of each class,
if you remember,

232
00:14:57,440 --> 00:15:00,140
we actually use a
placeholder number here,

233
00:15:00,140 --> 00:15:05,015
the rate of change
for this number,

234
00:15:05,015 --> 00:15:07,820
it's one for all of them.

235
00:15:07,820 --> 00:15:12,260
We could use the
same equation here,

236
00:15:12,260 --> 00:15:14,630
and you can manipulate
the numbers.

237
00:15:14,630 --> 00:15:18,800
I mean these scripts are

238
00:15:18,800 --> 00:15:23,405
actually very open for you to
play with these parameters.

239
00:15:23,405 --> 00:15:26,525
This is going to have
so much possibility

240
00:15:26,525 --> 00:15:30,905
for transforming the speed of,

241
00:15:30,905 --> 00:15:32,525
let's say you want the rate of

242
00:15:32,525 --> 00:15:34,400
change in some
cases to be faster,

243
00:15:34,400 --> 00:15:36,050
maybe could be a 5,

244
00:15:36,050 --> 00:15:39,210
3, there's no right
or wrong here,

245
00:15:39,640 --> 00:15:43,070
it's really an invitation
to experiment of

246
00:15:43,070 --> 00:15:46,100
how these different
parameters actually

247
00:15:46,100 --> 00:15:51,755
affect the transformation
of these graphics.

248
00:15:51,755 --> 00:15:53,630
As you can see here,
this rectangle

249
00:15:53,630 --> 00:15:55,790
is moving very slowly,

250
00:15:55,790 --> 00:15:57,845
but changing color very quickly,

251
00:15:57,845 --> 00:15:59,750
so you're actually
getting this pattern

252
00:15:59,750 --> 00:16:01,220
at a different rate.

253
00:16:01,220 --> 00:16:03,260
This one is moving
a lot quicker,

254
00:16:03,260 --> 00:16:07,220
so it's really giving
us a way of composing

255
00:16:07,220 --> 00:16:09,260
with this algorithm that

256
00:16:09,260 --> 00:16:12,275
it's every time that we run
it, it's quite different.

257
00:16:12,275 --> 00:16:15,020
It's actually based on
randomness in many ways,

258
00:16:15,020 --> 00:16:17,585
but it's actually
trying to calibrate

259
00:16:17,585 --> 00:16:20,960
that the random colors
that are appear in

260
00:16:20,960 --> 00:16:22,400
certain sequences in a way that

261
00:16:22,400 --> 00:16:24,680
we actually can manipulate.

262
00:16:24,680 --> 00:16:26,120
Again, you can actually increase

263
00:16:26,120 --> 00:16:28,220
the number of colors
as we've done before

264
00:16:28,220 --> 00:16:33,440
to something like 20.

265
00:16:33,440 --> 00:16:34,460
As you can see, all of

266
00:16:34,460 --> 00:16:39,065
the rectangles here are
all changing color.

267
00:16:39,065 --> 00:16:42,935
This shows you really the power
of classes and instances.

268
00:16:42,935 --> 00:16:44,750
Well, in Week 3,

269
00:16:44,750 --> 00:16:46,115
we were actually constructing

270
00:16:46,115 --> 00:16:48,080
one single script for

271
00:16:48,080 --> 00:16:50,765
making one of these
rectangles move around.

272
00:16:50,765 --> 00:16:54,410
In this lesson, we're
actually learning how do we

273
00:16:54,410 --> 00:16:56,505
can actually encapsulate that

274
00:16:56,505 --> 00:16:58,390
into the package of a class.

275
00:16:58,390 --> 00:17:01,630
Then we can actually
deploy 20,100 objects,

276
00:17:01,630 --> 00:17:03,220
all of them behaving

277
00:17:03,220 --> 00:17:06,595
with the pattern of this
gradient rectangle.

278
00:17:06,595 --> 00:17:08,410
Hopefully, you're actually

279
00:17:08,410 --> 00:17:10,030
understanding how
we can actually use

280
00:17:10,030 --> 00:17:12,490
object oriented programming for

281
00:17:12,490 --> 00:17:15,460
design and how we can
actually deploy and create

282
00:17:15,460 --> 00:17:18,260
really beautiful patterns by

283
00:17:18,400 --> 00:17:23,450
instancing objects that
behave in a very unique way.

284
00:17:23,450 --> 00:17:25,910
I'm going to continue discussing

285
00:17:25,910 --> 00:17:27,710
how we can actually work
with different files

286
00:17:27,710 --> 00:17:31,385
and how we're going to structure
our code a bit further

287
00:17:31,385 --> 00:17:32,735
and really wrap up

288
00:17:32,735 --> 00:17:34,190
our understanding of classes

289
00:17:34,190 --> 00:17:36,510
in the next session.
I'll see you then.