lecture on graphics

GraphicsGraphics

Computer GraphicsComputer Graphics

Computer Graphics is one of the most Computer Graphics is one of the most powerful and interesting aspect of powerful and interesting aspect of computers. There are many things we can computers. There are many things we can do in graphics apart from drawing figures do in graphics apart from drawing figures of various shapes.of various shapes.

All video games, animation, multimedia All video games, animation, multimedia predominantly works using computer predominantly works using computer graphics.graphics.

Graphics in CGraphics in C

There is a large number of functions in There is a large number of functions in CC which which are used for putting pixel on a graphic screen to are used for putting pixel on a graphic screen to form lines, shapes and patterns.form lines, shapes and patterns.

The Default output mode of C language The Default output mode of C language programs is “programs is “TextText” mode. We have to switch to ” mode. We have to switch to

““GraphicGraphic” mode before drawing any graphical ” mode before drawing any graphical shape like line, rectangle, circle etc.shape like line, rectangle, circle etc.

Basic color FunctionBasic color Function

textcolor() functiontextcolor() function textbackground() functiontextbackground() function setbkcolor() functionsetbkcolor() function setcolor() functionsetcolor() function

textcolor() functiontextcolor() function

Declaration:Declaration:void void textcolortextcolor( newcolor);( newcolor);

RemarksRemarks:: This function works for functions that produce text-This function works for functions that produce text-

mode output directly tomode output directly tothe screen (console output functions).the screen (console output functions).

textcolortextcolor selects a new character color in text selects a new character color in text mode.mode.

This functions does not affect any characters This functions does not affect any characters currently on the screen.currently on the screen.

textbackground()textbackground() function function

Declaration:Declaration:

void void textbackground(textbackground( newcolor newcolor));;

Remarks:Remarks:

textbackgroundtextbackground selects the background color for text mode. selects the background color for text mode.

If you use symbolic color constants, the following limitation If you use symbolic color constants, the following limitation apply to the background colors you select:apply to the background colors you select: You can only select one of the first eight colors (0--7).You can only select one of the first eight colors (0--7).

NOTE:NOTE: If you use the symbolic color constants, you must If you use the symbolic color constants, you must include include conio.h.conio.h.

setcolor()setcolor() function function


void void setcolorsetcolor((colorcolor););

Remarks:Remarks:

setcolorsetcolor sets the current drawing color to sets the current drawing color to colorcolor, , which can range from 0 to which can range from 0 to getmaxcolorgetmaxcolor..

setbkcolor()setbkcolor() function function


void setbkcolor(void setbkcolor(colorcolor););

Remarks:Remarks:

setbkcolor sets the background to the setbkcolor sets the background to the colorcolor specified by color.specified by color.

Example 1.Example 1. txtcolor() & textbackground() functionstxtcolor() & textbackground() functions

#include<graphics.h>#include<graphics.h>#include<stdio.h>#include<stdio.h>#include<conio.h>#include<conio.h>Void main()Void main(){{textcolor(4); OR textcolor(4+BLINK)textcolor(4); OR textcolor(4+BLINK)textbackground(3);textbackground(3);cprintf(“NFC-IEFR INSTITUTE ”);cprintf(“NFC-IEFR INSTITUTE ”);getch();getch();}}OUTPUTOUTPUT

NFC-IEFR INSTITUTENFC-IEFR INSTITUTE

Graphics in CGraphics in C

There are lot of library functions in C language There are lot of library functions in C language which are used to draw different drawing which are used to draw different drawing shapes.shapes.

For eg.For eg. line(x1, y1, x2, y2);line(x1, y1, x2, y2); putpixel(x, y);putpixel(x, y); circle(xCenter, yCenter, radius);circle(xCenter, yCenter, radius); rectangle(x1, y1, x2, y2);rectangle(x1, y1, x2, y2); ellipse(xCenter, yCenter, start, end, Xradius, Yradius);ellipse(xCenter, yCenter, start, end, Xradius, Yradius); arc(xCenter, yCenter, start, end, radius);arc(xCenter, yCenter, start, end, radius);

Graphics in CGraphics in CExample 2Example 2

#include<graphics.h>#include<graphics.h>void main(void)void main(void){{ int dr=DETECT, md;int dr=DETECT, md;

initgraph(&dr,&md,”c:\\tc\\bgi”);initgraph(&dr,&md,”c:\\tc\\bgi”);line(0 , 0, 640, 480);line(0 , 0, 640, 480);getch();getch();

closegraph();closegraph();}}

