1. Interactive Computer Graphics Lecture 2: The programming approach to building graphical applications using OpenGL API.

2. Outline. 1.The implementation of the drawing in Graphics library. Set of Primitives. The operations defined on this set. 1.The pen-plotted model approach. 1.Pen-plotted drawing. 2.Example: draw the square rotated 45 degrees in clockwise direction.

3. 1.The Synthetic-camera model approach. 1.Synthetic-camera model drawing. 2.Example: draw the square rotated by an arbitrary angle. 2.The primitives of the OpenGL library. The value types in OpenGL. The function naming convention. The list of primitives. The definitions of object in OpenGL.

4. 1.Different primitives: oPoint. oAttributes. oImplementation. How to adjust the attributes. oLine Segment. oAttributes. oImplementation. How to adjust the attributes. oPolygon. oAttributes. oImplementation. How to adjust the attributes.

5. Implementation of the drawing in Graphics library. To draw some picture we should define the object (s). Any object is a combination of some sub objects, sub object – of sub sub objects, etc. Thus, we need to start from some “minimal” object – atomic object. Therefore, each library should have a set of objects which it knows to draw.

6. This means that any object from the set can be drawn by a well-defined sequence of call(s) to Library API (this may be a single function or some set of calls). This set of the library’s minimal objects is denoted as the set of “library’s primitives” The set of operations on the primitives is defined to build composite objects and / or change the state of existing object. As a result any group of objects (scene) can be built by applying the operations to primitives.

7. 1. Pen-plotted model approach. Depending on the {primitive, operations} definition we can separate two principally different approaches to the computer drawing. To understand this distinction we compare the drawing in pen-plotted model and in synthetic-camera model. Toward this end we’ll consider the example: draw a square and rotate it to an angle of 45 degrees.

8. Drawing in the pen-plotted model: –The only primitive is “line” –The operations: MoveTo (x 0, y 0 ) – set the pen in the point with coordinates (x 0, y 0 )‏ LineTo (x 1, y 1 ) – draw the line from the point (x 0, y 0 ) up to point (x 1, y 1 ). We draw directly in the window, so the Window Coordinate System is used.

9. Window, its parts, and Window Coordinate System. Title BarMenu Bar Tool Bars Status Bars Scroll Bars (if needed)‏ Client area  place for drawing  our paper

10. X Y (0,0)‏ Window Coordinate System Client Coordinate System XX YY X We can draw only in the Client area. Therefore, in Graphics we use the Client Coordinate System

11. Example 1. –Let us draw a square with a side of length 50 with the left-upper corner in the point (300, 300)‏ MoveTo(300, 300); LineTo (350, 300); LineTo (350, 350); LineTo (300, 350); LineTo (300, 300); –To draw rotated square we must know the coordinates of all vertices, therefore using some trigonometry...

12. Evaluation. AD = 50  AO = AD * cos(45 0 ) = 35.36 Point O: (325, 325), and after rotation: – A = (325, 360.36); B = (360.36, 325); – C = (325, 289.64); D = (289.64, 325). AB C D D A B C O O

13. Program code MoveTo(325, 360.36); LineTo (360.36, 325); LineTo (325, 289.64); LineTo (289.64, 325); LineTo (325, 360.36); Obviously, this way of drawing has disadvantages: –In the real world we have the same object in a modified state; but in the graphics model it is a new object. –To display the new state of the object we should perform hard computations.

14. 2. The Synthetic-camera model approach. 1.Synthetic-camera model drawing. In this model we intend to obviate the difficulties of the pen-plotted model. The drawing process includes the two parts: –Build the object using the most appropriate coordinate system. –Any state of this object may be implemented as transformations of the coordinate system. Therefore, we should build the object only once and display its state using the operations implemented in the graphics library (OpenGL in our course)

15. Example 1. –Let us draw a square with a side of length 50 which upper-left corner is in (300, 300)‏ Void GetSquare(GLfloat side) { GLfloat x = 300, y = 300; glBegin(GL_POLYGON); glVertex2f(x, y); glVertex2f(x + side, y); glVertex2f(x + side, y - side); glVertex2f(x, y - side); glEnd(); } –The function builds the polygon connecting in series the given vertices. (We’ll study the details later)‏

16. Pay an attention to the coordinate system we use here. It differs a little from the window coordinates: To rotate our square by 45 0 (or any other angle) in the square’s plane it is enough to use a very simple code: Y X

17. void RotateSquare(GLfloat angle, GLfloat side)‏ { glRotatef(angle, 0, 0, 1); GetSquare(side); } Now as response on WM_PAINT event, i.e. in the display-callback function, we write: void display-call()‏ { glClear(GL_COLORBUFFER_BIT); RotateSquare(45, 50); glFlush(); } This code is implemented in the SCMDemo program.

