1
00:00:05,060 --> 00:00:07,995
Hi, welcome to this new video.

2
00:00:07,995 --> 00:00:11,660
In this session, we are
going to start working on

3
00:00:11,660 --> 00:00:18,280
this interactive version of
our image pixel selection.

4
00:00:18,280 --> 00:00:20,280
We're going to be discussing
a little bit more in

5
00:00:20,280 --> 00:00:23,180
detail how we can
actually not only again,

6
00:00:23,180 --> 00:00:25,860
do a cut off between two colors,

7
00:00:25,860 --> 00:00:27,240
but also how we
could actually start

8
00:00:27,240 --> 00:00:29,205
creating ranges and alter

9
00:00:29,205 --> 00:00:33,605
our image by selecting
ranges between pixels.

10
00:00:33,605 --> 00:00:36,945
Let's look at what we're
going to be doing.

11
00:00:36,945 --> 00:00:39,480
We have an input image.

12
00:00:39,480 --> 00:00:43,280
Once we evaluate the
brightness value

13
00:00:43,280 --> 00:00:45,640
of a pixel as we saw
in the last session,

14
00:00:45,640 --> 00:00:46,820
we're going to get a value,

15
00:00:46,820 --> 00:00:48,250
a value that goes
between zero and

16
00:00:48,250 --> 00:00:50,020
255 and we could start

17
00:00:50,020 --> 00:00:53,180
determining a color palette,
a series of colors.

18
00:00:53,180 --> 00:00:55,020
We're going to start
very simply by

19
00:00:55,020 --> 00:00:56,780
defining three colors in

20
00:00:56,780 --> 00:00:59,770
the gray scale spectrum

21
00:00:59,770 --> 00:01:03,455
to start defining
ranges for those.

22
00:01:03,455 --> 00:01:05,760
This is a very simple operation.

23
00:01:05,760 --> 00:01:07,590
Again, very similar
to what we did with

24
00:01:07,590 --> 00:01:10,170
probably noise but
you can imagine

25
00:01:10,170 --> 00:01:12,610
doing this with a
much larger range of

26
00:01:12,610 --> 00:01:15,110
colors or even including

27
00:01:15,110 --> 00:01:16,890
a much more interesting
color palette,

28
00:01:16,890 --> 00:01:18,630
which is something that
we're going to learn

29
00:01:18,630 --> 00:01:21,570
how to do in the second course.

30
00:01:21,570 --> 00:01:22,870
We're going to spend quite

31
00:01:22,870 --> 00:01:24,150
a bit of time in
data structures,

32
00:01:24,150 --> 00:01:26,690
specifically how to construct
color palettes that we

33
00:01:26,690 --> 00:01:29,710
can reuse or we can
save in different ways.

34
00:01:29,710 --> 00:01:31,710
But let's see how we
can actually achieve

35
00:01:31,710 --> 00:01:34,125
this here in processing.

36
00:01:34,125 --> 00:01:37,690
We're going to
continue working with

37
00:01:37,690 --> 00:01:41,445
the same file that I
had from last session,

38
00:01:41,445 --> 00:01:44,345
just because it's close

39
00:01:44,345 --> 00:01:45,950
to what we're going
to be doing here.

40
00:01:45,950 --> 00:01:48,710
We're going to be doing a
little bit of the homework

41
00:01:48,710 --> 00:01:52,490
of what would we move
into the draw function.

42
00:01:53,210 --> 00:01:56,750
This is again, a bit
of a question of

43
00:01:56,750 --> 00:01:59,930
if you had to do this version
of interactive sketch,

44
00:01:59,930 --> 00:02:01,670
where would you
do the draw call?

45
00:02:01,670 --> 00:02:04,010
I think I'm going to do the draw

46
00:02:04,010 --> 00:02:08,590
somewhere here, so def draw.

47
00:02:10,040 --> 00:02:13,740
Everything here
would now be dynamic

48
00:02:13,740 --> 00:02:15,820
because the load pixel
is something that

49
00:02:15,820 --> 00:02:18,755
we only need ones.

50
00:02:18,755 --> 00:02:20,960
Well, actually, we might

51
00:02:20,960 --> 00:02:24,125
need every time that
we redraw that image,

