1
00:00:06,742 --> 00:00:08,614
Hi, welcome to this new lesson.

2
00:00:08,614 --> 00:00:12,038
In this lesson,
we are going to learn how actual

3
00:00:12,038 --> 00:00:16,974
classes could offer us to create
multiple instances of a class.

4
00:00:16,974 --> 00:00:20,902
So the whole purpose of really
constructing a class is that we can

5
00:00:20,902 --> 00:00:21,590
reuse it.

6
00:00:21,590 --> 00:00:25,570
That we have code that could be
reusable in different instances.

7
00:00:25,570 --> 00:00:29,610
But in this specific case is really to
kind of start changing the way in which

8
00:00:29,610 --> 00:00:34,142
each instance takes different advantage
of the data that a class will contain.

9
00:00:34,142 --> 00:00:36,714
So let's start where we left off.

10
00:00:38,414 --> 00:00:43,278
So, if you remember, this is the code
that we left off in the past video.

11
00:00:43,278 --> 00:00:44,142
Let's run it.

12
00:00:44,142 --> 00:00:47,374
We actually have a class.

13
00:00:47,374 --> 00:00:50,533
It's a very kind of maybe
redundant description or

14
00:00:50,533 --> 00:00:53,134
a very long way of writing a rectangle.

15
00:00:53,134 --> 00:00:56,689
But this is the foundation of
what a class will be able to,

16
00:00:56,689 --> 00:01:00,705
we'll start seeing what a class
can actually do for us, right?

17
00:01:00,705 --> 00:01:04,304
So we have a class here which
is the Gradient_Rectangle.

18
00:01:04,304 --> 00:01:09,025
We're calling it a Gradient_Rectangle
because we are moving towards

19
00:01:09,025 --> 00:01:11,936
the work that we did in
the week three that has

20
00:01:11,936 --> 00:01:16,304
to do with this kind of gradient
vector moving rectangle.

21
00:01:16,304 --> 00:01:17,448
But we'll get there.

22
00:01:17,448 --> 00:01:18,764
We'll get there soon.

23
00:01:19,844 --> 00:01:24,084
First of all, we are defining the class,
as you can see here.

24
00:01:24,084 --> 00:01:28,797
And then in our setup,
we can actually create an instance of this

25
00:01:28,797 --> 00:01:32,452
gradient rectangle called gr_01, right?

26
00:01:32,452 --> 00:01:35,476
And we are invoking the function display.

27
00:01:35,476 --> 00:01:39,076
That, as you can see here, is one of
the internal functions of the class.

28
00:01:39,076 --> 00:01:44,587
So the first thing I would like to do is
to create a second instance of this class.

29
00:01:44,587 --> 00:01:49,774
As we explained, we don't have
to rewrite the class definition,

30
00:01:49,774 --> 00:01:52,654
but we can copy paste this part here.

31
00:01:54,154 --> 00:01:58,890
And we can actually just do a number two,
right?

32
00:01:58,890 --> 00:02:07,570
And this rectangle, let's push it
down in y to maybe 110, right?

33
00:02:07,570 --> 00:02:11,154
And the size,
let's do it slightly smaller.

34
00:02:11,154 --> 00:02:15,464
Let's make it of 40 units.

35
00:02:15,464 --> 00:02:20,800
And now we have gr_02 here, which is
the second instance of this rectangle.

36
00:02:20,800 --> 00:02:26,592
And we also can call the display
function on that rectangle.

37
00:02:26,592 --> 00:02:28,960
So, let's see if this is working.

38
00:02:28,960 --> 00:02:32,832
As you can see here,
we have two versions of that rectangle.

39
00:02:32,832 --> 00:02:40,640
We basically are specifying that these
rectangles will have different attributes.

40
00:02:40,640 --> 00:02:44,072
And there are two different
instances of the same class, right?

41
00:02:44,072 --> 00:02:49,078
So as you can see, we didn't have to
do any changes to the class whatsoever,

42
00:02:49,078 --> 00:02:53,004
but we are able to kind of create
two instances of that class.

43
00:02:54,104 --> 00:02:58,457
What if we want to include
a little bit of different, like,

44
00:02:58,457 --> 00:03:01,112
expand the class a little bit more?

45
00:03:01,112 --> 00:03:06,675
Let's say we think, well, it would be nice
to have some kind of color definition,

46
00:03:06,675 --> 00:03:10,118
what if each rectangle
also had a specific color?

47
00:03:10,118 --> 00:03:16,079
So let's just add an attribute
here called color.

48
00:03:16,079 --> 00:03:22,726
And we are going to do
a self.color = color.

49
00:03:22,726 --> 00:03:27,758
So this is going to be a new
attribute of the rectangle.

50
00:03:27,758 --> 00:03:32,818
And once we use the fill, instead of using