18. 3. The primitives of the OpenGL library. 1.The value types in OpenGL Any library uses data (values) and, hence, the size of the memory to store a single value should be defined. This size in conjunction with the allowed operations define the type. Each value is defined as a value of some type. It is possible to use the types defined in Win32 API. OpenGL, however, defines its own types to be independent from the software installed on the host machine.

19. These type names are defined in gl.h. For example: typedef unsigned char GLboolean; Thus, we can use Boolean type variables even if the type “bool” is not defined in the current version of compier. If we’ll want to use int64 type, it is enough modify typedef int GLint; in current gl.h (in one place only!) to typedef int64 GLint;

20. For each type OpenGL holds up as a correspondence a prefix that is used in names of functions which use values of this types. Cite as examples some types defined in OpenGL: GLenumunsigned int32ui GLbooleanunsigned char8ub GLdoubledouble64 (real)‏d GLfloatfloat32 (real)‏f Glintint32 (integer)‏i GLshortshort16s GLbytesigned char6b Open GLC++ typeSize (bits)‏Prefix

21. 2. The function naming convention The names of the functions in OpenGL are built in accordance to some rules. A function name is built as: –the prefix: ‘gl’ –a human-readable name –a digit 2, 3, or 4 to set the dimensionless of the world space; we’ll use the 2 0r 3 only. –a suffix to point out the type of variables, as i – Glint; f – GLfloat; d – GLdouble; s – GLshort. Some functions use the ‘v’ as a suffix to use the vector as the input argument.

22. 3. The list of primitives. The OpenGl library defines as primitives three types of an object: Point Line segment Polygon Any object in any program is built from components of these types. Note, that no 3D primitive is defined in the library.

23. Frequently, it is convenient to use the ready (library) functions providing the drawing of more complex objects by a single call to the function. The extension of the set of the OpenGL primitives can be found in the GLU library. For example: gluCilinder gluDisk Some 3D objects can be built by GLUT functions like glutWireSphere glutSolidCube

24. 4. The definition of an object in OpenGL. Now we start to study the technique of the primitives building. Each object in OpenGL is defined by its vertices included in the correct order into operator parentheses: glBegin( ); //TODO: set the vertices in needed order glEnd(); Connection mode is a constant defined in gl.h, defining the type of the primitive. Note, that there are few different modes for line segment and polygon definitions.

25. To define a vertex, OpenGL uses the following functions: –glVertex2f (GLfloat x, GLfloat y) to define a vertex in 2D space; the coordinates are GLfloat type values. –In a similar manner, there are glVertex2i, glVertex2d, glVertex2s, where i – Glint, d – GLdouble, s – GLshort. –In a similar manner, there are glVertex3f(GLfloat x, GLfloat y, GLfloat z), … Note, that glVertex2f is essentially the glVertex3f with z = 0. In a similar manner, there are glVertex3i, glVertex3d, glVertex3s

26. There are the rarely used glVertex4f, … functions with arguments x, y, z, w. Note, that glVertex3f is the glVertex4f with w = 1. In each family of glVertex functions there is one like glVertex3fv(GLfloat * pPoint)‏ In this type functions we define the point by a vector as GLfloat Point[] = {1.0, 2.0, 3.0}; glVertex3f(Point);

27. 5. Different primitives. Now we’ll discuss the use of all of the primitives defining in OpenGL. It is required to define what are the attributes of each primitive. After that, we can select the needed tools from the library (OpenGL in our case) or to add a custom tool. Point. Attributes Each point is defined by its – color – coordinates – size

28. Implementation. How to adjust the attributes. –Color. It can be defined in a call to the OpenGL API function glColor3f, glColor4f and similar. glColor3f(GLfloat red, GLfloat green, GLfloat blue)‏ where red, green, and blue are the RGB – components, measured in the range 0.0 – 1.0, so that (0.0, 0.0, 0.0) – black color (1.0, 1.0, 1.0) – white color (0.0, 1.0, 0.0) – green color, etc

29. –Coordinates The coordinates are specified by glVertex Function. The connection mode is GL_POINTS. –Size We can set the minimal size of point in pixels, i.e. on screen, using the function glPointSize(GLfloat size). Default size = 1 pixel. Very important (!). The functions glColor and glPointSize are examples of functions changing the state in the pipeline. This means that all the objects drawn after a call to this function type have the same attributes, until another function of this type is called with another argument.

