COMPUTER GRAPHICS

Assoc. Prof. Dr. Mutlu AVCI ukurova University Computer Engineering Department

Contents
Lecture 1: Introduction to OpenGL and OpenGLUT DEVC++ development environment Working window creation Dot drawing in the window Line drawing in the window Dashed line drawing in the window Coordinate system Dashed line in the coordinate system

Introduction
What is OpenGL ? - OpenGL is a software interface to graphics hardware. - This interface consists of about 120 distinct commands, which you use to specify the objects and operations needed to produce interactive three-dimensional applications.

 What are the requirements for OpenGL?

OpenGL is designed as a streamlined, hardware-independent interface to be implemented on many different hardware platforms. To achieve these qualities, no commands for performing windowing tasks or obtaining user input are included in OpenGL; instead, you must work through whatever windowing system controls the particular hardware you're using.

 What kind of objects are defined by OpenGL?

OpenGL doesn't provide high-level commands for describing models of three-dimensional objects. Such commands might allow you to specify relatively complicated shapes such as automobiles, parts of the body, airplanes, or molecules. With OpenGL, you must build up your desired model from a small set of geometric primitives such as points, lines, and polygons.

 Development of OpenGL
Silicon Graphics (SGI) revolutionized the graphics workstation by implementing the pipeline in hardware (1982) To access the system, application programmers used a library called GL With GL, it was relatively simple to program three dimensional interactive applications

 The success of GL lead to OpenGL (1992), a platform-independent API that was

- Easy to use - Close enough to the hardware to get excellent performance - Focus on rendering - Omitted windowing and input to avoid window system dependencies

 Controlled by an Architectural Review Board (ARB) (http://www.opengl.org/developers/about/arb.html)

- Members include SGI, Microsoft, Nvidia, HP, 3DLabs, IBM,. - Relatively stable (2.0 specification currently out) - Evolution reflects new hardware capabilities - 3D texture mapping and texture objects - Vertex shaders!!! - Allows for platform specific features through extensions

 What are the OpenGL core and utility libraries?

OpenGL core libraries:

- OpenGL32 on Windows (opengl32.lib) - GL on most unix/linux systems - OpenGL Utility Library (GLU) (glu32.lib) - Provides functionality in OpenGL core but avoids having to rewrite code (ie. spheres) - Links with window system
- GLX for X window systems - WGL for Windows (windows.h) - AGL for Macintosh

 OpenGL Utility Library (GLUT) (glut32.lib) - Provides functionality common to all window systems - Open a window - Get input from mouse and keyboard - Menus - Event-driven - Code is portable but GLUT lacks the functionality of a good toolkit for a specific platform - Slide bars

OpenGL Functions
Primitives - Points - Line Segments - Polygons - curves and surfaces Attributes Transformations - Viewing - Modeling Control Input (GLUT)

 OpenGL is a state machine OpenGL functions are of two types - Primitive generating: - Can cause output if primitive is visible - How vertices are processed and appearance of primitive are controlled by the state - State changing: - Transformation functions rotate, translate, scale. - Attribute functions color, material

 OpenGL is not object oriented so there are multiple functions for a given logical function glVertex3f glVertex2i glVertex3dv Easy to create overloaded functions in C++ but issue is efficiency

OpenGL function format

 Most constants are defined in the include files gl.h, glu.h and glut.h Note #include <glut.h> should automatically include the others Examples glBegin(GL_POLYGON) glClear(GL_COLOR_BUFFER_BIT) often used as switches for functions include files also define OpenGL data types: Glfloat, Gldouble,.

OpenGL Programming Structure

#include <GL/glut.h> // required GL Utility library inclusion
void mydisplay(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); glVertex2f(-0.5, -0.5); glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd(); glFlush(); } int main(int argc, char** argv){ glutCreateWindow("simple"); glutDisplayFunc(mydisplay); glutMainLoop(); }

This kind of subroutine parts contain drawing properties of the special objects

This main program part: -creates the window which will hold the drawings; -make adjustments of the window -displays objects in the window by calling subroutines -enters a loop to hold the view

