1

Computer GraphicsTopic : Introduction to OpenGLReview Lecture-Sessional I

By

Dr. S. Hassan Amin

2

Overview

Complete OpenGL ProgramMaking Line DrawingsSimple Interaction with the Mouse and

Keyboard

3

Complete OpenGL Program

1. #include <windows.h> // use as needed for your system2. #include <gl/Gl.h>3. #include <gl/glut.h>4. //<<<<<<<<<<<<<<<<<<<<<<< myInit >>>>>>>>>>>>>>>>>>>>5. void myInit(void)6. {7. glClearColor(1.0,1.0,1.0,0.0); // set white background color8. glColor3f(0.0f, 0.0f, 0.0f); // set the drawing color9. glPointSize(4.0); // a ‘dot’ is 4 by 4 pixels10. glMatrixMode(GL_PROJECTION);11. glLoadIdentity();12. gluOrtho2D(0.0, 640.0, 0.0, 480.0);13. }14. //<<<<<<<<<<<<<<<<<<<<<<<< myDisplay >>>>>>>>>>>>>>>>>15. void myDisplay(void)16. {17. glClear(GL_COLOR_BUFFER_BIT); // clear the screen18. glBegin(GL_POINTS);

4

Complete OpenGL Program (Contd )

1. glVertex2i(100, 50); // draw three points2. glVertex2i(100, 130);3. glVertex2i(150, 130);4. glEnd();5. glFlush(); // send all output to display6. }7. //<<<<<<<<<<<<<<<<<<<<<<<< main >>>>>>>>>>>>>>>>>>>>>>8. void main(int argc, char** argv)9. {10. glutInit(&argc,argv); // initialize the toolkit11. glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); // set display mode12. glutInitWindowSize(640,480); // set window size13. glutInitWindowPosition(100, 150); // set window position on screen14. glutCreateWindow("my first attempt"); // open the screen window15. glutDisplayFunc(myDisplay); // register redraw function16. myInit();17. glutMainLoop(); // go into a perpetual loop18. }

5

Making Line Drawings

Drawing Polylines and PolygonsLine Drawing using moveto() and lineto()Drawing Aligned RectanglesAspect Ratio of an Aligned RectangleFilling Polygons

6

Drawing Lines

OpenGL makes it easy to draw a line.Use GL_LINES as the argument to glBegin(),

and pass it the two end points as vertices.Thus to draw a line between (40,100) and

(202,96) use:glBegin(GL_LINES); glVertex2i(40, 100);

glVertex2i(202, 96);

glEnd();

7

Drawing Lines

This code might be encapsulated for convenience in the routine drawLineInt():

1. void drawLineInt(GLint x1, GLint y1, GLint x2, GLint y2)

2. {3. glBegin(GL_LINES);4. glVertex2i(x1, y1);5. glVertex2i(x2, y2);6. glEnd();7. }

8

Drawing Lines

If more than two vertices are specified between glBegin(GL_LINES) and glEnd() they are taken in pairs and a separate line is drawn between each pair.

9

Drawing Lines

1. glBegin(GL_LINES);

2. glVertex2i(10, 20); // first horizontal line

3. glVertex2i(40, 20)

4. glVertex2i(20, 10); // first vertical line

5. glVertex2i(20, 40);

6. glEnd();

7. glFlush();

10

Drawing Lines

OpenGL provides tools for setting the attributes of lines.

A line’s color is set in the same way as for points,using glColor3f().

Thickness of lines is set by glLineWidth(num).

11

Drawing Polylines and Polygons

A polyline is a collection of line segments joined end to end. It is described by an ordered list of points, as in: p0=(x0,y0),p1=(x1,y1)…..pn=(xn,yn) In OpenGL a polyline is called a “line strip”, and is drawn by

specifying the vertices in turn between glBegin(GL_LINE_STRIP) and glEnd().

