1
00:00:09,790 --> 00:00:10,880
OLIVIA: So I'm Olivia.

2
00:00:10,880 --> 00:00:15,220
I work at Fathom
Information Design.

3
00:00:15,220 --> 00:00:17,360
We're over in Boston.

4
00:00:17,360 --> 00:00:21,100
And we do-- a lot of our
work is in data visualization

5
00:00:21,100 --> 00:00:22,740
and information design.

6
00:00:22,740 --> 00:00:25,110
And we use processing
for that, which is what

7
00:00:25,110 --> 00:00:26,720
we're going to be using today.

8
00:00:26,720 --> 00:00:31,220
So processing is both a
community and development

9
00:00:31,220 --> 00:00:34,844
environment and a
language to kind of make

10
00:00:34,844 --> 00:00:36,260
it as simple as
possible to get up

11
00:00:36,260 --> 00:00:39,150
and running with something
visual on the screen.

12
00:00:39,150 --> 00:00:41,275
So you can use it for making 3D.

13
00:00:41,275 --> 00:00:43,216
You can do what
we're going to do,

14
00:00:43,216 --> 00:00:44,590
image processing,
kind of looking

15
00:00:44,590 --> 00:00:46,750
at the pixel
information of images.

16
00:00:46,750 --> 00:00:50,220
Or kind of pulling in data and
creating things based on that.

17
00:00:53,750 --> 00:00:56,580
So do any of you guys
have an idea of what

18
00:00:56,580 --> 00:00:59,010
you think of when you
hear image processing

19
00:00:59,010 --> 00:01:01,146
or what that might be?

20
00:01:01,146 --> 00:01:01,959
Yeah.

21
00:01:01,959 --> 00:01:02,834
AUDIENCE: [INAUDIBLE]

22
00:01:06,090 --> 00:01:07,030
OLIVIA: Yes.

23
00:01:07,030 --> 00:01:08,730
Yes, so a lot of
it is about kind

24
00:01:08,730 --> 00:01:11,970
of manipulating the
information that you get when

25
00:01:11,970 --> 00:01:13,910
you kind of take a picture.

26
00:01:13,910 --> 00:01:16,200
Usually, it's to enhance
it so whether that

27
00:01:16,200 --> 00:01:19,390
means you're making
it more clear to be

28
00:01:19,390 --> 00:01:20,970
able to kind of
analyze information

29
00:01:20,970 --> 00:01:23,714
in there or in enhancing
it in an aesthetic way

30
00:01:23,714 --> 00:01:25,380
kind of like with
Instagram or Snapchat.

31
00:01:28,370 --> 00:01:31,145
So kind of doing
that through code

32
00:01:31,145 --> 00:01:32,478
is what we're going to do today.

33
00:01:35,270 --> 00:01:38,840
It uses a mix of math and
computer science so a lot of it

34
00:01:38,840 --> 00:01:40,740
is these mathematical
functions that

35
00:01:40,740 --> 00:01:44,580
manipulate the different pieces
of the image information.

36
00:01:44,580 --> 00:01:46,290
And we're going to
use computer science

37
00:01:46,290 --> 00:01:48,710
with processing to kind
of mix it all together

38
00:01:48,710 --> 00:01:51,060
and create our filters.

39
00:01:51,060 --> 00:01:53,210
So there are a lot of
different things you can do.

40
00:01:53,210 --> 00:01:58,070
It can be as simple as kind
of enhancing the contrast.

41
00:01:58,070 --> 00:01:59,800
So in this case, this
is a photo that's

42
00:01:59,800 --> 00:02:01,930
taken underwater on the left.

43
00:02:01,930 --> 00:02:03,790
And you can't
really see anything

44
00:02:03,790 --> 00:02:08,160
so people have gone in and just
enhanced the contrast, which

45
00:02:08,160 --> 00:02:11,550
usually means playing with the
values, the light and the dark

46
00:02:11,550 --> 00:02:14,050
of the image to start to make
out the different shapes.

47
00:02:14,050 --> 00:02:17,506
And then they can use it for
analysis or to put in a book.

48
00:02:20,100 --> 00:02:22,710
Sometimes we take
images-- you guys

49
00:02:22,710 --> 00:02:25,710
were building cameras
earlier using visible light,

50
00:02:25,710 --> 00:02:27,760
x-rays are another
way of taking images,

51
00:02:27,760 --> 00:02:30,125
but you're using x-rays
instead of the visible light,

52
00:02:30,125 --> 00:02:31,330
the wavelengths.

53
00:02:31,330 --> 00:02:33,030
And then, again, kind
of enhancing those

