1
00:00:00,270 --> 00:00:04,530
Welcome to part two of data pre processing.

2
00:00:04,530 --> 00:00:11,070
We've done the first couple of steps of the workflow and we've ended about here in the last lesson where

3
00:00:11,070 --> 00:00:13,830
we just cropped the image.

4
00:00:13,830 --> 00:00:19,480
Now what we're gonna do is we're gonna figure out how to resize our image.

5
00:00:19,480 --> 00:00:25,470
We're gonna make our image smaller namely we're gonna size it down to around 20 pixels on the long end

6
00:00:26,070 --> 00:00:33,900
and then we're gonna add some padding around it so that by the end we have a 28 by 28 pixel image.

7
00:00:33,900 --> 00:00:36,630
So let's have a think about the resizing.

8
00:00:36,630 --> 00:00:45,330
If I've got my website loaded up here and I draw something on this canvas See I draw a long and narrow

9
00:00:45,330 --> 00:00:46,700
digit like this.

10
00:00:46,710 --> 00:00:53,400
So I want to draw like it to hit and I click on check answer that I've got my long and narrow image

11
00:00:53,400 --> 00:00:54,160
here.

12
00:00:54,450 --> 00:01:00,630
But if I draw a viewer short and wide to then it will look something like this.

13
00:01:00,630 --> 00:01:03,460
That's the output of the current code that we've written.

14
00:01:03,570 --> 00:01:09,060
So if you look at these two images and you had to think about how to shrink these two images how would

15
00:01:09,060 --> 00:01:10,360
you go about it.

16
00:01:10,410 --> 00:01:16,980
How would you get the largest possible number two on the shrunken image after resizing.

17
00:01:16,980 --> 00:01:23,520
So before we're gonna dive in and write our code let's figure this out the way that the endless data

18
00:01:23,520 --> 00:01:32,520
is structured is that the digit at the center of the image has to fit into a 20 pixel by 20 pixels square.

19
00:01:32,580 --> 00:01:41,580
So what this means is that the long edge of say a tall and narrow digit should be around 20 pixels.

20
00:01:41,580 --> 00:01:48,840
We would want the height of this tall and narrow number to to be 20 pixels but for a short and wide

21
00:01:48,960 --> 00:01:54,140
digit like this one here we would want the width to be 20 pixels.

22
00:01:54,150 --> 00:02:00,390
In other words in order to get the largest possible image into that 20 by 20 pixels square we would

23
00:02:00,390 --> 00:02:05,550
have to make sure that the long edge is going to be 20 pixels in length.

24
00:02:05,550 --> 00:02:07,800
Now what about the short edge.

25
00:02:07,800 --> 00:02:10,630
How many pixels should the short edge be.

26
00:02:10,650 --> 00:02:16,020
So what I want to do is I want to go through a quick example to nail down the logic before we write

27
00:02:16,020 --> 00:02:17,010
our code.

28
00:02:17,220 --> 00:02:21,680
So say we have this number two right here that we've drawn on the canvas.

29
00:02:21,780 --> 00:02:26,890
It's 100 pixels tall and 40 pixels wide.

30
00:02:26,970 --> 00:02:31,390
And what we want to do is we want to shrink it down to 20 pixels.

31
00:02:31,590 --> 00:02:33,550
So how wide should this image be.

32
00:02:33,600 --> 00:02:35,280
After shrinking it down.

33
00:02:35,370 --> 00:02:38,090
Now I know that's not a terribly complicated question.

34
00:02:38,100 --> 00:02:42,120
And just by looking at these numbers you can probably tell what the answer should be.

35
00:02:42,120 --> 00:02:47,970
But what would the code look like to work this out to work out the new width.

36
00:02:47,970 --> 00:02:54,400
What we need to actually know is the ratio of the current height to the target height.

37
00:02:54,510 --> 00:02:57,050
I'm going to call this a scale factor.

