1
00:00:04,381 --> 00:00:05,756
Some content in
this video is not

2
00:00:05,756 --> 00:00:06,860
covered under our
Creative Commons license.

3
00:00:06,860 --> 00:00:08,820
See the closing credits
for more information.

4
00:00:12,750 --> 00:00:14,500
SARA JAMES: Hello my
name is Sara James.

5
00:00:14,500 --> 00:00:16,083
I've been working
the past seven years

6
00:00:16,083 --> 00:00:19,510
at MIT Lincoln Laboratory,
doing radar signal processing.

7
00:00:19,510 --> 00:00:21,980
Today, I'm here to tell you
about the image processing

8
00:00:21,980 --> 00:00:23,620
workshop of the girls who build.

9
00:00:23,620 --> 00:00:26,040
So the image processing
section of this workshop

10
00:00:26,040 --> 00:00:28,420
is actually done with a
software called Processing.

11
00:00:28,420 --> 00:00:31,590
Processing is open
source, free, and it's

12
00:00:31,590 --> 00:00:34,760
available at Processing.org
to download, for just

13
00:00:34,760 --> 00:00:37,260
about any sort of operating
system that you can think of.

14
00:00:37,260 --> 00:00:38,718
This software is
actually developed

15
00:00:38,718 --> 00:00:41,150
for people that are not
doing coding, day to day.

16
00:00:41,150 --> 00:00:42,660
During this section
of the workshop

17
00:00:42,660 --> 00:00:44,510
we're trying to
expose participants

18
00:00:44,510 --> 00:00:47,440
to image processing
concepts, within the context

19
00:00:47,440 --> 00:00:49,250
of real world applications.

20
00:00:49,250 --> 00:00:53,060
Furthermore, we're trying to
demystify coding, and show

21
00:00:53,060 --> 00:00:55,700
participants that
they can do this too.

22
00:00:55,700 --> 00:00:57,770
You'll be doing four exercises.

23
00:00:57,770 --> 00:00:59,870
The first being an
Instagram filter.

24
00:00:59,870 --> 00:01:01,360
For the Instagram
filter this will

25
00:01:01,360 --> 00:01:05,680
be adding an overlay where
you can change the RGB values.

26
00:01:05,680 --> 00:01:07,880
Next you'll be
flipping an image.

27
00:01:07,880 --> 00:01:09,890
This will be a flip
that's vertical,

28
00:01:09,890 --> 00:01:11,800
and during this you'll
be actually moving

29
00:01:11,800 --> 00:01:13,660
around the individual pixels.

30
00:01:13,660 --> 00:01:16,600
After this, you will
convert a color image

31
00:01:16,600 --> 00:01:18,750
to a different color scheme.

32
00:01:18,750 --> 00:01:22,720
So you'll take something, and
convert it to one single color.

33
00:01:22,720 --> 00:01:25,970
This involves modifying
the individual color values

34
00:01:25,970 --> 00:01:27,950
for every pixel.

35
00:01:27,950 --> 00:01:30,550
For the last exercise,
which is the vignette,

36
00:01:30,550 --> 00:01:32,640
this is adding a
border to the picture.

37
00:01:32,640 --> 00:01:37,040
The way that this is performed,
is by doing a mask overlay.

38
00:01:37,040 --> 00:01:39,640
Before you just jump into
having the girls doing

39
00:01:39,640 --> 00:01:42,540
the fill in the blank exercises,
it's highly recommended

40
00:01:42,540 --> 00:01:46,880
to go over the four processing
components of any processing

41
00:01:46,880 --> 00:01:48,470
program.

42
00:01:48,470 --> 00:01:51,550
The first is
variable Declaration:

43
00:01:51,550 --> 00:01:53,360
this is where you
initialize something

44
00:01:53,360 --> 00:01:55,860
as being a PImage or
perhaps a Boolean,

45
00:01:55,860 --> 00:01:57,900
depending on the exercise.

46
00:01:57,900 --> 00:01:59,370
Next is the setup.

47
00:01:59,370 --> 00:02:02,340
The setup is where you
generally load in images

48
00:02:02,340 --> 00:02:06,200
and initialize the various
settings for a program.

49
00:02:06,200 --> 00:02:08,672
After that you'll have a Draw.

