1
00:00:00,690 --> 00:00:03,480
We're almost done pre processing our data.

2
00:00:03,510 --> 00:00:06,070
There's just a few more steps to go.

3
00:00:06,090 --> 00:00:08,150
We've just added the padding.

4
00:00:08,220 --> 00:00:11,190
SO NOW WE HAVE TO FIND THE CENTER OF MASS.

5
00:00:11,340 --> 00:00:15,960
Shift the image and normalize our pixel values.

6
00:00:15,960 --> 00:00:18,430
So how we gonna find the center of mass.

7
00:00:18,630 --> 00:00:25,710
If we head over to the documentation under the control of features and we read this first sentence then

8
00:00:25,710 --> 00:00:32,730
we see image moments help you calculate some features like the center of mass of the object.

9
00:00:32,730 --> 00:00:34,860
So this looks like a clue right.

10
00:00:34,860 --> 00:00:42,540
Scrolling down a little bit we actually see that we've got this bit here where we can extract useful

11
00:00:42,540 --> 00:00:49,050
data like the centroid the centroid is just another word for the center of mass that we're actually

12
00:00:49,050 --> 00:00:57,810
after and what we've got here is the code and the calculation for how to calculate the center of mass

13
00:00:58,400 --> 00:01:02,630
and what we see here is that the center of mass really has two coordinates.

14
00:01:02,640 --> 00:01:10,590
It's got an x coordinate and it's got a y coordinate open CV really makes this easy to work out it just

15
00:01:10,590 --> 00:01:12,840
takes a few lines of code.

16
00:01:12,960 --> 00:01:20,580
Now looking at this equation we can see that what we'd really need are three things we need this m 0

17
00:01:20,600 --> 00:01:26,030
0 we need the M 1 0 and we need the m 0 1.

18
00:01:26,040 --> 00:01:34,950
These things are called Image moments and the code to work these out is given above in the sample but

19
00:01:35,340 --> 00:01:39,660
what is an image moment a moment sounds like a really scary word.

20
00:01:39,660 --> 00:01:43,770
When you first hear it but it's just a number that's it.

21
00:01:43,770 --> 00:01:46,660
A moment is some kind of weighted average.

22
00:01:46,870 --> 00:01:52,080
And if the words weighted average make you think of these statistics and probability that we talked

23
00:01:52,080 --> 00:01:58,920
about in this course then you'd be spot on because guess what the mean is actually the first moment

24
00:01:59,220 --> 00:02:01,930
of the probability density function.

25
00:02:01,950 --> 00:02:08,540
So if you think about it this way it's not so strange that the center of mass is also a kind of average.

26
00:02:09,330 --> 00:02:13,470
And we can even see how it's calculated in the documentation right here.

27
00:02:14,700 --> 00:02:21,840
So what is m 0 0 0 0 is the mass for the image as a whole.

28
00:02:21,840 --> 00:02:30,580
So we've got a black and white image and that means that m 0 0 is really just the area of our image.

29
00:02:31,080 --> 00:02:39,720
M 1 0 is how much mass is on the horizontal or in the x direction m 0 1 is how much mass is in the y

30
00:02:39,720 --> 00:02:46,440
direction or on the vertical and if we look at the fraction of these then we get the coordinates for

31
00:02:46,470 --> 00:02:47,660
the center.

32
00:02:47,970 --> 00:02:50,620
And that's really all there is to it.

33
00:02:50,760 --> 00:02:54,160
Let's scroll up and take a look at the code to work this out.

34
00:02:54,300 --> 00:03:02,550
What we see here is that once again the process involves first finding the contours and then using these

35
00:03:02,550 --> 00:03:06,470
contours we can figure out what the moments are.

36
00:03:06,570 --> 00:03:11,340
And once we have the moments we can figure out the center of mass.

37
00:03:11,340 --> 00:03:14,120
So let's implement this in this code.

38
00:03:14,130 --> 00:03:20,310
I'm going to come down here and add a little comment here that just reads center of mass.

39
00:03:20,520 --> 00:03:28,470
Just to delineate where we are in the code and here we're gonna find our contours and we did this last

40
00:03:28,470 --> 00:03:36,660
time with C the DOT find contours and it had a couple of inputs that it needed and we can even scroll

41
00:03:36,660 --> 00:03:41,900
up and we might be able to actually just copy paste what we have here and change it a bit.

42
00:03:41,970 --> 00:03:49,680
So I'm just gonna copy this line and say as the typing him by pasting it in and then what we can do