38
00:02:57,480 --> 00:03:02,910
Our scale factor in this case would be one hundred divided by 20.

39
00:03:02,970 --> 00:03:06,260
So in this case the scale factor is equal to five.

40
00:03:06,360 --> 00:03:14,430
And what this means is that the new width should be equal to 40 the old width divided by the scale factor.

41
00:03:14,430 --> 00:03:14,990
All right.

42
00:03:15,090 --> 00:03:21,990
So that's the logic that we're going to incorporate into our code but how do we actually scale images

43
00:03:22,140 --> 00:03:29,250
using open CV for that we're going to look at the documentation in particular we're to look at this

44
00:03:29,250 --> 00:03:37,610
page here on geometric transformations of images in fact the very first transformation on this page

45
00:03:38,030 --> 00:03:44,510
is already about scaling and the function here is called resize and it takes a couple of different inputs

46
00:03:44,640 --> 00:03:50,090
one two three four five six different inputs to be exact.

47
00:03:50,090 --> 00:03:51,950
So what are the parameters here.

48
00:03:51,950 --> 00:03:54,520
What are the things that we need to pay attention to.

49
00:03:54,860 --> 00:03:59,300
The first two we've already encountered we have to provide an input and we have to store the output

50
00:03:59,300 --> 00:04:00,200
somewhere.

51
00:04:00,200 --> 00:04:04,860
But what about these ones here D size effects an F Why.

52
00:04:05,360 --> 00:04:06,680
What are these.

53
00:04:06,680 --> 00:04:12,560
In reading this documentation him the key thing to realize is that there are actually two ways you can

54
00:04:12,560 --> 00:04:15,260
use this resize function.

55
00:04:15,260 --> 00:04:25,430
Either you provide these scale factors so this affects an F Y or you provide a value for D size if you

56
00:04:25,430 --> 00:04:31,970
provide the scale factors so you give a value for F X and if y then these sizes worked out automatically

57
00:04:32,450 --> 00:04:37,880
and if you do it the other way round if you provide the target size if you will then the scale factors

58
00:04:37,880 --> 00:04:40,970
are worked out automatically by this function.

59
00:04:40,970 --> 00:04:46,160
And it says here when you want something to be worked at automatically then you just give it the value

60
00:04:46,160 --> 00:04:47,390
zero.

61
00:04:47,390 --> 00:04:53,120
Now let's look at the code snippet below on the documentation what we see here is that they're actually

62
00:04:53,120 --> 00:04:55,060
giving a value for these sites.

63
00:04:55,070 --> 00:05:01,930
So they're creating some variable designs and they're sending an equal to three hundred by three hundred.

64
00:05:02,000 --> 00:05:06,780
So what they're going to do in this code snippet is resize this picture here to three hundred by three

65
00:05:06,780 --> 00:05:07,540
hundred.

66
00:05:07,580 --> 00:05:12,350
The scale factors are worked out automatically by leaving them as zero.

67
00:05:12,380 --> 00:05:19,530
So if I click try then the end result here is a three hundred three hundred size picture.

68
00:05:19,550 --> 00:05:21,730
So in our code let's do the same.

69
00:05:21,920 --> 00:05:32,430
Let's work out what the D size should be and then implement this resize function and to do that we first

70
00:05:32,430 --> 00:05:38,730
need a width and a height so coming into our code what is the width and the height gonna be.

71
00:05:38,730 --> 00:05:46,530
So for the height c var height it's gonna be equal to the number of rows in our image.

72
00:05:46,530 --> 00:05:50,790
Right so image dot rows it's gonna be equal to our height.

73
00:05:50,900 --> 00:05:52,240
Forget a semicolon here.

74
00:05:53,200 --> 00:05:55,840
What about the width in this case.

75
00:05:55,900 --> 00:06:04,650
It's gonna be the number of columns in the image so far width is equal to image dot calls now at this

