Computer Graphics

Lab Handout 1

Computer Graphics (ITEC-613 & SENG-613)

BS(IT) P-IV & BS(SW) P-IV First Semester 2016
Lab Handout: 1
By: Dr. Zeeshan Bhatti

C/C++ Graphics
Turbo C/C++ has a good collection of graphics libraries. If you know the basics of C/C++, you can easily
learn graphics programming. To start programming, let us write a small program that displays a circle on the
screen.
Simple Graphics Program 1:
/* simple.c
*/
#include<graphics.h>
#include<conio.h>
void main()
{
int gd=DETECT, gm;
clrscr();
initgraph(&gd, &gm, "c:\\tc\\bgi " );
circle(200,100,150);
getch();
closegraph();
}
To run this program, you need graphics.h header file, graphics.lib library file and Graphics driver (BGI
file) in the program folder. These files are part of Turbo C package. In all our programs we used 640x480
VGA monitor. So all the programs are according to that specification. For VGA monitor, graphics driver
used is EGAVGA.BGI.
Here, initgraph() function initializes the graphics mode and clears the screen.

initgraph function:
Initializes the graphics system.
Declaration:
initgraph(int far *graphdriver, int far *graphmode, char far *pathtodriver);
Remarks: To start the graphics system, you must first call initgraph.
initgraph initializes the graphics system by loading a graphics driver from disk (or validating a registered
driver) then putting the system into graphics mode.

By: Dr. Zeeshan Bhatti

Page 1 of 7

Computer Graphics

Lab Handout 1

initgraph also resets all graphics settings (color, palette, current position, viewport, etc.) to their defaults,
then resets graphresult to 0.
Arguments:
*graphdriver: Integer that specifies the graphics driver to be used. You can give graphdriver a value using
a constant of the graphics drivers enumeration type.
*graphmode : Integer that specifies the initial graphics mode (unless *graphdriver = DETECT). If
*graphdriver = DETECT, initgraph sets *graphmode to the highest resolution available for the detected
driver. You can give *graphmode a value using a constant of the graphics_modes enumeration type.
pathtodriver : Specifies the directory path where initgraph looks for graphics drivers (*.BGI) first. If
they're not there, initgraph looks in the current directory. If pathtodriver is null, the driver files must be in
the current directory. This is also the path settextstyle searches for the stroked character font files (*.CHR).

closegraph() function:
closegraph() function switches back the screen from graphcs mode to text mode. It clears the screen also. A
graphics program should have a closegraph function at the end of graphics. Otherwise DOS screen will not
go to text mode after running the program. Here, closegraph() is called after getch() since screen should not
clear until user hits a key.
If you have the BGI file in the same folder of your program, you can just leave it as "" only. you need not
mention *graphmode if you give *graphdriver as DETECT.
To get details of different graphics modes and graphics drivers, view appendix.
In graphics mode, all the screen co-ordinates are mentioned in terms of pixels. Number of pixels in the
screen decides resolution of the screen. In the example 1.0, circle is drawn with x-coordinate of the center
200, y-coordinate 100 and radius 150 pixels. All the coordinates are mentioned with respect to top-left
corner of the screen.

Basic Shapes and Colors:

Now let us write a program to draw some basic shapes.
Simple Graphics Program 2:
/*
shapes.c
*/
#include<graphics.h>
#include<conio.h>
void main()
{
int gd=DETECT, gm;
int poly[12]={350,450, 350,410, 430,400, 350,350, 300,430, 350,450 };
initgraph(&gd, &gm, "");
By: Dr. Zeeshan Bhatti

Page 2 of 7

Computer Graphics

Lab Handout 1

circle(100,100,50);
outtextxy(75,170, "Circle");
rectangle(200,50,350,150);
outtextxy(240, 170, "Rectangle");
ellipse(500, 100,0,360, 100,50);
outtextxy(480, 170, "Ellipse");
line(100,250,540,250);
outtextxy(300,260,"Line");
sector(150, 400, 30, 300, 100,50);
outtextxy(120, 460, "Sector");
drawpoly(6, poly);
outtextxy(340, 460, "Polygon");
getch();
closegraph();
}

Figure 1: Here is the screenshot of output.

Here, circle() function takes x, y coordinates of the circle with respect to left top of the screen and radius of
the circle in terms of pixels as arguments. Not that, in graphics, almost all the screen parameters are
measured in terms of pixels.
Function outtextxy() displays a string in graphical mode. You can use different fonts, text sizes,
alignments, colors and directions of the text that we will study later. Parameters passed are x and y
coordinates of the position on the screen where text is to be displayed. There is another function outtext()
that displayes a text in the current position. Current position is the place where last drawing is ended. These
functions are declared as follows:
By: Dr. Zeeshan Bhatti

Page 3 of 7

Computer Graphics

Lab Handout 1

void far outtextxy(int x, int y, char *text);