43
00:03:49,800 --> 00:03:58,790
is use these contours that we have as an output from this function to get some specific contours right.

44
00:03:59,220 --> 00:04:08,370
So S.A. is gonna be equal to contour start get and in the parentheses we'll grab the first set of contours

45
00:04:09,300 --> 00:04:12,270
so we've done this process once before.

46
00:04:12,270 --> 00:04:17,940
This is the second time we're doing it and even though it might look like we're repeating ourselves

47
00:04:18,180 --> 00:04:22,090
we're actually working with a different image at this point right.

48
00:04:22,140 --> 00:04:27,900
You have to think about how all those code runs we're continuously updating and manipulating our image

49
00:04:27,930 --> 00:04:34,080
object so when we're finding the contours on line 53 we're dealing with a very different image than

50
00:04:34,110 --> 00:04:42,620
when we were doing it on line 21 so now that we have the controls that we're after we can grab the moments

51
00:04:42,780 --> 00:04:51,360
and I'm going to store these in a variable called moments and I want to set that equal to CV dot moments

52
00:04:51,950 --> 00:04:59,220
and in the parentheses out to supply the contours from the line above and a boolean and this one is

53
00:04:59,220 --> 00:05:01,220
gonna read false.

54
00:05:01,290 --> 00:05:02,620
Now why is that.

55
00:05:02,640 --> 00:05:09,120
One reason is that I'm pretty much doing what we've got here in the documentation but with the second

56
00:05:09,120 --> 00:05:15,780
parameter is actually referring to is whether or not we have a binary image but that's not the case

57
00:05:15,780 --> 00:05:16,040
for us.

58
00:05:16,050 --> 00:05:20,620
We're working with a pretty much a regular image not anything in binary format.

59
00:05:20,670 --> 00:05:24,310
So that's what we are sticking with the default false.

60
00:05:24,470 --> 00:05:24,720
All right.

61
00:05:24,720 --> 00:05:31,170
So now we have our moments object that we can use this thing to figure out the x and the y coordinate

62
00:05:31,500 --> 00:05:33,390
of our center of mass.

63
00:05:33,590 --> 00:05:39,270
And we're gonna go over the same formula that's outlined here in the documentation so I'll critic constant

64
00:05:39,270 --> 00:05:45,210
here called C X and this is where I'm going to store the x coordinate of the Central Mass.

65
00:05:45,560 --> 00:05:51,870
And in order to calculate the x coordinate I'm gonna grab my moments object and there I'm going to grab

66
00:05:51,960 --> 00:06:03,060
m 1 0 so the mass in the horizontal in the x direction and I'm going to divide this by the mass of the

67
00:06:03,060 --> 00:06:03,800
image overall.

68
00:06:03,810 --> 00:06:12,900
So that's an 0 0 and then what I can do is I can do the same thing for the y coordinate so that C Y

69
00:06:13,470 --> 00:06:21,660
and it's very very similar in the calculation except that we're going for an 0 1 instead of the n 1

70
00:06:21,660 --> 00:06:23,040
0 as above.

71
00:06:23,040 --> 00:06:25,380
And the denominator of course is the same as before.

72
00:06:26,340 --> 00:06:27,960
That's our calculation.

73
00:06:27,960 --> 00:06:34,140
Let's print out this information into the console so that we can look at it and get a better feel for

74
00:06:34,560 --> 00:06:39,870
what it is that we're actually working with because yeah we talked a little bit about what these things

75
00:06:39,870 --> 00:06:46,590
mean but I think seeing is believing and seeing a few examples really helps build an understanding of

76
00:06:46,650 --> 00:06:48,630
what it is that we're actually working with.

77
00:06:48,630 --> 00:06:59,730
So let me log these three values so when I use the tactics and here I'm going to say that m 0 0 is equal

78
00:06:59,730 --> 00:07:00,580
to.

79
00:07:00,750 --> 00:07:11,260
And when I use the string interpolation moment stopped and 0 0 and then it's simply going to put the

80
00:07:11,380 --> 00:07:17,840
x coordinate and the y coordinate in this console log as well.

81
00:07:17,890 --> 00:07:18,270
All right.

82
00:07:18,460 --> 00:07:24,550
So now we can save and refresh our site.

83
00:07:24,550 --> 00:07:31,900
You're gonna need your HDB server running as always in your folder and you just hit refresh.

84
00:07:31,900 --> 00:07:38,390
And now what we're gonna do is we're gonna go through some examples.

85
00:07:38,390 --> 00:07:45,490
So I'd like you to make some predictions with me about what the value of m 0 0 0 is gonna be what the

