INTRODUCTION TO

COMPUTER GRAPHICS
CHAPTER 01
Introduction
Computer Graphics is the whole field of study related to creation ,storage, presentation and
manipulation of pictures using computers
Input Device

A variety of input device are used to control and interact with the system example
mouse,lightpen,joystick
Processor

Processor is heart of graphic system. It used special type of processor for manipulating
graphics.
Image Input
Image creation
Image rendering
Memory

Graphic system has two types of memory memory required by the application program
and memory required for generating the image
Frame Buffer

It is core element.It is a special memory used to store display image It has a complex
structure which hold the colored pixel along with other information.

Output device

CRT,LCD,LED printer,plotter
Components of Computer Graphics
1.2.1 Representation
Representation deals with how the Picture is internally stored in a computer. A picture can be considered as
made up of a large number of dots and each dot can be given a code or binary representation. Alternatively it
can be considered as made up of a number of line strokes and each such line stroke can be encoded. The type of
encoding used is related to storage efficiency and also effficiency of rendering the pictures to the users on a
display device

1.2.2 Presentation
Presentation of graphics is achieved through a combination of Hardware and Software tools that are used to
display the objects of interest to the users. There are a variety of output devices such as CRTs and Plasma panels
with varying capabilities. The limitations of hardware are overcome by software techniques that are used in the
presentation of pictures. On a two dimensional device, user need to be given the feeling of a three dimensional
picture which is made possible by using a set of algorithms that add the depth.
1.2.3 Interaction
Interaction helps the user in selecting or picking an object of interest with the help of an input device such as
mouse, light pen etc. The feedback to the user action is provided using the output device such as the monitor
and the software system. The interaction is thus achieved through a combination of Hardware and software
tools. All the functionalities required to give a completely satisfying interaction may be missing in an
input/output device. These are handled by incorporating them into the software that handles the input device

1.2.4 Transformations
Transformation of pictures is achieved through a set of algorithms which in turn uses a set of primitive graphics
operations. The major part of computer graphics is the study of these algorithms used for moving, rotating,
scaling, clipping of pictures.
Graphics Basics
A picture can consist of points, lines , text or filled regions. The basic objects that make up a picture are called
output primitives and graphics system should provide software routines to draw these graphic primitives. The
attributes of a graphic primitive are the characteristics that affect the appearance of the primitive and are
usually provided as input to the corresponding software routine.

Pixel/Point –
Points, or pixels are the building blocks of pictures.A computer image is madeup of a number of tiny dots or
picture elements called pixel .
Points can be represented as either pairs (x, y) or triplets (x, y, z) of numbers depending on whether the data is in
two-dimensional or three dimensional space.
The attributes of a point are the color and the size or the thickness.
Lines and Polylines –
✓ Two points represent a line or edge.
✓ A polyline is a connected sequence of straight lines.
✓ Curves can be approximated by a polyline made up of short line segments. The human eye blends short line
segments into a smooth curve.
✓ The important attributes of a polyline are the color, thickness of its edges, the manner in which the edges
are drawn and the manner in which the edges blend at the endpoints.
✓ The edges can be drawn dashed, dotted or straight. The way the adjacent edges join can be specified such
as a) square, b) round, c) beveled, d) mitered etc
Polygons and Filled Regions –
✓ A closed polyline wherein the first and last point are also connected, represents a polygon. Polygons can be
used to represent filled regions.
✓ Fill Area or Filled region is an output primitive filled with some color or pattern.
✓ The attributes of a filled region include the attributes of the enclosing border (polyline) and the color or
pattern of the filling.

Text –
Text can be represented either as collection of points or lines.
The shape of each character can be defined by a polyline or by an arrangement of dots.
The important attributes of text are typeface, color, size, spacing and orientation. A Font is a collection of
printable characters with a given style specified by typeface and size.
Resolution

The maximum number of pixels that can be displayed on the screen without overlap is

called resolution.
It is defined as width by height, or W x H, where W is the number of horizontal pixels and H is the number of

vertical pixels. For example, the resolution of an HDTV is 1920 x 1080

Displaying Image

Picture to be displayed has to be internally represented in some form in memory. There are
two forms of representation

Vector form – Picture is stored in memory as a set of line drawing commands

