COMPUTER GRAPHICS

CSC276

Lab. Note

Experiment - 1 Open GL Point & Line Functions

#include<gl/glut.h> void Init() { glClearColor (0.0, 0.0, 0.0, 0.0); // set display window background color glColor3f(1.0,1.0,1.0); // set primitive color glMatrixMode(GL_PROJECTION); // set projection parameter gluOrtho2D(0.0,400.0,0.0,400.0); // display two dimensional window } void display() { glClear(GL_COLOR_BUFFER_BIT); // Assign color to window glBegin(GL_POINTS); glVertex2i(100,100); //specify point geometry glVertex2i(150,200); glVertex2i(200,250); glVertex2i(250,250); glVertex2i(350,200); glEnd(); glFlush(); // process all OpenGL routines as quickly as possible } int main(int argc, char** argv) { glutInit(&argc,argv); // initialize GLUT glutInitDisplayMode(GLUT_SINGLE |GLUT_RGB); //set display mode glutInitWindowSize(400,400); //set display window width & height glutInitWindowPosition(50,50); // set display window position glutCreateWindow("lines"); // create display window

Init(); glutDisplayFunc(display); glutMainLoop(); return 0; }

//execute initialization procedure //send graphics to display window // display and wait

1. Install Open GL library 2. Write and Execute the code 3. Using different functions draw : Window, Points, lines, Triangle, Square, Hexagon 4. Change window size and position 5. Change the background color 6. Change the Primitives color

Student Note:

Experiment -2 DDA Line Drawing Algorithm

#include<stdlib.h> #include<math.h> #include<gl/glut.h> void setpixel (int x, int y) { glBegin (GL_POINTS); glVertex2i(x,y); glEnd(); } inline int round (const float a) { return int (a +0.5); } void lineDDA(int x0, int y0, int xEnd, int yEnd) { int dx=xEnd - x0, dy=yEnd - y0, steps, k; float xIncrement, yIncrement, x=x0, y=y0; if(fabs (dx)> fabs (dy)) steps= fabs (dx); else steps= fabs (dy); xIncrement= float (dx)/ float (steps); yIncrement= float(dy)/ float (steps); setpixel (round (x), round (y)); for (k=0; k< steps; k++) {

x += xIncrement; y += yIncrement; setpixel (round (x), round (y)); } }

void init (void) { glClearColor (1.0,1.0,1.0,0.0); glMatrixMode (GL_PROJECTION); gluOrtho2D (0.0,200.0,0.0,150.0); } void lineSegment (void) { glClear (GL_COLOR_BUFFER_BIT); glColor3f (1.0,0.0,0.0); lineDDA (20,30,170,130); glFlush(); } void main(int argc, char** argv) { glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition (50,100); glutInitWindowSize (400,300); glutCreateWindow("DDA line");

init(); glutDisplayFunc (lineSegment); glutMainLoop(); }

1. 2. 3. 4. 5. 6.

Write and Execute the code Change the background color Change the Primitives color Calculate the slope of the line Draw the line with the following slopes: 30 - 60 80 Modify the code to draw two lines in the same time

Student Note:

Experiment - 3 Bresenham Line Drawing Algorithm

#include<stdlib.h> #include<math.h> #include<glut.h> void setpixel (int x, int y) { glBegin (GL_POINTS); glVertex2i(x,y); glEnd(); } void lineBres (int x0, int y0, int xEnd , int yEnd) { int dx = fabs (xEnd - x0), dy = fabs(yEnd - y0); int p = 2*dy-dx; int twoDy = 2*dy, twoDyMinusDx = 2* (dy -dx); int x,y; if (x0 >xEnd) { x = xEnd; y = yEnd; xEnd=x0; } else { x = x0; y = y0; } setpixel (x,y); while (x < xEnd) { x++;

