Basics Of Computer Graphics


| Introduction | The Binary Notation | Color Depth | Screen Resolution |
Computer graphics.
What is it?
Simply put, computer graphics is the image(s) generated by a computer and shown on a display (Monitor, TV etc..)

What am I looking at?
You are looking at an image that is made up of a number of tiny 'dots' or picture elements called 'pixels'. How many colors the image consists of depends on the color depth of your display card. How many pixels the image consists of depends on the screen resolution of your monitor.

How is it done?
The computer has special hardware for creating images. This hardware is commonly known as a graphics card. The graphics card generates an image which is displayed on a screen (monitor, TV or similar). The image is drawn by the monitor (if it's a CRT screen) a certain number of times every second. This is reffered to as 'refresh rate'.
An image also consists of an arbitrary number of picture elements, 'pixels'.

Imagine having a grid of 8 by 8 squares (like a chessboard but all the square are the same color). We will use this grid as a 'screen'.

To identify the different squares you could number the squares from 1 to 8 or from 0 to 7.

To separate the horizontal squares from the vertical squares we call the horizontals 'X' and the verticals 'Y'. So for example, the second sqare (from left to right) in the top row would be at position: X=1 and Y=0.

To avoid writing X & Y every time we want to tell a position we assume that the first number is always X and the second is always Y. i.e. (4, 2) is the same as X=4, Y=2.

Now, let's say you fill the squares at these positions (3,0)(4,0)(2,1)(5,1)(2,2)(5,2)(3,3)(4,3)(2,4)(5,4)(2,5)(5,5)(3,6)(4,6) with white. (That's the same thing as saying that the graphics card send this 'request' to the screen.) What happens?

It looks like the number 8.

Let's scale the image down so that the square become the about the same size as the pixels on your screen.

There you go.. That is basically how a computer creates images.

We could add color...

And this is how it would look like in the correct size...

This might look very much as a photo of a persons face. :)

This is what the image actually looks like when scaled up.

You should now understand the basics of how the computer generates an image on the screen. However, there is a lot more to it than this. We have not mentioned anything about what 'Color Depth' (i.e. 32-bit color) is and how it works. For that information and more, please read the other sections. The 'binary notation' document is necessary to understand to get the most out of the remaining 2 sections.

back to main
Return Home