Lab Manual CSC353 CG V2 PDF

Preview

Summary

LAB MANUAL...

Description

LAB MANUAL Course: CSC353 Computer Graphics

Department of Computer Science

Learning Procedure

J (Journey inside-out the concept) 2) Stage a1 (Apply the learned) 3) Stage v (Verify the accuracy) 4) Stage a2 (Assess your work)

1) Stage

CCS353 –Lab Manual

COMSATS University Islamabad (CUI)

1

Table of Contents Lab #

Topics Covered

Page #

Lab # 01

To get familiarized with the computer graphics environment and function provided by C/C++.

3

Lab # 02

Implement the rasterization process for lines of different lengths/slopes.

8

Lab # 03

Implement the rasterization process for circles/ellipses of different radii

12

Lab # 04

Implementation of Line, Circle & Ellipse Attributes

16

Lab # 05

To perform the 2D transformation such as translation, rotation, scaling, shearing and reflection.

25

Lab # 06

32

Lab # 07

Lab Sessional 1 To perform the 2D composite transformation such as translation, rotation, scaling, shearing and reflection. Implement the rasterization/filling process for polygons of different shapes.

Lab # 08

To familiarize the students with the use of 2D viewing and clipping.

41

Lab # 09

To familiarize the students with the use of projection matrices.

45

Lab # 10

To write a basic program in three.js and show its output in the browser.

50

Lab # 11

To use different geometries provided by three.js, and to make a custom object

56

Lab # 12

38

Lab Sessional 2

Lab # 13

Different Materials and Light objects available in three.js.

62

Lab # 14

Animation through the application of different 3D transformations to the objects in the scene.

69

Lab # 15

This lab will give you practical implementation of Hierarchical Modeling using Scene Graphs in three.js.

75

Lab # 16

Implement Vertex and Fragment Shaders provided by GLSL using Three.js

81

Terminal Examination

CCS353 –Lab Manual

2

LAB # 01 Statement of Purpose: To get familiarized with the computer graphics environment and function provided by C/C++.

Activity Outcomes: After completing this lesson, you should be able to do the following: 

Understand and use different graphics functions provided by procedural/OO programming languages.

Instructor Note: Any IDE can be used with which the students are already familiar.

CCS353 –Lab Manual

3

1)

Stage J (Journey)

Introduction Study of Basic Graphics Functions 1. initgraph() initgraph() function initializes the graphics mode and clears the screen. Declaration: void far initgraph(int far *driver, int far *mode, char far *path) 2. detectgraph() Detectgraph function determines the graphics hardware in the system, if the function finds a graphics adapter then it returns the highest graphics mode that the adapter supports. Declaration: void far detectgraph(int far *driver, int far *mode) Integer that specifies the graphics driver to be used. You can give graphdriver a value using a constant of the graphics_drivers enumeration type. 3. closegraph() closegraph() function switches back the screen from graphcs mode to text mode. It clears the screen also. A graphics program should have a closegraph function at the end of graphics. Otherwise DOS screen will not go to text mode after running the program. 4. getpixel() getpixel function returns the color of pixel present at location(x, y). Declaration : int getpixel(int x, int y); 5. putpixel() putpixel function plots a pixel at location (x, y) of specified color. Declaration : void putpixel(int x, int y, int color); For example if we want to draw a GREEN color pixel at (35, 45) then we will write putpixel(35, 35, GREEN); in our c program, putpixel function can be used to draw circles, lines and ellipses using various algorithms. 6. line()

CCS353 –Lab Manual

4

line function is used to draw a line from a point(x1,y1) to point(x2,y2) i.e. (x1,y1) and (x2,y2) are end points of the line. Declaration : void line(int x1, int y1, int x2, int y2); 7. lineto() lineto function draws a line from current position(CP) to the point(x,y), you can get current position using getx and gety function. 8. circle() circle function is used to draw a circle with center (x,y) and third parameter specifies the radius of the circle. Declaration : void circle(int x, int y, int radius); 9. ellipse() Ellipse is used to draw an ellipse (x,y) are coordinates of center of the ellipse, stangle is the starting angle, end angle is the ending angle, and fifth and sixth parameters specifies the X and Y radius of the ellipse. To draw a complete ellipse strangles and end angle should be 0 and 360 respectively. Declaration : void ellipse(int x, int y, int stangle, int endangle, int xradius, int yradius);

