In this version of the widget, we've made setting the metadata of the image a bit easier.
For the width and height, you can type the decimal numbers that you want.
Use the sliders, or type the binary as you did before.
It's useful to be able to change these things quickly to see the effect on the image.
Notice when you change the data by typing or using sliders,
the binary data changes and the image canvas reflects the changes.
There's a another piece of metadata here called "Bits per pixel",
which will allow us to make more than purely black and white images as we did before.
To see what it does, let's set "Bits per pixel" to one,
which is what we had for black and white images before,
and let's paste in a familiar black and white image.
In order for an image to have a range of colors,
it seems logical that we will need several or many bits to represent the color of each
pixel.
The "Bits per pixel" setting in the metadata tells the widget how many bits it should use
to calculate the color of a pixel.
You can see if I change the "Bits per pixel" setting, the widget will interpret the bits
differently,
and you'll see some colors start to appear.
Of course, the binary data for this image was written for a black and white image, with
one bit per pixel,
but if we change how that data is interpreted by increasing the bits per pixel that the
widget is expecting to see, the image gets garbled.
Let's start over and try to get the hang of using color in digital images.
I'm going to make a very small image so that we can really look at what's happening with
the pixels.
So I'm going to set the width to four and the height to two.
Now, let's look at how RBG colors work with this tool.
As you know for color images, each pixel is actually a combination of red, green, and
blue light.
If we want to represent this is binary, the least we can do is allocate three bits for
each pixel,
one bit each for the red, green, and blue values.
I can use the slider to set the number of bits per pixel I want to use to render the
image.
So I'm going to set the bits per pixel to three.
So now, with three bits per pixel set, I can control the amount of red, green, and blue
light that goes into each pixel.
As before, if I turn all the lights off, I'll get the color black, and if I turn all the
lights on, I get white.
Since I have one bit of control for each of the red, green, or blue lights, I can turn
them on or off individually.
So if I want a red pixel, I can turn on the red light and turn the green and blue lights
off.
So that's red on, green off, and blue off.
One, zero, zero, and, presto, I get a red pixel.
Now, you keep going and create a green and a blue pixel.
Notice that when we have three bits per pixel,
the first bit controls the red light, the second controls the green light, and the third
controls the blue light: R-G-B.
Now it gets interesting.
What happens if we mix the lights?
Let's see what happens if we turn on the red light and blue light, and leave the green
light off on the same pixel.
Before I type it, make a mental prediction:
What color do you think we'll get if we mix red and blue?
Think about it for a second.
All right, ready?
Here we go.
Red on , green off, blue on.
It made pink!
Is that what you were predicting?
I'm guessing that you thought we might get purple.
Well, this is one of the key differences between mixing light and mixing paint.
It's actually the opposite physical process.
When you mix a lot of paint together, the color gets darker and darker.
When you mix light together, the color gets brighter and brighter.
It can take some getting used to, but you'll get the hang of it.
With only three bits, we know that I can only combine them eight different ways,
so with three bits, only eight colors are possible.
Now you keep going and finish the remaining two colors.