Introduction to Digital Images

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.