76
00:06:04,650 --> 00:06:08,750
point I'd like to pose a challenge to you.

77
00:06:08,880 --> 00:06:12,000
Can you write the code to resize this image.

78
00:06:12,120 --> 00:06:18,410
Now remember the long edge has to be 20 pixels long and the short edge needs to be worked out and you're

79
00:06:18,410 --> 00:06:25,800
gonna need to round the short edge to the nearest integer so you're gonna have to do the calculations

80
00:06:25,800 --> 00:06:33,150
slightly differently for the tall and narrow images and the short and wide images you get to make sure

81
00:06:33,150 --> 00:06:40,630
they both scale down properly and the long edge of either of those two is going to be 20 pixels.

82
00:06:40,740 --> 00:06:48,000
Now I recommend you use this documentation right here and you have a bit of a Google on how to round

83
00:06:48,000 --> 00:06:50,130
numbers in JavaScript.

84
00:06:50,820 --> 00:06:54,960
I'll give you a few seconds to pause the video before I show you the solution.

85
00:06:54,960 --> 00:06:55,380
Have a go

86
00:06:59,450 --> 00:06:59,840
all right.

87
00:06:59,840 --> 00:07:00,730
Ready.

88
00:07:00,770 --> 00:07:02,480
Here's my solution.

89
00:07:02,510 --> 00:07:05,120
There's a couple of different ways you could have written your code.

90
00:07:05,120 --> 00:07:08,600
But here's my simple solution for you.

91
00:07:08,600 --> 00:07:17,660
I'm going to be using an if else statement if my height is greater than the width.

92
00:07:17,660 --> 00:07:21,440
In other words I have a tall and narrow image.

93
00:07:21,440 --> 00:07:31,100
What I would like to do is I would like to set my new target height equal to 20 and I'm going to calculate

94
00:07:31,130 --> 00:07:32,450
my scale factor.

95
00:07:32,480 --> 00:07:38,420
So const scale factor is equal to the old height.

96
00:07:38,420 --> 00:07:43,160
So that's image dot rows divided by my target height.

97
00:07:43,250 --> 00:07:47,120
That's equal to height which I've just said equal to 20.

98
00:07:47,630 --> 00:07:50,720
And my new width my target width if you will.

99
00:07:50,840 --> 00:08:00,830
It's gonna be equal to math dot round in parentheses the old width so image dot calls the number of

100
00:08:00,830 --> 00:08:08,730
columns divided by my scale factor so I'm doing this calculation and then rounding it to the nearest

101
00:08:08,730 --> 00:08:09,480
integer.

102
00:08:09,690 --> 00:08:17,870
And with that I have my new height which is equal to 20 so that's my long edge and my short edge is

103
00:08:17,910 --> 00:08:24,420
gonna be worked out from the old width divided by the scale factor that I've worked out on the line

104
00:08:24,420 --> 00:08:25,810
above.

105
00:08:25,920 --> 00:08:34,320
Now what if I've got a short and narrow image in that case I'm going to have this ls class trigger and

106
00:08:34,320 --> 00:08:38,610
here I'm know that my width should be equal to 20.

107
00:08:38,610 --> 00:08:48,990
So that's the long edge but my scale factor in this case is gonna be equal to image dot columns in this

108
00:08:48,990 --> 00:08:59,160
case divided by the width and that of course leaves the height to be equal to the rounded value.

109
00:08:59,160 --> 00:09:08,300
Now I thought round of the old height image dot rows divided by the scale factor.

110
00:09:08,370 --> 00:09:09,600
There we go.

111
00:09:09,660 --> 00:09:12,350
Now what we can do is create this size object here.

112
00:09:12,450 --> 00:09:21,600
So just like in the documentation we can create a new size object with something like let your size

113
00:09:22,330 --> 00:09:26,220
is equal to new c v dot size.