10. drawpoly() drawpoly function is used to draw polygons i.e. triangle, rectangle, pentagon, hexagon etc. Declaration : void drawpoly( int num, int *polypoints ); num indicates (n+1) number of points where n is the number of vertices in a polygon, polypoints points to a sequence of (n*2) integers . Each pair of integers gives x and y coordinates of a point on the polygon. We specify (n+1) points as first point coordinates should be equal to (n+1)th to draw a complete figure. To understand more clearly we will draw a triangle using drawpoly, consider for example the array :- int points[] = { 320, 150, 420, 300, 250, 300, 320, 150}; points array contains coordinates of triangle which are (320, 150), (420, 300) and (250, 300). Note that last point(320, 150) in array is same as first. CCS353 –Lab Manual

5

11. outtext () outtext function displays text at current position. Declaration : void outtext(char *string); 12. outtextxy () outtextxy function display text or string at a specified point(x,y) on the screen. Declaration : void outtextxy(int x, int y, char *string); x, y are coordinates of the point and third argument contains the address of string to be displayed. 13. rectangle() Rectangle function is used to draw a rectangle. Coordinates of left top and right bottom corner are required to draw the rectangle. left specifies the X-coordinate of top left corner, top specifies the Y-coordinate of top left corner, right specifies the X-coordinate of right bottom corner, bottom specifies the Y-coordinate of right bottom corner. Declaration : void rectangle(int left, int top, int right, int bottom); 14. floodfill() floodfill function is used to fill an enclosed area. Current fill pattern and fill color is used to fill the area.(x, y) is any point on the screen if (x,y) lies inside the area then inside will be filled otherwise outside will be filled,border specifies the color of boundary of area. Declaration : void floodfill(int x, int y, int border);

15. fillpoly() f illpoly function draws and fills a polygon. It require same arguments as drawpoly. Declaration : void drawpoly( int num, int *polypoints );

16. fillellipse() fillellipse function draws and fills a polygon. Declaration: void fillellipse(int x, int y, int xradius, int yradius); CCS353 –Lab Manual

6

x and y are coordinates of center of the ellipse, xradius and yradius are x and y radius of ellipse respectively.

2)

Stage a1 (apply)

Lab Activities: Activity 1: Use above functions to implement basic objects using lines, rectangles, ellipses.

Solution: Use declarations provided above.

3)

Stage v (verify)

Home Activities: Activity 1: 1. Use all the functions provided to build a simple sketch that involves basic polygons. 2. Understand how colors work and use appropriate colors to fill the lines and polygons in your scene.

4)

Stage a2 (assess)

Lab Assignment and Viva

CCS353 –Lab Manual

7

LAB # 02 Statement Purpose: Implement the rasterization process for lines of different lengths/slopes.

Activity Outcomes: After completing this lesson, you should be able to do the following:  

Understand the process of rasterization and the usage of different algorithms for the said purpose. Tell, which of the algorithms is most appropriate for graphics applications, and why?

Instructor Note:

CCS353 –Lab Manual

8