51
00:03:32,818 --> 00:03:37,301
the 255,0,0, which is red,

52
00:03:37,301 --> 00:03:43,530
we will do a fill, sorry,
a self.color, right?

53
00:03:43,530 --> 00:03:48,738
So using the color attribute
of the class to identify it.

54
00:03:48,738 --> 00:03:50,298
Where is this color coming from?

55
00:03:50,298 --> 00:03:53,642
It's going to have to be provided in
the constructor of the class, right?

56
00:03:53,642 --> 00:03:55,490
So right now if we try to run this,

57
00:03:55,490 --> 00:04:00,274
we will have an error because we are not
providing a color for the class.

58
00:04:00,274 --> 00:04:02,882
We need to make sure that
we provide the color.

59
00:04:02,882 --> 00:04:07,540
So in each one of
the constructors of the class,

60
00:04:07,540 --> 00:04:15,118
let's add color equals the color,
let's do one red as we did it originally.

61
00:04:15,118 --> 00:04:20,046
And then in the other case,

62
00:04:20,046 --> 00:04:25,004
let's do another one.

63
00:04:25,004 --> 00:04:28,953
Green, so 0,255.

64
00:04:30,893 --> 00:04:34,589
And we're going to keep
the display function once again.

65
00:04:34,589 --> 00:04:35,873
So let's try that.

66
00:04:38,133 --> 00:04:42,413
I think I'm running into some error here.

67
00:04:42,413 --> 00:04:45,313
Yeah, we need a comma here and here.

68
00:04:46,933 --> 00:04:48,354
There we go.

69
00:04:48,354 --> 00:04:53,412
So as you can see now the rectangles
are again instances from the same class,

70
00:04:53,412 --> 00:04:55,914
but they're changing attributes.

71
00:04:55,914 --> 00:04:57,396
They're changing
the attribute of position.

72
00:04:57,396 --> 00:04:59,770
They're changing the attribute of size.

73
00:04:59,770 --> 00:05:03,794
They're changing the attribute of color,
right?

74
00:05:03,794 --> 00:05:06,966
Let's add another attribute
to this rectangle,

75
00:05:06,966 --> 00:05:10,290
and then we'll do a third
instance of this class.

76
00:05:10,290 --> 00:05:14,926
So one of the things that
we started learning in,

77
00:05:14,926 --> 00:05:19,000
within our vector session in week three.

78
00:05:19,000 --> 00:05:23,096
And again, if you haven't covered that,
by all means, just go back a little bit.

79
00:05:23,096 --> 00:05:25,360
Week three kind of covers vector math.

80
00:05:25,360 --> 00:05:29,509
Let's see how we can create
a function called move, right?

81
00:05:29,509 --> 00:05:31,752
So this rectangle
actually moves over time.

82
00:05:31,752 --> 00:05:35,368
So we can do the definition
of a function called move.

83
00:05:35,368 --> 00:05:37,320
This is written within the class.

84
00:05:37,320 --> 00:05:39,288
If you look at the structure of the class,

85
00:05:39,288 --> 00:05:42,264
this function move is going to
be happening within the class.

86
00:05:42,264 --> 00:05:47,191
And we're going to use the self
keyword to have access to

87
00:05:47,191 --> 00:05:51,154
the internal variables of this class.

88
00:05:51,154 --> 00:05:55,211
And here, we can say self.vec_position,

89
00:05:55,211 --> 00:05:58,854
which is what we want to change, right?

90
00:06:01,034 --> 00:06:06,387
Let's add to that a vector.

91
00:06:06,387 --> 00:06:10,588
And we could add a vector,
a specific vector,

92
00:06:10,588 --> 00:06:17,834
something like a vector of one in x, but
we could actually also create a vector.

93
00:06:19,174 --> 00:06:22,074
Let's just create one
final attribute here that

94
00:06:22,074 --> 00:06:24,670
we're going to call the vector velocity.

95
00:06:24,670 --> 00:06:29,864
So vector, instead of position,

96
00:06:29,864 --> 00:06:34,590
let's use velocity, right?

97
00:06:34,590 --> 00:06:37,222
So I know that this is
kind of half written.

98
00:06:37,222 --> 00:06:38,870
So I need to go back to that.

99
00:06:38,870 --> 00:06:44,931
But let's just kind of quickly create
a new attribute for this class,

100
00:06:44,931 --> 00:06:51,964
which is going to be the self.velocity
vector equals vector velocity, right?

101
00:06:51,964 --> 00:06:57,559
So now we can actually
use this vector velocity,

102
00:06:57,559 --> 00:07:03,884
and actually,
we need to use self.vector velocity.

103
00:07:03,884 --> 00:07:06,939
So the internal velocity of the class.

