Computer Graphics 3 Lee ByungGook 1232020 Computer Graphics

Computer Graphics 3 Lee Byung-Gook 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 1

Event driven programming • Using a GUI (graphical user interface), a user causes the software to execute commands based on events, such as a mouse click, or a key pressed. • The structure of the software is totally different from a "batch, " sequential program. The main program always looks like the following: while (not finished) { 1) Get the next event from the operating system event queue. 2) Process the event. } • Because the event loop is always the same, It can be written once. glut. Main. Loop(); 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 2

Event driven programming • Functions are registered with particular events. When an event happens, if there is a registered event to process the event, the main loop calls the registered function. These registered functions are called "callback functions". • Standard events: window needs to be redrawn glut. Display. Func() window was reshaped glut. Reshape. Func() mouse button was pressed glut. Mouse. Func() mouse was moved glut. Motion. Func(); glut. Passive. Motion. Func(); keyboard key was pressed glut. Keyboard. Func() 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 3

lab 02. cpp // lab 02. cpp, Computer Graphics, lbg@dongseo. ac. kr #include <stdio. h> #include <stdlib. h> #include <GL/glut. h> GLint window. Height; void my. Reshape(int width, int height) { gl. Clear. Color (. 75, 0. 0); gl. Viewport(0, 0, width, height); gl. Matrix. Mode(GL_PROJECTION); gl. Load. Identity(); gl. Ortho(0, width, 0, height, -1, 1); gl. Matrix. Mode(GL_MODELVIEW); gl. Clear(GL_COLOR_BUFFER_BIT); gl. Color 3 f(0. 98, . 04, . 70); window. Height =height; gl. Point. Size(5); } void my. Display() { gl. Clear(GL_COLOR_BUFFER_BIT); gl. Flush(); printf("in my. Displyn"); } 12/3/2020 void my. Mouse(int button, int state, int x, int y) { if (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) { gl. Begin(GL_POINTS); gl. Vertex 2 i(x, window. Height-y); gl. End(); gl. Flush(); } else if (button == GLUT_RIGHT_BUTTON) exit(-1); } void main(int argc, char** argv) { glut. Init(&argc, argv); glut. Init. Display. Mode (GLUT_SINGLE | GLUT_RGB); glut. Init. Window. Size(500, 500); glut. Init. Window. Position(0, 0); glut. Create. Window("lab 02"); glut. Reshape. Func(my. Reshape); glut. Display. Func(my. Display); glut. Mouse. Func(my. Mouse); glut. Main. Loop(); } Computer Graphics, Lee Byung-Gook, Dongseo Univ. 4

gl. Point. Size • gl. Point. Size - specify the diameter of rasterized points • void gl. Point. Size( GLfloat size ) • PARAMETERS size Specifies the diameter of rasterized points. The initial value is 1. 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 5

gl. Rect • • • gl. Rectd, gl. Rectf, gl. Recti, gl. Rects, gl. Rectdv, gl. Rectfv, gl. Rectiv, gl. Rectsv draw a rectangle C SPECIFICATION void gl. Rectd( GLdouble x 1, GLdouble y 1, GLdouble x 2, GLdouble y 2 ) void gl. Rectf( GLfloat x 1, GLfloat y 1, GLfloat x 2, GLfloat y 2 ) void gl. Recti( GLint x 1, GLint y 1, GLint x 2, GLint y 2 ) void gl. Rects( GLshort x 1, GLshort y 1, GLshort x 2, GLshort y 2 ) PARAMETERS x 1, y 1 Specify one vertex of a rectangle. x 2, y 2 Specify the opposite vertex of the rectangle. C SPECIFICATION void gl. Rectdv( const GLdouble *v 1, const GLdouble *v 2 ) void gl. Rectfv( const GLfloat *v 1, const GLfloat *v 2 ) void gl. Rectiv( const GLint *v 1, const GLint *v 2 ) void gl. Rectsv( const GLshort *v 1, const GLshort *v 2 ) PARAMETERS v 1 Specifies a pointer to one vertex of a rectangle. v 2 Specifies a pointer to the opposite vertex of the rectangle. 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 6

lab 0201 struct GLint. Point { int }; x; y; void my. Mouse(int button, int state, int x, int y) { static GLint. Point corner[2]; static int number. Corners = 0; if (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) { corner[number. Corners]. x = x; corner[number. Corners]. y = window. Height - y; number. Corners++; if (number. Corners >=2) { gl. Recti(corner[0]. x, corner[0]. y, corner[1]. x, corner[1]. y); number. Corners = 0; } } else if (button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN) gl. Clear(GL_COLOR_BUFFER_BIT); gl. Flush(); } 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 7

lab 0202 struct GLint. Point { int }; GLint. Point corner[2]; // global variable x; y; void my. Mouse(int button, int state, int x, int y) { if (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) { corner[0]. x = x; corner[0]. y = window. Height - y; corner[1]. x = corner[0]. x; corner[1]. y = corner[0]. y; } } void my. Motion(int x, int y) { corner[1]. x = x; corner[1]. y = window. Height - y; gl. Clear(GL_COLOR_BUFFER_BIT); gl. Recti( corner[0]. x, corner[0]. y, corner[1]. x, corner[1]. y); gl. Flush(); } glut. Motion. Func(my. Motion); 12/3/2020 // in main() Computer Graphics, Lee Byung-Gook, Dongseo Univ. 8