1) Stage J (Journey) Introduction Rasterization is the process by which a primitive is converted to a two-dimensional image. Each point of this image contains such information as color and depth. Thus, rasterizing a primitive consists of two parts. The first is to determine which squares of an integer grid in window coordinates are occupied by the primitive. The second is assigning a color and a depth value to each such square. The focus of the lab is to understand and implement the Bresenham’s Line Drawing Algorithm. Functions used: line () The function line () is used to draw a line from(x1,y1)to (x2,y2) Syntax: line (x1,y1,x2,y2) initgraph () This function takes thee arguments and they are i) The video driver to be used (gd). ii) The graphics mode (gm). iii) The path name. Syntax: initgraph (gd,gm,path) Procedure: 1. Input the two endpoints (x1,y1) and (x2,y2). 2. Plot the pixel value (x1,y1) with a specified color. 3. Calculate the value of dx and dy and find the starting value of decision parameter as dp=2*dy-dx; 4. Calculate the values of s1 and s2 depending on (x1,y1) and (x2,y2) values. 5. If dpdx then interchange the values of dx and dy and assign exch=1 Step 8: Compute p=2xdy-dx Step 9: Put a pixel on(x,y) Step 10: If exch=1, y=sy else x=x+sx Step 11: If p>0 and exch =1, x=x+sx else y=y+sy, p=p-2xdx Step 12: Compute p=p+2xdy Step 13: Do steps (9) t0 (12) for dx times Step 14: Stop

2) Stage a1 (apply) Lab Activities: Activity 1: Write a single program (in any OO programming language, without using already available functions) that generates a line between two points, using Bresenham’s Line Rasterization Algorithm,

Solution: Sample Program: #include #include #include #include #include void main() { float x,y,x1,y1,x2,y2,dx,dy,e; int i,gd=DETECT,gm; clrscr(); printf("\n ENTER THE VALUE OF X1:"); scanf("%f",&x1); printf("\n ENTER THE VALUES OF Y1:"); scanf("%f",&y1); printf("\n ENTER THE VALUES OF X2 AND Y2:"); scanf("%f%f",&x2,&y2); initgraph(&gd,&gm," "); dx=abs(x2-x1); dy=abs(y2-y1); x=x1; y-y1; e=2*(dy-dx); i=1; do { putpixel(x,y,15); while(e>=0) { y=y+1; e=e-(2*dx); } x=x+1;

CCS353 –Lab Manual

10

e=e+(2*dy); i=i+1; delay(100); }while(i0)||(y>0)) { cleardevice(); setcolor(c); ellipse(x,y,0,360,50,20); circle(x-40,y-5,2); line(x+50,y,x+80,y-30); line(x+80,y-30,x+80,y+30); line(x+80,y+30,x+50,y); setfillstyle(1,0); floodfill(x,y,c); x=x-rand()%10; y=y-rand()%10; } } else { while((xy; xm=getmaxx(); circle(x,y,50); ellipse(x-25,y-15,0,360,3,2); ellipse(x+25,y-15,0,360,3,2); line(x,y-10,x,y+10); arc(x,y+15,180,360,15); line(x,y+50,x,y+130); line(x,y+130,x-30,y+180); line(x-30,y+180,x-50,y+170); line(x,y+130,x+30,y+180); line(x+30,y+180,x+50,y+170); line(x,y+75,x+75,y+75); line(x+75,y+75,x+170,y-10); ellipse(x+170,y-50,0,360,28,40); while(!kbhit()) { if(x>d>>e>>f>>g; setcolor(c); rectangle(100,100,300,150); setfillstyle(SOLID_FILL,d); floodfill(120,120,c); rectangle(100,150,300,200); setfillstyle(SOLID_FILL,e); floodfill(120,160,c); rectangle(100,200,300,250); line(100,250,100,475); setfillstyle(SOLID_FILL,f); floodfill(120,220,c); circle(200,175,20); setcolor(g); line(200,160,200,190); line(180,175,220,175); line(190,167,210,183); line(190,183,210,167); getch();

CCS353 –Lab Manual

23

closegraph(); }

2) Stage v (verify) Home Activities: 1. Implement a scene that include multiple objects created in class. Use multiple copies of fish and with different colors. Also workout on the relative sizes of the objects.

3)

Stage a2 (assess)

Lab Assignment and Viva voce

CCS353 –Lab Manual

24

LAB # 05 Statement Purpose: To perform the 2D transformation such as translation, rotation, scaling, shearing and reflection.

Activity Outcomes: After completing this lesson, you should be able to do the following:   

Understand how the transformations affect the objects Implement the matrices to perform different basic transformations to the objects. Sum up the effects of different transformations into one composite matrix and then apply to the objects.

Instructor Note:

CCS353 –Lab Manual

25

1)

Stage J (Journey)

Introduction Line() The function line() is used to draw a line from(x1,y1)to (x2,y2) Syntax: line (x1,y1,x2,y2) initgraph() This function takes three arguments and they are i).the video driver to be used (gd). ii).the graphics mode (gm). iii).the path name. Syntax: initgraph(gd,gm,path) Algorithm: Step1. Declare the variables xa,ya,xa1,ya1 of array type. Step2.Declare the variables gd,gm,n,i,op,tx,ty,xf,yf,rx,ry. Step3. Initialise the graphics function. Step4. Input the number of points. Step5. Input the value of co-ordinate according to number of points. Step6. Using switch statement selects the option to perform translation, rotation, scaling, reflection and shearing. Step7. Translation: a).input the translation vector b).add the translation vectors with the coordinates xa1[i]=xa[i]=tx, ya1[i]=ya[i]=ty, c).using the function line,display the object before and after translation. Step8. Rotation: a). input the rotation angle b). using formula theta=(theta*3.14)/180 c).input the value of reference point d). calculate new coordinate point using formula xa1[i]=xf+(xa[i]-xf)*cos(theta)-(ya[i]-yf)*sin(theta), ya1[i]=yf+(xa[i]-xf)*sin(theta)-(ya[i]-yf)*cos(theta), e). using the function line,display the object before and after rotation. Step9. Scaling: a).input the scaling factor and reference point b).calculate new coordinate point using formula xa1[i]=(xa[i]*sx+rx*(1-sx), ya1 [i] = (ya[i]*sy+ry*(1-sy) c). using the function line, display the object before and after scaling. Step10. Shearing: a).input the shearing value and reference point. b). input the shear direction x or y i).if direction x xa1[i]=xa[i]+shx*(ya[i]-yref) ii).otherwise ya1[i]=ya[i]+shy*(xa[i]-xref) iii). using the function line, display the object before and after shearing. Step11. Reflection: a).display the object before reflection using the function line