Question
If we write and execute an OpenGl program as shown below what happens? #include <GL/glut.h> main(int argc,char** argv) { glutInit(&argc,argv); glutCreateWindow("yeni"); glutMainLoop();}

Adjustments to overcome linker problems

Question
What about following codes? #include <GL/glut.h> void goruntu(void){ glFlush(); } main(int argc,char** argv) { glutInit(&argc,argv); glutCreateWindow("yeni"); glutDisplayFunc(goruntu); glutMainLoop(); }

Question
What happens if set window position? #include <GL/glut.h> void goruntu(void){ glFlush(); } main(int argc,char** argv) { glutInit(&argc,argv); glutInitWindowPosition(100,100); glutCreateWindow("yeni"); glutDisplayFunc(goruntu); glutMainLoop(); }

Question
How can we increase size of the window? #include <GL/glut.h> void goruntu(void){ glFlush(); } main(int argc,char** argv) { glutInit(&argc,argv); glutInitWindowPosition(100,100); glutInitWindowSize(800,800); glutCreateWindow("yeni"); glutDisplayFunc(goruntu); glutMainLoop(); }

Question
How can we clear the content of the window? #include <GL/glut.h> void goruntu(void){ glClear(GL_COLOR_BUFFER_BIT); glFlush(); } main(int argc,char** argv) { glutInit(&argc,argv); glutInitWindowPosition(100,100); glutInitWindowSize(800,800); glutCreateWindow("yeni"); glutDisplayFunc(goruntu); glutMainLoop(); }

Question
If we want to have a window with red background how can we do this? #include <GL/glut.h> void goruntu(void){ glClear(GL_COLOR_BUFFER_BIT); glFlush(); } main(int argc,char** argv) { glutInit(&argc,argv); glutInitWindowPosition(100,100); glutInitWindowSize(800,800); glutCreateWindow("yeni"); glClearColor(1.0,0.0,0.0,0.0); glutDisplayFunc(goruntu); glutMainLoop(); }

Question
What about green background? #include <GL/glut.h> void goruntu(void){ glClear(GL_COLOR_BUFFER_BIT); glFlush(); } main(int argc,char** argv) { glutInit(&argc,argv); glutInitWindowPosition(100,100); glutInitWindowSize(800,800); glutCreateWindow("yeni"); glClearColor(0.0,1.0,0.0,0.0); glutDisplayFunc(goruntu); glutMainLoop(); }

Question
Blue one? #include <GL/glut.h> void goruntu(void){ glClear(GL_COLOR_BUFFER_BIT); glFlush(); } main(int argc,char** argv) { glutInit(&argc,argv); glutInitWindowPosition(100,100); glutInitWindowSize(800,800); glutCreateWindow("yeni"); glClearColor(0.0,0.0,1.0,0.0); glutDisplayFunc(goruntu); glutMainLoop(); }

Analysis of Basic OpenGL Commands

Lets start with analysis of main( ) part of the program: glutInit(&argc, argv); Initiation of the Glut routines. First parameter argc stands for adres of argument count and second parameter holds the argument values passing to glut routine.

 glutInitDisplayMode(GLUT_SINGLE| GLUT_RGB); Buffer dimension and Color type of the window is decided. GLUT_SINGLE parameter shows single buffer memory is preferred. This selection is done for drawing modes. In animation case GLUT_DOUBLE is preffered.

 Other parameters are:

GLUT_RGBA : a window with RGBA color palette is chosen GLUT_RGB : except with Alpha opaqueness parameter a window with RGB color palette is chosen GLUT_INDEX : chooses color sequencing case GLUT_ACCUM : chooses accumulating buffer memory

 GLUT_ALPHA : a window with Alpha parameter is chosen GLUT_DEPTH : a window with color deepness is chosen i.e. If we would like to create a window with double buffer, RGBA color palette and color depth then our DisplayMode will be: glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH)

 glutInitWindowSize(double width, double length); If we have 800x600 window resolution, then our maximum selection of the window size will be;