if (p<0) p+= twoDy; else { y++; p += twoDyMinusDx; } setpixel (x, y); } } void init (void) { glClearColor (1.0,1.0,1.0,0.0); glMatrixMode (GL_PROJECTION); gluOrtho2D (0.0,200.0,0.0,150.0); } void lineSegment (void) { glClear (GL_COLOR_BUFFER_BIT); glColor3f (1.0,0.0,0.0); lineBres (20,15,120,140); glFlush(); } void main(int argc, char** argv) { glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition (50,100); glutInitWindowSize (400,300); glutCreateWindow("Bresenham's Line"); init(); glutDisplayFunc (lineSegment); glutMainLoop(); }

1. 2. 3. 4. 5. 6.

Write and Execute the code Change the background color Change the Primitives color Calculate the slope of the line Draw the line with the following slopes: 10 - 20 30 Modify the code to draw two lines in the same time

Student Note:

Experiment - 4 Mid-Point Circle Drawing Algorithm

#include<gl/glut.h> #include<math.h> #include<stdlib.h>

class scrpt { public: GLint x,y; }; scrpt circCtr; void setpixel (GLint x, GLint y) { glBegin (GL_POINTS); glVertex2i(x, y); glEnd(); } void circlePlotPoints (scrpt circCtr, scrpt circpt) { setpixel (circCtr.x + circpt.x, circCtr.y + circpt.y); setpixel (circCtr.x - circpt.x, circCtr.y + circpt.y); setpixel (circCtr.x + circpt.x, circCtr.y - circpt.y); setpixel (circCtr.x - circpt.x, circCtr.y - circpt.y); setpixel (circCtr.x + circpt.y, circCtr.y + circpt.x); setpixel (circCtr.x - circpt.y, circCtr.y + circpt.x); setpixel (circCtr.x + circpt.y, circCtr.y - circpt.x); setpixel (circCtr.x - circpt.y, circCtr.y - circpt.x); } void circleMyBres (scrpt circCtr, GLint radius)

{ scrpt circpt; GLint p = 3-2*radius; circpt.x=0; circpt.y=radius; void circlePlotPoints (scrpt, scrpt); circlePlotPoints (circCtr, circpt); while (circpt.x < circpt.y) { circpt.x++; if(p<0) p +=4* circpt.x +6; else { circpt.y--; p += 4* (circpt.x - circpt.y) +10; } circlePlotPoints (circCtr, circpt); } }

void init (void) {

glMatrixMode (GL_PROJECTION); gluOrtho2D (0.0,200.0,0.0,150.0); } void circle (void) { glClear (GL_COLOR_BUFFER_BIT); glColor3f (1.0,1.0,1.0); circCtr.x=100; circCtr.y=75;

GLint radius=60; circleMyBres (circCtr, radius) ; glFlush(); } void main(int argc, char** argv) { glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition (50,100); glutInitWindowSize (400,300); glutCreateWindow("A circle"); init(); glutDisplayFunc (circle); glutMainLoop(); }

1. 2. 3. 4.

Write and Execute the code Use different radius Change window size and position Change the circle & background colors

Student Note:

Experiment - 5 Mid-Point Multi Circles Drawing Algorithm

#include<gl/glut.h> #include<math.h> #include<stdlib.h> class scrpt { public: GLint x,y; }; scrpt circCtr; void setpixel (GLint x, GLint y) { glBegin (GL_POINTS); glVertex2i(x, y); glEnd(); } void circlePlotPoints (scrpt circCtr, scrpt circpt) { setpixel (circCtr.x + circpt.x, circCtr.y + circpt.y); setpixel (circCtr.x - circpt.x, circCtr.y + circpt.y); setpixel (circCtr.x + circpt.x, circCtr.y - circpt.y); setpixel (circCtr.x - circpt.x, circCtr.y - circpt.y); setpixel (circCtr.x + circpt.y, circCtr.y + circpt.x); setpixel (circCtr.x - circpt.y, circCtr.y + circpt.x); setpixel (circCtr.x + circpt.y, circCtr.y - circpt.x); setpixel (circCtr.x - circpt.y, circCtr.y - circpt.x); } void circleMidPoint (scrpt circCtr, GLint radius) {

