1
00:00:05,060 --> 00:00:08,010
Hi. Welcome to this new video.

2
00:00:08,010 --> 00:00:11,055
We're approaching the
end of the course,

3
00:00:11,055 --> 00:00:13,780
and now that we are
actually understanding

4
00:00:13,780 --> 00:00:16,695
information as they are

5
00:00:16,695 --> 00:00:20,180
presented as pixel
collections or pixel rays,

6
00:00:20,180 --> 00:00:22,715
as we've seen with
friendly noise.

7
00:00:22,715 --> 00:00:26,870
We can actually start diving
a little bit deeper into,

8
00:00:26,870 --> 00:00:29,135
what if we load an image?

9
00:00:29,135 --> 00:00:30,580
What can we obtain?

10
00:00:30,580 --> 00:00:33,745
What kind of data can we
obtain out of an image?

11
00:00:33,745 --> 00:00:35,960
This is what we're going
to be doing today.

12
00:00:35,960 --> 00:00:38,285
We're going to be
reading pixel data.

13
00:00:38,285 --> 00:00:44,095
Let's first understand
how pixels are organized.

14
00:00:44,095 --> 00:00:47,340
Once we use the
function load pixels,

15
00:00:47,340 --> 00:00:50,725
we are going to
get a collection.

16
00:00:50,725 --> 00:00:52,920
This is something we
haven't covered yet,

17
00:00:52,920 --> 00:00:56,900
and we're going to cover in
much more depth in Course 2,

18
00:00:56,900 --> 00:00:59,720
which is the data
structure called lists.

19
00:00:59,720 --> 00:01:01,520
But what we obtain out of

20
00:01:01,520 --> 00:01:04,300
a pixel collection is
very similar to a topple.

21
00:01:04,300 --> 00:01:08,030
It's a list of pixels that

22
00:01:08,030 --> 00:01:12,770
are enumerating how an image
is actually constructing.

23
00:01:12,770 --> 00:01:15,890
If we start from the top
left corner of an image,

24
00:01:15,890 --> 00:01:18,660
we will start with
pixel 0, 1, 2, 3,

25
00:01:18,660 --> 00:01:25,050
up to 12, if we have a
12-pixel resolution image.

26
00:01:25,050 --> 00:01:27,210
Obviously, that could
be much larger.

27
00:01:27,210 --> 00:01:29,810
But then we will continue down

28
00:01:29,810 --> 00:01:32,390
the next row all the
way until we get to

29
00:01:32,390 --> 00:01:38,610
the final point in the
bottom of the image.

30
00:01:38,610 --> 00:01:40,995
This is all presented in this

31
00:01:40,995 --> 00:01:42,430
pixels variable that we

32
00:01:42,430 --> 00:01:44,165
can access with the
square brackets,

33
00:01:44,165 --> 00:01:46,935
and the n would be the index.

34
00:01:46,935 --> 00:01:50,505
The index is the
index of the pixel.

35
00:01:50,505 --> 00:01:52,890
Why do we want to do this?

36
00:01:52,890 --> 00:01:54,870
If you want to

37
00:01:54,870 --> 00:01:57,230
update the pixels or change
the pixels in some way,

38
00:01:57,230 --> 00:01:58,410
if we have an image

39
00:01:58,410 --> 00:02:00,125
like the one you can
see on the right,

40
00:02:00,125 --> 00:02:03,460
we can loop through
all the pixels

41
00:02:03,460 --> 00:02:06,740
in the image and
assign the menu color.

42
00:02:06,740 --> 00:02:09,100
Just simply assign a menu
color like color white,

43
00:02:09,100 --> 00:02:10,755
and you can override that image.

44
00:02:10,755 --> 00:02:12,620
Obviously, this doesn't
really make too much sense,

45
00:02:12,620 --> 00:02:14,780
but you can in fact change

46
00:02:14,780 --> 00:02:19,070
aspects of any pixel by
updating that pixel.

47
00:02:19,070 --> 00:02:21,195
Well, that's not
very interesting,

48
00:02:21,195 --> 00:02:23,620
but what if we
actually decide to

49
00:02:23,620 --> 00:02:27,615
evaluate that pixel based on
something like brightness?

50
00:02:27,615 --> 00:02:30,180
The code that you can
see on the left is

51
00:02:30,180 --> 00:02:32,400
evaluating the
brightness of a pixel,

52
00:02:32,400 --> 00:02:34,500
so we can actually
input a pixel,

53
00:02:34,500 --> 00:02:36,320
read its color value

54
00:02:36,320 --> 00:02:38,660
and determine what
is its brightness.

55
00:02:38,660 --> 00:02:40,860
Then use a very
similar technique