glutInitWindowSize(800, 600);

 glutCreateWindow(my first window);

Creates a new window with my first window caption

 glClearColor(R, G, B, A);
R Red, G Green, B Blue, A Alpha Some color generations can be obtained as;

Black Red Green Blue Brown Purple White

0.0 1.0 0.0 0.0 0.6 0.6 1.0

0.0 0.0 1.0 0.0 0.4 0.4 1.0

0.0 0.0 0.0 1.0 0.12 0.7 1.0

 glutShadeModel(GL_FLAT);
This function decides the color domination approach of the object. If GL_FLAT is used then single color will be dominant If GL_SMOOTH is used then each corner of the object can have different color

 glutDisplayFunc(goruntu);
This function is one of the most important one. It calls a predefined view of objects All drawing actions are executed by this command

 glClear(GL_COLOR_BUFFER_BIT); It is time to start analysis of the subroutine

glClear(GL_COLOR_BUFFER_BIT); This function clears the window by painting the color defined by the glClearColor( ) Without this command you can draw overlapping objects

 glFlush( )
This command is used with single buffered window, it views the created object in the drawing window.

 glutMainLoop( ); This is the infinite loop of the window also it takes into account the directives and commands to the window such as any key press from the user

CREATING DOTs
#include <GL/glut.h>
void nokta(void){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(0.0,0.0,1.0); glPointSize(4.0); glBegin(GL_POINTS); glVertex2f(0.5,0.4); glVertex2f(-0.5,0.4); glEND( ); glFlush( );}

int main(int argc,char** argv) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE|GLUT _RGB); glutInitWindowPosition(0,0); glutInitWindowSize(800,800); glutCreateWindow(dot example"); glClearColor(1.0,1.0,1.0,1.0); glutDisplayFunc(nokta); glutMainLoop(); return 0;}

 glColor3f(R,G,B); Color adjustment for dot or surface. glPointSize(1.0); Size adjustmet for the dot. glBegin(GL_POINTS); Starts GL_POINTS directive

 glVertex2f(x,y); Gives vertex coordinates i.e. x=0.5, y=0.4

glEnd( ); Shows the end of the drawing

Line drawing
#include"gl/glut.h void gosterim(void){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(0.0,0.0,1.0); glLineWidth(4.0); glBegin(GL_LINES); glVertex2f(0.5,0.4); glVertex2f(-0.5,0.4); glEnd(); glFlush();}

int main(int argc,char ** argv){ glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition(0,0); glutInitWindowSize(400,400); glutCreateWindow("yeni"); glClearColor(1.0,1.0,1.0,1.0); glShadeModel(GL_FLAT); glutDisplayFunc(gosterim); glutMainLoop(); return 0;}

glLineWidth(4.0); Adjusts width of the line between two points Default line width is 1.0.
GL_LINES directive is used to draw line between two points

Dashed line drawing

#include"gl/glut.h void gosterim(void){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(0.0,0.0,1.0); glEnable(GL_LINE_STIPPLE); glLineStipple(1, 0xFF); glBegin(GL_LINES); glVertex2f(0.5,0.4); glVertex2f(-0.5,0.4); glEnd();

glFlush();} int main(int argc, ** argv){ glutInit(&argc,arg); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition(0,0); glutInitWindowSize(400,400);

glutCreateWindow("yeni"); glClearColor(1.0,1.0,1.0,1.0); glShadeModel(GL_FLAT); glutDisplayFunc(gosterim); glutMainLoop(); return 0; }

void glEnable ( ); void glDisable ( );

Commands are used for activating and deactivating many of special effect commands

In this application it is used for enable the dashed line drawing,

GL_LINE_STIPPLE represents dashed drawing type, glLineStipple(1,0xFF); used to adjust dashed line types. First parameter is multiplier term,

Second one is a binary design parameter, each zero represents a colorless part of line where 1 represents drawn part.
After design selection it is time to define the coordinates between glBegin ( ) and glEnd ( ).

Question
What will happen if we use glLineStipple(5,0xaa) ?

