G. H.

RAISONI INSTITUTE OF INFORMATION TECHNOLOGY, NAGPUR

MCA DEPARTMENT

LAB MANUAL

COMPUTER GRAPHICS MCA II SEMESTER II

FACULTY Mr. DILEEP SADHANKAR

CONTENTS 1. Course Introduction 2. Fundamentals Of Computer Graphics 2.1 Objectives 2.2 Introduction 2.3 Display Technology 2.4 Pixel Concept 2.5 Resolution 2.6 Colour Models 2.7 Graphics Primitives 3. Programming graphics applications in Turbo C++ 3.1 Objectives 3.2 Introduction 3.3 Useful Graphic Functions. 3.3.1 initgraph 3.3.2 closegraph 3.3.3 setcolor 3.3.4 cleardevice 3.3.5 delay 3.3.6 moveto 3.3.7 lineto 3.3.8 line 3.3.9 circle 3.3.10 getmaxx 3.3.11 getmaxy 3.3.12 putpixel 3.3.13 setlinestyle 3.3.14 outtextxy 3.4 Steps to use graphics (in Turbo C++ ) 3.5 Programming in Graphics 4. Lab Assignments 5. Practical Programs List 6. References and further reading

Course Introduction

The proverb A Picture is worth a thousand words tells us how a image/picture may be useful to represent information. Computer Graphics provides one of the most natural means for communicating & representing useful information. Graphics is used for education, training, & entertainment applications development. In the Lab sessions, we will have implementation of graphics primitives ,Line clipping algorithm, Transformation, curve generation algorithm using C++ Language, Language that you have learnt in Semesters I.

2. Fundamentals of Computer Graphics

2.1

Objectives The objective is to give students a good understanding of basic concepts of computer graphics .

2.2

Introduction Computer graphics cover various areas of knowledge, including the representation of graphic elements (text, image or video), as well as their transformations (rotation, translation) by means of algorithms.

2.3

Display Technology The image is shown on a screen (also called a monitor), which is an output peripheral device that allows a visual representation to be offered. The processor does not directly send information to the monitor, but processes the information coming from its Random access memory (RAM), then sends it to a graphics card that converts the information into electrical impulses, which it then sends to the monitor. Computer monitors are usually cathode tubes, i.e. a tube made out of glass in which an electron gun emits electrons which are then directed by a magnetic field towards a screen on which small phosphorescent elements are laid out, constituting points (pixels) that emit light when the electrons hit them

2.4

Pixel Concept The word pixel is an abbreviation of PICture ELement The pixel is thus the smallest component of a digital image. An image consists of a set of (points) pixels If system has VGA or better then screen has 640 pixels across and 480 pixels down. 640 X 480 = 307,200 pixels. The upper left corner is position (0, 0).The lower right corner is position (639, 479) & the computer starts counting with zero.
(0,0) (639,0)

(0,479)

(639,479)

The Graphics Screen Dimensions The direction of the X-axis is from left to right The direction of the Y-axis is from top to bottom

2.5

Resolution A Two dimensional term that measures the number of scan-lines and the number of pixels on each line (maximum number of points that can be displayed without overlap on a CRT)

2.6

Colour Models Color models mathematically describe how colors may be represented. There are several established color models used in computer graphics.

Color Model RGB (Red,Green,Blue)

Decription

Additive color model. For computer displays. Uses light to display color. Colors result from transmitted light. Red+Green+Blue=White.

CMYK (CyanMagenta-YellowblacK)

Subtractive color model For printed material Uses ink to display color Colors result from reflected light Cyan+Magenta+Yellow=Black

LAB

Lab is not device-dependent. In this threedimensional model, the L stands for the lightness of the color, with 0 producing black and 100 producing a diffuse white. The a is the redness vs. greenness, while the b is the yellowness vs. blueness.

Color Models

Description

HSV(hue, saturation, and value)

HSV depicts three-dimensional color. Consider HSV as a wheel of cheese, the center axis goes from white at the top to black at the bottom, with other neutral colors in between. The angle from the axis depicts the hue, the distance from the axis depicts saturation, and the distance along the axis depicts value.

HSL(hue, saturation, and lightness)

The HSL color model has distinct advantages over the HSV model, in that the saturation and lightness components span the entire range of values. In the bicone or diamond of the HSL structure, all the visible colors can be seen. The hue is comprised of the second and third dimensions (corresponding to round slices through the diamond).

