Grayscale

In this section, I'm gonna talk about how
to make grayscale images and code to

carry out that idea. So the first question
is how do you make a gray color, so to ex,

clear off that, I'm gonna go over here to
the RGB explorer and it turns out in the

RGB scheme, the way to make a gray color,
one that lacks any hue, is for all three

numbers, red, green and blue to be the
same. So I can demonstrate that here, I

can put red and green. Up to be, the I'll
put them all at 190. So you can see that's

kind of, you know fairly bright yellow.
And blue is down here. So watch what

happens as I drag blue up towards being
the same as red and green you can see the

color is kind of drained out of it and
just as blue gets to be exactly the same

you can actually use the arrow keys in
these controls. There once, now that all

three are exactly a 190 what were
left with is just grey. So we can, you

know, I'll do another example. So, so if I
put, I'll put green and blue down here

sort of at the middle so they're both at
99. It's kind of a, I don't know, a dark

turquoise, if I put right at zero. So then
I'll bring red up to be closer and closer.

And then once it is the same as the other
two then, again, I'm left with gray. In

this case it's kind of a, a dark gray. So
the pattern is, if red, green, and blue

values are all equal, they're all the
same, then that's gonna be it, some shade

of gray. And actually, the, our original
cases of pure black and pure white, I'll

make black here. They follow that too,
right. And black it's 0,0,0. They're all the

same, so that's one endpoint of the, of
the, the grayscale spectrum. So I'll go

back here and I'll, we'll say that, you
know, so we can make these arg-, if we put

all, the RGB values to be equal, that'll
make a shade of gray. And we can make dark

gray and light gray and black or white or
whatever. We'll say that those, those

shades of gray. Another way of saying it
is that they lack hue. So they're not

towards red or green or anything like
that. They're just this colorless

brightness. So in this table I just have
some examples. So for example if I had

something that was 50, 50, 50, that's sort
of a dark gray. Or 120, 120, 120, that's

medium gray, or 200, 200, 200 that'd be a
light gray. As I said before the pure

black and pure white cases that we talked
about before, those, those fit th-, this

pattern as well. Alright. So how can I do
something useful with this? So I'm gonna

look at this unusual image here. The, the
liberty-red jpeg. And I'll just run this

code. Right now, there's no code in here,
so we'll just. We'll just see it natural.

So the, the liberty-red image here it's,
it's a picture of the Statue of Liberty.

But all of the data is in the red values
of the pixels. So the red values are, you

know, 37 or 200, or whatever. They're,
they're varying to show this image. The

green and the blue values are just zero
everywhere. There's nothing there. So, I

mean, whatever. It, it looks bad, or it
certainly looks wrong. So I wanna think

about, well, how could I fix that? I'd
like to fix this to look like a, a

grayscale picture of Statue of Liberty, not
this, not this red thing. So, the way to

do this. What I'm, I'm going to use this
the fact that if the green, blue, and red

are all the same, that's going to be
shaded grey. Now in this case, the data is

in. For each pixel is in the red value. So
if I say, pixel.setGreen. And what

I'm gonna do is I'm gonna make the green
value, I'm gonna change it to be the same

as the red value. So I'll do that by
saying, pixel.getRed here. So what

this does. Is with the pixel.getRed
that sort of picks the number out of for,

you know, for each pixel. It picks up the
red value. So it's 27 or 100 or whatever

it is. And then sets it in to be the green
value. Now this is a little unusual.

Usually what we call setGreen we've mixed
it with getGreen and setBlue we've mixed

with getBlue. But this is a valid
combination as well and it happens in this

case it does what I want. So then I'll do
it again for blue. Whoops. So, I will say

pixel dot getRed. And then I'll set that
into blue. I'll neaten this up, now let's

try that. Oh, there we go. So, this is
just an application of this feature of the

RGB space that, when the numbers are
equal, it's grayscale. And so I, I sort

of retrieve the value out of the red, and
I set it over to blue and green. And so

now, it, it sort of fixes the image, so it
looks, It's black and white, but at least

it looks okay. So a related question. Or
maybe a more practical question is, well,

if I've got a color image. Like, here's,
here's our old flowers image. How could I

convert it to gray scale? And, the way I'm
gonna think about that, is, you know, if

we're looking here at these flowers, it's,
like, well. I wanna drain the hue out it.

I just wanna think of each one of these
pixels as being. Dark, or, dark or light.

Just having some amount of brightness, and
obviously, there's, you know, there's many

examples in this, in this image. So
suppose, so the problem is gonna be

looking at a pixel, how dark or light is
it? That's what I wanna [inaudible],

reduce this down to. So suppose I, I
picked three pixels. Out of that image and

I put them in this table and now I want to
think about which one of these pixels is

darkest and lightest. So here's the first
pixel and here's the second pixel and

here's the third pixel. And here, I'll
zoom in on this a little bit. So I'm just

trying to judge light versus dark. Who's
the, what's the lightest, what's the

darkest here? So suppose, if I was just
looking at the red values. I'd see that

this first pixel has a red of 200. And
then that's, that's just much brighter

than the others, right? I mean, high
numbers are bright, 255 is the max. And

zero is black, so. It looks like, oh yeah,
this first pixel. 200, that's clearly the

brightest. But then, if I look over. In
the at the green value. And then it's

like, oh gosh, but this third pixel
actually has a really high value for green

even though it's kinda low for red. So I,
I'm not quite sure how that balances

against the other pixels. But it's hard
because what it, essentially what we see

is that you can't just look at one of red,
green, blue to judge how bright the thing

is, you sorta want to count them all. So,
our solution in this case, which I have in

the, the fourth column here, is to compute
the average for each pixel. So each pixel

has a red, green and blue value. What I'm
gonna do is just compute the average of

