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.