CCS353 –Lab Manual

26

b). display the object after reflection using the function line Step12. Stop.

2)

Stage a1 (apply)

Lab Activities: Activity 1: Write a function that translates the points using given translation factors.

Solution: void translation(x,y,x1,y1,x2,y2) { int tx,ty,xx,yy; printf("Enter transformational values:"); scanf("%d%d",&tx,&ty); line(x+tx,y+ty,x1+tx,y1+ty); line(x1+tx,y1+ty,x2+tx,y2+ty); line(x2+tx,y2+ty,x+tx,y+ty); }

Activity 2: Write a function that scales the points using given scaling factors.

Solution: void scaling(x,y,x1,y1,x2,y2) { float sx,sy; printf("Enter the scaling vertices:"); scanf("%f%f",&sx,&sy); line(x*sx,y*sy,x1*sx,y1*sy); line(x1*sx,y1*sy,x2*sx,y2*sy); line(x2*sx,y2*sy,x*sx,y*sy); }

Activity 3: Write a function that scales the points using given scaling factors about a fixed (pivot) point.

Solution: void scalingpivot(x,y,x1,y1,x2,y2) { float sx,sy,xf,yf; int xp,yp,xp1,yp1,xp2,yp2; printf("Enter the scaling vertices:"); scanf("%f%f",&sx,&sy); printf("Enter the scaling pivot points:"); scanf("%f%f",&xf,&yf); xp=(x*sx)+xf*(1-sx); yp=(y*sy)+yf*(1-sy);

CCS353 –Lab Manual

27

xp1=(x1*sx)+xf*(1-sx); yp1=(y1*sy)+yf*(1-sy); xp2=(x2*sx)+xf*(1-sx); yp2=(y2*sy)+yf*(1-sy); line(x+xp,y+yp,x1+xp1,y1+yp1); line(x1+xp1,y1+yp1,x2+xp2,y2+yp2); line(x2+xp2,y2+yp2,x+xp,y+yp); }

Activity 4: Write a function that rotates the points using given rotation angle.