114
00:09:26,340 --> 00:09:32,550
Capital S there and for the pixel values for the width and the height we're gonna use the width and

115
00:09:32,550 --> 00:09:34,920
the height that we've just worked out above.

116
00:09:34,950 --> 00:09:44,600
So it's gonna be with come on height now that we've got our new signs that we want we can call this

117
00:09:44,990 --> 00:09:51,950
resize method here and we can do that with CV dot resize and our input is once again our image our output

118
00:09:52,150 --> 00:09:53,530
is going gonna be our image.

119
00:09:53,540 --> 00:10:00,040
So we're going to update it and then we're gonna provide this D size argument here.

120
00:10:00,130 --> 00:10:01,940
And for us I didn't call it D size.

121
00:10:01,940 --> 00:10:03,020
I called it new size.

122
00:10:03,020 --> 00:10:05,840
I think that's more descriptive.

123
00:10:05,840 --> 00:10:07,760
What about f x and f y.

124
00:10:07,790 --> 00:10:13,280
Well we're gonna provide the value 0 for both of those because they're gonna be worked out automatically

125
00:10:13,880 --> 00:10:20,300
and then for the interpretation that last parameter we're gonna go with the same thing they're using

126
00:10:20,300 --> 00:10:26,400
here in the code snippet CV dot into area brilliant.

127
00:10:26,470 --> 00:10:34,300
So now that we've got that let's save and let's come back in here and refresh our site and let's draw

128
00:10:34,300 --> 00:10:39,160
something like a very very narrow number two.

129
00:10:39,200 --> 00:10:41,430
And now let's draw a very very wide.

130
00:10:41,440 --> 00:10:46,290
Number two as you can see my changes aren't being applied at all.

131
00:10:46,480 --> 00:10:52,870
So I'm just gonna go to more tools clear browsing data and just make sure that the newest version of

132
00:10:52,870 --> 00:10:54,940
my web site is indeed being served up here.

133
00:10:55,660 --> 00:11:00,110
So let's try again refresh and try.

134
00:11:00,800 --> 00:11:01,240
OK.

135
00:11:01,270 --> 00:11:02,220
So there we go.

136
00:11:02,230 --> 00:11:06,750
Now you see a tiny tiny 20 pixel tall number to appear here.

137
00:11:07,390 --> 00:11:14,690
And if I make a very wide number two then you get something a bit more square looking wonderful.

138
00:11:14,800 --> 00:11:17,500
So that works if you can't see this.

139
00:11:17,500 --> 00:11:27,730
I can zoom in to uh maybe 300 percent or 500 percent and you can see that in this corner here that we've

140
00:11:28,000 --> 00:11:31,440
indeed scaled this down to 20 pixels.

141
00:11:31,720 --> 00:11:38,280
So it's absolutely tiny and you're probably only going to be able to see it very well on your own screen.

142
00:11:38,450 --> 00:11:40,720
We've resized our image.

143
00:11:40,720 --> 00:11:43,880
Now it's time to add the padding.

144
00:11:43,920 --> 00:11:49,160
Now what will adding the padding do it's gonna make our image nice and square.

145
00:11:49,320 --> 00:11:56,880
No matter what aspect ratio it was previously in particular for that very very narrow number to where

146
00:11:56,880 --> 00:12:03,930
we've got that long edge on the y axis what adding the padding will do is it will square it out so that

147
00:12:03,930 --> 00:12:07,820
it's going to be 28 by 28 pixels.

148
00:12:07,890 --> 00:12:12,440
And what this means for us is that we have to work out how much padding to actually add.

149
00:12:13,230 --> 00:12:18,910
So we have to work out actually four values the top the bottom the left and the right.

150
00:12:18,930 --> 00:12:20,420
So let me ask you a question.

151
00:12:20,520 --> 00:12:23,580
I've got the padding on the left right here marked in green.

152
00:12:23,580 --> 00:12:27,390
How would you work out the length of the Green Line.

