Hi. Welcome to this new video. We're approaching the
end of the course, and now that we are
actually understanding information as they are presented as pixel
collections or pixel rays, as we've seen with
friendly noise. We can actually start diving
a little bit deeper into, what if we load an image? What can we obtain? What kind of data can we
obtain out of an image? This is what we're going
to be doing today. We're going to be
reading pixel data. Let's first understand
how pixels are organized. Once we use the
function load pixels, we are going to
get a collection. This is something we
haven't covered yet, and we're going to cover in
much more depth in Course 2, which is the data
structure called lists. But what we obtain out of a pixel collection is
very similar to a topple. It's a list of pixels that are enumerating how an image
is actually constructing. If we start from the top
left corner of an image, we will start with
pixel 0, 1, 2, 3, up to 12, if we have a
12-pixel resolution image. Obviously, that could
be much larger. But then we will continue down the next row all the
way until we get to the final point in the
bottom of the image. This is all presented in this pixels variable that we can access with the
square brackets, and the n would be the index. The index is the
index of the pixel. Why do we want to do this? If you want to update the pixels or change
the pixels in some way, if we have an image like the one you can
see on the right, we can loop through
all the pixels in the image and
assign the menu color. Just simply assign a menu
color like color white, and you can override that image. Obviously, this doesn't
really make too much sense, but you can in fact change aspects of any pixel by
updating that pixel. Well, that's not
very interesting, but what if we
actually decide to evaluate that pixel based on
something like brightness? The code that you can
see on the left is evaluating the
brightness of a pixel, so we can actually
input a pixel, read its color value and determine what
is its brightness. Then use a very
similar technique of what we used,
the friendly noise, is defined as an arbitrary
threshold point, a value, in this case, of 150 and differentiate between either red or white or whatever
color we decide to do. As you can see, we could
start really doing image manipulation just by understanding how the data of an image is actually
constructed, how we can access
it, and how we can actually read some of that
information like brightness, or hue, or other kind of attributes and do some manipulations
with that information. Let's see how we write
this in processing. The first thing that I would
like to bring attention to, we are working
with our template, but in the folder of where
I've saved this file, I've saved this file
named read_pixel_1, this is an arbitrary
name for this video. But I included this image
called portrait.jpeg. If you go to the associated
example file for this lesson, you will find already
an example of the code, and you'll find the
image that you will require to follow along. Make sure that you
include that image into your Canvas so that you
can follow along with us. The first thing
we're going to do is we're going to mostly
work in the setup here. Let's do global img. We're going to
bring an image with the load image function,
so portrait.jpeg. Here, image. Let's just
display that image in the screen, so img,0,0,500,750. That's going to be the
size of the image. I would like to
make sure that we also start using a canvas size
of the size of the image, so 500 by 750. At this point, let's
see what we get. We can just A, make sure that we're
visualizing the image that we have in the file
in the canvas. We can open the canvas with
the exact size of the image, so just matching the image
size with the canvas size. The first operation, and we've covered this how
to load an image, but we can actually use loadPixels as a function that will give us access
to the pixel array. That information now
would be available to us. Let's calculate the
total number of pixels. Total pixels, it's going to be canvas_width * canvas_height. What we're going to try to
use here is a function. This is going to
allow us to loop, if we want to loop
through all the pixels. So as we said, we
could do for loop i in range total pixels. That's the total
number of pixels. Notice that pixels are
organized in one singular list. When we go to the
next course and we talk about data structures, we're going to be seeing
many different ways, maybe even simpler ways
where we could actually organize data so that we have x coordinate
columns and rows, something that would
be more intuitive. But in this case, all the
pixels are in one list. First of all, before
we actually do this, let's just do a
simple operations. Let's say for all the pixels, pixel i, this is the way
we access the pixels. We use the keyword pixels, and then we square bracket, we specify the index, so it could be 0, 1, 2, 3, 4, all the way until the
total number of pixels. If we would say the pixel, now it's going to be a
color, let's say red. That would be a simple way of just overriding all
the pixels to be red. Obviously, we don't want
that for the final result. But for now, just to make
sure that we understand how we are in fact
updating the pixels. We do need this final
line update pixels, where this information
will become executed. I'm missing up equal
sign there. Let's go. You can see that all the pixels now were changed
into the color red, which is an arbitrary
color that we selected. That's fine. We actually
have a function. If you want to just
change one pixel, you could have done
this without a loop. You could do it outside
the loop and say, well, pixel, I don't know, 20. It's a particular color, but it's not very effective. It's a technique
to just really be changing pixels one at a time. We're going to be using
a for loop structure. But let's say that we want to evaluate the
brightness of a pixel. We could say that the
value of brightness, let's just call it the
br value for brightness. We can use a brightness
function, which is in built. If you use the reference
in processing, you can see some of the color evaluations functions
that we can use, something like check the
brightness and then we provide the pixel
because the pixel ultimately contains
a color data. This is the pixel
we're evaluating, pixel i, and we're
going to get a value. Depending on that value,
now we could say, well, if the br value is smaller than 150, this is a value that should
range between 0-255. It's a singular value. If that happens, well, pixels may become red, else pixels i will
become Color 255. We're going to keep the red only if the value of
brightness is below 150, and then otherwise it's
going to be white. Let's see the results. We have this here. I should have written 250 as opposed to 150 to get the result. There we go. You can see if you want to do
this interactively, you can certainly do that
interactively as well. Let's just do a version. You could do a version in
which the cutoff value, this value of 150 its map to
the mouse or to any value, and you would actually
see it update. But I invite you to
try that on your own. You would actually have to
move a big part of this code, mostly all of this code
into the draw function. Again, it's an interesting
exercise to be able to detect how the threshold can actually start giving you different
results in a particular image. You can also load different images and invite
you to try different images, making sure that you check what is the width and height of the image and do matching the x coordinate and y
coordinates of that accordingly. One small caveat, I
invite you also to think of reducing the
size of those images. If you really start working
with very large images, like 4,000 pixels or
something like that, it's going to become very slow. It should be able to work still. But if you want to test, first, I invite you to consider
working with smaller images, changing the size
of those images in something like photoshop, and then bringing them in so that you have a
controlled canvas. Be aware of the information that you're bringing in
because that's going to be used for the for loop and the amount of computation that
is going to be performed. With that in mind, I'm
looking forward to see the work that you
produce with this. I'll see you in the next video.