86
00:07:45,490 --> 00:07:49,460
value of c y and C X is gonna be.

87
00:07:49,510 --> 00:07:57,330
So I'm going to draw a big fat zero in here big fat circle and I'd like you to make a prediction.

88
00:07:57,370 --> 00:08:03,110
Do you think that m 0 0 will be high or will it be a low value.

89
00:08:03,250 --> 00:08:11,070
Remember that this is gonna be a proxy for the area right the mass of shape that I've just drawn here.

90
00:08:11,830 --> 00:08:20,650
And you also have to remember that the largest possible value that we can have in our area for our image

91
00:08:20,740 --> 00:08:24,350
in the center is 20 pixels by 20 pixels.

92
00:08:24,370 --> 00:08:27,960
So that gives us a value of 400 at the upper bound.

93
00:08:28,000 --> 00:08:30,160
Now what do you think we're going to come in.

94
00:08:30,160 --> 00:08:35,180
Do you think we'll come in close to 400 or we're gonna come in at 0.

95
00:08:35,230 --> 00:08:37,360
Or do you think we'll come in somewhere in the middle.

96
00:08:37,390 --> 00:08:44,990
I'd like two hundred so maybe get a pen and paper and just write down your guess the other guess I'd

97
00:08:44,990 --> 00:08:53,510
like to make is where you think the y coordinate and the x coordinate will come in for the Central Mass.

98
00:08:53,510 --> 00:08:58,760
So here the numbers are gonna be between 0 and 28.

99
00:08:58,940 --> 00:08:59,300
Right.

100
00:08:59,300 --> 00:09:05,000
So the whole canvas is gonna be 28 by twenty eight right including the padding.

101
00:09:05,000 --> 00:09:11,470
So make a guess where you think X and Y are gonna come in all right.

102
00:09:11,480 --> 00:09:13,600
My hat check answer here.

103
00:09:13,600 --> 00:09:16,830
And let's take a look at the log statement.

104
00:09:16,870 --> 00:09:17,920
What are we saying.

105
00:09:17,920 --> 00:09:24,980
Well the first thing that we can see is that n 00 the overall mass or the area of our image is going

106
00:09:24,980 --> 00:09:25,920
to be quite large.

107
00:09:25,930 --> 00:09:28,990
Actually it's quite close to 400.

108
00:09:28,990 --> 00:09:31,390
It's well above 200.

109
00:09:31,450 --> 00:09:34,220
I mean not quite at 400 but it's fairly big.

110
00:09:34,330 --> 00:09:36,250
And that makes sense right.

111
00:09:36,250 --> 00:09:39,930
The circle that I drew had a fairly large area.

112
00:09:39,940 --> 00:09:43,810
What about the x and y coordinate of our center of mass.

113
00:09:43,810 --> 00:09:49,520
If we look at these two numbers then what we see is that they're actually very close to 14.

114
00:09:49,690 --> 00:09:50,500
Right.

115
00:09:50,560 --> 00:09:57,630
So the center of mass for the circle that I drew was pretty much in the middle of the canvas.

116
00:09:57,730 --> 00:09:59,600
So that makes sense right.

117
00:09:59,680 --> 00:10:00,880
Let's try a different number.

118
00:10:00,880 --> 00:10:08,170
I want to draw a one here and I'd like you to make the same predictions do you think that m 0 0 will

119
00:10:08,170 --> 00:10:11,830
be high or low in this case.

120
00:10:12,250 --> 00:10:17,520
And then also what do you think the center of mass is going to come in for this.

121
00:10:17,540 --> 00:10:17,810
All right.

122
00:10:17,810 --> 00:10:25,490
So we had check answer and what we see is that we're much closer to zero for the mass of the image.

123
00:10:25,550 --> 00:10:29,810
So this no one here has a much lower mass than the circle.

124
00:10:29,810 --> 00:10:38,660
The zero that I drew earlier but if we look at the x and y coordinate of our center of mass we're still

125
00:10:38,660 --> 00:10:39,700
in the middle.

126
00:10:39,800 --> 00:10:43,250
And I think that makes a lot of sense right.

127
00:10:43,280 --> 00:10:45,030
Let's try a different number.

128
00:10:45,040 --> 00:10:49,050
I want to draw a nine somewhere to go over here and drawing nine.

129
00:10:50,330 --> 00:10:57,110
And for this number I want to ask you a slightly different question do you think that the x coordinate