30. Therefore, to draw the two red points, which size is 2 pixels: glColor3f(1.0, 0.0, 0.0); glPointSize(2.0); glBegin(GL_POINTS); glVertex2i(2, 4); glVertex2f(12.5, 4.2); glEnd(); Draw the last point as magenta with size 4 pixels. glColor3f(1.0, 0.0, 0.0); glPointSize(2.0); glBegin(GL_POINTS); glVertex2i(2, 4); glColor3f(0.0, 1.0, 1.0); glPointSize(4.0); glVertex2f(12.5, 4.2); glEnd(); Example: GreatBear

31. Note, that the pipeline diagram is defined by a sequence of execution operations, rather then by continuous code. In our example GreatBear the default pipeline is In interactive mode we have Set ColorSize = 1First point … Size = 1 Set ColorFirst point … Size = 1 Mouse Click Change the point size

32. Note, however, that the drawing in memory is performed only as a response to the WM_PAINT message, i.e. in the display- callback. Therefore, we should provide the following: All desired states must be set before the initializing of the call to Display callback. It is very undesirable to call this function directly. The OS has to perform this call (to send WM_PAINT event). User can do this by minimize / maximize operations. To do this from the program we need to call the function glutPostRedisplay(), providing the redrawing of the window.

33. The Primitive Line Segment. Attributes. –Color –Size (thickness)‏ –Connection mode. Implementation. –Color  glColor  pipeline state –Size  glLineWidth (GLfloat thickness)‏ We see that any primitive in OpenGL API is defined by –Operator parenthesis glBegin – glEnd –Well-ordered set of points – vertices –Connection mode given by the argument of the glBegin function.

34. There are 3 constants to define connection modes for the line segment primitive: –GL_LINE_STRIP Connect all points sequentially in the numeration order Blue: the number of a point – upper digit, Magenta: the number of a point – lower digit 1 2424 3 4242 5

35. –GL_LINE_LOOP This is the same but the contour is closed: –GL_LINES If we have the n points then the result is set of two- point line segments pt 1 -pt 2, pt 3 -pt 4, …, pt n-1 – pt n. If n is an odd number, then the last point pt n is displayed as isolated point... 1 2 3 45

36. 1 2 5 4 1 6 13 7 8 9 GL_LINES

37. The program LinePrimitives demonstrate these connection modes. We define the 10 points which connection depends on the set mode. Since the vertices are the necessary part of any object we can change the primitive type on the same set of the points. (GL_POINTS – the primitive “point”, others – line segment primitive). The operation regards only to the “custom” primitive. In this example we set the point size = 5 pixels as the fixed state. But this have no effect on the thickness of the line segment.

38. In the library with only one primitive “point”, the line segment would be considered as a complex object built from “points”, and, as a result, its thickness would be equal to the size of a point. Therefore, the primitives are defined as independent objects with own set of operations (glPointSize for point, but glLineWidth for line segment). Thus the 3D objects from GLU and GLUT libraries are not the primitives in the true sense of this word.

39. Creating menu. –To see the effect of the different connection modes using, the program uses the context menu. –This is the only type of a menu can be created by GLUT library tools (poor choice!)‏ –To create this type menu in the GLUT – based program: Design of the menu: how many items do we want. Supply the menu handler function that is the callback with predefined prototype and developer- defined name

40. Create the menu. The proper (but not mandatory) place for this is the main function after glutCreateWindow and glutDisplayFunc. –glutCreateMenu ( menu ); //argument is the name of the handler function. After that, we need to add all the items to the created menu. To this end, GLUT API defines the function In the sample program the definition is –void menu( int id)‏ –glutAddMenuEntry( char *itemTitle, int itemID); Obviously, the itemID must be unique in the scope of the same menu.

41. On the final step of the menu creating we must define the User Interface control to work with the menu interactively. GLUT API gives to developer only one control to work with context menu. This is a mouse. Therefore, we can connect with the menu or left mouse button, or right, or middle once. To connect a menu to a mouse we call the function –glutAttachMenu( ); Where is GLUT_RIGHT_BUTTON, or GLUT_LEFT_BUTTON, or GLUT_MIDDLE_BUTTON. These constants are defined in the glut.h The callback

42. Using of the menu. –When the user clicks on a menu item, the inner implementation of the GLUT library provides the call to the menu-callback. –As a result of the click, the OS creates an event and places it in the message queue of our window. After that, the message is retrieved in the message loop, and is sent to Window Procedure and, as a final stage, to the message handler, that is (in this case) the menu callback function. –A windows OS defines the message as a structure, which contains message–related information.

43. –In this case the only information we can receive is the identifier of the clicked item. –This fact essentially affects on the definition of the callback function prototype: void (int itemID)‏ –We receive the pressed menu item identifier as the argument of the menu callback function. –We see from this that the item identifier must be unique in the given menu only, but no more than this. –In contrast to the event processing callback, the menu item does not contain any information. It only determines the task that application will perform as response.