scrpt circpt; GLint p = 3-2*radius; circpt.x=1; circpt.y=radius; void circlePlotPoints (scrpt, scrpt); circlePlotPoints (circCtr, circpt); while (circpt.x < circpt.y) { circpt.x++; if(p<0) p +=4* circpt.x +6; else { circpt.y--; p += 4* (circpt.x - circpt.y) +10; } circlePlotPoints (circCtr, circpt); } }

void init (void) { glMatrixMode (GL_PROJECTION); gluOrtho2D (0.0,250.0,0.0,250.0); } void circle (void) { glClear (GL_COLOR_BUFFER_BIT); glColor3f (1.0,0.0,0.0); circCtr.x=75; circCtr.y=100; GLint radius=50; circleMidPoint (circCtr, radius) ;

glColor3f (0.0,1.0,0.0); circCtr.x=125; circCtr.y=150; circleMidPoint (circCtr, radius); glColor3f (0.0,0.0,1.0); circCtr.x=175; circCtr.y=100; circleMidPoint (circCtr, radius); glFlush(); } void main(int argc, char** argv) { glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition (100,50); glutInitWindowSize (400,400); glutCreateWindow("circle"); init(); glutDisplayFunc (circle); glutMainLoop(); }

1. 2. 3. 4.

Write and Execute the code Use different radius Change window size and position Change the primitives & background colors

Student Note:

Experiment - 6 Mid-Point Ellipse Drawing Algorithm

#include<gl/glut.h> #include<math.h> #include<stdlib.h> int xCenter; int yCenter; int x; int y;

inline int round(const float a) {return int(a+0.5);} void setPixel(int x,int y) { glBegin (GL_POINTS); glVertex2i(x, y); glEnd(); } void init (void) { glMatrixMode (GL_PROJECTION); gluOrtho2D (0.0,300.0,0.0,250.0); } void ellipsePlotPoints(int xCenter, int yCenter, int x, int y) { setPixel(xCenter + x, yCenter + y); setPixel(xCenter - x, yCenter + y);

setPixel(xCenter + x, yCenter - y); setPixel(xCenter - x, yCenter - y); }

void ellipseMidpoint(int xCenter, int yCenter, int Rx, int Ry) { int Rx2=Rx*Rx; int Ry2=Ry*Ry; int twoRx2=2*Rx2; int twoRy2=2*Ry2; int p; int x = 0; int y = Ry; int px = 0; int py=twoRx2*y;

ellipsePlotPoints(xCenter, yCenter, x, y); /*Region1*/ p=round(Ry2-(Rx2 * Ry) + (0.25 * Rx2)); while(px < py) { x++; px += twoRy2; if(p < 0) p += Ry2 + px; else{ y--; py -= twoRx2; p += Ry2 + px - py; }

ellipsePlotPoints(xCenter, yCenter, x, y); } /*Region2*/ p=round(Ry2 * (x+0.5) * (x+0.5) + Rx2 * (y-1) * (y-1) - Rx2 * Ry2); while(y > 0) { y--; py -= twoRx2; if(p > 0) p += Rx2 - py; else { x++; px += twoRy2; p += Rx2 - py + px; } ellipsePlotPoints(xCenter, yCenter, x, y); } } void ellipse (void) { glClear (GL_COLOR_BUFFER_BIT); glColor3f (0.0,1.0,1.0); xCenter = 150; yCenter = 150; x = 100; y = 50; ellipseMidpoint (xCenter, yCenter, x, y) ; glFlush(); }

void main(int argc, char** argv) { glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition (100,50); glutInitWindowSize (400,400); glutCreateWindow("Ellipse"); init(); glutDisplayFunc (ellipse); glutMainLoop(); }

1. 2. 3. 4.

Write and Execute the code Change Ellipse size and color Change window size and position Draw Multi ellipse

Student Note:

Experiment - 7 GUI (Mouse Functions - Points)