130
00:10:57,590 --> 00:11:02,760
of the Center will be greater or less than 14.

131
00:11:02,820 --> 00:11:05,390
What about the y coordinate for the center of mass.

132
00:11:05,400 --> 00:11:08,580
Do you think it'll be greater or less than 14.

133
00:11:08,580 --> 00:11:09,740
Remember 0 0.

134
00:11:09,780 --> 00:11:16,470
The Origin is going to be in the top left corner it's going to be over him.

135
00:11:16,520 --> 00:11:16,760
All right.

136
00:11:16,790 --> 00:11:18,950
Let's find out.

137
00:11:18,980 --> 00:11:20,220
So what do we see.

138
00:11:20,270 --> 00:11:24,920
We see that the x coordinate is pretty close to the middle.

139
00:11:24,920 --> 00:11:25,160
Right.

140
00:11:25,190 --> 00:11:31,160
It's almost that 14 but the y coordinate is way less right.

141
00:11:31,190 --> 00:11:35,840
So we have that number nine which has that circle at the top.

142
00:11:35,840 --> 00:11:43,280
And that means that the mass of the image is closer to the top of the canvas than to the bottom.

143
00:11:43,310 --> 00:11:46,730
That's why the y coordinate is less than 14.

144
00:11:46,790 --> 00:11:48,790
It's higher than the midpoint.

145
00:11:48,860 --> 00:11:56,370
So I hope that helps demystify how these moments behave and how this center of mass behaves.

146
00:11:56,420 --> 00:12:00,200
You can have a look at a couple of other examples on your own.

147
00:12:00,200 --> 00:12:05,480
Like say maybe the number six or the number seven and see if you can predict how these three numbers

148
00:12:05,480 --> 00:12:10,670
change for those numbers as you're drawing these shapes on the canvas.

149
00:12:10,670 --> 00:12:18,350
The next thing that we have to do having found the center of mass is shifting the image we have to shift

150
00:12:18,560 --> 00:12:23,650
our digit so that the center of mass is in the center of it image.

151
00:12:23,910 --> 00:12:29,990
And the reason we have to do this is because this was done to the training data that we used for our

152
00:12:30,080 --> 00:12:31,680
neural network.

153
00:12:31,700 --> 00:12:37,760
So what this means for us is we have to figure out how to shift our image.

154
00:12:37,760 --> 00:12:41,960
We have to figure out what the shift should be in the horizontal direction.

155
00:12:42,050 --> 00:12:46,340
And we have to figure out what the shift should be in the vertical direction.

156
00:12:46,370 --> 00:12:49,930
So how many pixels left or right and how many pixels up or down.

157
00:12:50,450 --> 00:12:59,690
So let me ask you this if sea X the x coordinate for the center of mass is at 15 then what should the

158
00:12:59,690 --> 00:13:06,200
horizontal shift be that we need to do in order to center the image on the horizontal.

159
00:13:06,290 --> 00:13:08,560
Well our midpoint is at 14 right.

160
00:13:08,570 --> 00:13:14,570
So if sea X comes in at 15 then we need to go one pixel to the right.

161
00:13:14,720 --> 00:13:16,530
Let's write this down in code.

162
00:13:16,820 --> 00:13:26,510
So when a critic constant you call it X shift and once that that equal to 14 minus C X.

163
00:13:26,530 --> 00:13:26,830
All right.

164
00:13:27,920 --> 00:13:34,760
So that's going to be the difference between the midpoint and our center of mass or at least the x coordinate

165
00:13:34,760 --> 00:13:41,580
for the center of mass Now this isn't necessarily banned but I think we can improve this a little bit.

166
00:13:42,120 --> 00:13:45,050
What if we use our image object instead.

167
00:13:45,100 --> 00:13:52,620
So instead of this 14 here what I'm going to do is I'm just gonna grab the image and pick the number

168
00:13:52,620 --> 00:13:59,160
of columns in the image and divide those by two and subtract the x coordinate for the center of mass

169
00:13:59,430 --> 00:14:01,030
from this value.

170
00:14:01,650 --> 00:14:09,000
So I think this is an improvement but once again we can't shift our image by fractional pixels so we're

171
00:14:09,000 --> 00:14:14,280
gonna have to round this whole thing and we're going to use the math functionality him and round this

172
00:14:14,280 --> 00:14:17,950
whole thing to the nearest integer.

173
00:14:17,970 --> 00:14:22,880
So with this line of code we have this shift nailed down in the x direction.

174
00:14:23,190 --> 00:14:28,980
And as you can guess in the y direction it's very very similar except we're not going to grab the image