44. The Polygons. –The polygon (פוליגון או מצולע) is the object having the bounded interior. –The building of the polygon includes: Determination of the vertices as the ordered set of the point – primitives. Determination of the boundary as the line primitive built as GL_LINE_LOOP. Determination the way the polygon will be rasterized. The polygon is the base building block to create the 3D objects, because we can use them to approximate curved surfaces bounding a 3D object.

45. Polygons play a special role in computer graphics because we can display them rapidly. The performance of graphics systems is measured by the number of polygons per second that can be displayed. OpenGL is guaranteed to work properly if only the convex (מצולע מקומר) polygons are used. An object is convex, if all the points on a line segment between any two points inside the object, or on its boundary, are inside the object.

46. Examples: –Convex: –No convex –What about these?

47. Problem 1. How define whether the given point lays into a polygon? The method is very simple. We go from the point in question in arbitrary direction and calculate the number of the polygon boundary crossings, N. –if N = 2k, then it is the outer point –if N = 2k + 1, then this is the inner point A B

48. The Primitive Polygon. Attributes. –Color –Rasterization mode –Connection mode. Implementation. –Color  glColor  pipeline state –Rasterization mode  glPolygonMode(GLenum face, GLenum mode)‏ Where ‘face’ is an one from constants: GL_FRONT, GL_BACK, and GL_FRONT_AND_BACK The meaning of these flags will discuss later.

49. ‘mode’ flag can be one from GL_PONTS; Polygon vertices that are marked as the start of a boundary edge are drawn as points. Point attribute GL_POINT_SIZE control the rasterization of the points. GL_LINE; Boundary edges of the polygon are drawn as line segments. As result, we can draw the contour of a polygon. How? Hint: use in drawing of the one polygon the both GL_LINE and GL_FILL flags (but GL_LINE | GL_FILL is not allowed). GL_FILL; The interior of the polygon is filled.

50. Connection modes: –GL_POLYGON Connect successive vertices by line segments as GL_LINE_LOOP –GL_TRIANGLES Successive groups of three vertices are interpreted as triangles. The rendering of these special groups is more effective the rendering of general polygons (pt1, pt2, pt3), (pt4, pt5, pt6), … if N <> 3k, then line segment and / or isolated points may appear –GL_QUADS As triangles but in groups of four vertices. The rest may appear as triangle, line segment, and point.

51. –GL_TRIANGLE_STRIP Build the triangles as (pt1, pt2, pt3), (pt2, pt3, pt4), (pt3, pt4, pt5), … –GL_TRIANGLE_FAN The triangles with the first point as the common one. (pt1, pt2, pt3), (pt1, pt3, pt4), (pt1, pt4, pt5), … GL_QUAD_STRIP Build the quadrilaterals as (pt1, pt2, pt3, pt4), (pt3, pt4, pt5, pt6), (pt5, pt6, pt7, pt8), … i.e. for k-quadrilateral: (pt 2k, pt 2k, pt 2k+1, pt 2k+2, )‏

52. Example 1. Write the display-part program to draw the next picture: Solution –Number the points from 1 to 9 as on the picture (the order of the numeration is not the part of the problem description)‏ –Define the 2D array of float values as the type. typedef GLfloat point2[2]; 1 2 468 35 79

53. –Define the array of vertices point2 pt[] = {{x 1, y 1 }, {x 2, y 2 }, … {x 9, y 9 }} –Code glBegin( GL_TRIANGLE_STRIP); for(int I = 0; I < 9; I ++)‏ { glVertex2fv(pt[i]); } glEnd();

54. Example 2. Write the display-part program to draw the next picture: Solution glBegin( GL_TRIANGLE_FAN); for(int I = 0; I < 7; I ++)‏ { glVertex2fv(pt[i]); } glEnd(); 1 2 3 4 5 6 57

55. Example 3. Write the display-part program to draw the next picture: 1 3 5 7 2 2 4 2 Solution glBegin( GL_QUAD_STRIP); for(int I = 0; I < 8; I ++)‏ { glVertex2fv(pt[i]); } glEnd(); 6 8

56. The demonstration programs –PolygonPrimitives builds all types on the same set of points as in the LinePrimitives program. Pay attention to the using of the GL_FILL (press on ‘f’) and GL_LINE (press on ‘l’) styles –MouseMotion glutMouseFunc glutMotionFunc GL_TRIANGLE_FAN –Sierpinski gasket as example of the fractal. We’ll consider these programs in details in the next lecture.