56
00:02:40,860 --> 00:02:43,155
of what we used,
the friendly noise,

57
00:02:43,155 --> 00:02:46,635
is defined as an arbitrary
threshold point,

58
00:02:46,635 --> 00:02:48,070
a value, in this case,

59
00:02:48,070 --> 00:02:50,800
of 150 and differentiate between

60
00:02:50,800 --> 00:02:55,160
either red or white or whatever
color we decide to do.

61
00:02:55,160 --> 00:02:58,580
As you can see, we could
start really doing

62
00:02:58,580 --> 00:03:01,140
image manipulation just by

63
00:03:01,140 --> 00:03:02,320
understanding how the data of

64
00:03:02,320 --> 00:03:04,080
an image is actually
constructed,

65
00:03:04,080 --> 00:03:06,020
how we can access
it, and how we can

66
00:03:06,020 --> 00:03:09,315
actually read some of that
information like brightness,

67
00:03:09,315 --> 00:03:11,180
or hue, or other kind of

68
00:03:11,180 --> 00:03:12,320
attributes and do

69
00:03:12,320 --> 00:03:14,980
some manipulations
with that information.

70
00:03:14,980 --> 00:03:17,370
Let's see how we write
this in processing.

71
00:03:17,370 --> 00:03:20,200
The first thing that I would
like to bring attention to,

72
00:03:20,200 --> 00:03:22,250
we are working
with our template,

73
00:03:22,250 --> 00:03:26,560
but in the folder of where
I've saved this file,

74
00:03:26,560 --> 00:03:29,840
I've saved this file
named read_pixel_1,

75
00:03:29,840 --> 00:03:32,190
this is an arbitrary
name for this video.

76
00:03:32,190 --> 00:03:38,410
But I included this image
called portrait.jpeg.

77
00:03:38,410 --> 00:03:44,110
If you go to the associated
example file for this lesson,

78
00:03:44,110 --> 00:03:47,010
you will find already
an example of the code,

79
00:03:47,010 --> 00:03:49,050
and you'll find the
image that you will

80
00:03:49,050 --> 00:03:51,810
require to follow along.

81
00:03:51,810 --> 00:03:54,310
Make sure that you
include that image into

82
00:03:54,310 --> 00:03:57,765
your Canvas so that you
can follow along with us.

83
00:03:57,765 --> 00:03:59,870
The first thing
we're going to do is

84
00:03:59,870 --> 00:04:02,590
we're going to mostly
work in the setup here.

85
00:04:02,590 --> 00:04:06,840
Let's do global img.

86
00:04:06,840 --> 00:04:10,830
We're going to
bring an image with

87
00:04:10,830 --> 00:04:19,120
the load image function,
so portrait.jpeg.

88
00:04:20,390 --> 00:04:23,800
Here, image. Let's just
display that image in

89
00:04:23,800 --> 00:04:31,530
the screen, so img,0,0,500,750.

90
00:04:31,530 --> 00:04:33,510
That's going to be the
size of the image.

91
00:04:33,510 --> 00:04:36,540
I would like to
make sure that we

92
00:04:36,540 --> 00:04:42,050
also start using a canvas size
of the size of the image,

93
00:04:42,050 --> 00:04:45,990
so 500 by 750.

94
00:04:47,300 --> 00:04:50,430
At this point, let's
see what we get.

95
00:04:50,430 --> 00:04:52,395
We can just A,

96
00:04:52,395 --> 00:04:55,290
make sure that we're
visualizing the image that

97
00:04:55,290 --> 00:04:58,515
we have in the file
in the canvas.

98
00:04:58,515 --> 00:05:06,130
We can open the canvas with
the exact size of the image,

99
00:05:06,130 --> 00:05:11,660
so just matching the image
size with the canvas size.

100
00:05:12,990 --> 00:05:15,270
The first operation, and we've

101
00:05:15,270 --> 00:05:17,530
covered this how
to load an image,

102
00:05:17,530 --> 00:05:19,480
but we can actually use

103
00:05:19,480 --> 00:05:24,360
loadPixels as a function

104
00:05:24,360 --> 00:05:28,085
that will give us access
to the pixel array.

105
00:05:28,085 --> 00:05:31,640
That information now
would be available to us.

106
00:05:31,800 --> 00:05:36,260
Let's calculate the
total number of pixels.

107
00:05:36,260 --> 00:05:42,370
Total pixels, it's going to

108
00:05:42,370 --> 00:05:54,290
be canvas_width * canvas_height.

109
00:06:00,140 --> 00:06:07,215
What we're going to try to
use here is a function.

110
00:06:07,215 --> 00:06:09,225
This is going to
allow us to loop,

