cg manual 2011

7/28/2019 CG Manual 2011

1/44

Computer Graphics

Savitribai phule Shikshan Prasarak Mandals

S.K.N.Sinhgad College of Engineering,

Pandharpur

LAB MANUAL

Computer Graphics

Class: SE (CSE)

Year-2011-12

By

Prof. Prakash R. Gadekar

1

7/28/2019 CG Manual 2011

2/44

Computer Graphics

Savitribai Phule Shikshan Prasarak Mandals


Pandharpur

CERTIFICATEThis is to certify that Mr. / Miss _________________________

of Class Second Year - CSE, Roll No. _________, Exam Seat No.

_________, has completed all the Term Work / Practical work in

the subject Computer Graphics, satisfactorily in the Department

of ComputerScience and Engineering as prescribed by University

of Solapur in the academic year 2011-2012.

Subject In-charge Head of Department Principal

2

7/28/2019 CG Manual 2011

3/44

Computer Graphics

Savitribai phule Shikshan Prasarak Mandals


Pandharpur

INDEXSr.

No.Title of Experiment Date

Page

No.Remarks

Sign of

Teacher

01 Study of graphics in built function.

02 Program for:DDA line drawing algorithm

03 Program for:Bresenhams line drawing algorithm

04 Program to implement 2-D transformations

05 Program to implement 3-D transformation

06Program for:Bresenhams circle generation algorithm

07. Program to transform object for getting

Orthographic projection of the object

08Program for polygon Filling :1.Seed Fill Algorithm2.Edge Fill Algorithm

09Program for Cohen-Sutherland 2-D LineClipping Algorithm

10 Program for the creation ofBezier Curve

Lab Innovation

3

7/28/2019 CG Manual 2011

4/44

Computer Graphics

Sr.

No.

Title DatePage

No.Remarks

Sign of

Teacher

Signature

4

7/28/2019 CG Manual 2011

5/44

Computer Graphics

Experiment No: - 1

Title :- Study of graphics function

Name :-

Roll No :-

Batch :-

Date :-

Marks :- Signature :-

5

7/28/2019 CG Manual 2011

6/44

Computer Graphics

Experiment No:- 1

Aim:-Develop a program using a graphics inbuilt function.

Objectives:-Learn and understand the functions in graphics Library.

Theory:-

1) Loading computer graphics

When we start with the turbo c editor. We first includes the graphics library to convert the texteditor into graphics editor.To include the graphics library the steps are

i) Select the option menu from the menu bar

ii) Select linker option

iii) Select libraries from linker option

iv) Select graphics library from the libraries window

v) Click on Ok.

2) Initialized the graphics Mode:-

Before writing the computer graphics program, first we initialize the graphics driver andgraphics mode, for that purpose we use detectgraph() function and initgraph() function.

Detectgraph():- determines the graphics driver and chooses mode by checking hardware. Detectgraphdetects your system graphics adaptor and chooses the mode that provide the highest resolution for thatadaptor. If no graphics hardware is detected, detectgraph sets *graphdriver to grNotDetected, andgraphresults returns grNotDetected.The main reason to call detectgraph directly is to override thegraphics mode that detectgraph recommends to initgraph.

Syntax:- detectgraph(&gdriver, &gmode);

Initgraph():-

It initializes graphics system, to start the graphic system , you must first call initgraph(),initgraph initializes the graphic system by loading a graphics driver from disk, then putting into the

graphics mode.

Initgraph resets all graphic settings like color,palette, current position, viewport etc. to their defaults.

Syntax:- initgraph(&gdriver,&gmode,C:\\tc\\bgi);

Bgi is a file that stores the graphics driver and for each bgi driver there are different graphics mode. Inshort, it provides graphics interface.

6

7/28/2019 CG Manual 2011

7/44

Computer Graphics

Inbuilt functions :-

Following are inbuilt functions of graphics library:-

1) Line ():- Line () is used to draw a line.

Line(x1,y1,x2,y2);

2)Circle(): is used to draw the circle.

Syntax: circle(x1,y1,radius);