Exercise 1. • From lab 0202 • Draw a rectangle using polyline form gl. Begin(type); gl. Vertex*(. . ); . . gl. Vertex*(. . ); gl. End(); 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 9

lab 0203 struct GLint. Point { int x; int y; }; const GLint MAX_RECTANGLES = 10; GLint. Point my. Rectangles[MAX_RECTANGLES][2]; GLint Number. Rectangles = 0; void my. Motion(int x, int y) { my. Rectangles[Number. Rectangles-1][1]. x = x; my. Rectangles[Number. Rectangles-1][1]. y = window. Height - y; my. Display(); } void my. Mouse(int button, int state, int x, int y) { if (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN && Number. Rectangles < MAX_RECTANGLES) { void my. Display(void) { gl. Clear(GL_COLOR_BUFFER_BIT); for (int j=0; j<Number. Rectangles; j++) gl. Recti(my. Rectangles[j][0]. x, my. Rectangles[j][0]. y, my. Rectangles[j][1]. x, my. Rectangles[j][1]. y); gl. Flush(); } my. Rectangles[Number. Rectangles][0]. x = x; my. Rectangles[Number. Rectangles][0]. y = window. Height - y; my. Rectangles[Number. Rectangles][1]. x = x; -12/3/2020 y; my. Rectangles[Number. Rectangles][1]. y = window. Height Computer Graphics, Lee Byung-Gook, Dongseo Univ. Number. Rectangles++; 10

Double Buffering • • When we redisplay our CRT, we want to do so at a rate sufficiently high that we cannot notice the clearing and redrawing of the screen. For most of us, a CRT display must be refreshed at a rate between 50 and 85 times per second, or we will notice the display flickering. Double buffering can provide a solution to these problems. glut. Init. Display. Mode (GLUT_SINGLE | GLUT_RGB); -> glut. Init. Display. Mode (GLUT_DOUBLE | GLUT_RGB); gl. Flush(); -> gl. Flush(); glut. Swap. Buffers(); 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 11

glut. Init. Display. Mode • • glut. Init. Display. Mode sets the initial display mode. Usage void glut. Init. Display. Mode(unsigned int mode); mode Display mode, normally the bitwise OR-ing of GLUT display mode bit masks. See values below: GLUT RGBA Bit mask to select an RGBA mode window. This is the default if neither GLUT RGBA nor GLUT INDEX are specified. GLUT RGB An alias for GLUT RGBA. GLUT INDEX Bit mask to select a color index mode window. This overrides GLUT RGBA if it is also specified. GLUT SINGLE Bit mask to select a single buffered window. This is the default if neither GLUT DOUBLE or GLUT SINGLE are specified. GLUT DOUBLE Bit mask to select a double buffered window. This overrides GLUT SINGLE if it is also specified. 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 12

glut. Init. Display. Mode • • GLUT ACCUM Bit mask to select a window with an accumulation buffer. GLUT ALPHA Bit mask to select a window with an alpha component to the color buffer(s). GLUT DEPTH Bit mask to select a window with a depth buffer. GLUT STENCIL Bit mask to select a window with a stencil buffer. GLUT MULTISAMPLE Bit mask to select a window with multisampling support. GLUT STEREO Bit mask to select a stereo window. GLUT LUMINANCE Bit mask to select a window with a “luminance” color model. 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 13

glut. Swap. Buffers • • glut. Swap. Buffers swaps the buffers of the current window if double buffered. Usage void glut. Swap. Buffers(void); Description Performs a buffer swap on the layer in use for the current window. Specifically, glut. Swap. Buffers promotes the contents of the back buffer of the layer in use of the current window to become the contents of the front buffer. The contents of the back buffer then become undefined. The update typically takes place during the vertical retrace of the monitor, rather than immediately after glut. Swap. Buffers is called. An implicit gl. Flush is done by glut. Swap. Buffers before it returns. Subsequent Open. GL commands can be issued immediately after calling glut. Swap. Buffers, but are not executed until the buffer exchange is completed. If the layer in use is not double buffered, glut. Swap. Buffers has no effect. 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 14

lab 0204 GLint old. X; old. Y; void draw. Dot(GLint x, GLint y) { gl. Begin(GL_POINTS); gl. Vertex 2 i(x, y); gl. End(); old. X = x; old. Y = y; } void draw. Line(GLint x, GLint y) { gl. Begin(GL_LINES); gl. Vertex 2 i(old. X, old. Y); gl. Vertex 2 i(x, y); gl. End(); old. X = x; old. Y = y; } void draw. Box(GLint x, GLint y) { gl. Recti(old. X, old. Y, x, y); old. X = x; old. Y = y; } void my. Keyboard(unsigned char the. Key, int x, int y) { y = window. Height - y; // reverse y axis switch (the. Key) { case 'c' : gl. Clear(GL_COLOR_BUFFER_BIT); break; case '. ': draw. Dot(x, y); break; case 'l': draw. Line(x, y); break; case 'b': draw. Box(x, y); break; case 27: exit(-1); // esc key } gl. Flush(); } glut. Keyboard. Func(my. Keyboard); 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. // in main(); 15

Homework 2 • • In two weeks Create one rectangle with mouse events Move rectangle Change size Change color with keyboard events (r: red, g: green, b: blue) 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 16

Coordinate conversions • From pixels (screen coordinates) (in red) to world (user coordinates) (in blue) • Since the point is in the same location, the distances in pixel units must be proportional to the distances in world units. Therefore 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 17

Screen coordinate Pixel. X axis (0, 0) Pixel. Y Pixel. X Pixel. Ymax (Pixel. X, Pixel. Y) Pixel. Xmax Pixel. Y axis 12/3/2020 (Pixel. Xmax, Pixel. Ymax) Computer Graphics, Lee Byung-Gook, Dongseo Univ. 18

World coordinate World. Y axis (World. Xmax, World. Ymax) World. Ymax-World. Y World. X - World. Xmin (World. X, World. Y) World. Ymax-World. Ymin (0, 0) World. Xmax - World. Xmin World. X axis (World. Xmin, World. Ymin) 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 19

Coordinate conversions Therefore, Pixel. X = A*World. X + B, Pixel. Y = C*World. Y + D 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 20

Coordinate conversions Example : Given a viewport, 200 pixels wide and 100 pixels high, calculate the location of a point given its world coordinates. The world coordinate system is 12 units wide (-3 to 9) and 10 units high (-4 to 6). What is the pixel location of the point (3. 5, 3. 2)? A = 200 / (9 - (-3)) = 16. 67, B = -(-3 / (9 -(-3))*200 = 50, C = -(100 / (6 - (-4))) = -10, D = (6 / (6 - (-4)))*100 = 60 Pixel. X = A*3. 5 + B = 16. 67*3. 5 + 50 = 108. 33 = 108, Pixel. Y = C*3. 2 + D = -10*3. 2 + 60 = 28 Therefore, the point (3. 5, 3. 2) in world coordinates will be drawn at pixel location (108, 28). 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 21

gl. Ortho • The gl. Ortho function multiplies the current matrix by an orthographic matrix. • void gl. Ortho( GLdouble left, GLdouble right, GLdouble bottom, GLdouble top, GLdouble near, GLdouble far ); • Parameters left, right : The coordinates for the left and right vertical clipping planes. bottom, top : The coordinates for the bottom and top horizontal clipping planes. near, far : The distances to the nearer and farther depth clipping planes. These distances are negative if the plane is to be behind the viewer. 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 22

Orthographic projection 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 23

gl. Viewport • The gl. Viewport function sets the viewport. • void gl. Viewport( GLint x, GLint y, GLsizei width, GLsizei height ); • Parameters x, y : The lower-left corner of the viewport rectangle, in pixels. The default is (0, 0). width, height : The width and height, respectively, of the viewport. When an Open. GL context is first attached to a window, width and height are set to the dimensions of that window. 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 24

Viewport 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 25

lab 03. cpp // lab 03. cpp, Computer Graphics, lbg@dongseo. ac. kr #include <stdio. h> #include <stdlib. h> #include <GL/glut. h> GLfloat size=2. 0; GLint N=4; void my. Axis(void) { int i; gl. Color 3 f(0. 98, . 04, . 70); gl. Begin(GL_LINES); for(i=1; i<N; i++) { gl. Vertex 2 f(-size+2. 0*i*size/N, size); gl. Vertex 2 f(-size, size+2. 0*i*size/N); gl. Vertex 2 f(size, size+2. 0*i*size/N); } 12/3/2020 gl. End(); Computer Graphics, } void my. Draw(void) { gl. Color 3 f(0. 60, . 40, . 70); gl. Begin(GL_POLYGON); gl. Vertex 2 f(-1. , -1. ); gl. Vertex 2 f(1. , 1. ); gl. Vertex 2 f(-1. , 1. ); gl. End(); } void my. Display(void) { gl. Clear(GL_COLOR_BUFFER_BIT); my. Axis(); my. Draw(); gl. Flush(); } Lee Byung-Gook, Dongseo Univ. 26

lab 03. cpp void my. Reshape(int width, int height) { gl. Clear. Color (. 75, 0. 0); gl. Viewport(0, 0, width, height); gl. Matrix. Mode(GL_PROJECTION); gl. Load. Identity(); gl. Ortho(-size, -size, size); gl. Matrix. Mode(GL_MODELVIEW); } void main(int argc, char** argv) { glut. Init(&argc, argv); glut. Init. Display. Mode (GLUT_SINGLE | GLUT_RGB); glut. Init. Window. Size(500, 500); glut. Init. Window. Position(0, 0); glut. Create. Window("lab 03"); glut. Reshape. Func(my. Reshape); glut. Display. Func(my. Display); glut. Main. Loop(); } 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 27

lab 03 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 28

Exercise 2. • From lab 03 • modify source code to display following figures 12/3/2020 Computer Graphics, Lee Byung-Gook, Dongseo Univ. 29