Dissecting Dissecting initgraph(…)initgraph(…) Function Function

The initgraph function is used to switch the output The initgraph function is used to switch the output from text mode to graphics mode.from text mode to graphics mode.

The initgraph function takes three arguments.The initgraph function takes three arguments.

initgraph(&dr , &md , ”c:\\tc\\bgi” );

graphics Driver Type

Initial graphics

mode

Directory path of graphics

driver

Graphics DriversGraphics DriversConstant ValueDETECT 0 (requests auto detection)

CGA 1

MCGA 2

EGA 3

EGA64 4

EGAMONO 5

IBM8514 6

HERCMONO 7

ATT400 8

VGA 9

PC3270 10

Graphics ModeGraphics Mode

driver driver graphics_modesgraphics_modes ValueValue Column x RowColumn x Row ColorsColors

CGACGA CGAC0CGAC0 00 320 x 200320 x 200 4 colors4 colors

CGAC1CGAC1 11 320 x 200320 x 200 4 colors4 colors



CGAHICGAHI 44 640 x 200640 x 200 2 colors2 colors

EGAEGA EGALOEGALO 00 640 x 200640 x 200 16 colors16 colors

EGAHIEGAHI 11 640 x 350640 x 350 16 colors16 colors

VGAVGA VGALOVGALO 00 640 x 200640 x 200 16 colors16 colors

VGAMEDVGAMED 11 640 x 350640 x 350 16 colors16 colors

VGAHIVGAHI 22 640 x 480640 x 480 16 colors16 colors

Directory path of graphics driverDirectory path of graphics driver

The third argument to initgraph() is the pathname for The third argument to initgraph() is the pathname for the graphics drivers. This driver is a file like the graphics drivers. This driver is a file like cga.bgicga.bgi or or egavga.bgi.egavga.bgi.

cga.bgicga.bgi file is used to run programs in file is used to run programs in CGACGA modes. modes. egavga.bgiegavga.bgi file is used to run programs in EGA or file is used to run programs in EGA or VGAVGA

modes.modes. Other Drivers are available for other display standards Other Drivers are available for other display standards

such as such as HerculesHercules and and IBM 8514.IBM 8514. In the current version of Turbo C, these driver files are In the current version of Turbo C, these driver files are

located in the subdirectory located in the subdirectory \tc\bgi\tc\bgi. So this is the . So this is the pathname used in the arguments to pathname used in the arguments to initgraph().initgraph().

line() functionline() function

line draws a line between two specified pointsline draws a line between two specified points

Syntax:Syntax:

line(x1, y1, x2,y2);line(x1, y1, x2,y2);

RemarksRemarks

line draws a line from (x1, y1) to (x2, y2) using line draws a line from (x1, y1) to (x2, y2) using the current color, line style, and thickness.the current color, line style, and thickness.

line() functionline() function e.g:e.g:

line(0, 0, 640, 480);line(0, 0, 640, 480);

x=320 x=640

x=0

x=0y=0

y=240

y=480

y=0

y=240

y=480x=640

setlinestyle() functionsetlinestyle() function

Sets the current line style and width or patternSets the current line style and width or pattern

Syntax:Syntax:

setlinestyle (linestyle, upattern, thickness);setlinestyle (linestyle, upattern, thickness);

Remarks:Remarks:

setlinestyle sets the style for all lines drawn by line, setlinestyle sets the style for all lines drawn by line, lineto, rectangle, drawpolylineto, rectangle, drawpoly

Line StylesLine Styles

Line StyleLine Style Int ValueInt Value PatternPattern

SOLID_LINESOLID_LINE 00

DOTTED_LINEDOTTED_LINE 11

CENTER_LINECENTER_LINE 22

DASHED_LINEDASHED_LINE 33

USERBIT_LINEUSERBIT_LINE 44 User DefinedUser Defined

upattern, thicknessupattern, thickness

U patternU pattern User can define its own pattern.User can define its own pattern. 0 should be used if using predefined pattern, 0 should be used if using predefined pattern,

other wise any integer number representing other wise any integer number representing user patternuser pattern

ThicknessThickness Thickness of the line in pixelsThickness of the line in pixels

rectangle() functionrectangle() function

Draws a rectangle (graphics mode)Draws a rectangle (graphics mode)

syntax:syntax: void void rectanglerectangle(left, top, right, bottom);(left, top, right, bottom);

Remarks:Remarks: rectangle draws a rectangle in the current line rectangle draws a rectangle in the current line

style, thickness, and drawing color.style, thickness, and drawing color. (left,top) is the upper left corner of the rectangle, (left,top) is the upper left corner of the rectangle,