those three numbers, and the way to do
that. Is you just add'em up, so I'm just

gonna compute red plus green plus blue for
each pixel, and then just divide by three.

So that'll give us the average value of
the red, green and blue. And that average

value is gonna work as a pretty nice
summary of just how bright the pixel is.

Right, so that the average is zero or ten
or twenty, some low number. We don't know

what hue it is exactly, but we know it's
dark. And at the other end, if the average

is 220 or 240, again we don't know what
the hue is but, but we know it's bright.

So the average is going to work as a kind
of a summary of the pixel, where it drops

out the hue and just gives us one number,
zero to 255, that just captures the

brightness. Now I should say, there's
other ways of doing this but just

computing the average is simple and it's
fine. It wor-, it's gonna work fine for

our purposes. So in this case, I, I had
these three pixels and so here on the

right hand side I just compute the
average. And what we see is, really the

third one is by far the brightest. If you,
you know look at all three of red, green

and blue, and then the middle one is the
darkest and the first one is kind of

medium. Alright. So I can use this. This
idea that I've got the average, and it

sort of makes this nice one number
summary. I can use this to, convert

something to, gray. So let's try this. So
here I've got the, I'll just run this. So

in, inside the loop there's no code here
so, if I just run it now we just see the

image unchanged. So I'd like to do is add
the code here. To change this to grayscale.

So I should say what my strategy is
going to be. So what I'm going to do is in

the loop for each pixel I'm going to
compute this average number; so just get

one number. So it might be 27 or 100 or
whatever for each pixel. And then I'm

gonna take that number, and set it into
the red, green, and blue. So if the

average is 27, I'm gonna make red, green
and blue all be 27. And if the average is

211, then I'm gonna make red, green, and
blue all be 211. So that, that converts

each pixel into the, the grayscale
spectrum we saw before. So first off I

have to, compute, the average here. So I'm
just gonna. As I said, add'em up.

So I'll say pixel.getRed() + pixel.getGreen() +
pixel.getBlue(). And

then I'm going to put those three inside
of this outer set of parentheses just for

the order of operations. So I want to do
the addition and then I'll say slash

three. So I'll divide by three. So this
does the addition in the parentheses. And

having gotten that sum, divide by three.
And I'm just going to store that in a

variable called avg. And this line, it's
gonna turn out to be kind of a stock line

for us. There's, there's many little
techniques or problems we might wanna do

in the future, where we wanna compute the
average, and it, inevitably, the line

would come out like that. Alright, so
what'd I say? So my strategy is, I compute

the average, and then I set red, green,
and blue to all use that. So

I'm gonna say, pixel.setRed. And
then here, I've stored the average. This

is just a variable. So I've stored the
number in there. And then, inside here, so

I can just say avg. I'll just go to that
variable, and get the number back out. And

likewise, I can say, setGreen(avg) and
pixel.setBlue(avg), okay, so let's

try that. Very good. So you can see, this
is it works. So it's gone through all

these pixels, you know, red, green or
whatever. It's reduced it down to this one

average brightness number and then set
that back. So we get this nice sorta gray

scale. So actually. Having tested it on
flowers, I'm gonna go back to...

The poppy image which I think appears in
one of the exercises. So here if I comment

these three lines out and just run it
right now we'll, we'll just see the poppy

image, there it is. So we'll scroll to the
right here a little bit. So you can see

that it's obviously, you know, it's got
this sorta orange California poppy look

and the faded background here. So now I'll
put these lines back. And we can try our

oops, algorithm on that one. There we go,
that works very nicely. So you can see,

obviously the, the orange and the green
it's all been drained out and each pixel

has been reduced to just, just a
brightness. And I like here how the, the

texture on the front of the of the poppy
is still, still kinda visible. So, there

you have it, suitable for framing.
Alright. So a, a question that often comes

up. Looking at this code. Is. That line,
average equals, and then this formula for the

average. Does that need to be inside the
loop? It, it, it, it feels like, perhaps,

it could be just here. Up, up, up after
the, the image equals sign. And the answer is.

No. It can't be up there, it does need to
be inside the loop. And the reason is.

What you could think. That this line sort
of sets up a relationship about average

that, must be true for all time like as if
its just true at all times as the program

runs. And that is not how a computer code
works. A computer code is less

sophisticated than that. What this line
does with equals, is it just evaluates the

right hand side. And assigns it into this
variable on the left hand side when this

line is run. So if we were to put this up
at the top it would just run once and it

would store some number in avg and that
would be it. In this case remember we're

inside of this for-loop here. Let me kinda
highlight the body. And so this code it

running thousands or maybe millions of
times, once for each pixel. And those

pixels each have different red, green, and
blue values. Alright, so this sum. Is

different thousands of times. And so what
we need is to compute this sum anew for

each pixel. Each time we see a new pixel,
we need to redo this math. And so, the way

the equals sign works is it's, it's, it's
just evaluated when the computer runs

across it. And so for that reason, because
each, each one of these pixels is

different, we, we'll, we need to put it,
very often we'll just put it as the first

line inside the for. Just compute
the average. So that's why, that's why

that needs to be there. Alright. So, just
to kinda summarize. So we've learned this

quality that, if the red, green, and blue,
red, green, and blue are all equal, that's

a shade of gray. And we've got this
technique where we could compute the

average. And that just gives us this one
brightness number, basically, from zero to

255. And that's gonna be, I'm using it here
for grayscale. But actually, in the

future, we're gonna use that for some
other stuff. It's just a, a useful thing

to know. And, finally I'll say that this
line, which I was highlighting before,

average equals add the three up and divide
it by three. That's gonna be kind of a

stock line, and so I'm gonna, we're gonna end
up using exactly that line later, and in

fact it should show up in some exercises.