54
00:02:33,030 --> 00:02:37,590
images so that we can find
different medical anomalies.

55
00:02:37,590 --> 00:02:41,200
You can also use x-rays to
look at layers behind paint.

56
00:02:41,200 --> 00:02:45,550
So a lot of times you might
hear a story about they found

57
00:02:45,550 --> 00:02:47,860
that a person was in this
painting and then it got

58
00:02:47,860 --> 00:02:48,970
painted over.

59
00:02:48,970 --> 00:02:51,180
The way they know
that is through taking

60
00:02:51,180 --> 00:02:53,160
these different
images and enhancing

61
00:02:53,160 --> 00:02:56,020
the information in them.

62
00:02:56,020 --> 00:03:00,700
And one that I think is really
cool is a lot of space images

63
00:03:00,700 --> 00:03:05,710
that you see are mixes of image
data from different telescopes.

64
00:03:05,710 --> 00:03:07,110
So this is actually
a combination

65
00:03:07,110 --> 00:03:09,150
from three different telescopes.

66
00:03:09,150 --> 00:03:14,170
I think the blue is
x-ray information,

67
00:03:14,170 --> 00:03:16,850
the gold is information
from Hubble,

68
00:03:16,850 --> 00:03:20,940
and then the red might be a
different x-ray telescope.

69
00:03:20,940 --> 00:03:23,670
So kind of merging all of those
together and coloring them

70
00:03:23,670 --> 00:03:25,580
in a certain way
so that people can

71
00:03:25,580 --> 00:03:30,700
start to get scientific
knowledge from the photos.

72
00:03:30,700 --> 00:03:34,480
And then there's also this
kind of cyclical process

73
00:03:34,480 --> 00:03:37,930
of so now we have cameras that
are really good at recognizing

74
00:03:37,930 --> 00:03:42,300
faces so that our pictures of
our family can be way better.

75
00:03:42,300 --> 00:03:43,850
But the way we were
able to do that

76
00:03:43,850 --> 00:03:46,534
is by looking at pictures
of faces and kind

77
00:03:46,534 --> 00:03:48,200
of teaching the camera
what to look for.

78
00:03:48,200 --> 00:03:51,495
So kind of using images
to enhance later images.

79
00:03:54,340 --> 00:03:56,320
And what we're going
to focus on today

80
00:03:56,320 --> 00:04:01,130
is manipulating the color
information of our photos

81
00:04:01,130 --> 00:04:03,370
for purely aesthetic purposes.

82
00:04:03,370 --> 00:04:07,500
So Instagram uses a set of
filters which really is just

83
00:04:07,500 --> 00:04:10,410
a set of mathematical functions
that are applied to the image

84
00:04:10,410 --> 00:04:11,480
information.

85
00:04:11,480 --> 00:04:13,786
And then spit back out your
image with its new colors.

86
00:04:17,050 --> 00:04:19,600
So in order for us to
be able to do this,

87
00:04:19,600 --> 00:04:22,310
I'm going to talk a little bit
about the different ways you

88
00:04:22,310 --> 00:04:25,440
might access the color
information of your photo.

89
00:04:25,440 --> 00:04:29,077
And kind of how
computers see color.

90
00:04:29,077 --> 00:04:31,660
You might have talked about this
a little bit with the cameras

91
00:04:31,660 --> 00:04:34,940
earlier so it's
a good refresher.

92
00:04:34,940 --> 00:04:37,470
But let's start with
a grayscale image.

93
00:04:37,470 --> 00:04:41,070
So on the left is our
image of the baboon.

94
00:04:41,070 --> 00:04:43,670
And when you have
a grayscale image,

95
00:04:43,670 --> 00:04:46,670
everything is on
a range of black

96
00:04:46,670 --> 00:04:52,130
to white that can be stored as
a number, usually zero to 255.

97
00:04:52,130 --> 00:04:54,450
And then over here,
it's just kind

98
00:04:54,450 --> 00:04:56,870
of plotting what
those values are.

99
00:04:56,870 --> 00:05:01,490
So you start to get a sense
of how image information can

100
00:05:01,490 --> 00:05:04,440
be seen as just sort of a set
of numbers, a set of values.

101
00:05:07,950 --> 00:05:11,170
This is up close at like
one square of your image,

102
00:05:11,170 --> 00:05:13,960
so again, every pixel
in a gray scale image

103
00:05:13,960 --> 00:05:15,265
will have one value.

104
00:05:18,070 --> 00:05:20,950
So it can be from zero for
black and 255 for white.

105
00:05:23,470 --> 00:05:25,470
And then a color
image is usually just

106
00:05:25,470 --> 00:05:28,000
like three layers
of that information.

