More about Bitmaps    Page 1

If you are unsure of the difference between bitmap and vector graphics, please read this page first.
Bitmap images are similar to photographs in printed media in that they are built from tiny dots; in a newspaper photograph, these dots are called halftones and in a computer graphic the building blocks are pixels. Do bear in mind when we discuss pixels that they are not real things like the phosphors on a TV monitor, merely a convention that makes it easier for humans to work with computer graphics.

If you are going to use bitmaps, you need to know a bit about how they are defined and stored.

Time to Learn Your RGB - Painting by Numbers

Let us consider just one pixel. You can think of a pixel as being a tiny square lamp. It has just two qualities, colour and brightness. Actually, there is often a third quality, transparency; this is discussed on page 4. We will ignore it for the moment.

How does a computer “know” the colour and brightness of our pixel?

Three values are used to represent the appearance of the pixel:

The first value is always R (red), the second is G (green) and the third is B for blue. These can only be whole numbers. No decimals or fractions allowed.
The three numbers can be used to represent every colour and shade visible to the human eye. 

Say that we have a pixel with an RGB value of 0,0,0; that would mean that its red value is 0 (zero) and so too are the pixel's green and blue values.
The colour of the pixel will thus be black and of course it will have no brightness.

If we want the pixel to be 100% white, again the three numbers of the the RGB values will be the same, usually, 255,255,255. This will be both pure white and also the brightest possible value.

So if the darkest colour possible, black, is 0,0,0 and the brightest colour possible is white which is 255,255,255 then it is easy to see that:
The RGB value of a mid grey would be 128,128,128.
Pure red would be 255,0,0.
Pure green would be 0,255,0
Pure blue would be 0,0,255.
Pure yellow would be 255,255,0 (because in additive colour space, which is what we are using, yellow = red+green).
Similarly, every other colour and its shade in the visible spectrum can be represented with permutations of just those three values.

Colour Depth

I said that the value of white would usually be 255,255,255. In fact, this value may actually be more or less, depending on the colour depth being used. When the maximum value is 255 in each colour, the colour depth is known as 24 bits per pixel. (A bit is a computer term and is related to powers of the number 2).

We will now take a look at a 24 bit image.

You must be looking at this on a monitor set to at least 24 bits or 16 million colours to see it properly. This is also called "true color".

Let us suppose that we want to show an image of a pure blue sphere that is lit from above.

sphere in which lighting goes from 0,0,0 to 0,0,255

For the sake of this example, we will also assume that there is no ambient light in the scene - this means that the bottom part of the sphere will lie totally in shadow, so the colour there will be 0,0,0 and the top part will be pure blue, that is 0,0,255.

The point to note is that in the image above, there are no colours being used except for blue. Since that is going from 0 to 255, there are just 256 shades of blue in the image. 256 has been found to be a reasonable number to trick the eye into thinking that the sphere is smoothly shaded and for the jump between each shade to be practically invivible.
On my monitor, I see the sphere as being smoothly graduated from black to blue because my monitor is set to 24 bits per pixel. If the colour depth was set lower, there would be less shades visible and instead of a nice smooth gradation, I would see the jump from one shade to another:

sphere in just 6 shades of blue

When you see separate colours instead of smooth shading, the effect is known as banding.
 

 page 2             "Pixels and Pegbars" contents             home