Computer Graphics

Computer graphics.  Image treatment

The term computer graphics may be defined as images  created by computer software. Today,  all commercial computers use  graphics. A few seconds after you turn on your computer the screan  shows icons  ( small graphics ).

There are two types of graphic software depending on how the image is computerized. They are  bitmap and Vector graphics.

Bitmap

A bitmap is a type of image file format used to store digital information ( images ). It can be defined as a map of bits ( an array of coloured dots ).

The smallest piece of information in an image is called a ” pixel “. “The pixel is like the atom of a body” . They look like dots or rectangles. Each pixel has its own colour, defined, normally, by three bytes ( 1 byte = 8 bits); a byte for red, a byte for blue and a byte for green ( in a rgb system).

Let’s see a example of a bit image. On the left, we take three pixels with different values in bytes.
The yellow one has a red value of 93% and a green value of 91%. So, if a bit can only be 0 and 1 and a byte has a logic structure of 0 and 1:

Red byte =11101101

Green byte = 11101000

Blue byte = 00000000

What do you think would be the colour byte for a black pixel?

Image Quality

Two important concepts are the quality of a image and of course, its size. That is Colour depth and Pixel resolution

Colour depth

This describes the number of bits used to characterize the colour of  a pixel unit in a bitmapped image. We may talk of  bits per pixel ( bpp)  for the number of bits in a pixel. The higher the bpp, the better the  range of different colours.

Examples:

1. a) 1-bit colour  = 2 colours.  So white and black colour — a old monochrome picture.
   b) 3-bit colour (2³ = 8 colours). Images with only 8 colours, like in  early home computers.
   c) 8 bits 8-bit colour (28 = 256 colours) Super VGA, etc.
   12-bit colour (212 = 4096 colours) high definition image

Examples of images with colour depth

1º A shark drawn with two colours, white and blue, so 2 colour == 1 bit colour

8 bit colour image. In this case, we have just one colour but with a wide rage in terms of tonality. Every pixel is different and it is possible to find up to  256 different colours.

 
Next, there are two images of the same object. The first one, on the left, a 8 bit colour and the second one, a 24 bit colour

 Pixel resolution

Pixel resolution is the number of pixels per area. In general, an image  X pixels high by Y pixels wide has a resolution  of X x Y pixel. Other conventions include describing pixels per area unit, such as pixels per inch.

The next image shows how different number of pixels per area or density resolution affects the image.

In digital cameras it’s usual to talk about Resolution in Megapixels. The resolution, in this case, is given by  electronic components called  CCD which transform light signals into electrical signals or 0 and 1. For example, A CCD with 2000 pixels in width and 1500 pixels in height has a total of 2000×1500 = 3,500,000 pixels or 3.5 megapixels. This is considered very important in mobile phones and their teenager owners love to flash their lastest mobile around

Vector graphics

If you want to draw a line of 10 metrer in a bitmap you need 1000 pixels per meter times 10, so 10.000 pixels ( for  low resolutions ). So you need a lot of information ( bytes ) just to do the same thing over and over again, pixel after pixel.

In a vector graphics program we give the starting point and the end point and the program does the rest.

But it has another advantage. If we zoom a bitmap image, we can see the pixels and we have a bad image. In Vector graphics, zooming an image does not involve a bad image because the image is created by a

¡¡¡¡ mathematical formula!!!!!!

On the left, there is  a bottle image made with a vector graphics program. Notice the different between bitmap and vector graphics.

So, Vector graphics is the use of  points, lines, curves, and  polygons, which are  based upon mathematical equations, to symbolize images in  graphics programs.
A good free software for vector graphics is inkscape.

Image file formats

Digital images can be stored in many formats, each one has its own properties such as compression, visibility  by browsers, type of program which generates that format, etc. The following table show the main file formats in image treatment

The GIF format supports animation. It also uses a lossless compression that is more effective when large areas have a single colour.

Dictionary:

Outermost : at the greatest distance from the centre

Wander: move about without any destination

Collide: Crash together with violent impact; eg. “Two meteors collide