3)ellipse():- draws an elliptical arc.

Syntax:- ellipse(x,y,stangle,endangle,xradius,yradius);

fillellipse():- draws and fills an ellipse.

Syntax:- fillellipse(x,y,xradius,yradius);

4)drawpoly() :- draws the outline of a polygon, draws a polygon using the current line style and color.

Drawpoly(numpoints,*polypoints);

Numpoints:- specifies number of points

*polypoints :- points to a sequence of (numpoints*2) integers.

fillpoly():-draws and fills a polygon. It draws the outline of a polygon using the current line styleand color.

5)Line style:-

Line styles for getlinesettings and setlinestyle.

SOLID_LINE 0 Solid line

DOTTED_LINE 1 Dotted line

CENTER_LINE 2 Centered line

DASHED_LINE 3 Dashed line

USERBIT_LINE 4 User-defined line style

6)bar:- Draws a bar, bar draws a filled-in, rectangular, two-dimensional bar.

Declaration: void far bar(int left, int top, int right, int bottom);

The bar is filled using the current fill pattern and fill color. bar doesnot outline the bar.

To draw an outlined two-dimensional bar, use bar3d with depth = 0.

7

7/28/2019 CG Manual 2011

8/44

Computer Graphics

7) Fill patterns:- for getfillsettings and setfillstyle.

EMPTY_FILL 0 Background color

SOLID_FILL 1 Solid fill

LINE_FILL 2 ---

LTSLASH_FILL 3

SLASH_FILL 4 , thick lines

BKSLASH_FILL 5 , thick lines

LTBKSLASH_FILL 6

HATCH_FILL 7 Light hatch

XHATCH_FILL 8 Heavy crosshatch

INTERLEAVE_FILL 9 Interleaving lines

WIDE_DOT_FILL 10 Widely spaced dots

CLOSE_DOT_FILL 11 Closely spaced dots

USER_FILL 12 User-defined fill pattern

All but EMPTY_FILL fill with the current fill color. EMPTY_FILL uses the current background color.

(left, top) the rectangle's upper left corner

(right, bottom) the rectangle's lower right corner

The coordinates are in pixels.To draw an outlined two-dimensional bar, use bar3d with depth = 0.

(left, top) the rectangle's upper left corner

(right, bottom) the rectangle's lower right corner

The coordinates are in pixels.

8)bar3d:=Draws a 3-D bar.

Declaration: void far bar3d(int left, int top, int right, int bottom, int depth, int topflag)

bar3d 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 drawn in the current line styleand color.

depth Bar's depth in pixels

8

7/28/2019 CG Manual 2011

9/44

Computer Graphics

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

(left, top) Rectangle's upper left corner

(right, bottom) Rectangle's lower right corner

If topflag is non-zero, a top is put on the bar. If topflag is 0, no top is put on the bar: This makes itpossible to stack several bars on top of oneanother.

9) Getpixel: -get the color of specified pixel

Syntax: -usinged far getpixel(int x ,int y);

Example: -pcolor = getpixel(100,100)

10) Outtext: -Display a string in the viewport

Void far outtext(char far textstring);

Example: - outtext(display text in graphics);

11) Putpixel: - plots a pixel at specified point.

Syntax: void far putpixel (int x, int y,int pixelcolor);

Example:putpixel(100,100,15);

12) Closegraph: shuts down the graphics mode

Syntax: -void far close graph( void );

Example: - closegraph( );

Conclusion:-

Frequently Asked Questions:-

1) What is mean by Computer Graphics?

9

7/28/2019 CG Manual 2011

10/44

Computer Graphics

2) What is the need of Computer graphics?

3) What is interactive Computer graphics?

4) What are the different applications of Computer graphics?

5) What is the declaration for line? Describe each argument?

6) Why is it needed to load graphics library in Computer graphics?

10

7/28/2019 CG Manual 2011

11/44

Computer Graphics

7) What is the job of initgraph() and Detectgraph() functions?

8) What is the job of graphics drivers and modes in computer graphics?

9) Howcan you fill the color in the ellipse? Are there different methods for filling the color?