111
00:06:09,225 --> 00:06:12,160
if we want to loop
through all the pixels.

112
00:06:12,580 --> 00:06:16,445
So as we said, we
could do for loop i

113
00:06:16,445 --> 00:06:21,230
in range total pixels.

114
00:06:21,230 --> 00:06:23,690
That's the total
number of pixels.

115
00:06:23,690 --> 00:06:28,265
Notice that pixels are
organized in one singular list.

116
00:06:28,265 --> 00:06:30,260
When we go to the
next course and we

117
00:06:30,260 --> 00:06:32,000
talk about data structures,

118
00:06:32,000 --> 00:06:34,310
we're going to be seeing
many different ways,

119
00:06:34,310 --> 00:06:39,440
maybe even simpler ways
where we could actually

120
00:06:39,440 --> 00:06:42,170
organize data so that we

121
00:06:42,170 --> 00:06:44,915
have x coordinate
columns and rows,

122
00:06:44,915 --> 00:06:46,355
something that would
be more intuitive.

123
00:06:46,355 --> 00:06:50,130
But in this case, all the
pixels are in one list.

124
00:06:53,440 --> 00:06:56,510
First of all, before
we actually do this,

125
00:06:56,510 --> 00:06:57,845
let's just do a
simple operations.

126
00:06:57,845 --> 00:07:00,470
Let's say for all the pixels,

127
00:07:00,470 --> 00:07:07,265
pixel i, this is the way
we access the pixels.

128
00:07:07,265 --> 00:07:08,750
We use the keyword pixels,

129
00:07:08,750 --> 00:07:10,025
and then we square bracket,

130
00:07:10,025 --> 00:07:11,315
we specify the index,

131
00:07:11,315 --> 00:07:13,250
so it could be 0, 1, 2, 3,

132
00:07:13,250 --> 00:07:16,430
4, all the way until the
total number of pixels.

133
00:07:16,430 --> 00:07:19,150
If we would say the pixel,

134
00:07:19,150 --> 00:07:24,050
now it's going to be a
color, let's say red.

135
00:07:26,380 --> 00:07:28,400
That would be a simple way of

136
00:07:28,400 --> 00:07:31,310
just overriding all
the pixels to be red.

137
00:07:31,310 --> 00:07:33,560
Obviously, we don't want
that for the final result.

138
00:07:33,560 --> 00:07:35,720
But for now, just to make
sure that we understand

139
00:07:35,720 --> 00:07:38,675
how we are in fact
updating the pixels.

140
00:07:38,675 --> 00:07:41,360
We do need this final
line update pixels,

141
00:07:41,360 --> 00:07:49,890
where this information
will become executed.

142
00:07:51,040 --> 00:07:56,240
I'm missing up equal
sign there. Let's go.

143
00:07:56,240 --> 00:07:57,770
You can see that all the pixels

144
00:07:57,770 --> 00:08:02,345
now were changed
into the color red,

145
00:08:02,345 --> 00:08:05,915
which is an arbitrary
color that we selected.

146
00:08:05,915 --> 00:08:09,230
That's fine. We actually
have a function.

147
00:08:09,230 --> 00:08:11,120
If you want to just
change one pixel,

148
00:08:11,120 --> 00:08:14,555
you could have done
this without a loop.

149
00:08:14,555 --> 00:08:16,400
You could do it outside
the loop and say,

150
00:08:16,400 --> 00:08:18,470
well, pixel, I don't know, 20.

151
00:08:18,470 --> 00:08:19,760
It's a particular color,

152
00:08:19,760 --> 00:08:21,470
but it's not very effective.

153
00:08:21,470 --> 00:08:22,820
It's a technique
to just really be

154
00:08:22,820 --> 00:08:24,815
changing pixels one at a time.

155
00:08:24,815 --> 00:08:28,130
We're going to be using
a for loop structure.

156
00:08:28,130 --> 00:08:30,470
But let's say that we want to

157
00:08:30,470 --> 00:08:34,870
evaluate the
brightness of a pixel.

158
00:08:34,870 --> 00:08:39,560
We could say that the
value of brightness,

159
00:08:39,810 --> 00:08:47,120
let's just call it the
br value for brightness.

160
00:08:48,660 --> 00:08:52,330
We can use a brightness
function, which is in built.

161
00:08:52,330 --> 00:08:54,910
If you use the reference
in processing,

162
00:08:54,910 --> 00:08:56,950
you can see some of the color

163
00:08:56,950 --> 00:09:00,370
evaluations functions
that we can use,

164
00:09:00,370 --> 00:09:03,830
something like check the
brightness and then we

165
00:09:03,830 --> 00:09:05,510
provide the pixel
because the pixel