For example, the code:1. glBegin(GL_LINE_STRIP); // draw an open polyline2. glVertex2i(20,10);3. glVertex2i(50,10);4. glVertex2i(20,80);5. glVertex2i(50,80);6. glEnd();7. glFlush();

12

Drawing Polylines and Polygons (Contd )

13

Drawing Polylines and Polygons (Contd)

If it is desired to connect the last point with the first point to make the polyline into a polygon simply replace GL_LINE_STRIP with GL_LINE_LOOP.

Polygons drawn using GL_LINE_LOOP cannot be filled with a color or pattern.

To draw filled polygons you use glBegin(GL_POLYGON).

14

Line Drawing using moveto and lineto()

Using OpenGL , we are going to write our own moveto() and lineto() functions.

moveto() and lineto() manipulate a hypothetical pen whose position is called the current position , or CP.

We can summarize the effects of the two functions as follows : set CP to (x,y)

moveto(x,y) ; To draw line from CP to (x,y) and then update CP

to (x,y) lineto(x,y) ;

15

Line Drawing using moveto and lineto()

To draw a line from (x1,y1) to (x2,y2) , we just need to call moveto(x1,y1) and then lineto(x2,y2).

To draw a polyline comprising (x1,y1),(x2,y2)…….(xn,yn), we can use the following code :

moveto(x[0],y[0]);

for (int i=1 ; i<n ; i++)

lineto(x[i],y[i]);

16

Line Drawing using moveto and lineto()

We define lineto() and moveto() function using OpenGL , as follows :1. GLintPoint CP; // global current position

2. //<<<<<<<<<<<<< moveto >>>>>>>>>>>>>>

3. void moveto(GLint x, GLint y)

4. {

5. CP.x = x; CP.y = y; // update the CP

6. }

7. //<<<<<<<<<<<< lineTo >>>>>>>>>>>>>>>>>

17

Line Drawing using moveto and lineto()