10) What are the different ways to fill any picture with pattern?

Design Problem:-

1) Draw a penguin with the graphics function.2) Write a program to display a flag having more than 3 colors.3) Write a program to moving ball screen saver.

11

7/28/2019 CG Manual 2011

12/44

Computer Graphics

Experiment No :- 2

Title :- Line drawing Algorithm & Circle generation algorithm

1) DDA Line drawing algorithm

2) Bresenhams line drawing algorithm

3) DDA Circle generation algorithm

4) Bresenhams Circle generation algorithm

Name :-

Roll No :-

Batch :-

Date :-


12

7/28/2019 CG Manual 2011

13/44

Computer Graphics

Experiment No :- 2

Problem Statement:- Write a program to develop a DDA line drawing algorithm

Objective:- To draw a rasterized straight line by making use of DDA line drawing algorithmand

Bresenhams Line drawing algorithm. Also draw circle using DDA andBresenhams Circle generation algorithm.

Theory:-

The process of turning on the pixel for a line segment is called Vector generation .Before discussing line drawing algorithm , it is useful to note the general requirements for suchalgorithm. This algorithm specify the desired characteristics of line:

1. The line should appear as a straight line and it should start and end accurately.2. The line should be displayed with constant brightness along its length independent of its

length and orientation.3. The line should be drawn rapidly.

Let us see the different lines drawn in following fig:-Vertical line 45

line

13

7/28/2019 CG Manual 2011

14/44

Computer Graphics

a) Vertical & Horizantal Line b) 45 line

c) Line with other orientation

As shown in fig a) horizontal and vertical lines are straight and have same width. The45 line is straight but its width is not constant. On the other hand , the line with any otherorientation is neither straight nor has same width. Such a cases are due to the finite resolution ofdisplay and we have to accept approximate pixels in such situations in fig. c)

The brightness of the line is dependent on the orientation of the line.we can observethat the effective spaceing between pixels for the 45 line is grater than for the vertical andhorizontal lines. This will make the vertical and horizontal lines appear brighter than the 45line. Complex calculations are required to provide equal brightness along lines of varying lengthand orientation. Therefore , to draw line rapidly some compromises are made such as,

Calculate only an approximate line length

Reduce the calculations using simple integer arithmetic

Implement the result in hardware or firmware.

Considering the assumptions made most line drawing algorithms use incremental methods. Inthese methods line starts with the starting point. Then a fix increment is added to the currentpoint to get the next point on the line. This continued till the end of line.

DDA ( Digital Differential Analyzer)/ Vector generation algorithm:-

14

Horizantal Line

?

?

?

?

7/28/2019 CG Manual 2011

15/44

Computer Graphics

The vector generation algorithms which step along the line to determine the pixel whichshould be turned on are sometimes called Digital Differential Analyzer.

As we know the slope of the straight line is given as

------------------- (1)

The above differential equation can be used to obtain a rasterized straight line. For any given Xinterval X along a line, we can compute the corresponding y interval Y from euation (1) as

Y2-Y1 ----------------------(2)

X2-X1

Similarly, we can obtain X interval X corresponding to a specified Y as,

X2-X1

Y2-Y1

Once the intervals are known the values for next X and next Y on the straight line can be obtained asfollows:

Xi+1 = Xi + X -------(4) and Yi+1 = Yi + Y ------(5)

Put the values of X and Y in the equations (4) and (5) , then these equation represent a recursionfor successive values of X and Y along the required line. Such a way of rasterizing a line is called Digital Differential Analyzer (DDA).

For simple DDA eitherX or Y , whichever is larger, is chosen as one raster unit i.e,

If |X| |Y| then

X = 1

ElseY = 1.

Let us see the algorithm for rasterizing a line.

Algorithm:

1) Read the line end points (x1,y1) and (x2,y2) such hat they are not equal.[If equalthen plot that point and exit]

2) X = |x2-x1| and Y = |y2-y1|

15

Y2-Y1

X2-X1M = Y =

X

Y = X

X = Y

7/28/2019 CG Manual 2011