166
00:09:05,510 --> 00:09:08,075
ultimately contains
a color data.

167
00:09:08,075 --> 00:09:12,440
This is the pixel
we're evaluating,

168
00:09:12,440 --> 00:09:16,970
pixel i, and we're
going to get a value.

169
00:09:16,970 --> 00:09:19,835
Depending on that value,
now we could say, well,

170
00:09:19,835 --> 00:09:32,550
if the br value

171
00:09:33,250 --> 00:09:37,350
is smaller than 150,

172
00:09:37,570 --> 00:09:44,000
this is a value that should
range between 0-255.

173
00:09:44,000 --> 00:09:46,560
It's a singular value.

174
00:09:46,570 --> 00:09:48,920
If that happens, well,

175
00:09:48,920 --> 00:09:51,480
pixels may become red,

176
00:09:54,190 --> 00:10:05,345
else pixels i will
become Color 255.

177
00:10:05,345 --> 00:10:08,180
We're going to keep the red only

178
00:10:08,180 --> 00:10:11,150
if the value of
brightness is below 150,

179
00:10:11,150 --> 00:10:13,340
and then otherwise it's
going to be white.

180
00:10:13,340 --> 00:10:15,810
Let's see the results.

181
00:10:17,350 --> 00:10:19,730
We have this here. I should

182
00:10:19,730 --> 00:10:21,830
have written 250 as opposed to

183
00:10:21,830 --> 00:10:27,330
150 to get the result.

184
00:10:28,540 --> 00:10:31,700
There we go. You can

185
00:10:31,700 --> 00:10:35,165
see if you want to do
this interactively,

186
00:10:35,165 --> 00:10:38,750
you can certainly do that
interactively as well.

187
00:10:38,750 --> 00:10:40,895
Let's just do a version.

188
00:10:40,895 --> 00:10:44,120
You could do a version in
which the cutoff value,

189
00:10:44,120 --> 00:10:49,670
this value of 150 its map to
the mouse or to any value,

190
00:10:49,670 --> 00:10:54,410
and you would actually
see it update.

191
00:10:54,410 --> 00:10:57,335
But I invite you to
try that on your own.

192
00:10:57,335 --> 00:11:01,910
You would actually have to
move a big part of this code,

193
00:11:01,910 --> 00:11:09,840
mostly all of this code
into the draw function.

194
00:11:09,840 --> 00:11:12,355
Again, it's an interesting
exercise to be

195
00:11:12,355 --> 00:11:15,040
able to detect how

196
00:11:15,040 --> 00:11:17,885
the threshold can actually

197
00:11:17,885 --> 00:11:21,020
start giving you different
results in a particular image.

198
00:11:21,020 --> 00:11:22,655
You can also load

199
00:11:22,655 --> 00:11:25,490
different images and invite
you to try different images,

200
00:11:25,490 --> 00:11:27,620
making sure that you check what

201
00:11:27,620 --> 00:11:29,870
is the width and height of

202
00:11:29,870 --> 00:11:32,540
the image and do matching

203
00:11:32,540 --> 00:11:37,490
the x coordinate and y
coordinates of that accordingly.

204
00:11:37,490 --> 00:11:39,890
One small caveat, I
invite you also to

205
00:11:39,890 --> 00:11:42,410
think of reducing the
size of those images.

206
00:11:42,410 --> 00:11:45,020
If you really start working
with very large images,

207
00:11:45,020 --> 00:11:47,465
like 4,000 pixels or
something like that,

208
00:11:47,465 --> 00:11:49,385
it's going to become very slow.

209
00:11:49,385 --> 00:11:51,695
It should be able to work still.

210
00:11:51,695 --> 00:11:54,950
But if you want to test, first,

211
00:11:54,950 --> 00:11:58,640
I invite you to consider
working with smaller images,

212
00:11:58,640 --> 00:12:00,440
changing the size
of those images

213
00:12:00,440 --> 00:12:01,970
in something like photoshop,

214
00:12:01,970 --> 00:12:04,010
and then bringing them in so

215
00:12:04,010 --> 00:12:06,110
that you have a
controlled canvas.

216
00:12:06,110 --> 00:12:08,150
Be aware of the information

217
00:12:08,150 --> 00:12:10,010
that you're bringing in
because that's going

218
00:12:10,010 --> 00:12:11,810
to be used for the for loop and

219
00:12:11,810 --> 00:12:14,000
the amount of computation that
is going to be performed.

220
00:12:14,000 --> 00:12:16,370
With that in mind, I'm
looking forward to see

221
00:12:16,370 --> 00:12:17,720
the work that you
produce with this.

222
00:12:17,720 --> 00:12:19,830
I'll see you in the next video.