void far outtext(char *text);
Another basic shape that we come across is a rectangle. To draw a border, use rectangle with the coordinates
of outline, to draw a square use rectangle with same height and width. drawpoly() and fillpoly() are two
functions useful to draw any polygons. To use these functions, store coordinates of the shape in an array and
pass the address of array as an argument to the function. By looking at the output of the previous program,
you can understand what drawpoly is. fillpoly is similar except that it fills in the shape with current fill
color.
Declaration:
void far rectangle(int x1, int y1, int x2, int y2);
void far drawpoly(int numpoints, int far *polypoints);
void far fillpoly(int numpoints, int far *polypoints);
Remarks:
rectangle draws a rectangle in the current line style, thickness, and drawing color.
drawpoly draws a polygon using the current line style and color.
fillpoly draws the outline of a polygon using the current line style and color, then fills the polygon
using the current fill pattern and fill color.
Arguments:
(x1,y1) is the upper left corner of the rectangle, and (x2,y2) is its lower right corner.
numpoints: Specifies number of points
*polypoints: Points to a sequence of (numpoints x 2) integers. Each pair of integers gives the x and y
coordinates of a point on the polygon.
To draw a closed polygon with N points, numpoints should be N+1 and the array polypoints[] should
contain 2(N+1) integers with first 2 integers equal to last 2 integers.

Colors :
Here is some idea about colors. There are 16 colors declared in graphics.h as listed bellow.
BLACK:
BLUE:
GREEN:
CYAN:
RED:

By: Dr. Zeeshan Bhatti

0
1
2
3
4

Page 4 of 7

Computer Graphics

Lab Handout 1

MAGENTA:
5
BROWN:
6
LIGHTGRAY:
7
DARKGRAY:
8
LIGHTBLUE:
9
LIGHTGREEN:
10
LIGHTCYAN:
11
LIGHTRED:
12
LIGHTMAGENTA: 13
YELLOW:
14
WHITE:
15
To use these colors, use functions setcolor(), setbkcolor() and setfillstyle(). setcolor() function sets the
current drawing color. If we use setcolor(RED); and draw any shape, line or text after that, the drawing will
be in red color. You can either use color as defined above or number like setcolor(4);. setbkcolor() sets
background color for drawing. Setfillstyle sets fill pattern and fill colors. After calling setfillstyle, if we use
functions like floodfill, fillpoly, bar etc, shpes will be filled with fill color and pattern set using setfillstyle.
These function declarations are as follows
Declaration:
void far setfillstyle(int pattern, int color);
void far setcolor(int color);
void far setbkcolor(int color);
Remarks:
setfillstyle sets the current fill pattern and fill color.
setcolor sets the current drawing color to color, which can range from 0 to getmaxcolor.
setbkcolor sets the background to the color specified by color.
The parameter pattern in setfillstyle is as follows:
Names
Value
EMPTY_FILL
0
SOLID_FILL
1
LINE_FILL
2
LTSLASH_FILL
3
SLASH_FILL
4
BKSLASH_FILL
5
LTBKSLASH_FILL
6
HATCH_FILL
7
XHATCH_FILL
8
INTERLEAVE_FILL
9
WIDE_DOT_FILL
10
CLOSE_DOT_FILL
11
USER_FILL
12

By: Dr. Zeeshan Bhatti

Means Fill With...

Background color
Solid fill
--///
///, thick lines
\\\, thick lines
\\\
Light hatch
Heavy crosshatch
Interleaving lines
Widely spaced dots
Closely spaced dots
User-defin

Page 5 of 7

Computer Graphics

Lab Handout 1

Here is an example program with colors, pixels, bar,

Simple Graphics Program 3:
/*
random.c
some graphics effects using random numbers.
*/
#include "graphics.h"
#include "conio.h"
#include "stdlib.h"
void main()
{
int gd,gm;
gd=DETECT;
initgraph(&gd, &gm, "");
setcolor(3);
setfillstyle(SOLID_FILL,RED);
bar(50, 50, 590, 430);
setfillstyle(1, 14);
bar(100, 100, 540, 380);
while(!kbhit())
{
putpixel(random(439)+101, random(279)+101,random(16));
setcolor(random(16));
circle(320,240,random(100));
}
getch();
closegraph();
}

Summary List of Graphics Functions

1.

rectangle(x1, y1, x2 , y2);

2.

line(x1, y1, x2 , y2);

3.

bar (x1, y1, x2 , y2);

4.

3dbar(x1, y1, x2 , y2 , depth, topFlag);

5.

circle(x, y, radius);

6.

putpixel(x, y);

7.

ellipse(x, y, start, end, xRadius, yRadius);

8.

arc(x1, y1, x2, y2, radius);

By: Dr. Zeeshan Bhatti

Page 6 of 7

Computer Graphics

9.

outtext(Text);

10.

outtextxy(x, y, Text);

11.

settextstyle(fontStyle, Direction, CharSize); // Direction = 0 or 1

Lab Handout 1

ie: settextstyle(1,0,7);
12.

setfillstyle(pattern, color);

13.

floodfill(x, y, boarderColor);

14.

setbkcolor(colorNo); // Cgange the background color of the dos window

15.

setColor(colorNo); // set the color of the text or objects

16.

setlinestyle(type, pattern, thickness); // type = 1 5, thickness= 1-3

17.

kbhit(); // keyboard hit: any key pressed from the keyboard, like getche();

By: Dr. Zeeshan Bhatti

Page 7 of 7