Raster form – For all the points of the picture to be displayed, memory area stores
intensity values.
Vector Graphics

Making use of sequential commands or mathematical statements or programs which place lines or shapes in
a 2-D or 3-D environment is referred to as Vector Graphics.

A vector graphic is not made up of pixels; instead, it is made up of paths, each with a vector
or mathematical formula that controls its shape and color. If you look closely at a vector
image you will see control points with curves between them, almost like a child’s connect
the dots game. These are the vectors.
Because the vectors are mathematically defined, vector graphics are scalable and can be
blown up to any size without losing any quality or getting any of the fuzzy, pixelated qualities
that you see when you zoom in on raster images. For this reason vector graphics are ideal
for logos and other projects that need to remain sharp at multiple sizes.

File extensions : .SVG, .EPS, .PDF, .AI, .DXF

Raster Image
Raster images use bit maps to store information. This means a large file needs a large bitmap. The larger the
image, the more disk space the image file will take up. Scaling down these images is easy but enlarging a
bitmap makes it pixelated or simply blurred. Hence for images which need to scaled to different sizes, we use
vector graphics.

File extensions: .BMP, .TIF, .GIF, .JPG

✓ A Raster image is stored as a rectangular array with certain number of rows and certain
number of columns and the numerical value represents the intensity value of the
corresponding picture element.
✓ A raster image with only two pixel values is called a bilevel image and is an array of 1's and
0's. A single bit is sufficient to store the two values so it is called 1 bit per pixel image and the
size of the image equals the number of pixels.
✓ Gray-scaled or colored images require more bits. Pixel depth is the number of bits needed to
represent gray levels. A raster image with pixel depth n, can have 2n gray levels. The most
common gray levels are 4, 16 and 256 with 2 bits/pixel, 4 bits/pixel and 8 bits/pixel
representations respectively.
Raster Image
Color
➢ The graphics system most commonly generate color by mixiing amounts of red, green and
blue colors and is known as RGB color model.
➢ Different color models help describe the different perceptions of color characteristics.
CMY,YIQ
➢ Color is a complex subject and is the result of interaction between the physics behind light
emission and the biological system in human eye and brain
Visible Spectrum
Light is a electromagnetic wave hence colors can be described either in terms of frequency f or the wavelength λ
of the wave. Light at the end of the visible spectrum has a wavelength of approximately 700 nanometers ( 1 nm=
10-7 cm) and the wavelength of the light at the other end of the visible spectrum is about 400 nm. A light source
emits all frequencies in the visible range, some frequencies are absorbed and some are reflected by an object. We
perceive an object by what it reflects 400 nm light as violet and 620 nm light as red

Human color perception

The retina of the eye contains two types of receptor cells, cones and rods. The cones are color sensitive cells each
responding to a particular color red, green or blue. The color we see depend on our cone's relative response to red,
green and blue light. Each eye has 6 to 7 million cones. Humans can distinguish about 200 intensities of red, green
and blue. The rods cannot distinguish colors but are sensitive to low levels of light and are responsible for seeing
things in dim light. The rods are in large numbers around 75 to 150 million crowded onto the retina. Human color
perception is three dimensional. Any color C, can be constructed as superimposition of three primary colors Red,
Green and Blue.
Dominant frequency / wavelength

➢ When light contains all the frequencies from visible spectrum with approximately equal

weightage, the light source or object appears white and is said to be achromatic.

➢ When light contains frequencies in uneual amounts the light or the object is chromatic.

➢ The predominant frequency in the reflected light is called dominant frequency or

dominant wavelength or hue or simply the color of the light. If the dominant wavelength is

near the upper end of the visible spectrum then the color is red or reddish while if it is

near the lower end the object appears bluish

Luminance or Intensity.
The total power or the intensity of the light is given by the area under the entire spectrum. Luminance is
proportional to the energy of the light and is intensity per unit area
The RGB color model