175
00:14:28,980 --> 00:14:29,860
columns.

176
00:14:30,000 --> 00:14:39,300
We're gonna grab the image rows and instead of subtracting C X we're gonna subtract c y.

177
00:14:39,380 --> 00:14:39,960
All right.

178
00:14:40,010 --> 00:14:45,580
So now let's figure out how to shift the image around using open CV.

179
00:14:45,950 --> 00:14:53,960
If you had to this page right here the one on geometric transformations of images and you scroll down

180
00:14:53,960 --> 00:14:59,570
a little bit then you can find something called walk a fine.

181
00:14:59,570 --> 00:15:03,680
So you've got this section here called a fine transform.

182
00:15:03,680 --> 00:15:07,390
Example and this is what we're after.

183
00:15:07,490 --> 00:15:14,300
So I'm going to click try it and you can see that this indeed even though it has kind of a strange name

184
00:15:14,330 --> 00:15:17,960
a fine transform actually does what we intend to do.

185
00:15:18,020 --> 00:15:21,950
It shifts the image but how does it do it.

186
00:15:21,950 --> 00:15:26,660
Let's take a look at the parameters of this wobble fine.

187
00:15:26,720 --> 00:15:28,580
We've got a input image.

188
00:15:28,580 --> 00:15:30,060
We've got an output image.

189
00:15:30,080 --> 00:15:32,720
We've got the size of the output image.

190
00:15:32,720 --> 00:15:34,750
All of these look fairly familiar.

191
00:15:34,750 --> 00:15:35,330
Right.

192
00:15:35,330 --> 00:15:38,430
These are all the kind of parameters that we've encountered before.

193
00:15:38,450 --> 00:15:40,670
So no surprises there.

194
00:15:40,670 --> 00:15:44,390
We've also got a border and a border value.

195
00:15:44,390 --> 00:15:45,710
We've also worked with these before.

196
00:15:46,010 --> 00:15:48,050
So no mysteries there.

197
00:15:48,200 --> 00:15:53,830
The only thing that's a little bit tricky to understand is this thing right here.

198
00:15:53,960 --> 00:15:56,510
This transformation matrix.

199
00:15:56,630 --> 00:15:57,980
What is this.

200
00:15:57,980 --> 00:16:01,270
Well let's find out in the sample code.

201
00:16:01,400 --> 00:16:08,330
I'm going to come down here and I can see that the transformation matrix is this thing called M and

202
00:16:08,390 --> 00:16:15,650
I can see that M is being created up here and it's credit using these six values right here.

203
00:16:16,430 --> 00:16:17,990
So what are these.

204
00:16:17,990 --> 00:16:23,980
Well let's take this one hundred him and change it to 80 and then click try it.

205
00:16:24,560 --> 00:16:29,090
And what we see is that the transformed image just moved up.

206
00:16:29,090 --> 00:16:32,300
Let me change that to 40 and hit.

207
00:16:32,300 --> 00:16:36,040
Try it and again it moves up even more.

208
00:16:36,140 --> 00:16:41,810
And if I change this to two hundred and click tried it moves down.

209
00:16:41,810 --> 00:16:49,670
So this 200 him is in fact the vertical shift from the origin and the top left corner changing this

210
00:16:49,670 --> 00:16:52,670
number him shifts the image up or down.

211
00:16:53,480 --> 00:16:59,250
And what that means is that this 50 him is going to be the horizontal shift.

212
00:16:59,350 --> 00:17:03,810
If I increase it to 150 were star image b it's going to be somewhere here.

213
00:17:03,810 --> 00:17:05,190
Right.

214
00:17:05,600 --> 00:17:07,150
That's fairly simple.

215
00:17:07,160 --> 00:17:08,680
Right.

216
00:17:08,720 --> 00:17:16,130
So now that we understand this we can come up here where we've got the formula and we can make a connection

217
00:17:16,250 --> 00:17:23,300
between this formula here and the code in the example what they're calling T X here.

218
00:17:23,420 --> 00:17:25,950
It's nothing other than the horizontal shift.

219
00:17:26,120 --> 00:17:32,840
And what they're calling t y here is nothing other than the vertical shift at this point I'd like to

220
00:17:32,840 --> 00:17:35,480
pose another challenge to you.

221
00:17:35,480 --> 00:17:44,260
What I'd like you to do is use this documentation to implement the shift to the center of mass in the

222
00:17:44,260 --> 00:17:45,490
s code.