104
00:07:06,939 --> 00:07:12,526
So we're going to use a small arrow,
let's say one unit in x.

105
00:07:12,526 --> 00:07:16,174
We're going to add that to
the position of this rectangle.

106
00:07:16,174 --> 00:07:18,862
So we can actually make
this rectangle move.

107
00:07:18,862 --> 00:07:23,271
So let's try to make them each one of
the instances of this class move at

108
00:07:23,271 --> 00:07:24,554
a different speed.

109
00:07:25,574 --> 00:07:29,566
We need to provide the velocity in
the constructor of the class, right?

110
00:07:29,566 --> 00:07:34,734
So if we go down here now,
you'll see that we have specified color.

111
00:07:36,074 --> 00:07:42,677
We need to specify this time a new vector.

112
00:07:42,677 --> 00:07:45,566
The vector velocity, it's going to be,

113
00:07:45,566 --> 00:07:50,754
let's just copy the way we've
been doing vectors in the past.

114
00:07:50,754 --> 00:07:55,840
So here, p vector and
the velocity, remember that

115
00:07:55,840 --> 00:08:02,474
a velocity vector is going to be
added every frame, potentially.

116
00:08:03,614 --> 00:08:06,182
So we're going to do (1,0).

117
00:08:06,182 --> 00:08:10,998
So one in x for
the velocity of the red rectangle.

118
00:08:10,998 --> 00:08:14,747
And in the case of the green rectangle,

119
00:08:14,747 --> 00:08:20,038
let's do a vector velocity of zero,
five comma zero.

120
00:08:20,038 --> 00:08:28,006
So a bit slower in a way
than the previous one.

121
00:08:28,006 --> 00:08:32,832
So if we try to run this,
we won't see anything.

122
00:08:32,832 --> 00:08:37,008
I think we're also missing the comma here,
same problem that we had before,

123
00:08:37,008 --> 00:08:37,724
there we go.

124
00:08:38,864 --> 00:08:40,829
Let's see if that works.

125
00:08:45,744 --> 00:08:47,824
We are having an issue.

126
00:08:47,824 --> 00:08:49,806
Let's just find our mistake.

127
00:08:52,984 --> 00:08:55,344
So let's go back to the script.

128
00:08:55,344 --> 00:08:57,648
I kind of found a small error here.

129
00:08:57,648 --> 00:09:00,966
I think that this comma
here shouldn't be here.

130
00:09:00,966 --> 00:09:03,598
This is not the area where we
needed to include the comma.

131
00:09:03,598 --> 00:09:08,815
When we are here in the, if you remember
here in this area, the constructor,

132
00:09:08,815 --> 00:09:13,214
these are all lines that could
be written as a one line, right.

133
00:09:13,214 --> 00:09:17,251
It's a kind of a long series of arguments
that are kind of contributing to

134
00:09:17,251 --> 00:09:19,038
the constructor of the class.

135
00:09:19,038 --> 00:09:21,742
And we certainly need a comma
in each one of those cases.

136
00:09:21,742 --> 00:09:24,822
But for a moment, I got confused and
I added the comma up here.

137
00:09:24,822 --> 00:09:29,508
These are just the kind of
the variables of the class,

138
00:09:29,508 --> 00:09:32,508
so do not include a comma there.

139
00:09:32,508 --> 00:09:36,028
So let's see now, in this case,
as you can see here,

140
00:09:36,028 --> 00:09:41,012
the rectangles are in fact appearing,
but they're not moving in any way.

141
00:09:41,012 --> 00:09:44,612
That's because we haven't
created a draw function yet.

142
00:09:44,612 --> 00:09:46,764
There's nothing happening every frame.

143
00:09:46,764 --> 00:09:50,860
So let's just create
a little bit of space here.

144
00:09:50,860 --> 00:09:52,499
Let's do the def draw.

145
00:09:56,784 --> 00:10:01,559
And in this area, what we want to do

146
00:10:01,559 --> 00:10:06,169
is we want to be able to activate,

147
00:10:06,169 --> 00:10:11,437
if you think here, we want to be able to

148
00:10:11,437 --> 00:10:18,720
activate the functions of the rectangles,
right?

149
00:10:18,720 --> 00:10:23,394
We want to display them every frame and
we want to move them every frame.

150
00:10:23,394 --> 00:10:29,794
But here's where we actually have
a little bit of a context problem, right.

151
00:10:29,794 --> 00:10:34,964
If we try to execute this within the draw,
we'll see that this object is not

152
00:10:34,964 --> 00:10:40,210
visible for this context, meaning
that it was created within the setup.

153
00:10:40,210 --> 00:10:46,395
So let's just go ahead and pick
the definition of our gradient rectangle,