#include <gl/glut.h> GLsizei winWidth = 400, winHeight = 300; void init (void) { glClearColor (0.0, 0.0, 1.0, 1.0); glMatrixMode (GL_PROJECTION); gluOrtho2D (0.0, 200.0, 0.0, 150.0); } void displayFcn (void) { glClear (GL_COLOR_BUFFER_BIT); glColor3f (1.0, 0.0, 0.0); glPointSize (3.0); } void winReshapeFcn (GLint (newWidth), GLint (newHeight)) { glViewport (0, 0, newWidth, newHeight); glMatrixMode (GL_PROJECTION); glLoadIdentity ( ); gluOrtho2D (0.0, GLdouble (newWidth), 0.0, GLdouble (newHeight)); winWidth = newWidth; winHeight = newHeight; } void setpixel (int x, int y)

{ glBegin (GL_POINTS); glVertex2i (x,y); glEnd ( ); } void mousePtPlot (GLint button, GLint action, GLint xMouse, GLint yMouse) { if (button == GLUT_LEFT_BUTTON && action == GLUT_DOWN) setpixel (xMouse, winHeight - yMouse); glFlush ( ); } void main (int argc, char** argv) { glutInit (& argc, argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition (100, 100); glutInitWindowSize (winWidth, winHeight); glutCreateWindow("Mouse Plot Points"); init(); glutDisplayFunc (displayFcn); glutReshapeFunc (winReshapeFcn); glutMouseFunc (mousePtPlot); glutMainLoop(); }

1. 2. 3. 4.

Write and Execute the code Use Right and Left mouse buttons Change point size and color Change the background color

Student Note:

Experiment - 8 GUI (Mouse Functions - Lines)

#include <gl/glut.h> GLsizei winWidth = 400, winHeight = 300; int ptCtr = 0; class scrPt { public: int x, y; }; void init (void) { glClearColor (1.0, 1.0, 1.0, 1.0); glMatrixMode (GL_PROJECTION); gluOrtho2D (0.0, 200.0, 0.0, 150.0); } void displayFcn (void) { glClear (GL_COLOR_BUFFER_BIT); glColor3f (1.0, 0.0, 0.0); } void winReshapeFcn (int (newWidth), int (newHeight)) { glViewport (0, 0, newWidth, newHeight); glMatrixMode (GL_PROJECTION); glLoadIdentity ( );

gluOrtho2D (0.0, double (newWidth), 0.0, double (newHeight)); winWidth = newWidth; winHeight = newHeight; } void drawLineSegment (scrPt endPt1, scrPt endPt2) { glBegin (GL_LINES); glVertex2i (endPt1.x, endPt1.y); glVertex2i (endPt2.x, endPt2.y); glEnd (); }