16/44

Computer Graphics

3) If (X Y) thenLength = X

ElseLength = Y

End if

4) X = (x2-x1) / lengthY = (y2-y1) / length

This makes either X or Y equal to 1 because length is either | x2-x1| or |y2-y1|.Therefore , the incremental value for eithr X or Y is one.

5) X= X1+0.5*sign(X)Y=Y1+0.5*sign(Y)

[Here , sign function makes the algorithm work in all quadrant. It returns -1,0,1depending on whether its argument is 0 respectively.The factor 0.5 makes it possible to round the values in the integer functions rather thantruncating them.]

6) i=1[begins the loop , in this loop points are plotted]while (i length){

Plot(Integer(x), Integer(y))X=X+X;Y=Y+Y;i=i+1

}

7)stop

Bresenhams Line drawing algorithm:-

Bresenhams line algorithm uses only integer addition and substraction andmultiplication by 2, and we know that the computer can perform the operations of integeraddition and substraction very rapidly. The computer is also time-effiecient when performing

integer multiplication by powers of 2. Therefore , it is an efficient metyhod for scan convertingstraight lines.

The basic principle of bresenhams line algorithm is to select the optimum rasterlocations to represent a straight line. To accomplish this the algorithm always increments eitherx or y by one unit depending upon the slope of line . the increment I the othr variable is

16D

X=

7/28/2019 CG Manual 2011

17/44

Computer Graphics

determined by examing the distance between the actual line location and the nearest pixel. Thisdistance is called Decision variable or the error. This is as shown in the fig. as below:

DA Distance AboveDB Distance Below

As shown in gig, the line does not pass though all the raster points( pixels). It passes through

raster point(0,0) and subsequently crosses three pixels. It is seen that the intercept of line withthe line x = 1 is closer to the line y=0 i.e pixel (1,0) than to line y =1 i.e pixel(1,1). Theintercept of the line with line x = 2 is close to the line y = 1 i.e pixel (2,1) than to the line y=0 i.epixel(2,0). Hence , the raster point at (2,1) better represents the path of the line shown in fig.

e = Db Da or Da - Db

Let us define e = Db-Da, now if e>0, then it implies that Db>Da i.e pixel above the lineis closet to the true line if Db

7/28/2019 CG Manual 2011

18/44

Computer Graphics

where, e>=0 , error is initialized with e = e-2* x. this is continued till error is negative. In eachiteration y is incremented by 1 . when e=0)

{y = y+1;e = e-2 * x

}x=x+1;e =e + 2*y

8. i =i+19. if(i

7/28/2019 CG Manual 2011

19/44

Computer Graphics

2

[check if the current point is the starting point or not. If the current point is not startingpoint repeat step 4; other wise stop]

5. stop

Bresenhams Circle Generation Algorithm:-

The Bresenhams circle drawing algorithm considers the eight-way symmetry of thecircle to generate it. It plots th part of the circle, i.e from 90 to 45, as shown in fig.

19

y

7/28/2019 CG Manual 2011

20/44

Computer Graphics

Let us assume that point P in fig as a last scan converted pixel. Now we have two options eitherto choose pixel A or Pixel B. The closer pixel amongst these two can be determined as follows:

The distances of pixels A and B from the origin are given as,

Da =(xi+1)+(yi) and

Db =(xi+1)+(yi-1)

Now the distances of pixels A and B from the true circle are given as,

a = Da r and b = Db r

However, to avoid square root term in derivation of decision variable, i.e to simplify thecomputation and to make algorithm more efficient the a and b are defined as,

20

90 45

0

-y

+ x

To achieve best approximation to the true circle we have toselect those pixels in the raster that fall the least distance from thetrue circle. Ref to the fig, let us observe the 90 to 45 portion ofthe circle. It can be noticed that if points are generated from 90 to45, each new point closet to the true circle can be found byapplying either of the two options:

Increment in positive x direction by one unit or

Increment in positive x direction and negative y directionboth by one unit.

P

7/28/2019 CG Manual 2011

21/44

Computer Graphics

a = Da - rb =Db-r.

from fig, we can observe that ais always positive and b always negative . Therefore,we can define Decision variable di as,

di = a + b

and we can say that , if di

7/28/2019 CG Manual 2011

22/44

Computer Graphics

}while(x

7/28/2019 CG Manual 2011

23/44

Computer Graphics

4)What is the use of Sign() function?