154
00:10:46,395 --> 00:10:51,616
and let's cut them and
let's include them outside the setup.

155
00:10:56,374 --> 00:11:00,534
And we are going to bring them back here.

156
00:11:00,534 --> 00:11:05,585
So these are kind of just going to
be a series of two instances

157
00:11:05,585 --> 00:11:09,690
that are going to be visible both for
the setup and

158
00:11:09,690 --> 00:11:15,074
the draw as we define them prior
to those functions, right?

159
00:11:16,254 --> 00:11:21,119
So let's just make sure
that we can actually

160
00:11:21,119 --> 00:11:25,870
execute the function in the draw as well.

161
00:11:25,870 --> 00:11:27,874
Let's see if this is working.

162
00:11:30,854 --> 00:11:36,777
Okay, so technically, we should be able
to now invoke the second function of the,

163
00:11:40,113 --> 00:11:44,534
Of the rectangle, which is move, right?

164
00:11:44,534 --> 00:11:48,746
So let's do gr_01.move.

165
00:11:51,520 --> 00:11:54,567
And the same thing for
our second gradient rectangle.

166
00:11:58,894 --> 00:12:04,950
And you can see now that that
function is being executed, right?

167
00:12:04,950 --> 00:12:09,821
So we have both of these classes
being drawn with different colors,

168
00:12:09,821 --> 00:12:12,044
with different velocities.

169
00:12:12,044 --> 00:12:16,467
Now, we're moving away from just
a rectangle that maybe we didn't need

170
00:12:16,467 --> 00:12:17,566
a class for that.

171
00:12:17,566 --> 00:12:22,038
We're actually constructing a series of
attributes that belong to that object,

172
00:12:22,038 --> 00:12:23,844
right, to that class.

173
00:12:23,844 --> 00:12:28,485
And we are realizing that we could also
have a series of functions that are unique

174
00:12:28,485 --> 00:12:30,276
and internal to that object.

175
00:12:30,276 --> 00:12:31,780
So this is what we're starting to do.

176
00:12:31,780 --> 00:12:36,374
We're starting to understand how
object-oriented programming really works.

177
00:12:36,374 --> 00:12:40,839
And how we can actually start expanding
the functionality and almost the kind of

178
00:12:40,839 --> 00:12:45,546
internal behavior of this object so that
we can actually deploy a series of them.

179
00:12:45,546 --> 00:12:47,483
Just to conclude this class,

180
00:12:47,483 --> 00:12:51,394
I want to just show you we
can actually do a third one.

181
00:12:51,394 --> 00:12:57,426
And we're going to do
the third gradient rectangle.

182
00:12:57,426 --> 00:13:02,207
Let's add the position of 170.

183
00:13:04,724 --> 00:13:09,124
The size could be of 50 again.

184
00:13:09,124 --> 00:13:11,164
Or let's just do a 20.

185
00:13:11,164 --> 00:13:16,660
And this one will be slightly faster,
right?

186
00:13:16,660 --> 00:13:21,661
And the color,
let's just add another color here,

187
00:13:21,661 --> 00:13:24,624
something like that, right?

188
00:13:26,024 --> 00:13:30,411
And now that we actually
have this third object,

189
00:13:30,411 --> 00:13:35,152
we can actually delete all
the display in the setup.

190
00:13:35,152 --> 00:13:38,808
Because if we are going to just
be displaying it in the draw,

191
00:13:38,808 --> 00:13:42,808
I don't think the setup
invocation is necessary anymore.

192
00:13:42,808 --> 00:13:45,056
And we're going to do this for number 3.

193
00:13:55,124 --> 00:13:57,716
And now we have three rectangles.

194
00:13:57,716 --> 00:14:01,804
The third one is slightly faster than
the first one, but it's smaller, right?

195
00:14:01,804 --> 00:14:05,926
So we're starting to see all
these different rectangles moving

196
00:14:05,926 --> 00:14:08,724
towards the right of the screen, right?

197
00:14:08,724 --> 00:14:13,651
But as you can probably identify, the
process gets quite tedious if we actually

198
00:14:13,651 --> 00:14:17,836
have to copy paste the creation
of instances of classes, right?

199
00:14:17,836 --> 00:14:21,323
All this process is something
that we can automate or

200
00:14:21,323 --> 00:14:24,772
potentially construct
within a loop structure.

201
00:14:24,772 --> 00:14:27,460
So that's what we're going to
do in the next session.

202
00:14:27,460 --> 00:14:32,862
We're going to see how to move away from
an explicit construction of a class,

203
00:14:32,862 --> 00:14:35,777
but we could actually do them within a for

204
00:14:35,777 --> 00:14:39,668
loop or
within kind of a looping structure, right?

205
00:14:39,668 --> 00:14:40,724
So I'll see you in the next session.