void polyline (int button, int action, int xMouse, int yMouse) { static scrPt endPt1, endPt2; if (ptCtr == 0) { if (button == GLUT_LEFT_BUTTON && action ==GLUT_DOWN) { endPt1.x = xMouse; endPt1.y = winHeight - yMouse; ptCtr = 1; } else if (button == GLUT_RIGHT_BUTTON) exit (0); } else if(button == GLUT_LEFT_BUTTON && action ==GLUT_DOWN) { endPt2.x = xMouse; endPt2.y = winHeight - yMouse; drawLineSegment (endPt1, endPt2); endPt1 = endPt2;

} else if (button == GLUT_RIGHT_BUTTON) exit (0); glFlush (); } void main (int argc, char** argv) { glutInit (& argc, argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition (100, 100); glutInitWindowSize (winWidth, winHeight); glutCreateWindow("Draw Interactive Polyline "); init(); glutDisplayFunc (displayFcn); glutReshapeFunc (winReshapeFcn); glutMouseFunc (polyline); glutMainLoop(); }

1. 2. 3. 4.

Write and Execute the code Try Right and Left mouse buttons Change line color Change the background color

Student Note:

Experiment -9 Math Function Drawing

#include <gl/glut.h> #include <stdlib.h> #include <math.h> #define SW 640 //screenwidth #define SH 480 //screenhieght #define MaxX 4.0 #define A (SW/MaxX) #define C (SH/2.0) void Init(void) { glClearColor(1.0,1.0,1.0,0.0); // set white background color glColor3f(1.0, 0.0, 0.0); // set the drawing color glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0, SW, 0.0, SH); } GLdouble myFunc(GLdouble t){ return sin(2*3.14*t) * exp(-0.5*t); // the function to be ploted. } void plotFunc(void) // plot the defined function { GLdouble t; glBegin(GL_LINE_STRIP); glBegin(GL_POINTS); for (t=0; t<MaxX; t+=0.005)

glVertex2d(A*t, C*(myFunc(t)+1)); glEnd(); glFlush(); } void Display(void) { glClear(GL_COLOR_BUFFER_BIT); // clear the screen plotFunc(); } void main(int argc, char** argv) { glutInit(&argc, argv); // initialize the toolkit glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); // set display mode glutInitWindowSize(640,480); // set window size glutInitWindowPosition(100, 150); // set window position on screen glutCreateWindow("my function"); // open the screen window glutDisplayFunc(Display); // register redraw function Init(); glutMainLoop(); // go into a perpetual loop } 1. Write and Execute the code 2. Plot different Math functions 3. Change line color Student Note:

Experiment -10 GUI ( A board)

#include <gl/glut.h> #include <stdlib.h> #include <math.h> #define SW 640 //screenwidth #define SH 480 //screenhieght #define R SW/SH typedef struct aa {int x,y;} GLintPoint; #define MaxX 4.0 #define A (SW/MaxX) #define C (SH/2.0) GLint mouseX=115, mouseY=121; void Init(void) { glClearColor(1.0,1.0,1.0,0.0); // set white background color glColor3f(1.0, 0.0, 0.0); // set the drawing color glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0, SW, 0.0, SH); } // mouse callback void myMouse(int button, int state, int x, int y) { if (button=GLUT_LEFT_BUTTON) { mouseX=x; mouseY=y; y=SH-y;

GLint size=2; glBegin(GL_POINTS); glVertex2i(x,y); glEnd(); glRecti(x,y,x+size,y+size); glFlush(); } } void myMovedMouse(GLint x, GLint y) { GLint y1=SH-y; GLint size=5; // a dot is 4 by 4 pixels glRecti(x,y1,x+size,y1+size); glFlush(); } void Display(void) { glClear(GL_COLOR_BUFFER_BIT); } void myReshape(GLsizei W, GLsizei H) { if (R< W/H) glViewport(0,0,W,W/R); else glViewport(0,0,H*R,H); } void main(int argc, char** argv) { glutInit(&argc, argv); // initialize the toolkit

// clear the screen

glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); // set display mode glutInitWindowSize(640,480); // set window size glutInitWindowPosition(100, 150); // set window position on screen glutCreateWindow("Active Board"); // open the screen window glutDisplayFunc(Display); // register redraw function glutMotionFunc(myMovedMouse); glutMouseFunc(myMouse); glutReshapeFunc(myReshape); Init(); glutMainLoop(); // go into a perpetual loop } 1. 2. 3. 4. Write and Execute the code Try Right and Left mouse buttons Change line size and color Change the background color

Student Note:

Experiment -11 Animation

#include <GL/glut.h> int a[2]={5,5}, b[2]={10,10}, c[2]={11,11}, d[2]={20,20}, e[2]={21,21}, f[2]={30,30}; float angle=1.0; void drawlines(void) { glClear(GL_COLOR_BUFFER_BIT); glMatrixMode(GL_MODELVIEW); glRotatef(angle, 0.0, 1.0, 0.0); glBegin(GL_LINES); glColor3f(1.0, 0.4, 0.0); glVertex3iv(a); glVertex3iv(b); glColor3f(0.0, 1.0, 1.0); glVertex3iv(c); glVertex3iv(d); glColor3f(1.0, 0.0, 1.0); glVertex3iv(e); glVertex3iv(f); glEnd(); glFlush(); glutSwapBuffers(); }

