Computer Graphics

Topic : Introduction to OpenGL

Review Lecture-Sessional I
By
Dr. S. Hassan Amin

1
Overview

 Complete OpenGL Program

 Making Line Drawings
 Simple Interaction with the Mouse and
Keyboard

2
Complete OpenGL Program
1. #include <windows.h> // use as needed for your system
2. #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 color
8. glColor3f(0.0f, 0.0f, 0.0f); // set the drawing color
9. glPointSize(4.0); // a ‘dot’ is 4 by 4 pixels
10. 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 screen
18. glBegin(GL_POINTS);

3
Complete OpenGL Program (Contd )

1. glVertex2i(100, 50); // draw three points

2. glVertex2i(100, 130);
3. glVertex2i(150, 130);
4. glEnd();
5. glFlush(); // send all output to display
6. }
7. //<<<<<<<<<<<<<<<<<<<<<<<< main >>>>>>>>>>>>>>>>>>>>>>
8. void main(int argc, char** argv)
9. {
10. glutInit(&argc,argv); // initialize the toolkit
11. glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); // set display mode
12. glutInitWindowSize(640,480); // set window size
13. glutInitWindowPosition(100, 150); // set window position on screen
14. glutCreateWindow("my first attempt"); // open the screen window
15. glutDisplayFunc(myDisplay); // register redraw function
16. myInit();
17. glutMainLoop(); // go into a perpetual loop
18. }

4
Making Line Drawings

 Drawing Polylines and Polygons

 Line Drawing using moveto() and lineto()
 Drawing Aligned Rectangles
 Aspect Ratio of an Aligned Rectangle
 Filling Polygons

5
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();

6
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. }

7
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.

8
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();

9
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).

10
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 polyline
2. glVertex2i(20,10);
3. glVertex2i(50,10);
4. glVertex2i(20,80);
5. glVertex2i(50,80);
6. glEnd();
7. glFlush();

11
Drawing Polylines and Polygons (Contd )

12
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).

13
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) ;

14
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]);

15
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 >>>>>>>>>>>>>>>>>

16
Line Drawing using moveto and lineto()

1. void lineto(GLint x, GLint y)

2. {
3. glBegin(GL_LINES); // draw the line
4. glVertex2i(CP.x, CP.y);
5. glVertex2i(x, y);
6. glEnd();
7. glFlush();
8. CP.x = x; CP.y = y; // update the CP
9. }

17
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.

18
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 rectangle
3. {
4. srand(time(0));
5. for (int i = 0; i < num; i++)
6. {
7. GLint x1 = rand() % Width; // place corner randomly
8. GLint y1 = rand() % Height;
9. GLint x2 = rand()%Width ; // pick the size so it fits
10. GLint y2 = rand() %Height;
11. GLfloat lev = ((rand() % numColors))/numColors; // random value, in range 0 to 1
12. glColor3f(lev,lev,lev); // set the gray level
13. glRecti(x1, y1, x2, y2); // draw the rectangle
14. }
15. glFlush();
16. }

19
Drawing Aligned Rectangles (Contd)

20
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 / height
 The aspect ratio of 8.5 by 11 is called
landscape.

21
Aspect Ratio of an Aligned Rectangle (Contd)

 Aspect Ratio of Television screen is 4/3

 The aspect ratio of golden rectangle is
Φ=1.618034.
 A square has aspect ratio equal to 1
 A piece of paper in portrait orientation
has an aspect ratio of 0.7727.

22
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.

23
Filling Polygon ( Contd )

24
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();

25
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).

26
Graphics Primitives in OpenGL(Contd)

27
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.

28
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)

29
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_BUTTON
 GLUT_MIDDLE_BUTTON
 GLUT_RIGHT_BUTTON

30
Mouse Interaction

 State will be one of the following :

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

31
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 0
5. if(button == GLUT_LEFT_BUTTON && state ==
GLUT_DOWN)
6. {
7. corner[numCorners].x = x;
8. corner[numCorners].y = screenHeight - y; // flip y
coordinate
9. numCorners++; // have another point
10.if(numCorners == 2)

32
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 corners
4. }
5. }
6. else if(button == GLUT_RIGHT_BUTTON && state
== GLUT_DOWN)
7. glClear(GL_COLOR_BUFFER_BIT); // clear the
window
8. glFlush();
9. }

33
Example : “Freehand” drawing with
a fat brush
1. void myBrush(int mouseX, int mouseY)
2. {
3. GLint x = mouseX; //grab the mouse position
4. GLint y = screenHeight – mouseY; // flip it
as //usual
5. GLint brushSize = 20;
6. glRecti(x,y, x + brushSize, y + brushSize);
7. glFlush();
8. }

34
The End

35