52
00:02:24,125 --> 00:02:25,760
so we do want to redraw

53
00:02:25,760 --> 00:02:29,640
this image at the
beginning of each frame.

54
00:02:30,580 --> 00:02:37,895
We also do need this
load pixels here.

55
00:02:37,895 --> 00:02:42,540
But the total pixel calculation
could be done once.

56
00:02:44,070 --> 00:02:50,490
Here we go. Now we're
doing this every frame.

57
00:02:51,470 --> 00:02:58,095
Let's just expand the range
of what we want to do.

58
00:02:58,095 --> 00:03:00,500
Let's create a variable
that is going to

59
00:03:00,500 --> 00:03:06,900
define the different cut point.

60
00:03:06,900 --> 00:03:11,020
If you wanted to do only
this cut point before,

61
00:03:11,020 --> 00:03:12,780
I would have created a
variable called cut,

62
00:03:12,780 --> 00:03:14,690
but we're going to
create two cuts now.

63
00:03:14,690 --> 00:03:16,255
We're going to say cut

64
00:03:16,255 --> 00:03:23,740
high and this could

65
00:03:23,740 --> 00:03:27,740
be somewhere like maybe 200.

66
00:03:29,150 --> 00:03:31,275
Let me spell that correctly.

67
00:03:31,275 --> 00:03:37,035
Cut low, it's going to
be something like 100.

68
00:03:37,035 --> 00:03:38,760
We can change these
values later.

69
00:03:38,760 --> 00:03:40,350
These are going to be

70
00:03:40,350 --> 00:03:44,290
arbitrary values for
our if statement.

71
00:03:46,070 --> 00:03:51,000
Where we could actually
start creating a slide,

72
00:03:51,000 --> 00:03:55,155
let's create an if statement
here that is elif,

73
00:03:55,155 --> 00:03:57,460
so it has more conditions.

74
00:03:58,700 --> 00:04:04,770
If the brightness
value is higher,

75
00:04:04,770 --> 00:04:09,820
first, if it's higher
than the cut high.

76
00:04:09,860 --> 00:04:13,170
We're going to have this color.

77
00:04:13,170 --> 00:04:20,910
If the brightness value is
smaller than the cut high

78
00:04:20,910 --> 00:04:30,040
and the value is bigger
than the cut low,

79
00:04:30,040 --> 00:04:33,020
so between that range,

80
00:04:34,370 --> 00:04:41,150
then the pixel is going
to be the second color.

81
00:04:43,460 --> 00:04:47,810
We said that maybe the top
color is going to be white,

82
00:04:47,810 --> 00:04:51,420
the middle color is
going to be gray,

83
00:04:52,010 --> 00:04:58,100
and then the bottom color
else is going to be a zero.

84
00:04:58,260 --> 00:05:01,270
Here we have it. There's nothing

85
00:05:01,270 --> 00:05:04,280
really interactive
at this point.

86
00:05:04,850 --> 00:05:07,330
But let's see what we actually

87
00:05:07,330 --> 00:05:09,955
get here if is in fact working.

88
00:05:09,955 --> 00:05:12,930
We do have an error or we're not

89
00:05:12,930 --> 00:05:20,230
really managed to update
those pixels correctly.

90
00:05:20,230 --> 00:05:24,390
Let's just see what
is our mistake here.

91
00:05:24,390 --> 00:05:28,315
I think I found small
mistake we had here.

92
00:05:28,315 --> 00:05:30,950
Our total pixels as we move

93
00:05:30,950 --> 00:05:34,245
them out of the
draw function now,

94
00:05:34,245 --> 00:05:37,170
they need to also be
declared as global.

95
00:05:37,170 --> 00:05:42,070
Let's just add
img, total pixels,

96
00:05:42,070 --> 00:05:43,490
and that would
allow us to access

97
00:05:43,490 --> 00:05:48,625
them as in this
function, let's see.

98
00:05:48,625 --> 00:05:50,670
There we go. This is what we're

99
00:05:50,670 --> 00:05:53,055
actually aiming to achieve.

100
00:05:53,055 --> 00:05:56,595
We have two arbitrary segments,

