Laboratory Manual
Computer Graphics Lab
Second Year - Information Technology
Teaching Scheme
Examination Scheme
Theory : 2 Hrs/Week/batch
Term Work: 50 Marks
Practical : 04 Hrs/Week/batch
Practical : 50 Marks
Oral :
——
Prepared By
Prof. Prashant T. Raut
Prof. Avinash J. Kokare
Department of Information Technology
Vidya Pratishthan’s College of Engineering
Baramati – 413133, Dist- Pune (M.S.)
INDIA
December 2012
Contents
PART-B : Computer Graphics
1
1 Graphics functions and Graphics Editor
1.1 Graphics Functions . . . . . . . . . . . . . .
1.1.1 Problem Statement . . . . . . . . . .
1.1.2 Pre Lab . . . . . . . . . . . . . . . .
1.1.3 Hardware and Software Requirement
1.1.4 Theory: Graphics functions . . . . .
1.1.5 Post Lab . . . . . . . . . . . . . . .
1.1.6 Viva Questions . . . . . . . . . . . .
1.2 Graphics Editor . . . . . . . . . . . . . . . .
1.2.1 Problem Statement . . . . . . . . . .
1.2.2 Prelab . . . . . . . . . . . . . . . . .
1.2.3 Hardware and Software Requirement
1.2.4 Theory: Graphics Editor . . . . . .
1.2.5 PostLab . . . . . . . . . . . . . . . .
1.2.6 Viva Questions . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
2
2
2
2
2
3
9
10
11
11
11
11
11
14
14
2 Line and Circle Drawing Algorithms
2.1 Problem Statement . . . . . . . . . . . . . . .
2.2 Hardware and Software Requirement . . . . .
2.3 Theory . . . . . . . . . . . . . . . . . . . . . .
2.3.1 DDA Algorithm . . . . . . . . . . . .
2.3.2 Bresenhams Line drawing Algorithm .
2.3.3 Bresenhams Circle drawing Algorithm
2.4 Postlab . . . . . . . . . . . . . . . . . . . . .
2.5 Viva Questions . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
15
15
15
15
15
17
20
22
22
3 Polygon filling algorithms
3.1 Problem statement . . . . . . . . . . . . .
3.2 PreLab . . . . . . . . . . . . . . . . . . . .
3.3 Hardware and Software Requirement . . .
3.4 Theory . . . . . . . . . . . . . . . . . . . .
3.4.1 Boundry fill algorithm . . . . . . .
3.4.2 Flood Fill Algorithm . . . . . . . .
3.4.3 Scan-Line Polygon filling algorithm
3.5 PostLab . . . . . . . . . . . . . . . . . . .
3.6 Viva Questions . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
23
23
23
23
24
25
27
28
29
29
i
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
CONTENTS
4 2-D
4.1
4.2
4.3
4.4
Transformations
Problem Statement . . . . . . . . . .
Prelab . . . . . . . . . . . . . . . . .
Hardware and Software Requirement
Theory . . . . . . . . . . . . . . . . .
4.4.1 Translation . . . . . . . . . .
4.4.2 Rotation . . . . . . . . . . . .
4.4.3 scaling . . . . . . . . . . . . .
4.4.4 Reflection . . . . . . . . . . .
4.4.5 shearing . . . . . . . . . . . .
4.5 Postlab . . . . . . . . . . . . . . . .
4.6 Viva Questions . . . . . . . . . . . .
CONTENTS
.
.
.
.
.
.
.
.
.
.
.
5 Animation Tool
5.1 Problem statement . . . . . . . . . . .
5.2 Pre-Lab . . . . . . . . . . . . . . . . .
5.3 Hardware and Software Requirement .
5.4 Theory . . . . . . . . . . . . . . . . . .
5.4.1 Introduction to flash animation
5.4.2 Features of flash player . . . .
5.5 Procedure . . . . . . . . . . . . . . . .
5.6 Postlab . . . . . . . . . . . . . . . . .
5.7 Viva Questions . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
31
31
31
32
32
32
33
34
34
35
36
36
. . .
. . .
. . .
. . .
tool
. . .
. . .
. . .
. . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
38
38
38
38
39
39
39
39
45
45
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
References
46
ii
List of Figures
2.1
Concept of bresenhams Algorithm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
20
3.1
3.2
3.3
Convex polygon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Concave polygon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Boundry fill algorithm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
24
25
25
4.1
4.2
4.3
4.4
4.5
Translation of triangle
Rotation of triangle .
Scaling . . . . . . . . .
Reflections . . . . . . .
Shearing . . . . . . . .
.
.
.
.
.
33
33
34
35
36
5.1
5.2
Flash displays the Start Page when it is launched . . . . . . . . . . . . . . . . . . . . . .
The Flash authoring environment includes a Stage where you can place and manipulate
assets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The Flash tools panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The Flash tools panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Browse to the folder on your hard drive that contains an image to import into your Flash
document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The X and Y coordinates match the registration point, which is the upper left corner of
this random movie clip symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
40
5.3
5.4
5.5
5.6
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
iii
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
41
42
43
44
45
LIST OF FIGURES
LIST OF FIGURES
PART-B
COMPUTER GRAPHICS
Lab Manual - Subject Name
1
VPCOE, Baramati
Assignment 1
Graphics functions and Graphics
Editor
1.1
1.1.1
Graphics Functions
Problem Statement
Text and Graphics mode, initialization of graphics mode, graphics drivers, switching between text and
graphics mode, error handling.
1.1.2
Pre Lab
Fundamentals of c and c++ functions
1.1.3
Hardware and Software Requirement
• Hardware requirement :
– Intel pentium III/M 1.4 GHz, or Pentium IV 1.4 GHz minimum
– Microsoft Windows XP/2000
– 512 MB RAM (1 GB+ recommended) 900 MB free hard disk space
– SVGA or higher-resolution monitor (XGA recommended)
• Software Requirement
– Turbo c
2
Graphics functions and Graphics Editor
1.1.4
1.1. GRAPHICS FUNCTIONS
Theory: Graphics functions
Following are the graphics functions
• INITGRAPH
– Purpose: Initializes the graphics system
– Syntax: void far initgraph(int far *graphdriver, int far *graphmode, char far *pathtodriver);
– Comment: Initgraph() initializes the graphic system by loading a graphics driver from disk
and putting the system into graphics mode
– Example: int gm, gd= DETECT;
initgraph( &gm, &gd, ” ” );
where gm= Graph mode gd= Graph driver that specifies the graphics driver to be used.CGA,
MDA, EGA, VGA etc.
• DETECTGRAPH:
– Purpose: Dtermines graphics driver and graphics mode to use by checking the hardware[h/w].
– Syntax: void far detectgraph(int far *graphdriver, int far *graphmode);
– Comment: detectgraph() detects your system graphics adapter and chooses the mode that
provides the highest resolution for the adapter. The main reason to call detectgraph() directly
is to override the graphics mode that detectgraph() recommends to initgraph().
• RESTORECRTMODE:
– Purpose: Restores screen mode to preinitgraph setting
– Syntax: void far restorecrtmode(void);
– Comment:This function can be used in conjunction with setgraphmode to switch back and
forth between text and graphics modes.
• CLEARDEVICE:
– Purpose: Clears the graphics screen and moves CP (current position) to home (0,0).
– Syntax: void far cleardevice(void);
– Comments: cleardevice () erases (that is filled with the background color) the entire graphics
screen.
• CLOSEGRAPH:
Lab Manual - Subject Name
3
VPCOE, Baramati
Graphics functions and Graphics Editor
1.1. GRAPHICS FUNCTIONS
– Purpose: Shuts down the graphics system and deallocates all memory allocated by the graphics.
– Syntax: void far closegraph(void);
Table 1.1: Color Table in Turbo C.
Constant
Value Background Foreground
BLACK
0
yes
yes
BLUE
1
yes
yes
GREEN
2
yes
yes
CYAN
3
Yes
Yes
RED
4
Yes
Yes
MAGENTA
5
Yes
Yes
BROWN
6
Yes
Yes
LIGHTGRAY
7
Yes
Yes
DARKGRAY
8
No
Yes
LIGHTBLUE
9
No
Yes
LIGHTGREEN
10
No
Yes
LIGHTCYAN
11
No
Yes
LIGHTRED
12
No
Yes
LIGHTMAGENTA
13
No
Yes
YELLOW
14
No
Yes
WHITE
15
No
Yes
• SETCOLOR:
– Purpose: Sets the current drawing color
– Syntax: void far setcolor(int color)
– Comment:The color parameter can take a value from 0 to 15. The current drawing color is
the value which the pixel is set when lines, rectangles, etc are given or drawn.
• GETCOLOR::
– Purpose: Returns the current drawing color.
– Syntax: : int far getcolor(void);
– Comment:The drawing color is the value to which pixels are set when lines, rectangles etc
are drawn.
• GETIMAGE:
– Purpose: Saves a bit image of the specified region in the memory.
– Syntax: : void far getimage(int left, int top, int right, int bottom, void far *bitmap);
Lab Manual - Subject Name
4
VPCOE, Baramati
Graphics functions and Graphics Editor
1.1. GRAPHICS FUNCTIONS
– Comment:Getimage() copies on image from the screen to memory left,top,right and bottom
define area of the screen from which the rectangle is to be copied. Bitmap points to the area
in the memory where the bit image is stored.
• GETMAXCOLOR:
– Purpose: Returns maximum color value for the current graphics driver and mode that can
be passed to the setcolor() function.
– Syntax: : int far getmaxcolor(void);
• IMAGESIZE:
– Purpose: Returns the number of bytes required to store a bit image.
– Syntax: :unsigned far imagesize(int left, int top, int right, int bottom);
– Comment:If the size read for the selected image is greater than or equal to 64k bytes, imagesize() returns 0xFFFF.
• PUTIMAGE:
– Purpose: outputs a bit image onto the screen
– Syntax: void far putimage(int left, int top, void far *bitmap, int op);
– Comment:putimage() puts the bit image previously saved with the getimage() back onto the
screen, with the upper left corner of the image placed at (left, top)
• PUTPIXEL:
– Purpose: putpixel plots a pixel at a specified point in a specified color.
– Syntax: void far putpixel(int x, int y, int color);
• ARC:
– Purpose: Draws a circular arc.
– Syntax: void arc(int x, int y, int startangle, int endangle, int rad);
– Comments: Arc draws a circular arc in the current drawing color centered at (x,y) with
a radius given by radius. The arc is drawn from start angle to end angle. The line style
parameter does not affect arcs and circles.
• BAR:
– Purpose: Draws a 2D bar.
– Syntax: void bar(int left, int top, int right, int bottom);
Lab Manual - Subject Name
5
VPCOE, Baramati
Graphics functions and Graphics Editor
1.1. GRAPHICS FUNCTIONS
– Comments: This function draws a filled in rectangular, two dimensional bar. The bar is filled
using the current fill pattern and fill color. bar () does not outline the bar. To draw an
outlined two dimensional bar, use bar3d() with depth equal to 0 (zero).
• CIRCLE:
– Purpose: Draws a circle with specified center and radius.
– Syntax: void circle(int xcenter, int ycenter, int radius);
• DRAWPOLY:
– Purpose: Draws the outline of the polygon.
– Syntax: void far drawpoly(int numpoints, int far *polypoints);
– Comments: Drawpoly() draws a polygon with numpoints, using the current line style and
color. Polypoints points to a sequence of (num*2) integer. Each pair of integers gives the x
and y coordinates of a point on the polygon. In order to draw a closed figure with n vertices.
You must pass n+1 coordinates to drawpoly () where the nth coordinate is equal to 0th.
• ELLIPSE:
– Purpose:Draws an elliptical arc.
– Syntax: void far ellipse(int x, int y, int startangle, int endangle, int xradius, int yradius);
– Comments: Ellipse () draws an elliptical arc in the current drawing color with its center at
(x,y) and the horizontal and vertical axes given by xradius and yradius. The ellipse travels
from startangle to endangle. The linestyle parameter doesn’t affect an ellipse. Only the
thickness parameter is used.
• FILLPOLY:
– Purpose:Draws and fills a polygon.
– Syntax: void far fillpoly(int numpoints, int far *polypoints);
– Comments: fillpoly() draws the outline of a polygon with num points in the current line style
and color and then fills the polygon using the current fillpattern and fillcolor polypoints point
to the sequence of (num*2) integers each pair of integers give the x and y coordinates of a
point on the polygon.
• FLOODFILL:
– Purpose:Flood fills the bounded region.
– Syntax: void far floodfill(int x, int y, int border);
Lab Manual - Subject Name
6
VPCOE, Baramati
Graphics functions and Graphics Editor
1.1. GRAPHICS FUNCTIONS
– Comments: (x, y) is a seed point within the enclosed area to be filled. The area bounded by
the color border is flooded with fill pattern and filll color.
• SETBACKCOLOR:
– Purpose:Sets the current background color using the palette
– Syntax:void far setbkcolor(int color);
– Comments: The color parameter can take a value from 0 to 15. If you use an EGA or VGA
and you change the palette colors.
• SETFILLPATTERN:
– Purpose:Selects a user defined fill pattern
– Syntax:void far setfillpattern(char far *upattern, int color);
• GETASPECTRATIO:
– Purpose: Retrieves the current graphics mode’s aspect ratio.
– Syntax: void far getaspectratio(int far *xasp, int far *yasp);
– Comments: The y aspect factor , *yasp is normalized to 10,000 on all graphics adapter except
the VGA; xasp (the x aspect factor) is less than *yasp because the pixels are faller than they
are wide. On the VGA, which has ”square” pixel, *asp equals *yasp.
• GETMAXX:
– Purpose:Returns maximum x screen coordinate in the current mode
– Syntax: int far getmaxx(void);
• GETMAXY:
– Purpose:Returns maximum y screen coordinate in the current mode
– Syntax: int far getmaxy(void);
• GETPIXEL:
– Purpose:gets the color of a specified pixel
– Syntax: unsigned far getpixel(int x, int y);
• GETX:
– Purpose:returns the current position’s x coordinate
– Syntax: int far getx(void);
Lab Manual - Subject Name
7
VPCOE, Baramati
Graphics functions and Graphics Editor
1.1. GRAPHICS FUNCTIONS
• GETY:
– Purpose:returns the current position’s Y coordinate
– Syntax: int far gety(void);
• LINE:
– Purpose:draws a line between two specified points
– Syntax: void far line(int x1, int y1, int x2, int y2);
– Comments: Line() draws a line in the current color using current line style and thickness.
• LINEREL:
– Purpose: Draws a line a relative distance from the current position
– Syntax: void far linerel(int dx, int dy);
– Comments: Linerel() draws a line from the CP to a point that is a relative distance (dx,dy)
from the CP. The CP is advanced by (da,dy).
• LINETO:
– Purpose: draws a line from the current position (CP) to (x,y)
– Syntax:void far lineto(int x, int y);
– Comments: After line drawing the CP is moved to (x,y)
• MOVEREL:
– Purpose:Moves the current position (CP) a relative distance
– Syntax:void far moverel(int dx, int dy);
– Comments: Moverel() moves the current position [CP] dx pixel in the x direction and dy
• MOVETO:
– Purpose: moves the CP to (x, y)
– Syntax:void far moveto(int x, int y);
• RECTANGLE:
– Purpose: Draws a rectangle (graphics mode)
– Syntax:void far void far rectangle(int left, int top, int right, int bottom);
– Comments:rectangle draws a rectangle in the current line style, thickness, and drawing color.
Lab Manual - Subject Name
8
VPCOE, Baramati
Graphics functions and Graphics Editor
1.1. GRAPHICS FUNCTIONS
• OUTTEXT:
– Purpose: displays a string in the viewport (graphics mode)
– Syntax:void far outtext(char far *textstring);
– Comments: outtext() displays the string at the CP using the justification setting and thecurrent font direction and size. This function will not work in text mode.
• OUTTEXTXY:
– Purpose: outtextxy displays a string at the specified location (graphics mode)
– Syntax:void far outtextxy(int x, int y, char far *textstring);
– Comments: outtextxy() displays the string in the viewport of the given position (x, y) using
the justification setting and the current font direction and size. This function will not work
in text mode.
• SETTEXTSTYLE:
– Purpose:Sets the current text characteristics
– Syntax:void far settextstyle(int font, int direction, int charsize);
– Comments: settextstyle sets the text font, the direction in which text is displayed, and the
size of the characters.
1.1.5
Post Lab
We have studied various graphics functions related to:
1. Initializing graphics mode.
2. Switching between graphics and text mode.
3. Graphics primitives.
4. Color, Color Palette.
5. Aspect ratio
6. fonts, alignment, size, orientation and justification.
7. Graphics Primitives
By studing these functions we can write graphics programs and can draw various objects on the screen
Lab Manual - Subject Name
9
VPCOE, Baramati
Graphics functions and Graphics Editor
1.1.6
1.1. GRAPHICS FUNCTIONS
Viva Questions
1. Syntax of each function explained in the assignment
2. description of each function explained in the assignment
Lab Manual - Subject Name
10
VPCOE, Baramati
Graphics functions and Graphics Editor
1.2
1.2.1
1.2. GRAPHICS EDITOR
Graphics Editor
Problem Statement
Writing Graphics Editor
1.2.2
Prelab
Knowledge of any graphics editor like Paint, Photoshop etc.
1.2.3
Hardware and Software Requirement
• Hardware requirement :
– Intel pentium III/M 1.4 GHz, or Pentium IV 1.4 GHz minimum
– Microsoft Windows XP/2000
– 512 MB RAM (1 GB+ recommended) 900 MB free hard disk space
– SVGA or higher-resolution monitor (XGA recommended)
• Software Requirement
– Turbo c
1.2.4
Theory: Graphics Editor
Paint is a drawing tool you can use to create simple or elaborate drawings. These drawings can be
either black and white or color, and can be saved as bitmap files. You can print your drawing, use
it for your desktop background, or paste it into another document. You can even use Paint to view
and edit scanned photos. You can also use Paint to work with pictures, such as .jpg, .gif, or .bmp
files. You can paste a Paint picture into another document you’ve created, or use it as your desktop
background the following tasks are frequently performed when you use Paint. Draw a straight line Draw
horizontal, vertical, or diagonal line. Step by step procedure Fill an area with color Use foreground and
background colors to fill areas of your graphic. Step by step procedure Set a Paint picture as your
desktop background Use a picture you created in Paint as the background for your desktop. Step-bystep procedure Display gridlines to make fine adjustments with color By displaying gridlines, you can
easily make detailed changes to the design and color of an image. Step-by-step procedure Work with
images from a digital camera or scanner If you have a device such as a digital camera or a scanner
connected to your compute, you can acquire an image from that device and work on the image in Paint.
Step by step procedure Send an image using e-mail After you are done editing or working on an image,
you can send it to friends, business associates, or anyone else using email. Step-by-step procedure
Lab Manual - Subject Name
11
VPCOE, Baramati
Graphics functions and Graphics Editor
1.2. GRAPHICS EDITOR
To draw a straight line
1. In the toolbox, click Line.
2. Below the toolbox, click a line width.
3. Drag the pointer to draw the lin
Notes:
• You can draw a perfectly horizontal, vertical, or 45 degree diagonal line by holding down SHIFT
while dragging.
• When you drag the pointer, the foreground color is used. To use the background color, hold down
the right mouse button and drag the pointer.
To draw an ellipse or circle
1. In the toolbox, click Ellipse.
2. Below the toolbox, click a fill style.
3. Drag the pointer to draw the ellipse or circle.
Notes:
• When you drag the pointer, the foreground color is used to draw the line surrounding the shape,
and the background color is used to fill the shape. To use the background color to draw the line
surrounding the shape and the foreground color to fill the shape, hold down the right mouse button
and drag the pointer.
• You can draw a circle by holding down SHIFT while you drag the pointer.
• The border width of the circle or ellipse is the same as the thickness selected for the line tools. To
change the border thickness, click the line or curve tool in the toolbox, and then click the thickness
you want in the box below the toolbox.
To draw a rectangle or square
1. In the toolbox, click Line.
2. Below the toolbox, click a line width.
3. Drag the pointer to draw the lin
Notes:
Lab Manual - Subject Name
12
VPCOE, Baramati
Graphics functions and Graphics Editor
1.2. GRAPHICS EDITOR
• You can draw a perfectly horizontal, vertical, or 45 degree diagonal line by holding down SHIFT
while dragging.
• When you drag the pointer, the foreground color is used. To use the background color, hold down
the right mouse button and drag the pointer.
To draw an ellipse or circle
1. In the toolbox, click Ellipse.
2. Below the toolbox, click a fill style.
3. Drag the pointer to draw the ellipse or circle.
Notes:
• When you drag the pointer, the foreground color is used to draw the line surrounding the shape,
and the background color is used to fill the shape. To use the background color to draw the line
surrounding the shape and the foreground color to fill the shape, hold down the right mouse button
and drag the pointer.
• You can draw a circle by holding down SHIFT while you drag the pointer.
• The border width of the circle or ellipse is the same as the thickness selected for the line tools. To
change the border thickness, click the line or curve tool in the toolbox, and then click the thickness
you want in the box below the toolbox.
To draw a rectangle or square
1. In the toolbox, click Rectangle to create a square cornered shape, or click Rounded Rectangle to
create a round cornered shape.
2. Below the toolbox, click a fill style.
3. To draw a rectangle, drag the pointer diagonally in the direction you want.
4. To draw a square, hold down SHIFT while dragging the pointer.
Notes:
• When you drag the pointer, the foreground color is used to draw the line surrounding the shape,
and the background color is used to fill the shape. To use the background color to draw the line
surrounding the shape and the foreground color to fill the shape, hold down the right mouse button
and drag the pointer.
Lab Manual - Subject Name
13
VPCOE, Baramati
Graphics functions and Graphics Editor
1.2. GRAPHICS EDITOR
• The border width of the box is the same as the thickness selected for the line tools. To change
the border thickness, click the line or curve tool in the toolbox, and then click the thickness you
want in the box below the toolbox.
To draw a polygon
1. In the toolbox, click Polygon.
2. Below the toolbox, click a fill style.
3. Drag the pointer to draw a straight line.
4. Click once at each position where you want a new line segment to appear.
5. Double-click when done.
Notes:
• To use only 45 degree and 90 degree angles, hold down the SHIFT key while dragging the pointer.
• When you drag the pointer, the foreground color is used. To use the background color, hold down
the right mouse button and drag the pointer.
• The border width of the polygon is the same as the thickness selected for the line tools. To change
the border thickness, click the line or curve tool in the toolbox, and then click the thickness you
want in the box below the toolbox.
1.2.5
PostLab
We have studied Graphics editor and function. By studying this we can use any graphics editor efficiently.
1.2.6
Viva Questions
How to draw each object explained in the assignment
Lab Manual - Subject Name
14
VPCOE, Baramati
Assignment 2
Line and Circle Drawing Algorithms
2.1
Problem Statement
Write a program to implement following algorithms :
1. DDA Line Drawing Algorithm
2. Bresenham Line Drawing Algorithm
3. Bresenham Circle Drawing Algorithm
2.2
Hardware and Software Requirement
• Hardware requirement :
– Intel pentium III/M 1.4 GHz, or Pentium IV 1.4 GHz minimum
– Microsoft Windows XP/2000
– 512 MB RAM (1 GB+ recommended) 900 MB free hard disk space
– SVGA or higher-resolution monitor (XGA recommended)
• Software Requirement
– Turbo c
2.3
2.3.1
Theory
DDA Algorithm
In computer graphics, a hardware or software implementation of a digital differential analyzer (DDA) is
used for linear interpolation of variables over an interval between start and end point. DDAs are used
15
Line and Circle Drawing Algorithms
2.3. THEORY
for rasterization of lines, triangles and polygons. In its simplest implementation the DDA Line drawing
algorithm interpolates values in interval [(xstart, ystart), (xend, yend)] by computing for each xi the
equations
xi = xi−1 + 1/m
(2.1)
yi = yi−1 + m,
(2.2)
where,
4x = xend − xstart and
4y = yend − ystart and
m = 4y/4x.
The dda is a scan conversion line algorithm based on calculating either dy or dx. A line is sampled
at unit intervals in one coordinate and corresponding integer values nearest the line path are determined
for other coordinates. Considering a line with positive slope, if the slope is less than or equal to 1, we
sample at unit x intervals (dx=1) and compute successive y values as
yk+1 = yk + m,
(2.3)
Subscript k takes integer values starting from 0, for the 1st point and increases by until endpoint is
reached. y value is rounded off to nearest integer to correspond to a screen pixel. For lines with slope
greater than 1, we reverse the role of x and y i.e. we sample at dy=1 and calculate consecutive x values
as
xk+1 = xk + 1/m
(2.4)
Similar calculations are carried out to determine pixel positions along a line with negative slope. Thus,
if the absolute value of the slope is less than 1, we set dx=1 if i.e. the starting extreme point is at the left.
Algorithm:1. Start
2 . i f | x2 − x1 | >= | y2 − y1 | then l e n g t h = | x2 − x1 | e l s e l e n g t h = | y2 − y1 |
Lab Manual - Subject Name
16
VPCOE, Baramati
Line and Circle Drawing Algorithms
2.3. THEORY
3 . dx = ( x2 − x1 ) / l e n g t h .
4 . dy = ( y2 − y1 ) / l e n g t h .
5 . x = x1 + 0 . 5 ∗ s i g n ( dx )
/∗ x1 assumed t o be a t t h e l e f t m o s t ∗/
6 . y = y1 + 0 . 5 ∗ s i g n ( dy ) .
7 . Let i = 1
8 . i f i > l e n g t h then go t o s t e p no 14
9 . P l o t ( t r u n ( x ) , trunk ( y ) )
10.
x = x + dx ;
11.
y = y + dy ;
12.
Increment i
13.
go t o s t e p no 8
14.
Stop .
Drawbacks of DDA:-
1. Algoritham is slow
2. floating point calculations are required
2.3.2
Bresenhams Line drawing Algorithm
Bresenham’s line algorithm is an algorithm that determines which points in an n-dimensional raster
should be plotted in order to form a close approximation to a straight line between two given points. It
is commonly used to draw lines on a computer screen, as it uses only integer addition, subtraction and
bit shifting all of which are very cheap operations in standard computer architectures. It is one of the
earliest algorithms developed in the field of computer graphics.
Input t o t h e a l g o r i t h m :
( x1 , y1 ) and ( x2 , y2 ) t h e i n t e g e r v a l u e s o f end co−o r d i n a t e s o f a l i n e segment .
Output o f t h e a l g o r i t h m :
Turning on t h e p i x e l s on t h e l i n e o r c l o s e t o t h e l i n e .
Data v a r i a b l e s :
(X1Y1 ) , ( X2 , y2 )
dx , dy
:
:
a r e i n t e g e r v a r i a b l e s r e p r e s e n t i n g end co−o r d i n a t e s .
i n t e g e r s r e p r e s e n t i n g d i f f e r e n c e i n x and y v a l u e s o f t h e c o o r d i n a t e s ’
respectively .
Lab Manual - Subject Name
17
VPCOE, Baramati
Line and Circle Drawing Algorithms
2.3. THEORY
i n t e g e r s used t o s t o r e v a l u e o f e x p r e s s i o n 2∗ ( dy − dx ) and 2∗ dy b e f o r e
C1 , c2
:
x,y
: i n t e g e r s used f o r p l o t t i n g t h e p i x e l
xend
: i n t e g e r s e t t o h i g h e s t o f x v a l u e amongst x1 and x2 I
n t e g e r used a s a d e c i s i o n v a r i a b l e .
Algorithm Bresenham l i n e g e n e r a t i o n
Step 1 .
Start
Step 2 .
dx =
Step 3 .
dy = | y2 − y1 |
Step 4 .
d = 2∗ dy ∗ dx ; { i n i t i a l i z a t i o n o f d e c i s i o n v a r i a b l e }
Step 5 .
c1 = 2 ∗ ( dy − dx ) ; { p r e c a l c u l a t i n g f i r s t e x p r e s s i o n }
Step 6 .
c2 = 2 ∗ dy ; { p r e c a l c u l a t i n g s e c o n d e x p r e s s i o n }
Step 7 .
i f ( x1> x2 ) then
| x2 − x1 |
// dx i s s e t t o p o s i t i v e x d i f f e r e n c e
// dy i s s e t t o p o s i t i v e y d i f f e r e n c e
{
x = x2
;
y = y2 ;
xend = x1 ;
}
else
{
x = x1 ;
y = y1 ;
xend = x2 ;
}
Step 8 .
plot (x , y)
Step 9 .
i f ( x>= xend ) then go t o s t e p no 1 4 .
Step 1 0 .
x = x + 1 ; { i n c r e m e n t x v a l u e by one p i x e l } Step 1 1 .
i f ( d > = 0 ) then { check
{
d = d + c1 ;
}
y = y + 1 ; { increment y value }
else
{
d = d + c2 ;
}
Lab Manual - Subject Name
18
VPCOE, Baramati
Line and Circle Drawing Algorithms
Step 1 2 .
plot (x , y ) ;
Step 1 3 .
go t o s t e p no 9
Step 1 4 .
stop .
2.3. THEORY
Advantages Of Bresenhams Algorithm:
1. uses only integer arithmetic
2. Fast as compared to DDA
Lab Manual - Subject Name
19
VPCOE, Baramati
Line and Circle Drawing Algorithms
2.3.3
2.3. THEORY
Bresenhams Circle drawing Algorithm
The equation for a circle is:
x2 + y 2 = r 2
(2.5)
where r is the radius of the circle So, we can write a simple circle drawing algorithm by solving the
equation for y at unit x intervals using:
y=±
p
r 2 − x2
(2.6)
To make circle drawing algorithm more efficient bresenham noticed that circles centred at (0, 0) have
eight-way symmetry
Figure 2.1: Concept of bresenhams Algorithm
Because of the continuity of a circle and because the maxima along both axes is the same, we know
we will not be skipping x points as we advance in the sequence. Usually we will stay on the same x
coordinate, and sometimes advance by one. Additionally, we need to add the midpoint coordinates when
setting a pixel. These frequent integer additions do not limit the performance much, as we can spare
those square (root) computations in the inner loop in turn. Again the zero in the transformed circle
equation is replaced by the error term. The initialization of the error term is derived from an offset of
pixel at the start. Until the intersection with the perpendicular line, this leads to an accumulated value
of in the error term, so that this value is used for initialization. The frequent computations of squares
in the circle equation, trigonometric expressions and square roots can again be avoided by dissolving
Lab Manual - Subject Name
20
VPCOE, Baramati
Line and Circle Drawing Algorithms
2.3. THEORY
everything into single steps and using recursive computation of the quadratic terms from the preceding
iterations. Below is an implementation of the Bresenham Algorithm for a full circle in C. Here another
variable for recursive computation of the quadratic terms is used, which corresponds with the term
above. It just has to be increased by 2 from one step to the next
Algorithm:
Bresenham C i r c l e ( Xc , Yc , R ) :
D e s c r i p t i o n : Here Xc and Yc d e n o t e t h e x
c o o r d i n a t e and y
coordinate of the c e n t e r
of the c i r c l e . R i s the radius .
1 . S e t X = 0 and Y = R
2 . Set D = 3
2R
3 . Repeat While (X < Y)
4 . C a l l Draw C i r c l e ( Xc , Yc , X, Y)
5 . Set X = X + 1
6 . I f (D < 0 ) Then
7 . D = D + 4X + 6
8. Else
9 . Set Y = Y
1
1 0 . D = D + 4 (X
Y) + 10
[ End o f I f ]
1 1 . C a l l Draw C i r c l e ( Xc , Yc , X, Y)
[ End o f While ]
12. Exit
Draw C i r c l e ( Xc , Yc , X, Y ) :
1 . C a l l P u t P i x e l ( Xc + X, Yc , + Y)
2 . C a l l P u t P i x e l ( Xc − X, Yc , + Y)
3 . C a l l P u t P i x e l ( Xc + X, Yc , − Y)
4 . C a l l P u t P i x e l ( Xc − X, Yc , − Y)
5 . C a l l P u t P i x e l ( Xc + Y, Yc , + X)
6 . C a l l P u t P i x e l ( Xc − Y, Yc , + X)
7 . C a l l P u t P i x e l ( Xc + Y, Yc , − X)
8 . C a l l P u t P i x e l ( Xc − Y, Yc , − X)
9 . Exit
Lab Manual - Subject Name
21
VPCOE, Baramati
Line and Circle Drawing Algorithms
2.4
2.4. POSTLAB
Postlab
We have studied scan conversion and following algorithms.
1. DDA line drawing algorithm.
2. Bresenhams line drawing algorithm.
3. Bresenhams circle drawing algorithm
2.5
Viva Questions
1. Explain the concept of DDA line drawing algorithm.
2. What is increment factor in x DDA algorithm
3. Explain the concept of Bresenhams line drawing algorithm.
4. What is increment factor in x Bresenhams algorithm
5. Explain the concept of Bresenhams circle drawing algorithm.
6. Explain 8 way symmetry of bresenhams algorithm
7. Why we use putpixel function? Expain parameters of it.
Lab Manual - Subject Name
22
VPCOE, Baramati
Assignment 3
Polygon filling algorithms
3.1
Problem statement
Write a program to implement following Polygon filling algorithms.
1. Boundry fill algorithm
2. Flood fill algorithm
3. Scan line algorithm
3.2
PreLab
• Concept of polygons.
• computer graphics function
• color concepts
3.3
Hardware and Software Requirement
• Hardware requirement :
– Intel pentium III/M 1.4 GHz, or Pentium IV 1.4 GHz minimum
– Microsoft Windows XP/2000
– 512 MB RAM (1 GB+ recommended) 900 MB free hard disk space
– SVGA or higher-resolution monitor (XGA recommended)
• Software Requirement
23
Polygon filling algorithms
3.4. THEORY
– Turbo c
3.4
Theory
A polygon can be generally thought of as a shape. That shape is formed by line segments that are
placed end to end, creating a continuous closed path. Polygons can be divided into three basic types:
convex, concave, and complex.
• Convex polygons are the simplest type of polygon to fill. To determine whether or not a polygon
is convex, ask the following question: Does a straight line connecting ANY two points that are
inside the polygon intersect any edges of the polygon? If the answer is no, the polygon is convex.
This means that for any scan-line, the scan-line will cross at most two polygon edges (not counting
any horizontal edges). Convex polygon edges also do not intersect each other.
Figure 3.1: Convex polygon
• Concave polygons are a superset of convex polygons, having fewer restrictions than convex polygons. The line connecting any two points that lie inside the polygon may intersect more than two
edges of the polygon. Thus, more than two edges may intersect any scan line that passes through
the polygon. The polygon edges may also touch each other, but they may not cross one another.
Lab Manual - Subject Name
24
VPCOE, Baramati
Polygon filling algorithms
3.4. THEORY
Figure 3.2: Concave polygon
3.4.1
Boundry fill algorithm
1. Start at a point inside a region
2. Paint the interior outward to the edge
3. The edge must be specified in a single color
4. Fill the 4-connected or 8-connected region
Figure 3.3: Boundry fill algorithm
Lab Manual - Subject Name
25
VPCOE, Baramati
Polygon filling algorithms
3.4. THEORY
Algorithm:
v o i d B o u n d a r y F i l l 4 ( i n t x , i n t y , c o l o r newcolor , c o l o r e d g e c o l o r )
{
int current ;
c u r r e n t = ReadPixel ( x , y ) ;
i f ( c u r r e n t != e d g e c o l o r && c u r r e n t != n e w c o l o r )
{
B o u n d a r y F i l l 4 ( x+1, y , newcolor , e d g e c o l o r ) ;
B o u n d a r y F i l l 4 ( x−1, y , newcolor , e d g e c o l o r ) ;
B o u n d a r y F i l l 4 ( x , y+1, newcolor , e d g e c o l o r ) ;
B o u n d a r y F i l l 4 ( x , y−1, newcolor , e d g e c o l o r ) ;
}
}
Lab Manual - Subject Name
26
VPCOE, Baramati
Polygon filling algorithms
3.4.2
3.4. THEORY
Flood Fill Algorithm
• Used when an area defined with multiple color boundaries Start at a point inside a region
• Replace a specified interior color (old color) with fill color
• Fill the 4-connected or 8-connected region until all interior points being replaced
Algorithm:
v o i d F l o o d F i l l 4 ( i n t x , i n t y , c o l o r newcolor , c o l o r o l d C o l o r )
{
i f ( ReadPixel ( x , y ) == o l d C o l o r )
{
F l o o d F i l l 4 ( x+1, y , newcolor , o l d C o l o r ) ;
F l o o d F i l l 4 ( x−1, y , newcolor , o l d C o l o r ) ;
F l o o d F i l l 4 ( x , y+1, newcolor , o l d C o l o r ) ;
F l o o d F i l l 4 ( x , y−1, newcolor , o l d C o l o r ) ;
}
}
Lab Manual - Subject Name
27
VPCOE, Baramati
Polygon filling algorithms
3.4.3
3.4. THEORY
Scan-Line Polygon filling algorithm
for each scan line
Determine the set of intersection points of the scan line with the polygon edges; sort the intersections
points in increasing order by x-value; group the x-values in pairs; for each pair x2n, x2n+1, fill in all
the pixels from (x2n, y) to (x2n+1, y);
1. Initializing All of the Edges: The first thing that needs to be done is determine how the polygon’s
vertices are related. The all edges table will hold this information. Each adjacent set of vertices
(the first and second, second and third, ..., last and first) defines an edge. For each edge, the
following information needs to be kept in a table:
(a) The minimum y value of the two vertices.
(b) The maximum y value of the two vertices.
(c) The x value associated with the minimum y value.
(d) The slope of the edge.
2. Initializing the Global Edge Table: The global edge table will be used to keep track of the edges
that are still needed to complete the polygon. Since we will fill the edges from bottom to top and
left to right. To do this, the global edge table should be inserted with edges grouped by increasing
minimum y values. Edges with the same minimum y values are sorted on minimum x values as
follows:
• Place the first edge with a slope that is not equal to zero in the global edge table.
• If the slope of the edge is zero, do not add that edge to the global edge table.
• For every other edge, start at index 0 and increase the index to the global edge table once
each time the current edge’s y value is greater than that of the edge at the current index in
the global edge table.
• Next, increase the index to the global edge table once each time the current edge’s x value is
greater than and the y value is less than or equal to that of the edge at the current index in
the global edge table.
3. Initializing Parity The initial parity is even since no edges have been crossed yet.
4. Initializing the Scan-Line The initial scan-line is equal to the lowest y value for all of the global
edges. Since the global edge table is sorted, the scan-line is the minimum y value of the first entry
in this table.
Lab Manual - Subject Name
28
VPCOE, Baramati
Polygon filling algorithms
3.5. POSTLAB
5. Initializing the Active Edge Table Since the global edge table is ordered on minimum y and x
values, search, in order, through the global edge table and, for each edge found having a minimum
y value equal to the current scan-line, append the edge information for the maximum y value, x
value, and 1/m to the active edge table. Do this until an edge is found with a minimum y value
greater than the scan line value.
6. Filling the Polygon
(a) Starting with the initial scan-line, until the active edge table is empty, do the following:
(b) Draw all pixels from the x value of odd to the x value of even parity edge pairs.
(c) Increase the scan-line by 1.
(d) Remove any edges from the active edge table for which the maximum y value is equal to the
scan line.
(e) Update the x value for for each edge in the active edge table using the formula x1 = x0 +
1/m. (This is based on the line formula and the fact that the next scan-line equals the old
scan-line plus one.)
(f) Remove any edges from the global edge table for which the minimum y value is equal to the
scan-line and place them in the active edge table.
(g) Reorder the edges in the active edge table according to increasing x value. This is done in
case edges have crossed.
3.5
PostLab
We have studied the basics of Polygon concepts & filling algorithms. We have implemented following
polygon filling algorithms
1. Boundry fill algorithm
2. Flood fill algorithm
3. Scan line algorithm
3.6
Viva Questions
1. what is convex polygon?
2. what is concave polygon?
3. what is 4-connected and 8-connected pixel?
Lab Manual - Subject Name
29
VPCOE, Baramati
Polygon filling algorithms
3.6. VIVA QUESTIONS
4. What is seed point?
5. Explain Boundry fill algorithm
6. Explain Flood fill algorithm
7. Explain the formula for calculation intersection points in Scan-line algorithm
8. explain Scan-line algorithm
Lab Manual - Subject Name
30
VPCOE, Baramati
Assignment 4
2-D Transformations
4.1
Problem Statement
Implement following 2-D transformations in c++
1. Translation
2. Rotation
3. Scaling
4. Reflection
(a) reflection with respect to x-axis
(b) reflection with respect to y-axis
(c) reflection with respect to origin
(d) reflection with respect to x=y line
(e) reflection with respect to x=-y line
5. Shearing
(a) X-Shearing
(b) Y-shearing
4.2
Prelab
1. Concept of 2-D Transformation
2. World co-ordinate system
31
2-D Transformations
4.3. HARDWARE AND SOFTWARE REQUIREMENT
3. Device co-ordinate system
4. Transformation Matrices
4.3
Hardware and Software Requirement
• Hardware requirement :
– Intel pentium III/M 1.4 GHz, or Pentium IV 1.4 GHz minimum
– Microsoft Windows XP/2000
– 512 MB RAM (1 GB+ recommended) 900 MB free hard disk space
– SVGA or higher-resolution monitor (XGA recommended)
• Software Requirement
– Turbo c
4.4
4.4.1
Theory
Translation
Moving object in horizontal or vertical direction is called as translation In a translation transformation
all the points in the object are moved in a straight line in the same direction. The size, the shape and
the orientation of the image are the same as that of the original object. Same orientation means that
the object and image are facing the same direction.
Translation matrix :

1


0

tx
0
0
ty

0


0

1
t r i a n g l e = { p1 = ( 1 , 0 ) , p2 = ( 2 , 0 ) , p3 = ( 1 . 5 , 2 ) }
Lab Manual - Subject Name
32
VPCOE, Baramati
2-D Transformations
4.4. THEORY
Figure 4.1: Translation of triangle
4.4.2
Rotation
A rotation is a transformation in which the object is rotated about a fixed point. The direction of
rotation can be clockwise or anticlockwise.
The fixed point in which the rotation takes place is called the centre of rotation. The amount of
rotation made is called the angle of rotation. Rotation matrix :

cosΘ


−sinΘ

0
sinΘ
cosΘ
0
0



0

1
Figure 4.2: Rotation of triangle
Lab Manual - Subject Name
33
VPCOE, Baramati
2-D Transformations
4.4.3
4.4. THEORY
scaling
Scaling is a kind of transformation in which the size of an object is changed. Remember the change
is size does no mean any change in shape. This kind of transformation can be carried out for polygons
by multiplying each coordinate of the polygon by the scaling factor. Sx and Sy which in turn produces
new coordinate of (x,y) as (x’,y’).
Scaling Matrix

sx


0

0
0
sy
0
0



0

1
here sx and sy are the scaling factors
Figure 4.3: Scaling
4.4.4
Reflection
Reflection is nothing more than a rotation of the object by 180o. In case of reflection the image formed
is on the opposite side of the reflective medium with the same size. Therefore we use the identity matrix
with positive and negative signs according to the situation respectively.
Matrices
1. Reflection about X-axis
Lab Manual - Subject Name

1

0
34
0


−1
VPCOE, Baramati
2-D Transformations
4.4. THEORY
Figure 4.4: Reflections
2. Reflection about Y-axis

−1

0

0

1
3. Reflection about origin

−1

0
4. Reflection about X=Y line
4.4.5

0

1
0


−1
1
0


shearing
In mathematics, shear mapping or transvection is a particular kind of linear mapping.
Linear mapping is a function between two vector spaces that preserves the operations of
vector addition and scalar multiplication. A shear mapping’s effect leaves all points on one
axis fixed, while the other points are shifted parallel to the axis by a distance proportional
to their perpendicular distance from that axis. Shear mappings carry areas into equal
areas and volumes into equal volumes, as they preserve the width, length, and etc. of
Lab Manual - Subject Name
35
VPCOE, Baramati
2-D Transformations
4.5. POSTLAB
parallelograms.
X-Shear: in X-shear y co-ordinates remains same but x co-ordinates changes with respect
to shearing factor.
X-shear matrix

1
0
0





Shx 1 0


0
0 1
Y-Shear: in Y-shear x co-ordinates remains same but y co-ordinates changes with respect
to shearing factor.
Y-shear matrix

1


0

0
Shy
1
0

0


0

1
Figure 4.5: Shearing
4.5
Postlab
We have studied different type of transformation. by studying these transforations we can
apply those in animation programs.
4.6
Viva Questions
1. what are the homogenous co-ordinate
2. Explain translation.
3. Explain rotation of a polygon about origin.
Lab Manual - Subject Name
36
VPCOE, Baramati
2-D Transformations
4.6. VIVA QUESTIONS
4. Explain rotation of a polygon about an arbitory point.
5. Explain the concept of scaling.
6. Explain Concept of 2-D Transformation
7. Explain World co-ordinate system
8. Explain Device co-ordinate system
9. What is the need of transformations
Lab Manual - Subject Name
37
VPCOE, Baramati
Assignment 5
Animation Tool
5.1
Problem statement
Create a animation using flash player animation tool
5.2
Pre-Lab
Knowledge of graphics editor and fundamental concepts of animations.
5.3
Hardware and Software Requirement
• Hardware requirement :
– Intel pentium III/M 1.4 GHz, or Pentium IV 1.4 GHz minimum
– Microsoft Windows XP/2000
– 512 MB RAM (1 GB+ recommended) 900 MB free hard disk space
– SVGA or higher-resolution monitor (XGA recommended)
• Software Requirement
– Turbo c
38
Animation Tool
5.4
5.4. THEORY
Theory
5.4.1
Introduction to flash animation tool
Flash 5.0 is a vector-based technology that supports animation, sound and interactivity.
It evolved from a product ”Splash” in the mid 90s and aims at delivering scalable and
high quality web content over the Internet.
Flash player is a viewer to show Flash content (SWF), which is either generated by
the Macromedia Flash authoring tools or exported from other leading designing tools.
Flash player is small (about 200K) and quick to automatic download for Windows, Linux,
Solaris, Macintosh, IRIX, and Java through most web browsers.
User can create Flash content (SWF) with Macromedia authoring software, such as
Flash 5, then save and publish the result artwork (including text, graphics, animation,
sound objects and attached actions) as flash movie an editable format (.fla) or a final
format (.swf ). The former format can be read by Flash and the objects (items on the
stage) can be altered. The later is a compact binary format optimized for web delivering,
therefore, not editable.
5.4.2
Features of flash player
• User-friendly Interface: Flash 5 provides an easy to access environment for creating
and editing Flash movies (animation with sound and interactivity).
• Enhanced capability of creating artwork
• Interactivity and Action Script
5.5
Procedure
You can create all kinds of different elements for the web or for CD-ROMs and devices
using Flash. First, you create a file in the Flash authoring tool, which you use to output
SWF files. SWF files are the files that you can put online when you embed them in a web
page. The Macromedia Flash Player plug-in then displays the SWF file, so your website
visitors can view or interact with the content.
Your SWF file can contain video, MP3 sound, animations, images, data, and so forth.
The benefit of using an SWF file over other formats is that the Flash Player plug-in is
incredibly common. Let’s get started building a banner:
Lab Manual - Subject Name
39
VPCOE, Baramati
Animation Tool
5.5. PROCEDURE
1. Open the Flash application.
By default, Flash displays the Start Page (see Figure 1), which enables you to select a
recently edited document, create a new Flash document (or other kinds of documents
if you use Flash Professional 8), or create a new document using a prebuilt template.
Figure 5.1: Flash displays the Start Page when it is launched
2. Click Flash Document in the Create New column on the Start Page to create a blank
document. If Flash doesn’t display the Start Page (the feature might have been
disabled earlier if you share a computer), you can select File ¿ New from the main
menu to create a new document. Make sure the General tab is active, select Flash
document, and click OK.
3. Select File ¿ Save As from the main menu. Name the file banner.fla and click Save
when you’re done. Flash saves editable documents as FLA files. From the FLA
document, you export (or compile) SWF files that you can embed in an HTML page.
Flash Player, installed on most computers, plays the SWF files that you export from
Flash.
4.
Lab Manual - Subject Name
40
VPCOE, Baramati
Animation Tool
5.5. PROCEDURE
It’s a good idea to save a new document when you start working with it (and often thereafter) so you don’t lose any of your hard work. After you finish saving the file, proceed to
the following exercise where you will change the document’s properties.
Changing Document Properties
At this point you’re looking at a blank canvas surrounded by many controls (see Figure
2). The large white square is called the Stage, and it’s where you place assets you want
to display in the SWF file, such as images, buttons, text, or animations. The Stage and
panels are commonly called the Flash workspace or authoring environment.
Around the
Figure 5.2: The Flash authoring environment includes a Stage where you can place and
manipulate assets.
Stage you see a variety of panels. The panel on the left is called the Tools panel (see
Figure 5.3). This panel includes tools you can use to create and modify documents, such
as tools you use to draw and make selections.
Use the Tools panel to draw and make selections. You use the Selection tool (the black
arrow) to make selections in these tutorials.
A panel near the bottom of the Flash application is titled Properties (select Window
Lab Manual - Subject Name
41
VPCOE, Baramati
Animation Tool
5.5. PROCEDURE
Figure 5.3: The Flash tools panel
¿ Properties ¿ Properties if you don’t see the panel). This panel is called the Property
inspector (see Figure 4). This panel enables you to change various properties of whatever
is currently selected in your document (such as an image or a frame) or set properties
for the entire SWF file (such as the frame rate or dimensions). If you don’t have any
objects or frames selected, the Property inspector enables you to modify properties for
the document itself.
1. Open the Property inspector (select Window ¿ Properties ¿ Properties) and click the
button next to the text that says Size to open the Document Properties dialog box.
2. Type 160 into the Width text box and 600 into the Height text box. When you type
new values into these text boxes, you resize the dimensions of your FLA document.
There is a reason that you need to use these specific dimensions. Because you’re
Lab Manual - Subject Name
42
VPCOE, Baramati
Animation Tool
5.5. PROCEDURE
Figure 5.4: The Flash tools panel
creating a banner, you should use a standard banner size. In this tutorial, you’re
creating a ”wide skyscraper.” For a list of standardized banner sizes, check out the
Interactive Advertising Bureau’s page on Interactive Marketing Units.
3. 3. Click OK when you finish entering the new dimensions to return to the authoring environment. When you return to the authoring environment, notice how the
dimensions of your document change. You can also change the current document’s
background color and frame rate directly in the Property inspector, without going
to the Document Properties dialog box. You’ll find information about frame rate in
Part 2 of this tutorial.
Remember to save your work (File ¿ Save) before you continue.
Importing Graphics When you work with Flash, you’ll often import assets into a document. Perhaps you have a company logo or graphics that a designer has provided for
your work. You can import a variety of assets into Flash, including sound, video, bitmap
images, and other graphic formats (such as PNG, JPEG, AI, and PSD).
Imported graphics are stored in the document’s library. The library stores both the
assets that you import into the document and symbols that you create within Flash. A
symbol is a vector graphic, button, font, component, or movie clip that you create once
and can reuse multiple times. So you don’t have to draw your own graphics in Flash: You
can import an image of a garden variety gnome from the tutorial source file. Before you
proceed, make sure that you copy the images (from My Network Places’Class Data’Web
Animation’gnome1) to the same directory as your banner.fla document.
1. Select File ¿ Import ¿ Import to Library to import an image into the current document.
2. Navigate to the directory where you extracted the support files, select the gnome.png
image, and click Open (Windows).
Lab Manual - Subject Name
43
VPCOE, Baramati
Animation Tool
5.5. PROCEDURE
Figure 5.5: Browse to the folder on your hard drive that contains an image to import into
your Flash document.
3. The image is imported into the document’s library
4. Select Window ¿ Library to open the Library panel. You’ll see the image you just
imported, gnome.png, in the document’s library.
5. Select the imported image in the library and drag it onto the Stage. Don’t worry
about where you put the image on the Stage because you’ll set the coordinates for
the image later. When you drag something onto the Stage, you will see it in the SWF
file when the file plays.
6. Click the Selection tool and select the instance on the Stage. If you look at the
Property inspector you’ll notice that you can modify the image’s width and height,
as well as the image’s X and Y position (also called coordinates) on the Stage
7. Type 0 into the X text box and type 0 into the Y text box. Doing this sets the X
and Y coordinates both to 0, as shown in Figure 5.6.
Lab Manual - Subject Name
44
VPCOE, Baramati
Animation Tool
5.6. POSTLAB
Figure 5.6: The X and Y coordinates match the registration point, which is the upper left
corner of this random movie clip symbol
5.6
Postlab
By studying this assignment we can create animations in animation tool
5.7
Viva Questions
1. what is frame?
2. what is storyboard?
3. what is timeline?
4. what is keyframe?
5. How to add layers in animation tool?
Lab Manual - Subject Name
45
VPCOE, Baramati
References
[1] David Rogers,Procedural Elements for Computer Graphics, Tata McGraw Hill
[2] Steven Harrington,Computer Graphics A Programming approach,Tata McGraw Hill.
[3] M Paulin Baker,Computer Graphics, Pearson Education.
[4] Amarendra N Sinha, Arun D Udai,Computer Graphics, Tata McGraw Hill 22
46