223
00:17:45,530 --> 00:17:52,120
I'd like you to shift the image so that it's now going to be centered using the center of mass.

224
00:17:52,130 --> 00:18:00,470
I'm going to give you a few seconds again to pause the video before I show you my solution.

225
00:18:00,610 --> 00:18:00,980
All right.

226
00:18:00,980 --> 00:18:01,320
Ready.

227
00:18:01,760 --> 00:18:03,050
Here's the solution.

228
00:18:03,050 --> 00:18:10,830
The thing to realize is that one of the inputs that we need in order to use this warp fine is yeah.

229
00:18:10,910 --> 00:18:12,230
We need to provide them.

230
00:18:12,260 --> 00:18:16,910
But we also need to provide some sort of size of the image.

231
00:18:16,910 --> 00:18:26,000
So what we can do is we can reuse this new size variable that we've created earlier and we can just

232
00:18:26,300 --> 00:18:31,530
kind of give it a new value when to give it the current size of our image.

233
00:18:31,730 --> 00:18:40,550
Image dot calls for the width and image dot rows for the height.

234
00:18:40,550 --> 00:18:47,680
So now that we've updated our signs we can create a ha transformation matrix.

235
00:18:47,720 --> 00:18:54,500
So I want to credit constant and call it m just like in the documentation and when I create this from

236
00:18:54,620 --> 00:18:55,720
the array.

237
00:18:55,760 --> 00:19:06,680
So when I create a matrix from an array and actually you can copy this entire line here and pasted into

238
00:19:06,820 --> 00:19:14,000
v as code the only modification that you have to make is the horizontal shift and the vertical shift.

239
00:19:14,090 --> 00:19:22,360
So that's gonna be x underscore shift for the horizontal and Y underscore shift for the vertical.

240
00:19:22,760 --> 00:19:25,490
And that's the transformation matrix done.

241
00:19:26,150 --> 00:19:31,100
The next thing that we need is our warp of fine function.

242
00:19:31,090 --> 00:19:37,190
So once again I'm going to copy this to save myself some typing pasted in and then I'm going to modify

243
00:19:37,190 --> 00:19:44,780
it the input of course is our image the destination the output is once again our image.

244
00:19:44,780 --> 00:19:53,750
So we're just going to update our image using we'll fine the transformation matrix is as per above and

245
00:19:53,960 --> 00:19:56,060
we're not using designs.

246
00:19:56,150 --> 00:19:57,600
That's not our name.

247
00:19:57,650 --> 00:19:59,180
I'm going to use new signs.

248
00:19:59,180 --> 00:20:04,550
That's what I've called it the interpolation we're going to leave as it is.

249
00:20:04,570 --> 00:20:06,460
It's just the calculation method.

250
00:20:06,590 --> 00:20:11,890
The border will leave as it is and we can even use this as it is.

251
00:20:12,020 --> 00:20:18,330
But since we created a scalar earlier we can just reuse the one that we used for the color.

252
00:20:18,350 --> 00:20:18,980
Right.

253
00:20:18,980 --> 00:20:22,830
So that was called Black which we created right here.

254
00:20:22,910 --> 00:20:23,300
Right.

255
00:20:24,080 --> 00:20:25,200
And that's it.

256
00:20:25,220 --> 00:20:28,200
That really completes the challenge.

257
00:20:28,280 --> 00:20:31,300
There's only a tiny tiny thing left to do.

258
00:20:31,310 --> 00:20:37,790
You can see that we've pretty much deleted all of the objects from open C.V. at the end.

259
00:20:37,790 --> 00:20:44,900
In the section we've called cleanup and since we're creating this m matrix here we can also delete this

260
00:20:44,900 --> 00:20:52,470
whole thing just like we deleted the hierarchy and the contours and the image after we're done.

261
00:20:52,690 --> 00:20:56,640
All right so let's save this whole thing save our changes.

262
00:20:56,830 --> 00:20:58,990
Come back here and let's test it out.

263
00:20:58,990 --> 00:21:01,090
Let's see if it works.

264
00:21:01,310 --> 00:21:09,550
When I refresh my page him I draw something and click check answer and no errors.

265
00:21:09,560 --> 00:21:12,090
So it seems to be working.

266
00:21:12,440 --> 00:21:19,070
If you really squint you can actually see that when you draw nine here that it's gonna be centered according

267
00:21:19,070 --> 00:21:23,780
to the center of mass in the tiny preview but it's very very small.

268
00:21:23,780 --> 00:21:29,180
So you're gonna have to zoom in in order to see the difference but you should be able to actually spot