50
00:02:08,672 --> 00:02:10,880
Draw is where you
actually produce the frame

51
00:02:10,880 --> 00:02:13,030
that you'll see.

52
00:02:13,030 --> 00:02:17,050
Lastly you'll have, in some of
the exercises, Mouseclicked.

53
00:02:17,050 --> 00:02:20,910
And this is to handle
mouse click events.

54
00:02:20,910 --> 00:02:23,060
Before breaking the
girls up into groups,

55
00:02:23,060 --> 00:02:25,640
we had a image
processing lecture,

56
00:02:25,640 --> 00:02:28,010
that was specifically tailored
towards the processing

57
00:02:28,010 --> 00:02:28,990
language.

58
00:02:28,990 --> 00:02:31,830
During this lecture,
various fundamentals

59
00:02:31,830 --> 00:02:33,360
of image processing
were introduced

60
00:02:33,360 --> 00:02:36,370
like color schemes--
for instance RGB

61
00:02:36,370 --> 00:02:40,120
or things like HSBC-- in
discussing brightness.

62
00:02:40,120 --> 00:02:42,800
After the processing lecture,
we broke up the girls

63
00:02:42,800 --> 00:02:46,710
into groups of four, with
one volunteer per group.

64
00:02:46,710 --> 00:02:48,290
When the girls were
broken up, they

65
00:02:48,290 --> 00:02:49,950
were given their exercises.

66
00:02:49,950 --> 00:02:53,430
These exercises were set up as
fill in the blank activities.

67
00:02:53,430 --> 00:02:55,100
The fill in the
blank style was done

68
00:02:55,100 --> 00:02:57,960
to level the playing
field, so that people

69
00:02:57,960 --> 00:03:00,920
with more or less
experience with coding

70
00:03:00,920 --> 00:03:02,080
would feel comfortable.

71
00:03:02,080 --> 00:03:03,980
Time permitting--
and also dependent

72
00:03:03,980 --> 00:03:06,450
on the experience
level of the girls

73
00:03:06,450 --> 00:03:09,430
that you're working with--
there's additional activities

74
00:03:09,430 --> 00:03:12,000
that you can do, within the
context of the four coding

75
00:03:12,000 --> 00:03:15,310
exercises that have
already been defined.

76
00:03:15,310 --> 00:03:18,310
For the first one, for your
build your own Instagram

77
00:03:18,310 --> 00:03:21,720
filter, you can actually
modify the RGB values

78
00:03:21,720 --> 00:03:23,590
to change the overlay.

79
00:03:23,590 --> 00:03:25,924
So this is something that's
relatively easy to do,

80
00:03:25,924 --> 00:03:27,590
and something that
you should definitely

81
00:03:27,590 --> 00:03:29,420
encourage the girls to do.

82
00:03:29,420 --> 00:03:32,670
For the flip an image, you
can actually change the way

83
00:03:32,670 --> 00:03:33,580
that the images flip.

84
00:03:33,580 --> 00:03:36,640
So in the exercises
that we had, the image

85
00:03:36,640 --> 00:03:40,915
is flipped vertically,
but a more difficult thing

86
00:03:40,915 --> 00:03:42,290
that you can ask
the girls to do,

87
00:03:42,290 --> 00:03:44,790
is to flip the
image horizontally.

88
00:03:44,790 --> 00:03:47,800
So within the convert an
image to a single color,

89
00:03:47,800 --> 00:03:50,240
you can actually ask the
girls to manually convert

90
00:03:50,240 --> 00:03:52,040
to grayscale.

91
00:03:52,040 --> 00:03:53,870
For this activity,
this is something

92
00:03:53,870 --> 00:03:58,240
that's introduce the girls to
the way that color is perceived

93
00:03:58,240 --> 00:03:59,290
by humans.

94
00:03:59,290 --> 00:04:03,666
For the add a vignette,
one relatively easy thing

95
00:04:03,666 --> 00:04:05,040
that you can ask
the girls to do,

96
00:04:05,040 --> 00:04:08,420
is vary the size and
color of the vignette.

97
00:04:08,420 --> 00:04:11,270
Lastly, and this is
the most difficult,

98
00:04:11,270 --> 00:04:13,460
you can actually
ask the participants

99
00:04:13,460 --> 00:04:17,240
to combine all elements,
from all of the exercises.