5) What is the use of floor() function?

6) What are the disadvantages of DDA Algorithm?

7) Define 1) Line 2) Line segment 3) Vector

8) What is the need of Bresenhams Circle drawing algorithm?

9) What is the difference between DDA Circle generation algorithm & Bresenhams circlegeneration algorithm?

23

7/28/2019 CG Manual 2011

24/44

Computer Graphics

10) What is the need of DDA circle generation algorithm?

Design Problems:-

1) Design Isometric Cube by using complete straight line.

2) Write a program for animated circles.

3) Write a program to draw the circle & write user defined function for filling circle withcolor?

Experiment No :- 3

Title :- Program for filling a polygon using scan-fill methodName :-

Roll No :-

Batch :-

Date :-

24

7/28/2019 CG Manual 2011

25/44

Computer Graphics


Experiment No :- 3

Problem Statement:- Program for filling a polygon using scan-fill methodObjective:- To fill the polygoin using scan fill method of raster display.Theory:-

Recursive Algorithm for seed fill methods have got two difficulties:1) The first difficulty is that if some inside pixels are already displayed in fill color then

recursive branch terminates , leaving further internal pixels that are initially set to the fill colorbefore applying the seed fill procedures.

2) Another difficulty with recursive seed fill method is that it cannot be used for large

polygons .This is because recursive seed fill procedures require stacking of neighboring pointsand in case of large polygons stack space may be insufficient for stacking of neighboring points.

To avoid this problem more efficient method can be used. Such method fills horizontalpixel spans across scan lines , instead of proceeding to 4-connected or 8-connected neighboringpoints. This is achieved by identifying the rightmost and leftmost pixels of the seed pixel andthen drawing a horizontal line between these two boundary pixels. This procedure is repeated

25

7/28/2019 CG Manual 2011

26/44

7/28/2019 CG Manual 2011

27/44

Computer Graphics

As we scan from top to bottom value of y-co-ordinates between the two scan linechanges by 1.

Yi+1 = Yi 1

Many times it is not necessary to compute the x intersections for scan line with every

polygon side. We need to consider only the polygon sides with endpoints straddling the currentscan line. See in fig:

It will be easier to identify which polygon sides should be tested for x-interception, if wefirst sort the sides in order of their maximum y value. Once the sides are sorted we can processthe scan lines from the top of the polygon to its bottom producing an active edge list for eachscan line crossing the polygon boundaries. The active edge list for scan line contains all edgescrossed by that scan line. The fig show sorted edges of the polygon with active edges.

27

BC

BA

DC

DE

AJGF

GH

EF

HI

JI

Scan

Consider only theses sides

Fig. consiser only the sides which intersect the scan line

B D

7/28/2019 CG Manual 2011

28/44

Computer Graphics

In summary, a scan line algorithm for filling a polygon begins by ordering the polygonsides on the largest y value. It beginsWith the largest y value and scans down the polygon. Foreach y , it determines which sides can be intersected and finds the x values of these intersectionpoints. It then sorts, pairs and passes these x values to a line drawing routine.

Algorithm for polygon filling using scan line conversion:-

1. Read n, the number of vertices of polygon

2. Read x and y co-ordinates of all vertices in array X[n] and Y[n]3. Find Ymin and Ymax4. Store the initial x value (x1) y values y1 and y2 for two endpoints and x increment x

from scan line to scan line for each edge in the array edges [n][4].While doing this check that y1>y2, if not interchange y1 and y2 andcorresponding x1 and x2 so that for each edge, y1 represents its maximum y co-ordinate and y2 represents its minimum y co-ordinate.

5. Sort the rows of array, edges[n][4] in descending order of y1 , descending order of y2and ascending orer of x2.