269
00:21:29,750 --> 00:21:35,390
a visual difference on the previews that were actually outputting at the end of our page.

270
00:21:35,420 --> 00:21:35,850
All right.

271
00:21:35,900 --> 00:21:41,570
So we're down to the last few steps and the last one that we're going to do in this lesson is when to

272
00:21:41,570 --> 00:21:49,980
normalize the pixel values meaning we should divide our pixel values by two hundred and fifty five.

273
00:21:50,000 --> 00:21:51,320
Why is that.

274
00:21:51,320 --> 00:21:57,100
Well let's take a look at what these pixel values actually look like as they are at the moment.

275
00:21:57,260 --> 00:22:05,060
So I'm going to create a variable here called pixel values and I will set it equal to image dot data.

276
00:22:05,420 --> 00:22:14,180
So when I pull out the data the raw data from our image object from open CV and I want to log these

277
00:22:14,210 --> 00:22:20,270
right someone I'll take a look at them in the console someone along pixel values.

278
00:22:20,270 --> 00:22:20,860
There you go.

279
00:22:20,870 --> 00:22:29,850
Let's see this come in here refresh and I want to draw something inside the canvas and a quick check

280
00:22:29,850 --> 00:22:30,900
answer.

281
00:22:30,900 --> 00:22:33,450
And here is our output.

282
00:22:33,510 --> 00:22:42,870
This corresponds to the pixel values of our tiny 28 by 28 pixel image now you can see there is a bunch

283
00:22:42,870 --> 00:22:47,610
of zeros in the beginning and there is a bunch of zeros at the end.

284
00:22:47,670 --> 00:22:54,480
And that's because we've got the padding around the white bit in the middle which are all of these values

285
00:22:54,570 --> 00:22:57,220
that are around two hundred and fifty five.

286
00:22:57,240 --> 00:23:04,140
What I mean by normalizing our pixel values is I want all of these numbers to be between 0 and 1.

287
00:23:04,140 --> 00:23:10,080
I don't want to have them between zero and two hundred and fifty five and we're just gonna divide by

288
00:23:10,510 --> 00:23:12,900
255 to accomplish this.

289
00:23:12,900 --> 00:23:20,160
Now this is the point where you're going to see how easy this was in Python and how the syntax is a

290
00:23:20,430 --> 00:23:23,210
bit more involved in JavaScript.

291
00:23:23,610 --> 00:23:30,110
What you would think you could do is just take a pixel values divided by two hundred and fifty five.

292
00:23:30,150 --> 00:23:30,900
Right.

293
00:23:30,930 --> 00:23:32,700
That's what we would expect.

294
00:23:32,940 --> 00:23:40,890
But when we actually have to do is use something called the Map method in order to affect all the values

295
00:23:41,070 --> 00:23:43,360
in a javascript array.

296
00:23:43,410 --> 00:23:49,770
So if you want to divide all the values in this array him we're going to have to use this map method

297
00:23:50,520 --> 00:23:52,350
on W3 schools.

298
00:23:52,350 --> 00:23:59,730
You can actually take a look and scroll down a bit and you'll find this example here click on try it

299
00:23:59,730 --> 00:24:04,990
yourself and here what we have is a nice little example.

300
00:24:05,010 --> 00:24:12,100
We have these numbers here and we want to multiply all these numbers by 10.

301
00:24:12,220 --> 00:24:18,450
If I click Run You can see the output right here for the first number has multiplied by 10.

302
00:24:18,450 --> 00:24:19,920
The second number is the third and so on.

303
00:24:19,920 --> 00:24:20,940
Right.

304
00:24:21,060 --> 00:24:28,700
In our case we're going to divide all of these by two hundred and fifty five if click Run.

305
00:24:28,720 --> 00:24:31,340
That's exactly what happens here in the output.

306
00:24:31,800 --> 00:24:33,860
But how does this code work.

307
00:24:34,260 --> 00:24:41,370
What we see is that the map method takes a single input and that single input is actually a function

308
00:24:42,030 --> 00:24:49,290
and the function will divide every element which in this case here is called num by two hundred and

309
00:24:49,290 --> 00:24:50,800
fifty five.

310
00:24:50,880 --> 00:24:56,070
This is how you affect all the elements in a javascript array.

311
00:24:56,790 --> 00:25:02,270
So we're going to use this map method right here so let's implement this.

312
00:25:02,270 --> 00:25:09,590
Let's update our pixel values array with the result from calling our map method.