Solution: void rotation(x,y,x1,y1,x2,y2) { int the,xr,yr,xr1,yr1,xr2,yr2; float rad; printf("Enter the theta value:"); scanf("%d",&the); rad=the*(3.14/180); xr=x*cos(rad)-y*sin(rad); yr=x*sin(rad)+y*cos(rad); xr1=x1*cos(rad)-y1*sin(rad); yr1=x1*sin(rad)+y1*cos(rad); xr2=x2*cos(rad)-y2*sin(rad); yr2=x2*sin(rad)+y2*cos(rad); line(x+xr,y+yr,x1+xr1,y1+yr1); line(x1+xr1,y1+yr1,x2+xr2,y2+yr2); line(x2+xr2,y2+yr2,x+xr,y+yr); }

Activity 5: Write a function that rotates the points using given rotation angle about a fixed (pivot) point.

Solution: void rotationpivot(x,y,x1,y1,x2,y2) { int the,xr,yr,xr1,yr1,xr2,yr2,xf,yf; float rad; printf("Enter the theta value:"); scanf("%d",&the); printf("\n Enter the pivot points:"); scanf("%d%d",&xf,&yf); rad=the*(3.14/180); xr=xf+(x-xf)*cos(rad)-(y-yf)*sin(rad); yr=yf+(x-xf)*sin(rad)-(y-yf)*cos(rad); xr1=xf+(x1-xf)*cos(rad)-(y1-yf)*sin(rad); yr1=yf+(x1-xf)*sin(rad)-(y1-yf)*cos(rad); xr2=xf+(x2-xf)*cos(rad)-(y2-yf)*sin(rad); yr2=yf+(x2-xf)*sin(rad)-(y2-yf)*cos(rad); line(x+xr,y+yr,x1+xr1,y1+yr1);

CCS353 –Lab Manual

28

line(x1+xr1,y1+yr1,x2+xr2,y2+yr2); line(x2+xr2,y2+yr2,x+xr,y+yr); }

Activity 6: Write a function that reflects a points about origin.

Solution: void reflection(x,y,x1,y1,x2,y2) { line(y,x,y1,x1); line(y1,x1,y2,x2); line(y2,x2,y,x); }

Activity 7: Write a function that tilts/performs shear operation on the provided points.

Solution: void shear(x,y,x1,y1,x2,y2) { int s; //x+=100; y+=100; //x1+=100; y1+=100; //x2+=100; y2+=100; printf("Enter the shear value about x:"); scanf("%d",&s); line(x,y,x1+s,y1); line(x1+s,y1,x2,y2); line(x2,y2,x,y); }

Activity 8: Write the main() function that performs the implemented transformations in the above activities.

Solution: #include #include #include #include void main() {

CCS353 –Lab Manual

29

int gd,gm,x,y,c,tx,ty,x1,y1,x2,y2; detectgraph(&gd,&gm); initgraph(&gd,&gm,"C:\\TC\\BGI"); printf("Enter the 6 values:"); scanf("%d%d%d%d%d%d",&x,&y,&x1, &y1,&x2,&y2); printf("Actual polygon"); line(x,y,x1,y1); line(x1,y1,x2,y2); line(x2,y2,x,y); do { printf("\nMenu\n 1.Translation\n 2.Scaling\n 3.Scaling with pivot\n"); printf(" 4.Rotation\n 5.Rotation with pivot\n 6.Reflection\n"); printf(" 7.Shearing\n 8.Exit\n"); printf("Enter ur choice:"); scanf("%d",&c); switch(c) { case 1: translation(x,y,x1,y1,x2,y2); break; case 2: scaling(x,y,x1,y1,x2,y2); break; case 3: scalingpivot(x,y,x1,y1,x2,y2); break; case 4: rotation(x,y,x1,y1,x2,y2); break; case 5: rotationpivot(x,y,x1,y1,x2,y2); break; case 6: reflection(x,y,x1,y1,x2,y2); break; case 7: shear(x,y,x1,y1,x2,y2); break; case 8: exit(0); break; } }while(c...