NCS

NCS colors have three values: darkness, saturation, and hue. The hue is defined as a percentage between two of the following colors: red, yellow, green, and blue. The NCS color system is expressed as the percentage of darkness, the percentage of saturation, and the percentages of two of the opponent colors.

2.7

Graphics Primitives Graphics Primitives are the basic elements that are used to represent graphics. (1) Point : Specified by ordered pair (x,y) in plane. (2) Line: Cannot measure how long it is. (3) Line Segment: Length can be measured& has two end points. (4) Vectors: Quantity that has Size/Magnitude & Direction.No Fixed Position in Space. (5) Rectangle,Polygon,Triangle (6) Circle,conic sections,Curved Surface

3. Development of Graphics Applications 3.1. Objectives The objective is to Learn the hardware involved in building graphic applications. Learn algorithmic development of graphic primitives like: line, circle, ellipse, polygon etc. Learn the representation and transformation of graphical primitives. 3.2. Introduction Using C++ language it is possible to design the graphics based programs. The graphics functions are defined in graphics.h file 3.3. Useful Graphic Functions. 3.3.1. initgraph: Syntax : void initgraph(int *graphdriver, int *graphmode, char *pathtodriver);

Description: initgraph initializes the graphics system by loading a graphics driver from disk (or validating a registered driver), and putting the system into graphics mode. User can tell initgraph to use a particular graphics driver and mode, or to autodetect the attached video adapter at run time and pick the corresponding driver. Normally, initgraph loads a graphics driver by allocating memory for the driver then loading the appropriate .BGI file from disk. pathtodriver specifies the directory path where initgraph looks for graphics drivers. initgraph first looks in the path specified in pathtodriver, then (if they are not there) in the current directory. Accordingly, if pathtodriver is null, the driver files (*.BGI) must be in the current directory. *graphdriver is an integer that specifies the graphics driver to be used. *graphmode is an integer that specifies the initial graphics mode (unless *graphdriver equals DETECT; in which case, *graphmode is set by initgraph to the highest resolution available for the detected driver). After a call to initgraph, *graphdriver is set to the current graphics driver, and *graphmode is set to the current graphics mode.

Return Value initgraph always sets the internal error code; on success, it sets the code to 0. If an error occurred, *graphdriver is set to -2, -3, -4, or -5, and graphresult returns the same value as listed below: Constant Name grNotDetected grFileNotFound grInvalidDriver grNoLoadMem Number -2 -3 -4 -5 Meaning Cannot detect a graphics card Cannot find driver file Invalid driver Insufficient memory to load driver

3.3.2. closegraph: Syntax : #include <graphics.h> void closegraph(); Description : closegraph deallocates all memory allocated by the graphics system, then restores the screen to the mode it was in before you called initgraph. (The graphics system deallocates memory, such as the drivers, fonts, and an internal buffer, through a call to _graphfreemem.) Return Value None.

3.3.3. Setcolor: Syntax : setcolor(number); Where (number) is a numeric constant from 0 through 15, or the symbolic constant that represents the color. The number of colors depend on the graphics mode user select using Turbo C++.The default settings allow for 16 color choices.

Description: Sets the color of current drawing color. The drawing color is the value that pixels are set to when program draws the lines etc. The color numbers and names: Color number 0 1 2 3 4 5 6 7 Name Black Blue Green Cyan Red Magenta Brown LightGray Color number 8 9 10 11 12 13 14 15 Name Darkgray Lightblue Lightgreen Lightcyan Lightred Lightmagenta Yellow White

3.3.4. Cleardevice: Syntax: #include <graphics.h> void cleardevice(void); Description Cleardevice erases (that is, fills with the current background color) the entire graphics screen and moves the CP (current position) to home (0,0). Return Value None.

3.3.5. Delay: Syntax #include "graphics.h" void delay(int millisec); Description

The delay function is also available in conio.h. The function pauses the computation for the the specified number of milliseconds. Return Value : None.

3.3.6. Moveto(): Syntax: void moveto(int X,int Y) Description : Use to move the pointer to a location on the graph without drawing anything 3.3.7. Lineto() : Syntax #include <graphics.h> void lineto(int x, int y); Description lineto draws a line from the CP (current position) to (x,y), then moves the CP to (x,y). Return Value : None.