1. void lineto(GLint x, GLint y)2. {3. glBegin(GL_LINES); // draw the line4. glVertex2i(CP.x, CP.y);5. glVertex2i(x, y);6. glEnd();7. glFlush();8. CP.x = x; CP.y = y; // update the CP9. }

18

Drawing Aligned Rectangles

A special case of a polygon is the aligned rectangle.

Its called aligned , because its sides are parallel to the coordinate axes.

OpenGL provides us a function to draw aligned rectangle.

Syntax :

glRecti(GLint x1,GLint y1,GLint x2,Glint y2);The rectangle is filled with current color.

19

Drawing Aligned Rectangles (Contd)

1. void drawFlurry(int num, int numColors, int Width, int Height)2. // draw num random rectangles in a Width by Height rectangle3. {4. srand(time(0));5. for (int i = 0; i < num; i++)6. {7. GLint x1 = rand() % Width; // place corner randomly8. GLint y1 = rand() % Height;9. GLint x2 = rand()%Width ; // pick the size so it fits10. GLint y2 = rand() %Height;11. GLfloat lev = ((rand() % numColors))/numColors; // random value, in range 0 to 112. glColor3f(lev,lev,lev); // set the gray level13. glRecti(x1, y1, x2, y2); // draw the rectangle14. }15. glFlush();16. }

20

Drawing Aligned Rectangles (Contd)

21

Aspect Ratio of an Aligned Rectangle

The principal properties of an aligned rectangle are its size, position , color , and shape.

The aspect ratio of a rectangle is simply the ratio of its width to its height :

aspect ratio = width / heightThe aspect ratio of 8.5 by 11 is called

landscape.

22

Aspect Ratio of an Aligned Rectangle (Contd)

Aspect Ratio of Television screen is 4/3The aspect ratio of golden rectangle is

Φ=1.618034.A square has aspect ratio equal to 1A piece of paper in portrait orientation

has an aspect ratio of 0.7727.

23

Filling Polygon

OpenGL also supports filling more general polygons with a pattern or color.

The restriction is that the polygon must be convex.

Definition : Convex polygon :A polygon is convex if a line connecting any two points of the polygon lies entirely within it.

24

Filling Polygon ( Contd )

25

Filling Polygon ( Contd )

To draw a convex polygon based on vertices (x0,y0),(x1,y1)…….(xn,yn) use the usual list of vertices but place them between glBegin(GL_POLYGON) and glEnd() :

glBegin(GL_POLYGON)glVertex2f(x0,y0);

glVertex2f(x1,y1); ……….. glVertex2f(xn,yn); glEnd();

26

Graphics Primitives in OpenGL

GL_TRIANGLES: takes the listed vertices three at a time, and draws a separate triangle for each;

GL_QUADS: takes the vertices four at a time and draws a separate quadrilateral for each;

GL_TRIANGLE_STRIP: draws a series of triangles based on triplets of vertices: v0, v1, v2, then v2, v1, v3, then v2, v3, v4, etc. (in an order so that all triangles are “traversed” in the same way ;e.g. counterclockwise).

GL_TRIANGLE_FAN: draws a series of connected triangles based on triplets of vertices: v0, v1, v2, then v0, v2, v3, then v0, v3, v4, etc.

GL_QUAD_STRIP: draws a series of quadrilaterals based on foursomes of vertices: first v0, v1, v3, v2, then v2, v3, v5, v4, then v4, v5, v7, v6 (in an order so that all quadrilaterals are “traversed” in the same way; e.g. counterclockwise).

27

Graphics Primitives in OpenGL(Contd)

28

Simple Interaction with the Mouse and KeyBoard

Interactive graphics applications let the user control the flow of a program by natural human motions: pointing and clicking the mouse, and pressing various keyboard keys.

The mouse position at the time of the click, or the identity of the key pressed, is made available to the application program and is processed as appropriate.

29

Simple Interaction with the Mouse and KeyBoard (Contd)

Using the OpenGL Utility Toolkit (GLUT) the programmer can register a callback function with keyboard and Mouse events by using the following commands:glutMouseFunc(myMouse)glutMotionFunc(myMovedMouse)glutKeyboardFunc(myKeyboard)

30

Mouse Interaction

The callback function related to mouse event must have the following prototype :void myMouse(int button, int State , int x, int y)

In response to mouse event , the system will call our registered function e.g myMouse.

Button parameter will have one of the following values :GLUT_LEFT_BUTTONGLUT_MIDDLE_BUTTONGLUT_RIGHT_BUTTON

31

Mouse Interaction

State will be one of the following :GLUT_UPGLUT_DOWN

x,y give us the position of the mouse at the time of the event.

32

Example : Specifying a Rectangle with Mouse

1. void myMouse(int button, int state, int x, int y)2. {3. static GLintPoint corner[2];4. static int numCorners = 0; // initial value is 05. if(button == GLUT_LEFT_BUTTON && state ==

GLUT_DOWN)6. {7. corner[numCorners].x = x;8. corner[numCorners].y = screenHeight - y; // flip y

coordinate9. numCorners++; // have another point10.if(numCorners == 2)

33

Example : Specifying a Rectangle with Mouse

1. {2. glRecti(corner[0].x, corner[0].y, corner[1].x,

corner[1].y);3. numCorners = 0; // back to 0 corners4. }5. }6. else if(button == GLUT_RIGHT_BUTTON && state

== GLUT_DOWN)7. glClear(GL_COLOR_BUFFER_BIT); // clear the

window8. glFlush();9. }

34

Example : “Freehand” drawing with a fat brush

1. void myBrush(int mouseX, int mouseY)2. {3. GLint x = mouseX; //grab the mouse position4. GLint y = screenHeight – mouseY; // flip it

as //usual5. GLint brushSize = 20;6. glRecti(x,y, x + brushSize, y + brushSize);7. glFlush();8. }

35

The End