101
00:05:56,595 --> 00:06:00,375
basically at, where
are the thresholds?

102
00:06:00,375 --> 00:06:02,700
Here, 200, and a 100.

103
00:06:02,700 --> 00:06:04,490
If you want more white,

104
00:06:04,490 --> 00:06:08,260
you basically reduce
this value to 150.

105
00:06:09,680 --> 00:06:13,090
You see we get more white.

106
00:06:20,390 --> 00:06:22,560
Let's make sure that we don't

107
00:06:22,560 --> 00:06:24,640
draw the image in
the first frame.

108
00:06:24,640 --> 00:06:26,660
Let's see if that
would actually make

109
00:06:26,660 --> 00:06:29,900
a difference. There we go.

110
00:06:31,290 --> 00:06:34,190
That's a little bit more white.

111
00:06:34,190 --> 00:06:38,645
But let's say we want
to do it dynamically,

112
00:06:38,645 --> 00:06:41,960
so let's create a
variable call cut.

113
00:06:42,500 --> 00:06:45,300
We're going to control
only the high cut,

114
00:06:45,300 --> 00:06:50,405
and then the lower cut would
be an offset from that one.

115
00:06:50,405 --> 00:06:53,390
We're going to map the mouse

116
00:06:53,390 --> 00:06:57,105
x coordinate that
goes between zero

117
00:06:57,105 --> 00:07:04,560
and the Canvas width.

118
00:07:04,560 --> 00:07:05,840
We know that the
mouse always moves

119
00:07:05,840 --> 00:07:07,440
between zero and
the Canvas width,

120
00:07:07,440 --> 00:07:12,760
and then we're going to
change it to 0, 255.

121
00:07:13,280 --> 00:07:18,405
The cut point will
go anywhere 0-255.

122
00:07:18,405 --> 00:07:23,760
The cut high, it's going
to be the new cut,

123
00:07:23,760 --> 00:07:28,025
so that's going to
be a dynamic value.

124
00:07:28,025 --> 00:07:32,240
Then let's say that the
cut low it's going to

125
00:07:32,240 --> 00:07:36,710
be cut -50,

126
00:07:36,710 --> 00:07:40,050
just give a range of 50 pixels.

127
00:07:40,050 --> 00:07:43,820
Again, we could have
another dynamic value

128
00:07:43,820 --> 00:07:45,980
for this offset.

129
00:07:46,040 --> 00:07:49,680
Let's just do this for now.

130
00:07:49,680 --> 00:07:57,260
As we can see if we move from
left to right, the mouse,

131
00:07:57,260 --> 00:07:59,600
we can actually start
defining where the cut is,

132
00:07:59,600 --> 00:08:01,130
just seeing that
only a little bit

133
00:08:01,130 --> 00:08:05,725
of coloration and just
moving that cut out.

134
00:08:05,725 --> 00:08:08,750
We can obviously get to
a point where we do not

135
00:08:08,750 --> 00:08:12,220
throw it at all and don't
show at all the black color.

136
00:08:12,770 --> 00:08:15,210
This is an invitation to

137
00:08:15,210 --> 00:08:17,260
go to really play
with these variables.

138
00:08:17,260 --> 00:08:21,280
I really like doing
some interactivity.

139
00:08:21,280 --> 00:08:24,850
Even if I'm looking for
a final steel image,

140
00:08:24,850 --> 00:08:26,530
the interactivity
is allowing me to

141
00:08:26,530 --> 00:08:28,285
really visualize those variables

142
00:08:28,285 --> 00:08:30,310
to understand what
they're actually

143
00:08:30,310 --> 00:08:32,885
doing in the context
of the image,

144
00:08:32,885 --> 00:08:35,770
and ultimately calibrate to get

145
00:08:35,770 --> 00:08:38,560
to the point of and
achieve what I want.

146
00:08:38,560 --> 00:08:41,680
I think we're getting
some interesting range

147
00:08:41,680 --> 00:08:45,570
here with this dynamic update.

148
00:08:45,570 --> 00:08:47,220
We'll leave it here.

149
00:08:47,220 --> 00:08:49,060
We're going to see how
to resample the image

150
00:08:49,060 --> 00:08:51,950
in the next video, so
I'll see you then.