void mouse(int btn, int state, int x, int y) { if (state == GLUT_DOWN) { if (btn == GLUT_LEFT_BUTTON) angle = angle + 1.0f; else if (btn == GLUT_RIGHT_BUTTON) angle = angle - 1.0f; else angle = 0.0f; } } int main(int argc, char **argv) { glutInit(&argc, argv); glutInitWindowSize(500, 500); glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE); glutCreateWindow("Glut rotate"); glutMouseFunc(mouse); glutDisplayFunc(drawlines); glutIdleFunc(drawlines); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(-30.0, 30.0, -30.0, 30.0, -30.0, 30.0); glRotatef(30.0, 1.0, 0.0, 0.0); glMatrixMode(GL_MODELVIEW); glClearColor(1.0, 1.0, 1.0, 0.0); glutMainLoop(); return(0); }

1. 2. 3. 4. 5.

Write and Execute the code Try different vectors Try different angles Change mouse buttons Change rotation angle

Student Note:

Experiment -12 Chess Board

#include <gl/glut.h> #include <stdlib.h> #include <math.h> int x,y; #define SW 640 //screenwidth #define SH 640 //screenhieght #define color1 0.6,0.5,0.0 #define color2 0.0,0.0,0.0 void Init(void) { glMatrixMode(GL_PROJECTION); gluOrtho2D(0.0, SW, 0.0, SH); } void DrawCheckBoard(int number) { int w=SW/number; for (int i=0; i<number; i++) for (int j=0; j<number; j++) { if ((i+j)%2) glColor3f(color1); else glColor3f(color2); glRecti(i*w,j*w,(i+1)*w, (j+1)*w); } glFlush();

} void Display(void) { glClear(GL_COLOR_BUFFER_BIT); DrawCheckBoard(8); }

// clear the screen

void main(int argc, char** argv) { glutInit(&argc, argv); // initialize the toolkit glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); // set display mode glutInitWindowSize(640,460); // set window size glutInitWindowPosition(100, 150); // set window position on screen glutCreateWindow("CheckBoard"); // open the screen window glutDisplayFunc(Display); // register redraw function Init(); glutMainLoop(); // go into a perpetual loop }

6. 7. 8. 9.

Write and Execute the code Change the cells number Change the cells color Change window size and position

Student Note:

Experiment -13 A - character

#include<gl/glut.h> void Init() { glClearColor (0.0, 0.0, 0.0, 0.0); // set display window background color glColor3f(1.0,1.0,1.0); // set primitive color glMatrixMode(GL_PROJECTION); // set projection parameter gluOrtho2D(0.0,400.0,0.0,400.0); // display two dimensional window } void display() { glClear(GL_COLOR_BUFFER_BIT); // Assign color to window glBegin(GL_LINES); glVertex2i(25,50); glVertex2i(75,200); glVertex2i(75,200); glVertex2i(125,50); glVertex2i(125,50); glVertex2i(100,50); glVertex2i(100,50); glVertex2i(85,100); glVertex2i(85,100); glVertex2i(65,100); glVertex2i(65,100); glVertex2i(50,50); glVertex2i(50,50); glVertex2i(25,50); glVertex2i(65,125); glVertex2i(75,150); glVertex2i(75,150); glVertex2i(85,125);

glVertex2i(85,125); glVertex2i(65,125); glEnd(); glFlush(); // process all OpenGL routines as quickly as possible } int main(int argc, char** argv) { glutInit(&argc,argv); // initialize GLUT glutInitDisplayMode(GLUT_SINGLE |GLUT_RGB); //set display mode glutInitWindowSize(400,400); // set display window width and height glutInitWindowPosition(50,50); // set display window position glutCreateWindow("lines"); // create display window Init(); //execute initialization procedure glutDisplayFunc(display); //send graphics to display window glutMainLoop(); // display and wait return 0; } 1. 2. 3. 4. 5. Write and Execute the code Use different functions: Points, lines Change window size and position Change the background color Change the Primitives color

Student Note: