Hi, welcome to this new video. In this session, we are
going to start working on this interactive version of
our image pixel selection. We're going to be discussing
a little bit more in detail how we can
actually not only again, do a cut off between two colors, but also how we
could actually start creating ranges and alter our image by selecting
ranges between pixels. Let's look at what we're
going to be doing. We have an input image. Once we evaluate the
brightness value of a pixel as we saw
in the last session, we're going to get a value, a value that goes
between zero and 255 and we could start determining a color palette,
a series of colors. We're going to start
very simply by defining three colors in the gray scale spectrum to start defining
ranges for those. This is a very simple operation. Again, very similar
to what we did with probably noise but
you can imagine doing this with a
much larger range of colors or even including a much more interesting
color palette, which is something that
we're going to learn how to do in the second course. We're going to spend quite a bit of time in
data structures, specifically how to construct
color palettes that we can reuse or we can
save in different ways. But let's see how we
can actually achieve this here in processing. We're going to
continue working with the same file that I
had from last session, just because it's close to what we're going
to be doing here. We're going to be doing a
little bit of the homework of what would we move
into the draw function. This is again, a bit
of a question of if you had to do this version
of interactive sketch, where would you
do the draw call? I think I'm going to do the draw somewhere here, so def draw. Everything here
would now be dynamic because the load pixel
is something that we only need ones. Well, actually, we might need every time that
we redraw that image, so we do want to redraw this image at the
beginning of each frame. We also do need this
load pixels here. But the total pixel calculation
could be done once. Here we go. Now we're
doing this every frame. Let's just expand the range
of what we want to do. Let's create a variable
that is going to define the different cut point. If you wanted to do only
this cut point before, I would have created a
variable called cut, but we're going to
create two cuts now. We're going to say cut high and this could be somewhere like maybe 200. Let me spell that correctly. Cut low, it's going to
be something like 100. We can change these
values later. These are going to be arbitrary values for
our if statement. Where we could actually
start creating a slide, let's create an if statement
here that is elif, so it has more conditions. If the brightness
value is higher, first, if it's higher
than the cut high. We're going to have this color. If the brightness value is
smaller than the cut high and the value is bigger
than the cut low, so between that range, then the pixel is going
to be the second color. We said that maybe the top
color is going to be white, the middle color is
going to be gray, and then the bottom color
else is going to be a zero. Here we have it. There's nothing really interactive
at this point. But let's see what we actually get here if is in fact working. We do have an error or we're not really managed to update
those pixels correctly. Let's just see what
is our mistake here. I think I found small
mistake we had here. Our total pixels as we move them out of the
draw function now, they need to also be
declared as global. Let's just add
img, total pixels, and that would
allow us to access them as in this
function, let's see. There we go. This is what we're actually aiming to achieve. We have two arbitrary segments, basically at, where
are the thresholds? Here, 200, and a 100. If you want more white, you basically reduce
this value to 150. You see we get more white. Let's make sure that we don't draw the image in
the first frame. Let's see if that
would actually make a difference. There we go. That's a little bit more white. But let's say we want
to do it dynamically, so let's create a
variable call cut. We're going to control
only the high cut, and then the lower cut would
be an offset from that one. We're going to map the mouse x coordinate that
goes between zero and the Canvas width. We know that the
mouse always moves between zero and
the Canvas width, and then we're going to
change it to 0, 255. The cut point will
go anywhere 0-255. The cut high, it's going
to be the new cut, so that's going to
be a dynamic value. Then let's say that the
cut low it's going to be cut -50, just give a range of 50 pixels. Again, we could have
another dynamic value for this offset. Let's just do this for now. As we can see if we move from
left to right, the mouse, we can actually start
defining where the cut is, just seeing that
only a little bit of coloration and just
moving that cut out. We can obviously get to
a point where we do not throw it at all and don't
show at all the black color. This is an invitation to go to really play
with these variables. I really like doing
some interactivity. Even if I'm looking for
a final steel image, the interactivity
is allowing me to really visualize those variables to understand what
they're actually doing in the context
of the image, and ultimately calibrate to get to the point of and
achieve what I want. I think we're getting
some interesting range here with this dynamic update. We'll leave it here. We're going to see how
to resample the image in the next video, so
I'll see you then.