153
00:12:27,390 --> 00:12:33,060
Well it's going to be four plus the length of this segment right here.

154
00:12:33,210 --> 00:12:34,160
Right.

155
00:12:34,260 --> 00:12:35,880
What's that equal to.

156
00:12:35,880 --> 00:12:45,220
Well it's going to be 20 which is this distance right here minus the width of the actual digit divided

157
00:12:45,220 --> 00:12:52,570
by two because there is one segment only right on this side and this segment here belongs to the padding

158
00:12:52,660 --> 00:12:59,680
on the right hand side so the full equation for the padding on the left side would be four plus 20 minus

159
00:12:59,710 --> 00:13:03,240
the width of the image divided by two.

160
00:13:03,280 --> 00:13:07,230
So let's head back into v as code and add four constants here.

161
00:13:07,780 --> 00:13:15,730
Let's start out with the left one the left one we said was gonna be equal to four plus twenty minus

162
00:13:15,730 --> 00:13:18,100
the width divided by two.

163
00:13:19,000 --> 00:13:22,520
And the same was true for the right hand side right.

164
00:13:22,540 --> 00:13:25,100
So I'm just going to copy the line pasted below.

165
00:13:25,120 --> 00:13:32,470
Change this to right and then I'm gonna paste that line again and I'm going to work out the top value

166
00:13:32,560 --> 00:13:40,510
so at top it's gonna be four plus twenty minus what not the width right the height divided by two and

167
00:13:40,510 --> 00:13:45,160
for the bottom value it's gonna be pretty much the same as the top value right.

168
00:13:46,210 --> 00:13:48,430
I'll just change the name of the constant.

169
00:13:48,490 --> 00:13:57,400
Now this looks like it could work but what if the width is equal to five pixels if the width is equal

170
00:13:57,400 --> 00:14:01,860
to five pixels then we get twenty minus five divided by two.

171
00:14:01,870 --> 00:14:06,260
So that's 15 divided by two and we have seven point five.

172
00:14:06,280 --> 00:14:15,990
We have a fractional pixel so let's make a small modification here let's around the left value up and

173
00:14:16,000 --> 00:14:21,160
let's round the right value down so that we have integers for the putting value on the left and the

174
00:14:21,160 --> 00:14:23,890
right in order to round something up.

175
00:14:23,890 --> 00:14:26,700
We're gonna use that math functionality right.

176
00:14:26,830 --> 00:14:36,040
And math has a function here called Seal for sealing which rounds up and as you can imagine math also

177
00:14:36,250 --> 00:14:45,460
has a function called flaw which rounds down so ceiling four up and floor four down and we'll do the

178
00:14:45,460 --> 00:14:50,700
same sort of alternation on the top and the bottom.

179
00:14:51,020 --> 00:14:56,270
Now that we've calculated these constants let's well let's put them to the console.

180
00:14:56,780 --> 00:14:59,180
Let's take a look at what these values actually are.

181
00:15:00,200 --> 00:15:06,260
So when I had a log statement here so we can look at them every time we click the button and I'm going

182
00:15:06,260 --> 00:15:08,600
to use some string interpolation here.

183
00:15:08,900 --> 00:15:16,810
So when I use that back tick and the dollar signs and the curly braces in order to write this log statement.

184
00:15:16,880 --> 00:15:21,790
So the top is going to be equal to dollar sign.

185
00:15:21,830 --> 00:15:29,550
Curly braces top and then I'm just going to add the bottom the Left the Right.

186
00:15:29,780 --> 00:15:32,520
So we have them all in the log statement.

187
00:15:32,870 --> 00:15:33,680
Now that's all done.

188
00:15:33,770 --> 00:15:40,920
Let's save our changes come back refresh and let's take a look.

189
00:15:40,920 --> 00:15:48,570
So if I draw this tall and narrow number two then at the top and the bottom I'm only adding four pixels