313
00:25:09,590 --> 00:25:11,840
So let's pixel value stop map.

314
00:25:11,840 --> 00:25:15,650
And between the parentheses I won't have to provide a function.

315
00:25:16,250 --> 00:25:21,030
So what we've got here is we've got the function created here and they're using the name here.

316
00:25:21,470 --> 00:25:26,170
But what I'm going to do is I'm just gonna create the function between the two parentheses.

317
00:25:26,390 --> 00:25:34,880
So when I have a function and I'm going to call every element inside my array just item when I open

318
00:25:34,880 --> 00:25:44,150
some parentheses and then I'm going to return my item divided by two hundred and fifty five point zero

319
00:25:44,620 --> 00:25:50,840
I might add my semicolon here and here and this is it.

320
00:25:50,930 --> 00:25:56,850
This is how I can divide every single value in my ray by two hundred and fifty five.

321
00:25:56,960 --> 00:26:04,810
So below our map method let's log our array after we've made all the changes.

322
00:26:04,880 --> 00:26:07,370
So I'm gonna have a log message here.

323
00:26:07,440 --> 00:26:14,930
I will call it scaled array and we're going to log our pixel values once again.

324
00:26:14,930 --> 00:26:24,620
So now if we've been successful we should see our updated values being shown below our old values so

325
00:26:24,990 --> 00:26:34,530
save your changes come back in here and refresh now draw something in here hit check.

326
00:26:34,530 --> 00:26:37,190
Answer let's take a look at the output.

327
00:26:37,250 --> 00:26:38,550
See what we've got.

328
00:26:38,550 --> 00:26:39,860
Do you notice anything.

329
00:26:39,860 --> 00:26:41,410
So we've got our old values here.

330
00:26:41,420 --> 00:26:43,090
We've got our new values here.

331
00:26:43,990 --> 00:26:46,770
And yeah they're between 0 and 1.

332
00:26:46,810 --> 00:26:53,210
There's zeros and there's ones but there's no values in between these two numbers.

333
00:26:53,500 --> 00:26:56,050
There's not a single decimal value here.

334
00:26:56,290 --> 00:26:59,080
And I can see that in the original array.

335
00:26:59,080 --> 00:27:03,340
We've had some values that were below two hundred and fifty five.

336
00:27:03,340 --> 00:27:03,580
Right.

337
00:27:03,580 --> 00:27:06,770
So there's one here fifty three to a seven.

338
00:27:06,810 --> 00:27:14,140
Now if I looked on here there's no decimal values whatsoever so why is that.

339
00:27:14,140 --> 00:27:23,560
Well it turns out that this line of code home image dump data actually gives us an array of integers.

340
00:27:23,560 --> 00:27:26,860
So we're doing all this math on integers.

341
00:27:26,860 --> 00:27:36,220
And unfortunately if I divide the value 254 by 255 I actually get the value 0.

342
00:27:36,370 --> 00:27:39,670
And that's exactly what's happening in our code.

343
00:27:39,670 --> 00:27:46,450
So what we have to do in order to actually get some decimal numbers here is we have to convert this

344
00:27:46,450 --> 00:27:54,070
whole thing from an array of integers to an array of floating point numbers an array of decimal numbers.

345
00:27:54,250 --> 00:28:01,150
Thankfully javascript mixed is really really easy and all we have to do is insert a line here that reads

346
00:28:01,390 --> 00:28:10,450
pixel values is equal to float 32 array dot from and then the old array here.

347
00:28:10,480 --> 00:28:11,990
Pixel values.

348
00:28:12,190 --> 00:28:20,230
So we're going to update our pixel values array when to change it from an array of integers to an array

349
00:28:20,830 --> 00:28:24,030
of decimal numbers or floating point numbers.

350
00:28:24,070 --> 00:28:25,300
Let's see if this worked.

351
00:28:25,300 --> 00:28:31,350
Let's save our changes refresh our website and try this again.

352
00:28:31,390 --> 00:28:33,280
And here we go.

353
00:28:33,400 --> 00:28:35,600
This is a lot more promising.

354
00:28:35,620 --> 00:28:40,320
Here we can see the actual decimal numbers between 0 and 1.

355
00:28:40,360 --> 00:28:43,590
So now we've successfully normalized our data.

356
00:28:43,630 --> 00:28:48,600
The next thing to do is to create a tensor and make a prediction.

357
00:28:48,760 --> 00:28:52,800
And that's exactly what we're gonna do in the next lesson.

358
00:28:52,810 --> 00:28:53,530
I'll see you there.