107
00:05:28,000 --> 00:05:31,910
So if you're looking at
an image in RGB mode,

108
00:05:31,910 --> 00:05:35,530
which is pretty standard for
how digital cameras work,

109
00:05:35,530 --> 00:05:38,300
usually how computers
are thinking about color

110
00:05:38,300 --> 00:05:43,430
information, it's three layers
of those zero to 255 values.

111
00:05:43,430 --> 00:05:46,720
But in this case, it's
like from black to pure red

112
00:05:46,720 --> 00:05:50,250
or black to pure green
and black to pure blue.

113
00:05:50,250 --> 00:05:52,460
And then we kind of
add those all together

114
00:05:52,460 --> 00:05:55,910
with the correct weights, you'll
get your full color image.

115
00:05:55,910 --> 00:05:58,700
So this is one way to start
pulling out the information

116
00:05:58,700 --> 00:05:59,840
and playing with it.

117
00:05:59,840 --> 00:06:02,030
So in processing, you'll
see in the filters

118
00:06:02,030 --> 00:06:06,160
that sometimes people will go
through and for every pixel,

119
00:06:06,160 --> 00:06:08,370
take out what is the
red, what is the green,

120
00:06:08,370 --> 00:06:10,410
and what is the
blue of that pixel.

121
00:06:10,410 --> 00:06:13,169
And then you can just
say OK, add 10 to red

122
00:06:13,169 --> 00:06:14,835
and that will totally
change your image.

123
00:06:18,480 --> 00:06:20,980
So this is just
an example of what

124
00:06:20,980 --> 00:06:26,721
happens when you start playing
with the different RGB values.

125
00:06:26,721 --> 00:06:29,220
And we'll see an example of a
different kind of color scheme

126
00:06:29,220 --> 00:06:31,780
in a second.

127
00:06:31,780 --> 00:06:34,480
So if this is my
original image over here,

128
00:06:34,480 --> 00:06:37,730
I've started bumping up the
blue or taking down the red,

129
00:06:37,730 --> 00:06:40,540
so the whole image
has this color shift.

130
00:06:40,540 --> 00:06:43,080
But it also starts to manipulate
the lights and the dark

131
00:06:43,080 --> 00:06:47,040
because in RGB mode, the
lightness and the darkness

132
00:06:47,040 --> 00:06:50,110
of an image is tied to
the color of the image.

133
00:06:50,110 --> 00:06:54,810
So sometimes you might want
to edit those separately.

134
00:06:54,810 --> 00:06:58,680
And that's where HSB mode
is really helpful, so hue,

135
00:06:58,680 --> 00:07:00,780
saturation, and brightness.

136
00:07:00,780 --> 00:07:04,400
So you can also,
through processing,

137
00:07:04,400 --> 00:07:07,640
take the color
information of your image,

138
00:07:07,640 --> 00:07:11,050
but separate how bright
it is, what color it is,

139
00:07:11,050 --> 00:07:13,260
and how intense that color is.

140
00:07:13,260 --> 00:07:16,130
So in this case, what we're
looking at across here

141
00:07:16,130 --> 00:07:19,530
is where someone has-- if
this is their original image,

142
00:07:19,530 --> 00:07:21,680
they've shifted the hue.

143
00:07:21,680 --> 00:07:24,800
So hue is the color you see.

144
00:07:24,800 --> 00:07:27,200
But they haven't
changed the lightness

145
00:07:27,200 --> 00:07:30,480
or the intensity of the color.

146
00:07:30,480 --> 00:07:35,250
If we think of an apple
as red and this is also--

147
00:07:35,250 --> 00:07:37,780
this is chalk, which
is also technically red

148
00:07:37,780 --> 00:07:39,920
but it looks more
like pink because it

149
00:07:39,920 --> 00:07:41,680
has a lower saturation.

150
00:07:41,680 --> 00:07:44,710
So this is like when you have
a pure red versus something

151
00:07:44,710 --> 00:07:47,320
that's lower saturation.

152
00:07:47,320 --> 00:07:52,470
And then cherries are also red,
but they have a darker value.

153
00:07:52,470 --> 00:07:53,860
So that's the brightness.

154
00:07:53,860 --> 00:07:58,300
So again, pure red versus
something with a lot more black

155
00:07:58,300 --> 00:07:58,900
in it.

156
00:07:58,900 --> 00:08:02,530
So you can also think of this as
like if you were mixing colors

157
00:08:02,530 --> 00:08:06,540
with paint, if it needs a lot
of white to create that color,

158
00:08:06,540 --> 00:08:09,050
then it probably has
a lower saturation.