190
00:15:48,570 --> 00:15:49,490
of padding.

191
00:15:49,650 --> 00:15:52,530
But on the left on the right I'm adding 10.

192
00:15:52,650 --> 00:15:54,730
That makes sense right.

193
00:15:54,750 --> 00:15:59,740
And if I draw something like this then I should get a very different look.

194
00:15:59,740 --> 00:16:03,670
So top and bottom I'm adding 10 and 9 pixels.

195
00:16:03,690 --> 00:16:09,120
So here you can see that rounding in action and on the left and on the right I'm adding four because

196
00:16:09,270 --> 00:16:11,280
that's my long edge.

197
00:16:11,280 --> 00:16:13,650
Would you like to venture a guess what the values are going to come out at.

198
00:16:13,920 --> 00:16:21,900
If I draw a number one well in that case I'm going to be adding a lot of padding on the left and the

199
00:16:21,900 --> 00:16:24,090
right because it's such a narrow digit.

200
00:16:24,840 --> 00:16:26,130
All right fantastic.

201
00:16:26,130 --> 00:16:29,540
So we've worked out these values we know what the padding should be.

202
00:16:29,760 --> 00:16:34,440
But how do we actually add padding using open CV.

203
00:16:34,440 --> 00:16:42,030
So when I throw this over to you as a challenge once again I'd like to ask you to find the correct function

204
00:16:42,300 --> 00:16:48,600
in the open CV documentation and implement it in your code.

205
00:16:48,660 --> 00:16:55,440
I'll give you a few seconds to pause the video and have a Google make sure you look for the javascript

206
00:16:55,470 --> 00:17:02,370
part of the open CV documentation and yeah just have a go show the solution in a few seconds

207
00:17:06,550 --> 00:17:07,490
ready.

208
00:17:07,510 --> 00:17:09,250
Here's the solution.

209
00:17:09,250 --> 00:17:16,120
The page where the function is listed is actually under basic operations on images.

210
00:17:16,420 --> 00:17:23,260
I can actually search this page for padding and you'll find that there is a section here called Making

211
00:17:23,260 --> 00:17:30,490
borders for images parentheses padding and the way it works is given by this code snippet right here.

212
00:17:30,500 --> 00:17:38,440
If I click try it you can see that a border was added to this image and this border can act as a padding

213
00:17:38,440 --> 00:17:39,880
value.

214
00:17:39,880 --> 00:17:43,020
Let's look at the parameters for this copy.

215
00:17:43,180 --> 00:17:45,370
Make border function.

216
00:17:45,640 --> 00:17:48,670
We've got a source which is our input.

217
00:17:48,670 --> 00:17:53,560
We've got the top bottom left and right which we've just calculated.

218
00:17:53,570 --> 00:17:58,240
That's the border width and the number of pixels corresponding to the directions.

219
00:17:58,330 --> 00:18:00,250
Then we've got a border type.

220
00:18:00,310 --> 00:18:03,610
So we want a constant colored border.

221
00:18:03,820 --> 00:18:09,130
But of course we don't want a red border like they've have in the code sample here.

222
00:18:09,130 --> 00:18:12,640
What we actually want is a black border.

223
00:18:12,640 --> 00:18:14,920
Now where does the color actually come in here.

224
00:18:15,700 --> 00:18:20,620
If we have a look at this documentation it's not that obvious at first.

225
00:18:21,070 --> 00:18:25,990
But if you look at the code sample you can see this line right here.

226
00:18:26,020 --> 00:18:28,680
Two hundred and fifty five 0 0.

227
00:18:28,720 --> 00:18:35,890
Two hundred and fifty five and that's stored in this value called S and it comes in right here at the

228
00:18:35,890 --> 00:18:38,400
end after the constant border.

229
00:18:38,410 --> 00:18:45,550
So part of this challenge was actually figuring out that this here this thing called scalar is actually