100
00:04:17,240 --> 00:04:19,670
This is something that
is the most complex,

101
00:04:19,670 --> 00:04:22,451
because it involves
potentially changing

102
00:04:22,451 --> 00:04:23,950
the way that the
code was originally

103
00:04:23,950 --> 00:04:25,920
run in the exercises.

104
00:04:25,920 --> 00:04:27,724
So in terms of the
lessons learned,

105
00:04:27,724 --> 00:04:29,390
there are certain
things that we did not

106
00:04:29,390 --> 00:04:32,300
do, during girls who
build, and in hindsight we

107
00:04:32,300 --> 00:04:35,230
would have done, if we
were to do this again.

108
00:04:35,230 --> 00:04:36,950
One of the first
things is actually

109
00:04:36,950 --> 00:04:39,930
introducing the
fundamentals of programming.

110
00:04:39,930 --> 00:04:42,390
Things like introducing
if statements,

111
00:04:42,390 --> 00:04:46,640
while statements, what a
Boolean is, things like that.

112
00:04:46,640 --> 00:04:48,710
When we had done girls
who build, we kind of just

113
00:04:48,710 --> 00:04:52,020
jumped right into the exercises,
after an image processing

114
00:04:52,020 --> 00:04:53,270
lecture.

115
00:04:53,270 --> 00:04:57,470
And that wasn't really enough
preparation for the girls.

116
00:04:57,470 --> 00:05:00,506
The first exercise was very
difficult to get through.

117
00:05:00,506 --> 00:05:02,630
That's another thing that
you could potentially do.

118
00:05:02,630 --> 00:05:05,580
If you have people that are not
really experienced with coding,

119
00:05:05,580 --> 00:05:07,340
feel free to go through
the first exercise

120
00:05:07,340 --> 00:05:10,170
together, and then have the
students do the following three

121
00:05:10,170 --> 00:05:12,320
exercises individually.

122
00:05:12,320 --> 00:05:15,910
Each individual student
had their own laptop,

123
00:05:15,910 --> 00:05:18,700
don't think that this is
something that you need to do.

124
00:05:18,700 --> 00:05:22,420
You may find that having
multiple students with only one

125
00:05:22,420 --> 00:05:25,800
laptop will be sufficient, and
actually might introduce them

126
00:05:25,800 --> 00:05:29,280
to working in a group, and
the type of collaboration that

127
00:05:29,280 --> 00:05:31,110
entails.

128
00:05:31,110 --> 00:05:32,470
Also along those lines.

129
00:05:32,470 --> 00:05:33,950
If everyone has
their own computer,

130
00:05:33,950 --> 00:05:36,160
you might find that
it's very isolating.

131
00:05:36,160 --> 00:05:38,610
One thing that girls
who build did not do,

132
00:05:38,610 --> 00:05:41,120
but it's something that we
may look into in the future,

133
00:05:41,120 --> 00:05:44,190
is using some sort of
collaborative editing software.

134
00:05:44,190 --> 00:05:47,097
An example of this is TitanPad.

135
00:05:47,097 --> 00:05:48,680
Whether you're a
student or a teacher,

136
00:05:48,680 --> 00:05:51,780
you may be asking yourself,
what are the next steps?

137
00:05:51,780 --> 00:05:53,690
The next steps could
possibly be looking

138
00:05:53,690 --> 00:05:55,670
into other coding languages.

139
00:05:55,670 --> 00:05:59,220
Coding languages that you may
want to look into include c++,

140
00:05:59,220 --> 00:06:01,050
Java, or Python.

141
00:06:01,050 --> 00:06:03,290
You'll find that, for
instance, if you wanted

142
00:06:03,290 --> 00:06:05,430
to build an Android
app, there's communities

143
00:06:05,430 --> 00:06:08,110
and resources available
online for free.

144
00:06:08,110 --> 00:06:09,317
That you can access.

145
00:06:09,317 --> 00:06:11,150
Have fun with the image
processing activity!

146
00:06:11,150 --> 00:06:12,816
We'd love to hear
about your experience.

147
00:06:12,816 --> 00:06:17,750
Email:

148
00:06:17,750 --> 00:06:18,950
Girls Who Build.

149
00:06:18,950 --> 00:06:20,200
Girlswhobuild.org