6. Set Y = Ymax7. Find the active edges and update active edge list:If( y>y2 and y

7/28/2019 CG Manual 2011

29/44

Computer Graphics

{Edge is not active

}

8. Compute the s intersects for all active edges for current y value [initially x-intersect is x1

and x intersects for successive y values can be given asXi+1 = Xi +XWhere, X = -1/m and m = y2-y1 / x2-x1 i.e slope of a line segment.

9. If x intersect is vertes i.e x-intersect = x1 and y = y1 then apply vertex test to checkwhether to consider one intersect or two intersects. Store all x intersects in the x-intersect[] array.

10. Sort x-intersct[] array in the ascending order11. Extract pairs of intersects from the sorted x-intersect [] array12. Pass pairs of x values to line drawing routine to draw corresponding line segments13. Set y = y 1

14. Repeat steps 7 through 13 unitl y>= ymin15. Stop

In step 7, we have checked for y

7/28/2019 CG Manual 2011

30/44

Computer Graphics

4) Represent the polygon using display file structure?

5) Write down the different methods for testing a pixel inside of polygon?

6)Which are the different methods used for filling polygon?

7) Explain boundary fill method for polygon?

8) What is mean by Seed pixel and what is mean by four connected region and eight connectedregion?

9) Compare Seed fill , edge fill method and flood fill ?

30

7/28/2019 CG Manual 2011

31/44

Computer Graphics

10) What is the need of scan line algorithm?

Design Problems:-

1) Implement flood fill algorithm for polygon having 8 vertex.

2) Implement Boundary fill algorithm for polygon using seed pixel and 8-connected region.

3) Implement scan line algorithm for hexagon

31

7/28/2019 CG Manual 2011

32/44

Computer Graphics

Experiment No :- 4

Title :- Program to implement different 2D Transformations.

Name :-

Roll No :-

Batch :-

Date :-


32

7/28/2019 CG Manual 2011

33/44

Computer Graphics

Experiment No :- 4

Problem Statement:- Program to implement different 2D Transformations

Objective:- To study the basic need of 2Dtransformation with matrices by using the basicscaling, rotation , translation , x shear and y shear operations.

Theory:-

A graphics system must allow the user to change the way object appears. In the realworld , we frequently rearrange objects or look at them from different angles. The computershould do the same with images on the screen, or its orientation. It is much more sensible tomake changes later to the objects original basic description. Implementing such a change is calla Transformation.

Basically transformation means making changes or allowing modifications to thepicture. we know that once the objects are created, the different applications may require the

variations in these. In some cases, the object size may be large, which needs to be stored incompressed form. All these requirements suggest us that we need to transform these objects.This process is carried out by transformation. For performing the different 2Dtransformations we need some mathematical operations, out of that , we are consideringmatrices.

Basically, transformation means change in image. We can modify the image byperforming some basic transformations, such as:

Scaling

Rotation

Translation Reflection

Shear TransformationNow , we will see the details of all the transformations.

1. Scaling Transformation:-

Scaling is the process of changing the size of the object or image.Suppose we are having point p1 whose co-ordinates are (x1,y1) , then we can

represent this point p1 in matrix form as,

P1 = (x1,y1) = [x1 y1]

Now suppose we want to multiply this point i.e one P1s matrix by some matix,say matrix T of dimension (2*2), then we will get resultant point P2 with dimension as(1*2) i.e

33

7/28/2019 CG Manual 2011

34/44

Computer Graphics

P1 * T = P2[ x1 y1] * T = [ x2 y2]

Thus we can say, the matrix T gives the relation between original point P1 and the newpoint P2. But if the matrix T is identity matrix then point p2 will be the same as P1.i.e

P1.* T = P21 0

P1 * = P20 1

1 0[x1 y1] * = [ x1 y1]

0 1P2 = P1

But if the matrix T is not identity matrix , but it is2 0

T = Then P2 will become0 1

P1 * T = P22 0

[x1 y1] * = | 2x1 y1|0 1

P2 = | 2x1 y1|