and (right,bottom) is its lower right cornerand (right,bottom) is its lower right corner..

e.g:e.g: rectangle() functionrectangle() function

rectangle(rectangle(10, 10, 200,20010, 10, 200,200););

200,200

10, 10

bar( ) functionbar( ) function

bar(..) function Draws a barbar(..) function Draws a bar Syntax: Syntax:

void bar(void bar( left, top, right, bottom left, top, right, bottom););

Remarks:Remarks: bar draws a filled-in, rectangular, two-dimensional bar.bar draws a filled-in, rectangular, two-dimensional bar. The bar is filled using the current fill pattern and fill The bar is filled using the current fill pattern and fill

color. bar does not outline the bar.color. bar does not outline the bar. To draw an outlined two-dimensional bar, use To draw an outlined two-dimensional bar, use bar3dbar3d

with with depth = 0.depth = 0.

e.g:e.g: bar( ) functionbar( ) function

Usage:Usage:

bar(bar(10,10,200,20010,10,200,200););

10,10

200,200

fill pattern

bar3d()bar3d() function function

Declaration:Declaration: void void bar3dbar3d(left,top,right, bottom, depth,topflag);(left,top,right, bottom, depth,topflag);

Remarks:Remarks:bar3dbar3d draws a three-dimensional rectangular bar, then fills it using the draws a three-dimensional rectangular bar, then fills it using the current fill pattern and fill color. The three-dimensional outline of the bar is current fill pattern and fill color. The three-dimensional outline of the bar is drawn in the current line style and color.drawn in the current line style and color.

Parameter Parameter What It Is/DoesWhat It Is/Does

depth depth Bar's depth in pixelsBar's depth in pixels

topflag topflag Governs whether a three-dimensional top is put on the Governs whether a three-dimensional top is put on the barbar

(left, top) (left, top) Rectangle's upper left cornerRectangle's upper left corner

(right, bottom)(right, bottom) Rectangle's lower right cornerRectangle's lower right corner

eg:eg: bar3d()bar3d() function function

Usage:Usage:

setfillstyle(4, 4);setfillstyle(4, 4);

bar3d(100, 100, 200, 200, 20, 1);bar3d(100, 100, 200, 200, 20, 1);

OUTPUT100,100

200,200

20 (depth)

circle()circle() functionfunction

Declaration:Declaration:void void circle(x,y,radius);circle(x,y,radius);

Remarks:Remarks:

circle draws a circle in the current drawing color.circle draws a circle in the current drawing color.

ArgumentArgument What It Is/DoesWhat It Is/Does

(x,y)(x,y) Center point of circleCenter point of circle

radius radius Radius of circleRadius of circle

eg:eg: circle()circle() function function

Usage:Usage:

circle(320,240,50);circle(320,240,50);

OUTPUT

320,240

50 radius in pixels

arc()arc() functionfunction

Declaration:Declaration:void void arcarc(x,y,stangle,endangle(x,y,stangle,endangle radius);radius);

Remarks:Remarks:arc draws a circular arc in the current drawing color.arc draws a circular arc in the current drawing color.


(x,y)(x,y) Center point of arcCenter point of arc

stanglestangle Start angle in degreesStart angle in degrees

endangleendangle End angle in degreesEnd angle in degrees

radius radius Radius of circleRadius of circle

eg: arc()eg: arc() function function

Usage:Usage:

arc(320, 240, 0, 270, 50);arc(320, 240, 0, 270, 50);

OUTPUT

320,240

50 radius in pixels

0 stangle

270 endangle

ellipese()ellipese() function function

Declaration:Declaration:void ellipse(x, y,stangle,endangle,xradius,yradius);void ellipse(x, y,stangle,endangle,xradius,yradius);

Remarks:Remarks:ellipse draws an elliptical arc in the current drawing color.ellipse draws an elliptical arc in the current drawing color.


(x,y)(x,y) Center point of ellipseCenter point of ellipse

stanglestangle Start angle in degreesStart angle in degrees

endangleendangle End angle in degreesEnd angle in degrees

xradius xradius Horizontal axisHorizontal axis

yradiusyradius Vertical axisVertical axis

eg: ellipse()eg: ellipse() function function

Usage:ellipse(320, 240, 0, 270, 100,50);

OUTPUT

320,240

50 yradius in pixels

270 endangle

0 stangle

50 xradius in pixels

fillellipse()fillellipse() function function

Declaration:Declaration:void far void far fillellipsefillellipse((xx, y,, y,xradiusxradius, , yradiusyradius););