The RGB color model is one of the most widely used color representation
method in computer graphics. It use a color coordinate system with three
primary colors:
R(red), G(green), B(blue)
Each primary color can take an intensity value ranging from 0(lowest) to 1(highest). Mixing these three primary
colors at different intensity levels produces a variety of colors. The collection of all the colors obtained by such a
linear combination of red, green and blue forms the cube shaped RGB color space.
Color specification using the RGB model is an additive process. We begin with black and add on the appropriate
primary components to yield a desired color. The concept RGB color model is used in Display monitor. On the
other hand, there is a complementary color model known as CMY color model. The CMY color model use
a subtraction process and this concept is used in the printer.
In CMY model, we begin with white and take away the appropriate primary components to yield a desired color.
Storing Color Information
Store Color values directly in each pixel

✓ The binary value of the color is placed in each pixel in frame buffer
✓ The number of bits used for color code is called color depth
✓ Example for 3 bit - 8 color
✓ 8 bit -256 colors possible
Store color code in LookUp Table

In This method actual color values are not stored in each pixel but in separate table called
lookup table . An index value to the color is stored in pixel .

Advantages
Large buffer are not required
Color choice is more
Programming essentials

A normal user of graphics system sees the object displayed, interacts with it and observes the manipulation to
the object. A graphics programmer should essentially create simple drawings making use of software routines,
handle the interactions and appropriately transform the picture programmatically. A graphics programmer thus
has to study and make use of a large set of software routines

The hardware dependency of graphics is evident even when one creates a simple picture. The first thing is that
the picture is to be displayed on a display device. The size of the screen available to display the picture depends
on the display device and varies from device to device. Every display device has its own set of commands to
drive it and programmer will have to use these commands to initialize the device and then use the set of
routines for different graphics primitives. Such a program will not work properly on another device thus graphics
program will not be portable.
The OpenGL library frees the programmer from such hardware dependency and provides the programmer
with a common set of routines that can be used with variety of systems and devices. OpenGL thus supports
device-independent graphics.

OpenGL is an Application Programming Interface(API). An interface is a collection of

routines that a programmer can call and these routines will work along with the

operating system and hardware devices to produce the necessary graphics. OpenGL is a

collection of functions that allow graphics programmers to specify operations needed to

produce complex 2D and 3D graphics.

Event driven programming
OpenGL uses Event Driven programming. Program responds to various events such as mouse
clicks or keyboard button presses. The system maintains an event queue for a window. The
messages are added to the queue when event occurs. The program deals with these events by
executing a set of callback functions that can handle the events. Procedural programs have the
structure ' do this and then do this' while event driven programs have the structure ' do
nothing till the event occurs and then do what is specified for that event'. The system patiently
waits in a loop for an event to occur. Programmer has to register the call back function of his
choice which should contain the code specific to events of interest. OpenGL provides GLUT
library that handles event management, opening windows, managing menus etc
OpenGL library OpenGL library comprises of four components

● Basic GL – provides basic set of functions

● GLUT – GL utility toolkit- provides functions for opening windows , managing menus and

managing events

● GLU – GL utility library – provides high level functions for advanced graphics

● GLUL – user interface library – provides support for sophisticated menus