i.e all x-co-ordinates will get double as compared to original one. But the y-co-ordinatesremains same as original. See fig, it means the width of the object becomes double butheight is not getting changed.

If matrix T is0.5 0

T = Then P2 will become0 1

P1 * T = P20.5 0

[x1 y1] * = | 0.5x1 y1|0 1

P2 = | 0.5x1 y1|

34

Before After

Before After

i.e if all x co-ordinates becomes halfof the original and y co-ordinatesremains same as original

7/28/2019 CG Manual 2011

35/44

Computer Graphics

Similarly, we can change the height of image also by keeping width constant. In thatcase our transformation matrix will be,

1 0T = 0 2

Like this we can get both width and height double also by using matrix T as

2 0T =

0 2In general term, we can say matrix S is a scaling matrix and Sx is scale factor for x-cordinate and Sy will be the scale factor for y coordinate.

Sx 0S =

0 Sy

When we scale image, all points will get changed except origin.

2. Rotation Transformation:-

For rotation we need some trigonometry. Suppose we have a point P1 = ( x1,y1)and we rotate it about the origin by an angle to get a new position P2 =(x2,y2). We wish to find the transformation which will change (x1,y1) into(x2,y2).

Let us say we have drawn a line from origin to point(x,y) of length L at an angle

anticlockwise from x-axis , as shown in fig.

,

35

P1(x1,y1)

Y

x

P2(x2,y2) P1 * T = P2

But before we can check any transformation to seeif it is correct, we have to first know what (x2,y2)should be in terms of (x1,y1) and angle . Todetermine this we need trigonometric functionsline sin and cos.

(0,0)

(X ,Y)Y

X

L

The line segment L will have (0,0) and (x,y) as its two endpoints.

We can say,

L = (x+y)

7/28/2019 CG Manual 2011

36/44

7/28/2019 CG Manual 2011

37/44

Computer Graphics

Where, P1 is original pointP2 is new pointT is transformation matrix.

For case 1 i.e when p1 = (1,0)

P1* T = P21 0 * T = cos Sin

Now we know that original point i.e P1 , we also know what will be new point i.e P2. Here wehave to find what will be the transformation matrix , which will change P1 to P2. For simplicitylet us assume that transformation matrix (T) as

a bT =

c da b

Now , 1 0 * = a b

c d

cos = a and Sin = b

Similarly for case 2 i.e when P1 = ( 0,1)P1 * T = P2

0 1 * T = -Sin cosa b

0 1 * = c dc d

c = -Sin d = cosNow , place the values of a ,b ,c d in transformation matrix.

a b cos Sinc d = -Sin cos

For rotation in clockwise direction, the matrix will be

cos SinR = -Sin cos

The sign of angle determines the direction of rotation. When angle is positive i.ewhen we are following the direction exactly reverse as that of the direction of rotatinghands of a normal clock, then it is anticlockwise or sometimes it is called Counter

37

7/28/2019 CG Manual 2011

38/44

Computer Graphics

Clockwise see in fig. And when angle is negative I.e when we are following the samepath as that of hands of clock then it is called Clockwise, as shown in fig.

Anticlockwise Clockwise

So rotate a point in clockwise direction our matrix will become,Cos(-) Sin(-)

R =-Sin(-) cos(-)

Here, as we are rotating in clockwise direction, so we are replaceing by . Butcos(-)=cos() and sin(-) = -sin()

The transformation matrix for rotation in clockwise direction will beCos -Sin

R = Sin cos

The transformation matrix for roatation in anticlockwise direction will be as.Cos Sin

R = -Sin cos

3. Translation :-

Moving the whole image is called Translation. We can easily shift the imageby adding same value to all the points of image by which we want to shift the image.

Before After

Before After

38

7/28/2019 CG Manual 2011

39/44

Computer Graphics

If we want to shift the image down by 5 unit then we have to add -5 to all the y values ofthat image

Similarly, if want to shift image up by 5 units as shown in fig, then add 5 to all y valuesof the image.

Same thing for x values.

In general, to translate the image we have to add some value to old(x,y) values so that we willget new ( x,y) values.