Remarks:Remarks:fillellipse draws an ellipse, then fills the ellipse with the fillellipse draws an ellipse, then fills the ellipse with the current fill color and fill pattern.current fill color and fill pattern.





e.g: fillellipse()e.g: fillellipse() function function

Declaration:Declaration:void far void far fillellipsefillellipse((xx, y, , y, xradiusxradius, , yradiusyradius););

Remarks:Remarks:fillellipse draws an ellipse, then fills the ellipse with the fillellipse draws an ellipse, then fills the ellipse with the current fill color and fill pattern.current fill color and fill pattern.





eg: fillellipse()eg: fillellipse() function function

Usage:Usage:

setfillstyle(5, 4);setfillstyle(5, 4);

fillellipse(320, 240, 0, 270, 100,50);fillellipse(320, 240, 0, 270, 100,50);

OUTPUT

current fill color and fill pattern

e.g:e.g: setfillstyle()setfillstyle() function function


void void setfillstylesetfillstyle(pattern, color);(pattern, color);

Remarks:Remarks:

setfillstyle sets the current fill pattern and fill setfillstyle sets the current fill pattern and fill color.color.

e.g:e.g: setfillstyle()setfillstyle() function functionFill patternsFill patterns

Names Names ValueValue Means Fill WithMeans Fill With PatternPattern

EMPTY_FILLEMPTY_FILL 00 Background colorBackground color

SOLID_FILL SOLID_FILL 11 Solid fillSolid fill

LINE_FILLLINE_FILL 22 ------

LTSLASH_FILLLTSLASH_FILL 33 //////

SLASH_FILLSLASH_FILL 44 ///, thick lines///, thick lines

BKSLASH_FILLBKSLASH_FILL 55 \\\, thick lines\\\, thick lines

LTBKSLASH_FILLLTBKSLASH_FILL 66 \\\\\\

HATCH_FILLHATCH_FILL 77 Light hatchLight hatch

HATCH_FILLHATCH_FILL 88 Heavy crosshatchHeavy crosshatch

INTERLEAVE_FILLINTERLEAVE_FILL 99 Interleaving linesInterleaving lines

WIDE_DOT_FILLWIDE_DOT_FILL 1010 Widely spaced dotsWidely spaced dots

CLOSE_DOT_FILLCLOSE_DOT_FILL 1111 Closely spaced dotsClosely spaced dots

USER_FILLUSER_FILL 1212 User-defined fill patternUser-defined fill pattern User DefinedUser Defined

putpixel()putpixel() function function


void void putpixelputpixel((xx, , yy, , colorcolor););

Remarks:Remarks:

putpixel plots a point in the color defined by putpixel plots a point in the color defined by color at (x,y)color at (x,y)

ViewportsViewports

ViewportsViewports provide a way to restrict to an arbitrary provide a way to restrict to an arbitrary size the area of the screen used for drawing. We can size the area of the screen used for drawing. We can draw an image that would ordinary occupy the draw an image that would ordinary occupy the entire screen but if a view port is in use, only part entire screen but if a view port is in use, only part of the image will be visible. of the image will be visible.

The The View PortsView Ports don’t scale the image; that is, the don’t scale the image; that is, the image isn’t compressed to fit the view port, Rather, image isn’t compressed to fit the view port, Rather, the parts of the image that don’t fit in the view port the parts of the image that don’t fit in the view port are simply not visibleare simply not visible

setviewport() Funcitonsetviewport() Funciton

Sets the current viewport for graphics outputSets the current viewport for graphics output Declaration:Declaration:

void far void far setviewport(setviewport(left,top,right,bottom,clipleft,top,right,bottom,clip));; Remarks:Remarks:

setviewportsetviewport establishes a new establishes a new viewportviewport for graphics output.for graphics output. The The viewport'sviewport's corners are given in absolute screen corners are given in absolute screen

coordinates by (left,top) and (right,bottom).coordinates by (left,top) and (right,bottom). The clip argument determines whether drawings are clipped The clip argument determines whether drawings are clipped

(truncated) at the current (truncated) at the current viewportviewport boundaries. If clip is boundaries. If clip is non-zero, all drawings will be clipped to the current non-zero, all drawings will be clipped to the current viewportviewport..

e.g: setviewport() Functione.g: setviewport() Function

setviewport(0,0,200,200,1);setviewport(0,0,200,200,1);

rectangle(0,0,200,200);rectangle(0,0,200,200);

circle(320,240,250);circle(320,240,250);

