Welcome to exploring computing.
Today's video is digital images part 2, let's get colorful.
Let's go back to the last lecture where we had a laptop,
and we had a magnifying glass.
And what we're going to do is we're going to somehow crank up
the magnifying ability of that magnifying glass,
to take an even close look at this computer screen.
What will happen when we take an even closer look
at the computer screen, is we will discover
that each of the individual pixels
consists of not a single square which is either on or off,
it actually consists of a number of what
I refer to as subpixels.
Now, the exact geometric configuration
of these subpixels will vary from one computer
to another, mostly on the basis of what
the particular computing technology used is.
For LCD screens, the subpixels will actually be bars,
and there will be a red bar, a green bar, and a blue bar.
If we were to take a close look at an old school cathode-ray
tube or CRT, we would actually see that there are actually
three different circles.
But again, there would be a red circle, a green circle,
and a blue circle.
And you will hear computer scientists often talking
about RGB--
where R stands for red, G stands for green,
and B stands for blue.
So most color on the computer is done using RGB.
We'll take a look at-- a couple of minutes
about how printers work.
And they actually have a different system called CMYK,
we'll take a look at that a little bit later.
For now though, let's again take a look at our red,
green, and blue.
The idea here is that, by mixing the amount of red, green,
and blue we can actually generate different colors.
Let's take a look at a little computer program
I read a couple of years ago.
This particular program is actually
written in Python, which is the programming language that CS105
students will be learning a little bit later
on this quarter although, we won't quite get to the point
where we'll be making graphical user interfaces like this.
So this particular program shows what
happens when you mix red, green, and blue colors together.
Right now, I've got red, green, and blue all set to zero,
so there's no light on at all.
And so what I'm going to do here is,
I'm going to go ahead and crank up the red here,
and you can see I'm slowly getting more and more red,
and I can max it out at 255, which
is the maximum amount of red that the computer can put out.
And let's go ahead turn that down.
You can see I can do the same thing with the green, and then
finally, blue.
And then of course, the interesting thing
is when we go ahead and try and mix them.
So here I've got a little bit of blue, maybe about 30%.
I can go ahead and mix in some green,
you can see I get different shades of green
here depending on how much green intensity I have.
I can start mixing in some red.
And by mixing these different colors,
and changing the intensity of the red, the green,
and the blue, I'm actually able to create
lots of different colors.
And so this is actually how the computer
itself is going to be generating colors.
It's got that red, green, and blue bar,
or as we saw in the CRT it's got those red, green,
and blue circles.
And by increasing the intensity of those individual bars,
it's actually mixing colors.
We don't see the individual colors,
because they're really, really small.
And so what I see is just the lights that
are being combined together.
But in fact, if we to take a microscope here
to the computer screen, we would actually
see the individual bars lighting up at different intensities.
Let's take a look at some actual color examples.
So naturally, red consists of red
turned all the way up, with no green and blue,
although, we can create different shades of red
by either increasing or decreasing the intensity of red
from the maximum amount to some lesser amount,
or by slightly mixing in some green or some blue.
Blue is of course, similar with no red, no green,
in the maximum amount of blue.
And then we can start mixing things.
So if we turn our red subpixel to half the maximum intensity,
turn the green subpixel off, turn the blue subpixel
to half the maximum intensity, we'll get purple.
If we turn the red all the way up, and the blue all
the way up, again leaving the green off,
we're going to actually end up with fuchsia.
Similarly, if we turn the green to half, the blue to half,
turn off the red we hit aqua.
Whereas if we crank up the green in the blue all the way,
again, leaving the red still off we would actually get teal.
We can get more exotic colors as well.
So here are some samples.
These are from the HTML5 specification
which we'll be talking about later this quarter.
You can see here sea green consists of green,
but not green up at maximum intensity.
Only had 39 out of 255.
And then mixing in some red and some blue,
but mostly those are pretty far down.
Remember, this is a scale that goes from zero to 255.
Barely would consist of a lot of red, a fair amount of green,
and still a fair amount of blue, but less than the amount
of green and red.
And tomato, you know that, that's mostly red,
red turned up pretty much the maximum here, but also
mix in some green and some blue.
So these are examples of the different types of colors we
can create using this system.
And in fact, we can create 16.7 million colors
using this particular system.
How did I get to 16.7 million colors.
Well, Let's take a closer look at how
these colors are actually represented
inside the computer.
Here's how the color cardinal red is represented
inside the computer.
We can see that there are 24 bits, or 24 switches used
to represent this particular color.
These 24 bits are broken up into sets of eight,
which you'll recall are referred to as bytes.
So we have one byte set aside for red,
one byte set aside for green, and one byte set aside
for blue.
In this diagram, you can see that I
put the decimal equivalent on here
so that the combination of red switches on the far left,
the combination of red bits on the far left,
is the equivalent of a decimal 140.
The combination of eight bit in the middle
corresponds to the amount of green
which is a decimal 21, and the combination on the right
again, is the same as the switches for the green,
and that again, represents the decimal number 21.
So the computer knows it should set the red to somewhere a bit
over half maximum intensity.
And then it should add in just a little bit of green,
and just a little bit of blue.
Now, because the amount of red is represented by 8-bit,
and you'll recall from our previous lecture,
that in eight bits we can represent two
to the eighth combinations, which is 256.
Well, one of those combinations to represent zero,
representing that no light comes out
of that particular subpixel.
So instead of going from one to 256, we'll go from zero to 255.
So we have red zero to 255, green zero
to 255, and blue zero to 255, which
is what you saw in our last example
when I was sliding around the sliders on a little Python
program.
Now, because I have two to the eighth possible combinations
of red, two to the eighth possible combinations
the green, and two to the eighth possible combinations of blue,
I actually have a total of two to the 24
possible combinations.
And it turns out that if you work out
all the possible combinations with all 24 bits,
I get a bit over 16.7 million.
So we generally say that in 24-bit color
we can represent 16.7 million colors.
Now, this 24-bit color system is one
of the most common color systems used on computers today.
But there's a fancier variant of this, which uses an extra byte.
This is the 32-bit color system.
In the 32-bit color system, we actually
have an additional byte.
And that additional byte is actually
set aside to represent something called alpha.
Alpha represents the opacity or transparency
of a particular object.
And we use this if we're sliding one object on top
of another object when we want to show a little bit
of the object underneath it.
And you can commonly see this technique
used when we're moving windows around an operating system.
Let's take a closer look at how our alpha works.
What I've got here is, I've got a pair of images here.
I have an image underneath, which
is a park near The Louver, and then I've
got an image of the Tower of London.
In the top left hand corner, I have
the park overlaid with the Tower of London,
and I have alpha set to 100%.
With alpha set to 100%, the London Bridge image
is going to be completely opaque-- we will not
be able to see through it.
But as we reduce the opacity, we'll
be able to see increasing amounts of the Paris Park
underneath it.
Here we've got alpha set 192 out of 255 which is 75%.
You can see that the park is starting to bleed through.
If we reduce it even further, here alpha set to 50% or 128
out of 255.
And you can see that we're starting
to see a lot more of the park underneath.
And you can also see that our parts of the Tower of London
which are not on the Paris Park are starting
to look a little bit faded.
And then finally, in our last image here,
I've got alpha set to 25% which is 64 out of 255.
And you can see that we can almost completely see the park
and the image of Tower of London is almost completely faded.
If we crank down alpha even further,
we were to set alpha for example to zero,
we would not be able to see the Tower of London image at all.
Let's take our new-found knowledge
and apply it to something practical.
Say for example, suppose we're interested in buying
a new television, here's a web page
for a new television from Samsung
on the Best Buy website.
So if we take a quick look at this web page, the first thing
that stands out to me is you can buy a brand new HD
television for $329.99, why don't I have one of these?
Seriously, these prices are really low.
Anyway, so let's take a look at the specifications
for this television.
We'll focus on the title line here.
We can see that this is Samsung, that's the manufacturer.
That it's 55 inch, this is the distance
from one corner of the display screen to the opposite corner.
We can see that it's now LED, this
is talking about the display technology used.
This is as opposed to say, for example, a Plasma television,
or an old school cathode-ray tube television.
The NU6,900 series, that's an internal Samsung designation.
So that's not something that's going
to be particularly useful, unless you're
planning to buy specifically a Samsung television.
So this is 2160 p, the 2160 refers to the number
of pixels from top to bottom.
The P actually stands for progressive,
all modern displays are progressive.
In order to understand what progressive is,
we need to take a look at an older technology which
is interlaced signal.
So for example, an old school VCR tape was interlaced.
And the idea here on an interlaced signal
was that, instead of updating every single line
on the television, we would update every other line
on the television.
So let's say, our signal was coming in
and we were able to get information 30 times a second.
What would happen on interlaced signal is,
the first 30th of a second, every odd line
on the television would be updated.
And then the next 30th of a second every even line
would be updated.
And then every odd would be updated,
and every even line would be updated.
And progressive television, every line
is updated all at once.
So this is-- on the one hand, this is a really good thing.
This is actually the big difference
between VCR tapes, which are interlaced
and DVDs which were progressive.
So if you've ever played with those two technologies,
this was a huge improvement.
But it's not particularly interesting to us as someone
that's buying a new television, because all new televisions
are progressive.
Smart is referring to the fact that this can be connected
directly to the Internet, and that there are--
that it has the built-in ability to do things like display
settings, for example, Netflix or Hulu, or Disney+.
4K is referring to the number of pixels
wide, in this case there are 3,840 pixels across from left
to right.
And UHDTV refers to ultra-high-definition
television.
Which again, refers to the fact that this has a lot of pixels
wide and a lot of pixels tall.
So this is-- ultra-high-definition
television is opposed to high definition television which
is 1920 by 1080 pixels.
And so, we can actually fit four HDTV displays
onto this television, because this has four times
as many pixels, if we go ahead and multiply out
the number of pixels from left to right, and top to bottom,
this is 4 times as many as would be found on HD television.
I think this last part here, the HDR
is actually the most interesting.
So HDR refers to high-dynamic-range.
There have been a number of important improvements
in display technology since say, for example,
the DVDs were defined.
One of the differences is that we have
much higher pixels per inch.
So we've just seen that this has many, many pixels tall,
and many pixels across.
And in fact, we have four times as many pixels
as on our HD television.
Another difference though, is that modern televisions
have much better contrast.
So the difference between the darkest darks and the lightest
lights is much, much higher than they used to be.
And we also have higher overall brightness.
Now, in order to take advantage of this contrast
between the darkest darks and the lightest lights,
we need a new system for defining colors.
We've talked previously about how modern computer
technology uses 24-bit colors.
So eight bits for red, eight bits
for green, eight bits for blue.
24 bits overall, leading to a total of 16.7 million colors.
What HDR does is it actually increases the number of bits.
For each individual pixel, it increases
the number of bits for each of the color channels.
There are a number of different competing standards.
There's one standard that uses 10 bits for color channels,
and another one that uses 12 bits for color channels.
I'm going to talk about the 10-bit for color channel
example, because this seems much more prevalent.
So one of these 10-bit color channel standards
is this HDR10.
With HDR10, we're going to set aside 10 bits for red,
10 bits for green, and 10 bits for blue.
And what this is going to do is, instead
of allowing us to set intensities between zero
and 255 for each of these three color channels,
we're going to be able to start intensities between zero
to 1,023 intensity.
So we're able to have many, many more gradations.
And in fact, I mean, if we were to go ahead and do the math,
remember before we had 2 to the 24th,
giving a 16.7 million colors.
Now, we have 2 to the 30th, which
gives us over a billion colors.
So this is just going to give us much more variation of colors,
and much more able to represent an actual image.
So this is actually a pretty neat technology
that should greatly improve your image on your television set.
Previously, I alluded that printers use a different color
technology than displays do.
So let's take a quick look at this.
The main idea here is that, the printed page and paintings
create color a different way than our laptop display does.
Let's take a quick look.
So our laptop, or our computer, or our television
create color using what's referred to as additive color.
The colors generated by these different display technologies
create color and shine them into our eyes.
In contrast, if you think about how a painting or a printed
page works, what we want is we want a bright white light,
and the white light will shine on our printed
page or our painting, and what happens is,
the different inks in that printed page or the paints used
by that painting are going to absorb
parts of that white light.
So the white light contains all the different colors
in the color spectrum.
And some of those colors get absorbed by the printed
page, or the painting.
And what remains gets sent into our eyes,
or gets reflected into our eyes.
And so this is referred to as subtractive color.
So this is a fundamentally different way
of generating color than what we've seen with the displays.
And so, there's actually a different set of primary colors
used for printing technology.
As we previously have seen, the computer screens use RGB--
red, green, and blue as our primary colors,
and it turns out that the printers used CMYK--
so they use cyan, magenta, yellow, and black.
And so if you were to buy a printer cartridge,
you're not going to see that printer cartridges have red,
green, and blue, they actually have cyan, magenta,
yellow, and black.
You don't actually need black.
It is technically possible to create black
mixing a whole bunch of cyan, magenta, and yellow inks.
But it turns out that uses a lot of ink
and sometimes gives you kind of a muddy result.
Another thing to note about RGB versus CMYK
is it turns out that there are colors
that you can generate in one color scheme
that you can't generate in another.
So you really should be make a decision
when you're going to create an image,
whether that image is meant to be used on a computer screen,
or on a printed page.
And so what you can do is you can choose certain colors,
because you know that they're going to work well
in one of the color schemes and not in the other color scheme.
You'll also discover, we're going
to talk later in the quarter about how to design a website
and color schemes for websites.
And one of the ways that you might
choose colors for a website is you're
going to use a color wheel.
It turns out that there's a different color wheel used
by Artist, and the Artist color wheel naturally using
the primary colors for painting, using subtractive color,
whereas the web color wheel is used based
on the additive color of RGB.
OK.
We've been looking at how computer displays work
and how they generate color.
What we're going to look at next is
how programs represent images and manipulate images.
And then we're going to take a look at different formats that
are available to store image information,
and we're going to talk about the different choices you'll
have when using images on the World Wide
Web and the proper formats to be using.