A simple graphics program for creating and presenting a picture will include the first three libraries. The following include
statements are essential
#include <GL/gl.h>
#include<GL/glu.h>
#include<GL/glut.h>
Writing Graphics programs using OpenGL
▪ The graphics program structure is given
// include the OpenGL libraries below. It has three main parts.
void myinit(void) ▪ An initialization function that performs all
{ // do all the necessary initializations the initialization.
} ▪ A display function that contains the code
void myDisplay(void) required to display picture according to the
{ // this is the callback function that will contain the requirements of the application.
application specific code ▪ The main function that contains the
} necessary code for creating and displaying
void main(int argc , char ** argv) window, registering the display function as
{ // will contain the standard code using GLUT library a callback function and also a call to the
functions } initialization function.
Basic GL functions
Basic GL library functions start with gl. Most gl functions have several versions depending on the number and
type of arguments
glColor3f( .. ) indicates no of arguments as 3 and data type as float
glVertex2iv(..) indicates no of arguments as 2 , data type as integer and that the arguments will be provided
not individually but in vector form. All commands do not have vector form
void main()
{
initialize things
create a screen window
glutDisplayFunc(myDisplay); // register the redraw function
glutReshapeFunc(myReshape); // register the reshape function
glutMouseFunc(myMouse); // register the mouse action function
glutKeyboardFunc(myKeyboard); // register the keyboard action function perhaps
initialize other things
glutMainLoop(); // enter the unending main loop }
all of the callback functions are defined here
// appropriate #includes go here – see Appendix 1 Opening a Window for
void main(int argc, char** argv) Drawing

{
glutInit(&argc, argv); // initialize the toolkit
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); // set the display mode
glutInitWindowSize(640,480); // set window size
glutInitWindowPosition(100, 150); // set the window position on screen
glutCreateWindow("my first attempt"); // open the screen window
// register the callback functions
glutDisplayFunc(myDisplay);
glutReshapeFunc(myReshape);
glutMouseFunc(myMouse);
glutKeyboardFunc(myKeyboard);
myInit(); // additional initializations as necessary
glutMainLoop(); // go into a perpetual loop }
glutInit(&argc, argv); This function initializes the toolkit. Its arguments are the standard ones for passing
command line information; we will make no use of them here.
• glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); This function specifies how the display should be initialized.
The built-in constants GLUT_SINGLE and GLUT_RGB, which are OR’d together, indicate that a single display buffer
should be allocated and that colors are specified using desired amounts of red, green, and blue. (Later we will
alter these arguments: for example, we will use double buffering for smooth animation.)
• glutInitWindowSize(640,480); This function specifies that the screen window should initially be 640 pixels
wide by 480 pixels high. When the program is running the user can resize this window as desired.
• glutInitWindowPosition(100, 150); This function specifies that the window’s upper left corner should be
positioned on the screen 100 pixels from the left edge and 150 pixels down from the top. When the program is
running the user can move this window wherever desired.
• glutCreateWindow("my first attempt"); This function actually opens and displays the screen window, putting
the title “my first attempt” in the title bar.
 void myinit(void) {
glClearColor(1.0,1.0,1.0,0.0); //set the background color to bright white ,
// last parameter specifies transparency 0.0 indicates no transparency
glColor3f(0.0, 0.0, 0.0);//set the drawing color to black;
glPointSize(4.0);//set the point size to 4 by 4 pixels
glMatrixMode(GL_PROJECTION); //set up the co-ordinate system
glLoadIdentity();
gluOrtho2D(0.0, 640.0, 0.0, 480.0); }

The function glClearColor is a framebuffer function used to set the initial or background
color. All pixels of the frame buffer are set to the same color. It has four parameter all of the
type Glclampf, the values are of type float and clamped to the range [0,1]. The first three
parameters specify the red, green and blue component and the last parameter specifies
alpha value which indicates the transparency.
The function glColor() is used to set the color of the dot.
glColor has 3 or 4 parameters and data type can be of any data type.The three parameters specify red green
and blue component and the fourth parameter specifies the intensity. If the last parameter is not specified ,
the intensity value is set to 1.0 that is full intensity. It is used for setting the current color and can be called any
where to change the current color

glColor3f(1.0, 0.0,0.0); // set the color to red

glColor3f(0.0, 1.0,0.0); // set the color to green
glColor3f(0.0, 0.0,1.0); // set the color to blue
glColor3f(0.0, 0.0,0.0); // set the color to black
glColor3f(0.7, 0.7,0.7); // set the color to bright gray
glColor3f(0.2, 0.2,0.2); // set the color to medium gra

The function glPointSize() with one parameter indicating the size, is then used to set the thickness of the point to be
drawn
 void myDisplay(void)

{ glClear(GL_COLOR_BUFFER_BIT); //clear the entire window to background color

glBegin(GL_POINTS); //specifies a set of points

glVertex2i(40,40); // plot the point with two integer arguments

glEnd(); glFlush(); //the entire data is to be processed and sent for display

glBegin and glEnd are used to delimit the vertices of a primitive operation. The single argument to glBegin
specifies the mode in which the vertices are to be interpreted.
GL_POINTS treats each vertex as a single point
GL_LINES treats each pair of vertices as an independent line segment
GL_LINE_STRIP draws a connected group of line segments
GL_LINE_LOOP draws a connected group from first to last
The other possibilities are - GL_TRIANGLES, GL_TRIANGLE_SRIP, GL_TRIANGLE_FAN,
GL_QUADS, GL_QUAD_STRIP, GL_POLYGON
glEnd() has no arguments.
Thank You…….