ellipse(320,240,0,360,250,100);ellipse(320,240,0,360,250,100);

OUTPUT:OUTPUT:

clearviewport() Functionclearviewport() Function

Clear the current viewport.Clear the current viewport. eg:eg:

circle(320,240,260);circle(320,240,260);setviewport(0,0,200,200,1);setviewport(0,0,200,200,1);rectangle(0,0,200,200);rectangle(0,0,200,200);circle(320,240,250);circle(320,240,250);ellipse(320,240,0,360,250,100);ellipse(320,240,0,360,250,100);getch();getch();clearviewport();clearviewport();

Text with GraphicsText with Graphics

There are functions in C language that draw There are functions in C language that draw text characters in graphics mode. These text characters in graphics mode. These functions can be used to mix text and graphics functions can be used to mix text and graphics in the same image. These functions also make in the same image. These functions also make it possible to change text font and very the size it possible to change text font and very the size of text.of text.

outtext() functionouttext() function

outtext displays a string in the viewport (graphics outtext displays a string in the viewport (graphics mode)mode)

Declaration:Declaration:void outtext(far *textstring);void outtext(far *textstring);

Remarks:Remarks:outtext display a text string, using the current outtext display a text string, using the current justification settings and the current font, direction, justification settings and the current font, direction, and size. outtext outputs textstring at the current and size. outtext outputs textstring at the current position (CP).position (CP).

outtextxy() Functionouttextxy() Function

outtextxyouttextxy displays a string at the specified location displays a string at the specified location (graphics mode)(graphics mode)

Declaration:Declaration:void void outtextxyouttextxy((xx, , yy,, far *textstringfar *textstring););

Remarks:Remarks:outtextxy()outtextxy() display a text string, using the current display a text string, using the current justification settings and the current font, direction, justification settings and the current font, direction, and size.(CP)and size.(CP)outtextxy()outtextxy() displays displays textstringtextstring in the in the viewportviewport at the at the position (x, y)position (x, y)

settextstyle( ) Functionsettextstyle( ) Function

Sets the current text characteristicsSets the current text characteristics Declaration:Declaration:

voidvoid settextstylesettextstyle((font,font, direction,direction, charsizecharsize);); Remarks:Remarks:

settextstyle()settextstyle() sets the text font, the direction in which sets the text font, the direction in which text is displayed, and the size of the characters.text is displayed, and the size of the characters.

A call to A call to settextstyle()settextstyle() affects all text output by affects all text output by outtextouttext and and outtextxyouttextxy..


directiondirectionFont directions supported are horizontal text (left Font directions supported are horizontal text (left to right) and vertical text (rotated 90 degrees to right) and vertical text (rotated 90 degrees counterclockwise).counterclockwise).

The default direction is The default direction is HORIZ_DIR.HORIZ_DIR.

NameName ValueValue DirectionDirection

HORIZ_DIRHORIZ_DIR 00 Left to rightLeft to right

VERT_DIRVERT_DIR 11 Bottom to topBottom to top


CharsizeCharsize The size of each character can be magnified The size of each character can be magnified

using the using the charsizecharsize factor. factor. If If charsizecharsize is non-zero, it can affect bit- is non-zero, it can affect bit-

mapped or stroked characters.mapped or stroked characters. A A charsizecharsize value of value of 00 can be used only with can be used only with

stroked fonts.stroked fonts.


FontsFontsThere are currently five fonts available . But it is There are currently five fonts available . But it is easy to add other to the systems. These areeasy to add other to the systems. These are

ValueValue ConstantConstant FileFile CommentComment

00 DEFAULT_FONTDEFAULT_FONT Built inBuilt in Bit-mapped, 8x8Bit-mapped, 8x8

11 TIPLEX-FONTTIPLEX-FONT TRIP.CHRTRIP.CHR Stroked (Times Roman style)Stroked (Times Roman style)

22 SMALL_FONTSMALL_FONT LITT.charLITT.char Stroked (for small lette4rs)Stroked (for small lette4rs)

33 SANS_SERIF_FONSANS_SERIF_FONTT

SANS.CHRSANS.CHR Stroked( sans_serif style)Stroked( sans_serif style)

44 GOTHIC_FONTGOTHIC_FONT GOTHIC.CHGOTHIC.CHRR

Stroked (gothic style)Stroked (gothic style)

The EndThe End

lecture on graphics

Education

line function line

graphics modedriver

line function e

initgraph function

colorscgac11320 x

colorscgac22320 x

colorscgac33320 x

colorscgahi4640 x