3.3.8. line: Syntax #include <graphics.h> void line(int x1, int y1, int x2, int y2); Description line draws a line in the current color, using the current line style and thickness between the two points specified, (x1,y1) and (x2,y2), without updating the current position (CP). Return Value : None.

3.3.9. circle : Syntax : #include <graphics.h> void circle(int x, int y, int radius);

Description : circle draws a circle in the current drawing color with its center at (x,y) and the radius given by radius. The linestyle parameter does not affect arcs, circles, ellipses, or pie slices. Only the thickness parameter is used. Similarly for arc ( x, y, startangle, endangle, radius); ellipse ( x, y, startangle , endangle, x_radius, y_radius); 3.3.10. getmaxx : Syntax : #include <graphics.h> int getmaxx(void); Description : getmaxx returns the maximum (screen-relative) x value for the current graphics driver and mode. For example, on a CGA in 320*200 mode, getmaxx returns 319. getmaxx is invaluable for centering, determining the boundaries of a region onscreen, and so on. Return Value : getmaxx returns the maximum x screen coordinate

3.3.11. getmaxy : Syntax : #include <graphics.h> int getmaxy(void); Description : getmaxy returns the maximum (screen-relative) y value for the current graphics driver and mode. For example, on a CGA in 320*200 mode, getmaxy returns 199. getmaxy is invaluable for centering, determining the boundaries of a region onscreen, and so on. Return Value : getmaxy returns the maximum y screen coordinate

3.3.12. Putpixel: Syntax :

#include <graphics.h> void putpixel(int x, int y, int color); Description putpixel plots a point in the color defined by color at (x,y). Return Value : None. Note: The color argument can be in the range of n ordinary BGI color (from 0 to 15) or an RGB color For example: putpixel (100, 100, WHITE); 3.3.13. Setlinestyle (style, pattern, thickness); Syntax : #include <graphics.h> void setlinestyle(int linestyle, unsigned upattern, int thickness); Description : setlinestyle sets the style for all lines drawn by line, lineto, rectangle, drawpoly, and so on. The linesettingstype structure is defined in graphics.h as follows:

struct linesettingstype { int linestyle; unsigned upattern; int thickness;

}; linestyle specifies in which of several styles subsequent lines will be drawn (such as solid, dotted, centered, dashed). The enumeration line_styles, which is defined in graphics.h, gives names to these operators: Name SOLID_LINE DOTTED_LINE 1 CENTER_LINE 2 DASHED_LINE 3 USERBIT_LINE 4 Name NORM_WIDTH THICK_WIDTH 0 Value Description Solid line Dotted line Centered line Dashed line User-defined line style Value 1 3 Description 1 pixel wide 3 pixels wide

thickness specifies whether the width of subsequent lines drawn will be normal or thick.

upattern is a 16-bit pattern that applies only if linestyle is USERBIT_LINE (4). In that case, whenever a bit in the pattern word is 1, the corresponding pixel in the line is drawn in the current drawing color. For example, a solid line corresponds to a upattern of 0xFFFF (all pixels drawn), and a dashed line can correspond to a upattern of 0x3333 or 0x0F0F. If the linestyle parameter to setlinestyle is not USERBIT_LINE (in other words, if it is not equal to 4), you must still provide the upattern parameter, but it will be ignored. Note: The linestyle parameter does not affect arcs, circles, ellipses, or pie slices. Only the thickness parameter is used. Return Value : If invalid input is passed to setlinestyle, graphresult returns -11, and the current line style remains unchanged

3.3.14. outtextxy: Syntax #include <graphics.h> void outtextxy(int x, int y, char *textstring); Description outtextxy displays a text string in the viewport at the given position (x, y), using the current justification settings and the current font, direction, and size. outtextxy is for use in graphics mode; it will not work in text mode. Return Value None.

