COMP 4560
Computer Graphics for Computer Systems Technology
Some Basic Concepts of Computer Graphics
The "Drawing" Region
In the production of computer graphic images of whatever sort, the region of the video monitor being used
consists of rows of individually controlled pixels (for "picture elements"). The numbers of such pixels on the
screen is called the resolution of the video mode in use. Resolutions of typical desktop systems 800 x 600
(600 rows of 800 pixels each), 1024 x 768 (768 rows of 1024 pixels each) and even higher. Higher
resolutions make finer detail possible, but at the cost of having to generate, store and manipulate the states
of a larger number of pixels. The creation of an image amounts to specifying the state of every pixel in that
image.
Screen/Window Coordinate Systems
The same basic method is used for referencing
pixels on the entire monitor screen or in individual
graphical controls. Individual pixels are
referenced using two-index coordinates, (x, y).
The upper left-hand corner of the drawing region
has the coordinates (0, 0). The x-coordinate
increases to the right and the y-coordinate
increases down the screen. If we use the
symbols w and h to denote the maximum x and y
coordinate, respectively, for the drawing region,
then the pixel at the center of the drawing region
will have coordinates (w/2, h/2).
(0, 0)
x increasing
(w, 0)
(w, h)
(0, h)
Colors
The actual graphical images are achieved by lighting individual pixels in appropriate colors. The simplest
color specification system is the so-called RGB ("Red-Green-Blue") system. Possible colors are specified
by giving an intensity of red, green and blue components each on a scale of 0 (no intensity) to 255
(maximum intensity). Thus, the color (0, 0, 255), for example, would be the brightest blue that the system is
capable of displaying. (0, 0, 0), minimal intensity in all three color components, gives black, and (255, 255,
255) gives the whitest white (equal intensity mixtures of the three components gives a scale of shades of
gray).
Most program development environments will have a few standard predefined color constants that you can
use. Examples are the constants cyan, red, pink, orange, yellow, etc. in the Color class in java.awt; the
constants clgreen, clteal, clyellow, etc. in graphics units of C++ Builder and Delphi; and so on.
Graphics packages distinguish between foreground and background colors, and provide functions or
methods for setting each of these to a particular color. The foreground color is the one used by other
functions or methods for drawing lines, arcs, circles, rectangles, and other basic shapes. So, typically, to,
say, draw a yellow circle on the screen, you would first call a function to set the foreground color to yellow,
then call a function to draw a circle.
y
Getting the Picture Right Side Up and the Right Size
In the "real" world, it is customary to use a coordinate system in which
the x-coordinate increases to the right, and the y-coordinate increases
upwards, as sketched to the right. This orientation of the x-axis is
compatible with the orientation of the x-axis on the computer screen.
However, the y-axis on the computer screen is oriented in the opposite
direction. This means that if you have a shape defined by coordinates
of points in the usual y-upwards type of coordinate system, simply
drawing that shape on the computer screen will result in it appearing
upside down.
David W. Sabo (2000)
Some Basic Concepts of Computer Graphics
x
Page 1 of 3
Also, it the real world objects have widely varying sizes, and one can employ one of many possible systems
of units of measurements, whereas on the computer screen, the basic unit of pixels is unavoidable. Thus,
the coordinates of points used to specify a real-world shape will be rather unlikely to result in the desired
image on the computer screen without some adjustment.
Shortly, we will develop some powerful and elegant methods for transforming images in a variety of ways.
Until then, though, you can use the following formulas to obtain appropriate screen coordinates for a shape
defined by some other "real-world" coordinates.
Suppose we have a real-world shape contained in the rectangle shown in the figure below to the left, and we
wish to reproduce the image contained in that rectangle onto the drawing region sketched below to the right.
y
(0, 0)
xscr increasing
(w, 0)
ymax
ymin
x
xmin
xmax
(w, h)
(0, h)
The scaling operation is not difficult to work out: a range of x values between xmin and xmax in the real world
must be fit into a range of x values between 0 and w on the screen. Thus, horizontal distances from x min in
the real-world must be scaled by a factor of
w
xmax  xmin
Similarly, vertical distances from ymin must be scaled by a factor of
h
y max  y min
No reorientation of the x-coordinates is necessary, but we must ensure that when y = ymin, yscr = h (i.e. the
bottom of the image occurs at the top of the screen, which is yscr = h). The following formulas achieve this:
xscr   x  xmin 
w
xmax  xmin
(1)
y scr
h
 h   y  y min 
y max  y min
where x and y stand for the real-world coordinates of points and xscr and yscr stand for the screen
coordinates of the corresponding points. Notice that
x = xmin
x = xmax
y = ymin
y = ymax
Page 2 of 3




xscr = 0
xscr = w
yscr = h
yscr = 0
Some Basic Concepts of Computer Graphics
David W. Sabo (2000)
as required.
y
Example: The sketch to the right shows an upwards pointing arrow
defined by four points, extending from positions 4 to 8 in the xdirection, and from positions 3 to 11 in the y-direction. Determine the
screen coordinates of the four points so that this arrow shape can be
drawn to fill a window 200 pixels wide and 500 pixels high.
Solution
11
9
3
2
4
1
3
The real-world coordinates of the four points are:
point
1
2
3
4
x
6
4
6
8
x
4 6 8
y
3
9
11
9
We have xmin = 4, xmax = 8, ymin -= 3 and ymax = 11. In addition, w = 200 and h = 500. Substituting all these
values into equations (1) gives
point
1
2
3
4
xscr
100
0
100
200
yscr
500
125
0
125
For, example, for point # 2,
xscr   4  4 
200
8  4
0
y scr  500   9  3 
and
500
11  3 
 125
Plotting these four points on the "screen" gives:
xscr
0
0
100
200
100
4
2
yscr
200
300
400
500
1
You can see that the image has the desired size and orientation.
Once again, when we develop a more general transformation machinery, the operations accomplished by
equations (1) above can be incorporated automatically, and so you will not have to use equations (1) unless
there is some good reason to do so.
David W. Sabo (2000)
Some Basic Concepts of Computer Graphics
Page 3 of 3