X2 = x1 + tx and y2 = y1 + tyWhere,

tx is translation factor for x-axisty is translation factor for y axis

Depending on values of tx and ty we are shifting image to new position. But we cannotrepresent translation by using matrix.

4. Reflection:-

a.Reflection at y-axis:-

Basically reflection at y-axis is similar to placing a mirror at y-axis and taking the mirrorimage of an object. If ww have appoint (x.y) then reflection at y-axis will become (-x,y) whichis shown in fig.

Here the magnitude of both x and y remains same. Only the sign of x co-ordinates gets changed.Now let us derive what will be the transformation matrix which gives us the desired result.

Our basic transformation rule will beP1 * T = P2Now , P1 = [x y] and we need P2 as [-x,y]

(x y) * T = (- x y)

Now what should be the transformation matrix T, to get the desired result.So the T will be -1 0

39

(0,0)

(-y)

(x)(-x)

(y)

(0,0)

(-y)

(-x)

(y)

(x)

AfterBefore

(-x,y)(x,y)

7/28/2019 CG Manual 2011

40/44

Computer Graphics

0 1Let us check it out

P1 * T = P2(x y) * -1 0 = (- x y)

0 1

After multiplying the transformation matrix with the point P1 we will get the desired point P2.b.Reflection at x-axis:-

Similarly, the same rule you have to apply for 1) Reflection at X-axis and you will get the newpoint p2 as

(x y) * 1 0 = [x -y]0 -1

c. Reflection in the origin:-

We have seen reflection at x-axis and reflection at y-axis, if we want both these

transformation simultaneously then, we have to apply reflection in the origin. It is a combinationof both reflection at x-axis and reflection at y-axis.

1 0 -1 0 = -1 00 -1 * 0 1 0 -1

(x y) * -1 0 = (-x -y)0 -1

Thus , in this we can perform the reflection transformation.

5. Shear transformation:-The shear transformation means slanting the image. This shear transformation is of twotypes:

Y-shear

X-shear1. Y-shear:-

In y-shear we are keeping x-co-ordinate values as it is and shifting the y-cordinate values only, which result in tilting of horizontal lines see fig.

Before After

If P is (x,y) , then X-co-ordinate of P2 must be same as x co-ordinate of P1 . But y co-ordinateof P2 should change.

Transformation matrix for y-shear will be 1 a where a is constant factor, which will

40

7/28/2019 CG Manual 2011

41/44

Computer Graphics

0 1Decide , how much to tilt.Now , P1 * T = P2

x y * 1 a = x x.a+y0 1

So, x-co-ordinate of P2 are not changed but y-cordinate of P2 will be combination of constantvalue a and x and u values of P1.

P2 = ( x x.a+y)So here we say that value of y will depend on value of x.

2. X-shear:-

X-shear preserves y co-ordinate values and shifts x co-ordinate values causing verticalline to tilt. See in fig. means vice versa we are doing here.

Before After

So , you will get,x y * 1 0 = x+yb y

b 1

here, we have to say, the value of x will depend on value of y.

Conclusion:-

Frequently Asked Question:-

1) Describe with respect to 2D transformation:- 1) scaling 2) Rotation 3) Translation?

2)What is mean by Transformation?

41

7/28/2019 CG Manual 2011

42/44

Computer Graphics

3)Compate homogeneous co-ordinate system and normalized co-ordinate system?

4)What is the need of homogeneous co-ordinates system ?

5) What is composite transformation?

6)Explain the inverse transformation?

7) How can you perform homogeneous co-ordinates for scaling?

8) what are the different steps for rotation about an arbitrary axis?

42

7/28/2019 CG Manual 2011

43/44

Computer Graphics

9) What is mean by shear and reflection?

10) Explain reflection about line?

Design Problems:

1. Implement rotation about all co-ordinate axes transformation on square in 3D.2. Implement rotation about any arbitrary axis transformation on square in 3D.3. Implement scaling and translation transformation on square in 3D.

43

7/28/2019 CG Manual 2011

44/44

Computer Graphics

cg manual 2011

Documents