In this section, I wanna talk about how
digital images work in the computer. So,
here I've got an example - an image of some
yellow flowers and what we're gonna see is
that this looks like sort of an organic
rounded whole thing. In the computer, it's
gonna come down to really just a lot of
little numbers. So, how's that work? So
what I wanna do is focus on this upper
left flower here. You'll see there's a
little green area with a little thing in
the middle. So if I zoom in by a factor of
ten on just that square, it looks like
this. So what you see is that the image is
made of these little square things. So
these are called pixels. So each pixel is
square. They're quite small, so, you know,
there's not an exact number for it but
maybe 100 pixels per inch. And each pixel
shows just a single color, so it's just
locked as the square of a single color.
And what's funny is if you, you look at it
here it looks kind of. Very artificial and
hard edged, but because the pixel is so
small when you look at it here in the
original image, you know just, it just
looks right. The eye doesn't, the pixels
are small enough that you don't see those little
hard edges. So this is what an image looks
like when you sort of zoom in and see the
parts. If you want to think about how many
pixels there are in an image, it's just a
question of multiplication. So if I had an
image that was 800 pixels wide by 600
pixels high it's just a question of
multiplying. So I multiply those two, and
that's 480,000 pixels. You may have heard
the term megapixel. Is commonly used for
computers and cameras and things. So, a
megapixel is a million pixels. So, my
800x600 image, 480,000. Well, that's about
half a megapixel, roughly speaking.
So that's not a very big
image, by modern standards. A digital
camera today, even on a phone usually
would produce an image on the order of
five megapixels, ten megapixels, maybe
twenty megapixels. That would be a pretty
big image. All right, so let's see
how, how this thing works. So I've made a.
Just to make it a little more crisp I made
this diagram. So if I have an image I can
think of it really as this grid of pixels.
So each pixel is a square and it's just
showing a single color. Now we're gonna
have an addressing scheme to sort of
identify each pixel as opposed to all the
others. So the way that works is that we have a
set of x numbers along the top here. So
zero is the far left and then it goes up,
goes to the right. And then the y-direction is done in sort of a unique way.
So zero is the very top, the top row, and
then the y numbers read down. And that's
just historically how, how things are
numbered in the computer. So I can just do
some simple examples. So for example, the,
the, the upper left pixel is at (0,0). Or
x=0, y=0, I can say. The
pixel one to its right, so this pixel here
is at x=1, y=0. And a
lot of times if I say the coordinate, the
convention is to just say the x number and
then the y number. So I would say, this is
(1,0). And let's say, this pixel over
here. Well, you can kinda read up. It's at
x=4, y=2. Or I could just say (4,2).
Now, in reality, we're not gonna get into
a lot of detail of messing around with
these x-y numbers to identify specific
pixels. You just need to appreciate that
there is this scheme. So even if we
had ten million pixels, any particular
pixel has some x-y number that addresses
it, versus, all the other pixels. So, the
question is. Well I've got these pixels,
how do I encode what the color is of
any particular pixel? And so to talk about
that, I'm going to make a brief historical
side-trip. So Newton had this famous
experiment in the 1600s, where he had a -
which I reproduced here - a prism which is
just a triangular piece of glass. And here
white sunlight is coming in the left hand
side and the prism splits it. Into the
spectrum of colors here, which I just,
projected onto a white piece of paper. So
what this shows is that white light is not
some indivisible pure thing. Instead, it
can be separated into these pure
constituent colors. And so this is the
same thing that you would see with a
rainbow. So the colors are actually in a
continuous spectrum. But we Newton
identified certain ones. You know gave
them, gave them words. So it goes, this is
the famous sequence where it goes red on
the side here, and then orange, and
yellow, and green. And finally blue,
indigo and violet on the far side here.
So. In the computer. I want to think of
these pure colors as kind of a palette.
And the scheme we're gonna use is to pick
actually red, green and blue out of here.
And use those as sort of to, as
constituents to build up any other color
we might want. So the, or, ultimately, you
could think of it, here we have white
light coming in the left, and we get the
constituents out here. You could think of
it as running it backwards. That if I took
the constituent colors and ran them back
this way, I could get white light out. And
then, physics is not exactly the same, but
this is a little bit suggestive of, of how
we're gonna take the constituents and put
them together in the computer. Also there
is kind of a funny thing about indigo
here. When Newton named these, right in
between blue and violet we've got indigo,
and it seems like. Really? And to go like
that we needed a separate word for that
and couldn't we just call that blue. And
it's funny because that shows sorta what
it's like to live in the 1600s. Newton was
believed in a certain amount of mysticism
things that we think of as not scientific
and, at the time, there were seven known
planets and Newton felt like, well, the
number of colors should sorta match up the
number of planets. And so I think he kinda
forced indigo in there just to make the
numbers add up. All right. So, what I'm
gonna do. Is work on the scheme to encode
a particular color called the RGB color
scheme. RGB stands for red, green, blue.
And the way this works, or the, the
question is, I want a way of encoding.
What each color is, inside of my, my grid
there. And so in the RGB scheme, we're
gonna use pure red, green, and blue
lights, and mixing those in different
combinations, form, be able to form any
kind of color. And rather than try and
talk through this, really, this just demos
very well. So I'm gonna go to this, RGB
explorer page. And this will allow me to
demonstrate how this works. So the way
this works is, I've got this three sliders
on the left here. So there is this one
controls the red light. And we're gonna
number these. So, when the red is all the
way dark. We're gonna call that zero. And
if I turn it all the way up to maximum.
We're gonna call that 255. And if you see
it at the bottom actually, the it always
reads out what the numbers are for the
sliders. So I got a red slider, and a
green slider for making green light and a
blue slider for making blue light. And so
the strategy in the RGB scheme is
that. Essentially you have these, these
three knobs that I can have I can vary the
brightness of red, green and blue light.
And it turns out, you can make any color
by combining just the right proportions of
red, green and blue. So. I'll show some examples.
Well, so obviously if I wanna make red, I
would just turn red up all the way, and
likewise if I wanna make green, I would
just turn green up all the way. If, now if
you turn it all the way you get kind of a
bright version. If I want a darker
green, well, I could start with green and,
and then just sort of turn it down. So
that I get darker green. In this
way. Now really, the left-hand side here,
the zero numbers represents black. So in a
sense what I'm doing is I'm taking green,
I'm like, well I just sorta go closer to
black. And that's, that's dark green. So,
the other end, if I wanna make white, this
is the case where I take red and I turn it
all the way up. And green and blue and
turn them all, all the up, and that's how
I get white. So all the numbers at 255,
that's white. And then turning them all
the way down here, all at zero, that's
black. So let me show just a few
combinations here. I think probably the
most interesting one is, is red plus
green. So, if I turn red up, and I turn
green all the way up, what I get is
yellow. And if I wanted to make maybe a
slightly darker yellow, well I can st,
keep red and green sort of close to each
other, but just turn them both down a
little bit, a little bit towards black,
and I get a darker yellow, or we'll go
this way, we'll get an even darker yellow.
If I want to make orange. What I'm gonna
do is I'm, I think of orange as being
like, well it's kinda like yellow but
instead of red and green being similar,
the red is a little stronger. So I'll have
red and green here and I'll just turn the
red up a little bit. And I'll turn the
green down a bit. And we can get a nice
orange there, that's kind of a. Road cone
color, kind of a nice orange. So this sort
of just gives you the flavor of how you
can, you know, by tweaking things end up
making a lot of fun colors. Let's see,
there was one other attempt I wanted to
do. Oh yeah, I'll make kind of a, a light
green. So I'll, actually, let me show you
how to make a pastel yellow. So here
I've got red and green turned up all the
way so I'm getting this very bright
yellow. And so pastel you think of as
being kind of more diffuse, more sort of
foggy. And so the way to do that is
actually I'm going to add in blue. So I'll
turn the blue up to about 180, 185 here.
And as you can see, well it's still
yellow, but it's kind of pastel, foggy.
And the way to think about that is like
well, if I had all three of these all the
way at max, that was white. And so, by
turning the blue up, I've sort of gone
towards white but instead of just pure
white, by having the red and green a
little bit of the head of the blue, I end
up with this yellow cast. Now the way this
is going to work for this class is, I'm,
I'm not requiring that you have you know,
you can just plug there what the three
numbers are for any particular color. It's
just that you under, you appreciate that
there is this basic scheme to make colors
just by varying red, green, and blue.
Let's see, there is just one other one I
want to show. So we did red, green,
yellow, is important, and we'll do the
other combinations. So blue plus green you
can actually see a kind of turquoise, kind
of makes sense sort of a blue green. And
our last combination will be red plus
blue, so red plus blue you get a kind of a
violet. Kind of makes sense does seem to
be a combination of red and blue. Alright,
so let me go here back to our images. So
we've got this idea that you can take red,
green, and blue light and mix them
together. And so what that means in terms
of the image is that I've got all those
pixels, for every pixel is gonna have
some color. And that color is gonna be
defined by red, green, blue levels. Or, in
terms of numbers, what it means is,
basically, every pixel just has three
numbers. So I could say, well, red is 250,
and green is 10, and, blue is 240. But, I
mean, more likely, we were to say, oh
yeah. That pixel is (250, 10, 40). So, we tend
to always use the order, the red number,
then the green number, then the blue
number. So I can sort of refine my diagram
here. So, here's my grid of pixels. It's
making up the image and we've got the x, y
like we had before and now. Essentially
what, what's going on with each one of
these pixels is that there's each one has
it's own three numbers. So, maybe this one
is (6, 250, 7) right, so 6 is very
low; green 250, very high; blue 7 is
low. Basically green, right? The green
number is very high and this pixel might
be a (241, 252, 23) so. Red and green are
very high, blue is very low. Yeah, it's
basically some shade of yellow. I should
say that when we take digital images in
the real world. Right, when I was playing
with the sliders, well, I tended to have,
you know, either 255 or zero. In the real
world, you always get some inter-,
intermediate number, like 237 or 26.
Whatever, in they're, they're mixed
together to whatever, make whatever that
particular shade is. So this is gonna be
our kinda working definition of an image
for now. So we've got this big grid of
pixels. Every pixel just shows, each pixel
shows one color. And that color is
completely captured by just three numbers.
So kind of stepping back a little bit, we
started with you know, this whole, this
whole image. And I've reduced it. To just
this grid that has a lot of numbers. And
that's actually a very common theme in
computer science. You start off with a
whole image, or a whole sounds, or a whole
encyclopedia or something. Which, as a
human, we think of that as sort of this
organic whole. In the computer, inevitably,
all that data, there's some organizational
scheme where it's structured down to just
a lot of little numbers. That is how, that
is how it's gonna be represented in the
computer. And, if we think of an operation
on the data, so if I wanted to take an
image, and maybe make it a little lighter.
In the computer, we're gonna translate
that into some operation on the numbers.
So, for example, for an image, if I wanted
to make it a little lighter. Like, oh
jeez, we've got all these, red, green,
blue numbers. Maybe what I could do is
just go through and add ten to each one.
And if you think back to the RGB explorer,
I'm gonna shift each one a little bit to
the right, just make it a little big
lighter. Anyway, that's gonna be, a few
sections from now. But the, the general
them that in the computer, [inaudible] a
lot of little numbers, and that's kinda,
that's what the computer domain looks
like. That is, that is certainly something
we'll be seeing a lot of.