159
00:08:09,050 --> 00:08:11,090
If you needed a lot of
black to make that color,

160
00:08:11,090 --> 00:08:13,090
then it probably
has a lower value.

161
00:08:13,090 --> 00:08:15,580
So here you can start
to play with your image

162
00:08:15,580 --> 00:08:17,450
and say I want
everything to be darker,

163
00:08:17,450 --> 00:08:19,000
but I want it to
stay the same color.

164
00:08:19,000 --> 00:08:21,560
Or like with the
butterfly, I want

165
00:08:21,560 --> 00:08:25,730
to like-- so like in this
case, the one on the right,

166
00:08:25,730 --> 00:08:28,610
I changed just the color
but I didn't change any

167
00:08:28,610 --> 00:08:31,570
of the saturation or the value.

168
00:08:31,570 --> 00:08:35,155
So you can see how
these are equally bright

169
00:08:35,155 --> 00:08:36,530
and this one in
the middle starts

170
00:08:36,530 --> 00:08:39,970
to get more gray because as
I've manipulated the RGB values,

171
00:08:39,970 --> 00:08:44,370
I've also manipulated
how light it is.

172
00:08:44,370 --> 00:08:47,910
So now we can start to
make filters of our own.

173
00:08:47,910 --> 00:08:51,700
And the filters that we have
kind of set up for you guys

174
00:08:51,700 --> 00:08:55,220
to play through are--
these are some of them.

175
00:08:55,220 --> 00:08:59,270
So there is this one, which
is kind of like posterization.

176
00:08:59,270 --> 00:09:04,409
So a lot of the time if you want
to print something as a poster,

177
00:09:04,409 --> 00:09:06,950
you kind of have to get it as
close as possible to like black

178
00:09:06,950 --> 00:09:08,890
and white as opposed
to like having

179
00:09:08,890 --> 00:09:11,690
all the range of gray values.

180
00:09:11,690 --> 00:09:14,334
So kind of just messing
around and seeing what

181
00:09:14,334 --> 00:09:15,750
happens when you
start to take out

182
00:09:15,750 --> 00:09:17,760
those middle values of gray.

183
00:09:17,760 --> 00:09:20,490
And then, also
manipulating the colors.

184
00:09:20,490 --> 00:09:24,370
This one is not so much playing
with the color information,

185
00:09:24,370 --> 00:09:26,465
but if you have your
image dimensions

186
00:09:26,465 --> 00:09:28,340
and you want to add
something like a vignette

187
00:09:28,340 --> 00:09:31,665
to it, being able to say, here
is where the center of my image

188
00:09:31,665 --> 00:09:36,080
is and then how, based on that,
you can add a color on top.

189
00:09:36,080 --> 00:09:40,250
And so adding this ring on top.

190
00:09:40,250 --> 00:09:43,710
This one, it allows as you
click around the image,

191
00:09:43,710 --> 00:09:47,706
it'll pick one color so this
is using like hue saturation

192
00:09:47,706 --> 00:09:48,330
and brightness.

193
00:09:48,330 --> 00:09:51,970
So it'll pick the hue and then
light up all the other pixels

194
00:09:51,970 --> 00:09:55,340
with that hue and get rid of
the hue in all the other ones.

195
00:09:55,340 --> 00:09:57,950
So kind of seeing how many
colors there are in an image

196
00:09:57,950 --> 00:10:02,300
or being able to highlight
just the red pieces.

197
00:10:02,300 --> 00:10:05,080
And then the last one is-- so
I don't know how many of you

198
00:10:05,080 --> 00:10:07,300
guys have ever played
around with Photoshop,

199
00:10:07,300 --> 00:10:09,870
but they have this thing
called blend modes, which

200
00:10:09,870 --> 00:10:14,250
is what a lot that people use to
apply different colors on top.

201
00:10:14,250 --> 00:10:16,420
And so that just says
if you put a color

202
00:10:16,420 --> 00:10:20,120
on top, what's
the math that it's

203
00:10:20,120 --> 00:10:23,530
taking with that color on top
and the image on the bottom.

204
00:10:23,530 --> 00:10:26,020
And how it adds them together.

205
00:10:26,020 --> 00:10:29,480
So this is trying to imitate
the overlay mode, which

206
00:10:29,480 --> 00:10:32,420
just kind of taking
part of one color

207
00:10:32,420 --> 00:10:36,880
and part of the other and then
spitting back out a new color.

208
00:10:36,880 --> 00:10:41,162
So those are the different
filters we have today.

209
00:10:41,162 --> 00:10:43,120
SPEAKER: Let's give Olivia
a round of applause.

210
00:10:43,120 --> 00:10:46,170
[APPLAUSE]