230
00:18:45,640 --> 00:18:46,740
the color.

231
00:18:46,810 --> 00:18:49,140
This isn't our GDP a.

232
00:18:49,180 --> 00:18:55,030
So red green blue Alpha format.

233
00:18:55,030 --> 00:19:00,620
So the reason why this border is red is because it's got the value 255 for red.

234
00:19:00,670 --> 00:19:05,650
And the reason you can see it so well is because it's opaque it's not transparent.

235
00:19:05,650 --> 00:19:08,080
So that's why there's a two hundred and fifty five value here.

236
00:19:08,560 --> 00:19:11,800
So this thing here is actually the color.

237
00:19:11,800 --> 00:19:14,360
Now what would the scalar look like for us.

238
00:19:14,710 --> 00:19:16,900
We don't want a red color after all.

239
00:19:16,900 --> 00:19:17,990
Right.

240
00:19:18,010 --> 00:19:19,610
We want a black color.

241
00:19:19,630 --> 00:19:22,200
So in that case this value would be zero.

242
00:19:22,570 --> 00:19:30,630
And while this value would be zero as well so let's call this function in V.S. coat CV.

243
00:19:30,670 --> 00:19:40,810
Don't copy make border and the parameters where our image for the input or image for the output and

244
00:19:40,810 --> 00:19:54,580
then it was top bottom left and right for the type of board it was the dot for the underscore constant

245
00:19:55,270 --> 00:19:58,650
and for the color we wanted that scalar right.

246
00:19:58,690 --> 00:20:07,050
So let's create that scalar let's say const in all caps black for a scalar it's going to be a new CV

247
00:20:07,090 --> 00:20:17,240
dot scalar and it was 0 0 0 and zero semicolon at the end.

248
00:20:17,370 --> 00:20:20,760
And now we can use our color that we've created right here.

249
00:20:21,950 --> 00:20:27,560
Let's save our code head back into our Web site refresh.

250
00:20:27,560 --> 00:20:31,580
And now let's see if we get a square output here.

251
00:20:31,730 --> 00:20:36,150
So put a five here and one.

252
00:20:36,500 --> 00:20:42,110
We've got the padding successfully added and we've got a nice square image.

253
00:20:42,110 --> 00:20:44,550
And if I draw one all the same.

254
00:20:44,560 --> 00:20:45,130
Right.

255
00:20:45,150 --> 00:20:47,750
So now we've got that consistent sizing.

256
00:20:47,880 --> 00:20:49,620
Thanks to the padding.

257
00:20:49,620 --> 00:20:56,790
No matter what we draw on our canvas what's the size of these anyways let's verify what the dimensions

258
00:20:56,790 --> 00:21:02,670
are of these little canvases here that we've got on here as a sample output.

259
00:21:02,820 --> 00:21:09,450
If I right click on this thing and I click inspect then I get the width and the height of all these

260
00:21:09,450 --> 00:21:10,850
small little elements.

261
00:21:11,070 --> 00:21:16,640
And what we see here is that they're all equal to 28 by 28 pixels which is perfect.

262
00:21:16,650 --> 00:21:18,620
That's exactly what we want.

263
00:21:18,750 --> 00:21:22,240
And that concludes this lesson in the next lesson.

264
00:21:22,290 --> 00:21:26,040
We're going to tackle the last part of this track here.

265
00:21:26,070 --> 00:21:31,440
We're going to calculate the center of mass which is very exciting that we're going to shift our image

266
00:21:31,710 --> 00:21:38,670
and then we're finally going to create our tensor and that will finish up all the pre processing steps

267
00:21:39,000 --> 00:21:47,030
and get our output from our canvas to be pre processed exactly in the same way as the endless dataset.

268
00:21:47,100 --> 00:21:51,450
So for all of that and more I'll see you in the next lesson.

269
00:21:51,450 --> 00:21:52,170
Take care.