Coordinate System
#include"gl/glut.h" void koordinat(void) { glColor3f(0.0,0.0,1.0); glBegin(GL_LINES); glVertex2f(0.0,-1.0); glVertex2f(0.0,1.0);

glVertex2f(1.0,0.0); glVertex2f(-1.0,0.0); glEnd();

} void gosterim(void) { glClear(GL_COLOR_BUFFER_BIT); koordinat(); glFlush(); }

int main(int argc,char ** argv) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition(0,0); glutInitWindowSize(400,400); glutCreateWindow("yeni"); glClearColor(1.0,1.0,1.0,1.0); glShadeModel(GL_FLAT);

glutDisplayFunc(gosterim); glutMainLoop(); return 0; }

Question
Write an OpenGL program to draw dashed line from (-0.5,0.4) to (0.5,0.4) on the coordinate system drawn by solid lines.

Answer
#include"gl/glut.h void kesikcizgi(void) { glColor3f(1.0,0.0,0.0); glEnable(GL_LINE_STIPPLE); glLineStipple(1 , 0xff);

glBegin(GL_LINES); glVertex2f(0.5,0.4); glVertex2f(-0.5,0.4); glEnd(); glDisable(GL_LINE_STIPPLE);

}

void koordinat(void) { glColor3f(0.0,0.0,1.0); glBegin(GL_LINES); glVertex2f(0.0,-1.0); glVertex2f(0.0,1.0); glVertex2f(1.0,0.0); glVertex2f(-1.0,0.0); glEnd(); }

void gosterim(void) { glClear(GL_COLOR_BUFFER_BIT); koordinat(); kesikcizgi(); glFlush(); }

int main(int argc,char ** argv) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition(0,0); glutInitWindowSize(400,400); glutCreateWindow("yeni");

glClearColor(1.0,1.0,1.0,1.0); glShadeModel(GL_FLAT); glutDisplayFunc(gosterim); glutMainLoop(); return 0; }

Polygons
Default values for the polygons have filled front and back surfaces. Filling is done with selected colours. If we would like to have a not filled drawing, following command must be used: glPolygonMode(glenum surface, glenum mod);

 First parameter may have; GL_FRONT, GL_BACK, GL_FRONT_AND_BACK Second parameter may be; GL_POINT GL_LINE GL_FILL

Drawing a Triangle
#include"gl/glut.h" void ucgen(void) { glColor3f(0.0,1.0,1.0); glBegin(GL_TRIANGLES); glVertex2f(-0.4,-0.4); glVertex2f(0.4,-0.4);

glVertex2f(0.0,0.4); glEnd(); } void koordinat(void) { glColor3f(0.0,0.0,1.0); glBegin(GL_LINES); glVertex2f(0.0,-1.0);

glVertex2f(0.0,1.0); glVertex2f(1.0,0.0); glVertex2f(-1.0,0.0); glEnd(); }

void gosterim(void) { glClear(GL_COLOR_BUFFER_BIT); ucgen(); koordinat(); glFlush(); }

int main(int argc,char ** argv) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition(0,0); glutInitWindowSize(400,400); glutCreateWindow("yeni"); glClearColor(1.0,1.0,1.0,1.0);

glShadeModel(GL_FLAT);
glutDisplayFunc(gosterim); glutMainLoop(); return 0;

Question
If the following command line addition takes place to subroutine called as ucgen ( ) as sown below; void ucgen (void) glPolygonMode(GL_FRONT,GL_LINE);
What will happen?