3.4. Steps to use graphics (in Turbo C++ ) There are five steps that you need to follow to use graphics in Turbo C++ 1. Tell the compiler that graphics commands will be used. Include the preprocessor directive: #include <graphics.h> 2. Let C++ find out what kind of graphics card computer uses. Declare two variables of type Integer int graphdriver = DETECT, graphmode; 3. Initialize the Graphics System 4. Tell the system where to find Graphics routines (BGI files) Use initgraph function to initialize the system & for graphics routines(set path if u know or otherwise leave blank) initgraph(&graphdriver, &graphmode, ); 5. Close the graphics screen after you have finished drawing your graphics. closegraph( ); 3.5. Programming in Graphics Sample Program to draw line using built-in functions Step 1: Write the code in Turbo C++ editor & save the code with .cpp extension. #include<graphics.h> #include<iostream.h> #include<conio.h> void main() { int graphicdriver=DETECT, graphicmode; initgraph(&graphicdriver,&graphicmode, ); line(100,100,200,300); getch(); closegraph(); } Step 2: Compile the code Step 3 : Run the code

Lab Assignments Write a program using graphics built-in function 1. To find the current position of the cursor(getx,gety) , maximum value of X coordinate & Y co-ordinate (getmaxx,getmaxy), center pixel position on screen. 2. To display graphics primitives Point ,Line , Rectangle, Circle, Ellipse. Hint : use putpixel,line,rectangle,circle,ellipse function. 3. To understand how move, moverel, line, linerrel function works. 4. To display text at specified position on screen. 5. To draw concentric circles. 6. Draw Rotating wheel(Movement)

Practical Programs List

1. Aim: Program to draw line using DDA line Algorithm. Description Write an algorithm, draw a flowchart and develop a graphics program in C++ to implement DDA line generation algorithm. Accept Co-ordinates of endpoints of line as input & display line. 2. Aim: Program to draw line using BRESENHAM LINE Algorithm Description Write an algorithm, draw a flowchart and develop a graphics program in C++ to implement BRESENHAM algorithm. Accept Co-ordinates of endpoints of line as input & display line. 3. Aim: Program to draw thick line using BRESENHAM line algorithm. Description Write an algorithm, draw a flowchart and develop a graphics program in C++ to implement BRESENHAM algorithm. Accept Co-ordinates of endpoints of line & thickness(width) of line as input & display line. 4. Aim: Program to draw dotted line using BRESENHAM Line algorithm Description Write an algorithm, draw a flowchart and develop a graphics program in C++ to implement BRESENHAM algorithm. Accept Co-ordinates of endpoints of line & gap between the no. of pixels as input & display line. 5. Aim: Program to transform a polygon using Scaling Description Write an algorithm, draw a flowchart and develop a graphics program in C++ , Accept Co-ordinates of vertices of polygon & scale factor as input & display Scaled polygon. 6. Aim: Program totransform a polygon using rotation. (by using pivot-point) Description Write an algorithm, draw a flowchart and develop a graphics program in C++ , Accept Co-ordinates of vertices of polygon & rotation angle as input & display the result. (Rotation about an arbitrary Point).

7. Aim: Program to translate a polygon using translation.in which values of polygon edges and translation points will be given by user. Description Write an algorithm, draw a flowchart and develop a graphics program in C++ , Accept Co-ordinates of vertices of polygon & translation factor as input & display the result. 8. Aim: Program which shear a polygon relative to different reference lines(i.e. Y Shear & XShear) Description Write an algorithm, draw a flowchart and develop a graphics program in C++ . Accept Co-ordinates of vertices of polygon ,direction of shear ( X or Y) & shear factor as input & display the result. 9. Aim: Program for Line clipping algorithm. Description Write an algorithm, draw a flowchart and develop a graphics program in C++ . Accept the window co-ordinates ,draw a line, apply the cohen-sutherland algorithm to clip a line against the window boundary & display clipped line. 10. Aim: Program to draw Curve using ARCDDA algorithm. Description Write an algorithm, draw a flowchart and develop a graphics program in C++ to implement ARCDDA algorithm to draw curve. Accept co-ordinates of center of curvature, arc angle & starting point of arc. 11. Aim: Program to draw Circle using ARCDDA algorithm. Description Write an algorithm, draw a flowchart and develop a graphics program in C++ to implement ARCDDA algorithm to draw circle. Accept co-ordinates of center of circle.

12. References and further reading

Computer Graphics by Steven Harrington [TMH] Computer Graphics by Hearn Baker [PHI] Interactive Computer Graphics by Newman and Sproull Computer Graphics by Rogers [TMH] http://www.cs.colorado.edu/~main/bgi/doc/ http://www.mycplus.com/featured-articles/c-language-graphics-library-reference-part-1/