Drawing a Rectangle
#include gl/glut.h
void dortgen(void) { glPolygonMode(GL_FRONT ,GL_LINE); glColor3f(0.0,1.0,1.0); glBegin(GL_QUADS); glVertex2f(-0.4,-0.4);

glVertex2f(-0.4,0.4); glVertex2f(0.4,0.4); glVertex2f(0.4,-0.4); glEnd();

void koordinat(void) { glColor3f(0.0,0.0,1.0); glBegin(GL_LINES); glVertex2f(0.0,-1.0); glVertex2f(0.0,1.0); glVertex2f(1.0,0.0); glVertex2f(-1.0,0.0); glEnd(); }

void gosterim(void) { glClear(GL_COLOR_BUFFER_BIT); dortgen(); koordinat(); glFlush(); }

int main(int argc,char ** argv) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition(0,0); glutInitWindowSize(200,200);

glutCreateWindow("drtgen"); glClearColor(1.0,1.0,1.0,1.0); glShadeModel(GL_FLAT); glFrontFace(GL_CW); glutDisplayFunc(gosterim); glutMainLoop(); return 0;

GL_QUADS directive completes the rectangle.

Sequence of vertex coordinate is important to have a correct rectangle.

If we add glPolygonMode(GL_BACK, GL_LINE) Then a frame view with transparant inner fill will be obtained. This situation is directly resulted from the drawing sequence given by the program.

If drawing is done in counter clock wise direction then front of the shape drawn is assumed.
In counter clock wise direction the drawn figure will be the back of the shape.

Adjustment of this situation can be done by changing

glFrontFace(type) if type is selected as GL_CCW then counter clock wise will be front, if type is selected as GL_CW then clock wise direction will be front.

Another method for drawing a rectangle is to use command: glRectf(-x1, -y1, x2, y2); x1 and x2 are coordinates of width, y1 and y2 are coordinates of length.

#include gl/glut.h void koordinat(void) { glColor3f(0.0,0.0,1.0); glBegin(GL_LINES); glVertex2f(0.0,-1.0); glVertex2f(0.0,1.0);

glVertex2f(1.0,0.0); glVertex2f(-1.0,0.0); glEnd();

} void dikdortgen(void){ glColor3f(0.0,0.5,0.8); glRectf(-0.5,-0.4,0.5,0.4); }

void gosterim(void) { glClear(GL_COLOR_BUFFER_BIT); dikdortgen(); koordinat(); glFlush(); }

int main(int argc,char ** argv) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition(0,0); glutInitWindowSize(400,400); glutCreateWindow("yeni");

glClearColor(1.0,1.0,1.0,1.0); glShadeModel(GL_FLAT); glutDisplayFunc(gosterim); glutMainLoop(); return 0; }

Drawing a Circle
Coordinates of a point on a circle are
X= R * cos and Y = R * sin

Where is in Radian scale. Radian = (2 * * Degree ) / 360

#include"gl/glut.h" #include"math.h" void gosterim(void) { double der=0; int a=0; glClear(GL_COLOR_BUFFER_BIT); glColor3f(0.0,0.0,1.0);

glBegin(GL_POLYGON); for(a=0;a<360;a++) { der=2*3.14*a/360; glVertex2f(cos(der)*0.5 , sin(der)*0.5); } glEnd(); glFlush(); }

int main(int argc,char ** argv) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition(0,0); glutInitWindowSize(400,400); glutCreateWindow("ember");

glClearColor(1.0,1.0,1.0,1.0); glShadeModel(GL_FLAT); glPolygonMode(GL_FRONT,GL_FILL); glutDisplayFunc(gosterim); glutMainLoop(); return 0;

}

GL_LINE_LOOP makes connection among points. No filling is contained by this command. If a filling effect is required glBegin(GL_POLYGON) can be written. Then a filled circle will be obtained.

Question
If we write following GL program what kind of output will be seen?

#include"gl/glut.h" #include"math.h void gosterim(void) { double der=0; int a=0; glClear(GL_COLOR_BUFFER_BIT); glColor3f(0.0,0.0,1.0); glBegin(GL_POINTS);

for(a=0;a<6;a++) { der=2*3.14*a/6; glVertex2f(cos(der)*0.5 , sin(der)*0.5); } glEnd(); glFlush(); }

int main(int argc,char ** argv) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition(0,0); glutInitWindowSize(200,200); glutCreateWindow("altgen");

glClearColor(1.0,1.0,1.0,1.0); glShadeModel(GL_FLAT); glPolygonMode(GL_FRONT,GL_FILL); glutDisplayFunc(gosterim); glutMainLoop(); return 0;

}