1. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Today, we are talking about event driven programming technique in openGL program.
If a user press a key or mouse button, window system received the event and move to current active window event queue.
And then process this event.
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

2. 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.  glutMainLoop();
After a openGL program has done initial setup such as display mode, size, position and creating windows, openGL programs enter the event processing loop by calling glutMainLoop. This routine should be called at most once in a program. Once called, this routine will never return. It will call as necessary any callbacks that have been registered.
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

3. 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 glutDisplayFunc()
window was reshaped glutReshapeFunc()
mouse button was pressed glutMouseFunc()
mouse was moved glutMotionFunc();
glutPassiveMotionFunc();
keyboard key was pressed glutKeyboardFunc()
A programmer specified routine that can be registered with GLUT to be called in response to a specific type of event.
glutDisplayFunc sets the display callback for the current window. When GLUT determines that the normal plane for the window needs to be redisplayed, the display callback for the window is called.
glutReshapeFunc sets the reshape callback for the current window. The shape callback is triggered when a window is reshaped. A reshape callback is also triggered immediately before a window’s first display callback after a window is created or whenever an overlay for the window is established. The width and height parameters of the callback specify the new window size in pixels. Before the callback, the current window is set to the window that has been reshaped. If a reshape callback is not registered for a window or NULL is passed to glutReshapeFunc, the default reshape callback is used. This default callback will simply call glViewport(0,0,width,height) on the normal plane.
glutMouseFunc sets the mouse callback for the current window. When a user presses and releases mouse buttons in the window, each press and each release generates a mouse callback. The button parameter is one of GLUT LEFT BUTTON, GLUT MIDDLE BUTTON,or GLUT RIGHT BUTTON. For systems with only two mouse buttons, it may not be possible to generate GLUT MIDDLE BUTTON callback. For systems with a single mouse button, it may be possible to generate only a GLUT LEFT BUTTON callback. The state parameter is
either GLUT UP or GLUT DOWN indicating whether the callback was due to a release or press respectively. The x and y callback parameters indicate the window relative coordinates when the mouse button state changed.
glutMotionFunc and glutPassiveMotionFunc set the motion and passive motion callback respectively for the current window. The motion callback for a window is called when the mouse moves within the window while one or more mouse buttons are pressed. The passive motion callback for a window is called when the mouse moves within the window while no mouse buttons are pressed.
The x and y callback parameters indicate the mouse location in window relative coordinates. Passing NULL to glutMotionFunc or glutPassiveMotionFunc disables the generation of the mouse or passive motion callback respectively.
glutKeyboardFunc sets the keyboard callback for the current window. When a user types into the window, each key press generating an ASCII character will generate a keyboard callback. The key callback parameter is the generated ASCII character. The state of modifier keys such as Shift cannot be determined directly; their only effect will be on the returned ASCII data. The x and y callback parameters indicate the mouse location in window relative coordinates when the key was pressed.
Passing NULL to glutKeyboardFunc disables the generation of keyboard callbacks.
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

4. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
lab02.cpp
// lab02.cpp, Computer Graphics,
#include <stdio.h>
#include <stdlib.h>
#include <GL/glut.h>
GLint windowHeight;
void myReshape(int width, int height) {
glClearColor (.75, .75, .75, 0.0);
glViewport(0,0,width,height);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(0, width, 0, height, -1, 1);
glMatrixMode(GL_MODELVIEW);
glClear(GL_COLOR_BUFFER_BIT);
glColor3f(0.98, .04, .70);
windowHeight =height;
glPointSize(5); }
void myDisplay()
glFlush();
printf("in myDisply\n");
void myMouse(int button, int state, int x, int y) {
if (button == GLUT_LEFT_BUTTON &&
state == GLUT_DOWN) {
glBegin(GL_POINTS);
glVertex2i(x, windowHeight-y);
glEnd();
glFlush(); }
else if (button == GLUT_RIGHT_BUTTON) exit(-1);
void main(int argc, char** argv)
glutInit(&argc,argv);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(500,500);
glutInitWindowPosition(0,0);
glutCreateWindow("lab02");
glutReshapeFunc(myReshape);
glutDisplayFunc(myDisplay);
glutMouseFunc(myMouse);
glutMainLoop();
This is a simple mouse interaction lab file.
Please execute this sample code.
It can draw a point with size 5 when you click left mouse button.
It terminates this program when you click right mouse button.
Add printf statement in myDisplay function.
So, we can check when repaint again current window.
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

5. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
glPointSize
glPointSize - specify the diameter of rasterized points
void glPointSize( GLfloat size )
PARAMETERS size Specifies the diameter of rasterized points. The initial value is 1.
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

6. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
glRect
glRectd, glRectf, glRecti, glRects, glRectdv, glRectfv, glRectiv, glRectsv - draw a rectangle
C SPECIFICATION
void glRectd( GLdouble x1, GLdouble y1, GLdouble x2, GLdouble y2 )
void glRectf( GLfloat x1, GLfloat y1, GLfloat x2, GLfloat y2 )
void glRecti( GLint x1, GLint y1, GLint x2, GLint y2 )
void glRects( GLshort x1, GLshort y1, GLshort x2, GLshort y2 )
PARAMETERS x1, y1 Specify one vertex of a rectangle. x2, y2 Specify the opposite vertex of the rectangle.
void glRectdv( const GLdouble *v1, const GLdouble *v2 )
void glRectfv( const GLfloat *v1, const GLfloat *v2 )
void glRectiv( const GLint *v1, const GLint *v2 )
void glRectsv( const GLshort *v1, const GLshort *v2 )
PARAMETERS v1 Specifies a pointer to one vertex of a rectangle. v2 Specifies a pointer to the opposite vertex of the rectangle.
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

7. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
lab0201
struct GLintPoint {
int x;
int y; };
void myMouse(int button, int state, int x, int y) {
static GLintPoint corner[2];
static int numberCorners = 0;
if (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) {
corner[numberCorners].x = x;
corner[numberCorners].y = windowHeight - y;
numberCorners++;
if (numberCorners >=2)
glRecti(corner[0].x, corner[0].y, corner[1].x, corner[1].y);
numberCorners = 0; }
else if (button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN)
glClear(GL_COLOR_BUFFER_BIT);
glFlush();
This is the second example of lab02.
Copy this code and replace the myMouse routine of lab02.
After the next two clicks of the left mouse button is clicked, the rectangle is drawn.
But, there is not visual feedback that for the first corner and the rectangles are not stored in memory and will "disappear" when the window is redrawn.
static local variables retain their values from one function call to the next.
define GLintPoint as
struct GLintPoint {
int x;
int y; };
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

8. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
lab0202
struct GLintPoint {
int x;
int y; };
GLintPoint corner[2]; // global variable
void myMouse(int button, int state, int x, int y) {
if (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) {
corner[0].x = x;
corner[0].y = windowHeight - y;
corner[1].x = corner[0].x;
corner[1].y = corner[0].y; }
void myMotion(int x, int y)
corner[1].x = x;
corner[1].y = windowHeight - y;
glClear(GL_COLOR_BUFFER_BIT);
glRecti( corner[0].x, corner[0].y, corner[1].x, corner[1].y);
glFlush();
glutMotionFunc(myMotion); // in main()
This is another example of lab02.
To set the motion callback function for this window, insert this statement in main routine.
Now, you can see the visual feedback.
myMouse - "sees" the up and down clicks of the mouse buttons
myMotion - "sees" the motion of the cursor
Communication between the functions must be through global variables (the parameter lists cannot be changed).
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

9. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Exercise 1.
From lab0202
Draw a rectangle using polyline form
glBegin(type);
glVertex*(..); .
glEnd();
Change code of lab0202 to draw a rectangle using polyline form.
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

10. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
lab0203
struct GLintPoint {
int x;
int y; };
const GLint MAX_RECTANGLES = 10;
GLintPoint myRectangles[MAX_RECTANGLES][2];
GLint NumberRectangles = 0;
void myMouse(int button, int state, int x, int y) {
if (button == GLUT_LEFT_BUTTON &&
state == GLUT_DOWN &&
NumberRectangles < MAX_RECTANGLES) {
myRectangles[NumberRectangles][0].x = x;
myRectangles[NumberRectangles][0].y =
windowHeight - y;
myRectangles[NumberRectangles][1].x = x;
myRectangles[NumberRectangles][1].y =
NumberRectangles++; }
void myMotion(int x, int y) {
myRectangles[NumberRectangles-1][1].x = x;
myRectangles[NumberRectangles-1][1].y =
windowHeight - y;
myDisplay(); }
void myDisplay(void)
glClear(GL_COLOR_BUFFER_BIT);
for (int j=0; j<NumberRectangles; j++)
glRecti(myRectangles[j][0].x,
myRectangles[j][0].y,
myRectangles[j][1].x,
myRectangles[j][1].y);
glFlush();
If the window must be redrawn, it is the programs responsibility to totally redraw all required objects.
The objects must be stored in memory so that they can be redrawn.
Create global variables to store the objects. Add graphic objects to the variables as the user creates them.
Implement the "display" function to redraw all objects defined in the variables.
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

11. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
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.
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
-> glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);
glFlush();
-> glFlush();
glutSwapBuffers();
In a graphics system, this requirement means that the contents of the frame buffer must be redrawn at this refresh rate.
As long as the contents of the frame buffer are unchanged and we refresh at the 50 to 85 Hz rate, we should not notice the refresh taking place. If we change the contents of the frame buffer during a refresh, we may see undesirable artifacts of how we generate the display. One manifestation of this problem occurs if the display being drawn is complex and cannot be drawn in a single refresh cycle.
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

12. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
glutInitDisplayMode
glutInitDisplayMode sets the initial display mode.
Usage void glutInitDisplayMode(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.
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

13. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
glutInitDisplayMode
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.
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

14. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
glutSwapBuffers
glutSwapBuffers swaps the buffers of the current window if double buffered.
Usage void glutSwapBuffers(void);
Description
Performs a buffer swap on the layer in use for the current window. Specifically, glutSwapBuffers 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 glutSwapBuffers is called. An implicit glFlush is done by glutSwapBuffers before it returns. Subsequent OpenGL commands can be issued immediately after calling glutSwapBuffers, but are not executed until the buffer exchange is completed. If the layer in use is not double buffered, glutSwapBuffers has no effect.
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

15. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
lab0204
GLint oldX;
GLint oldY;
void drawDot(GLint x, GLint y) {
glBegin(GL_POINTS);
glVertex2i(x, y);
glEnd();
oldX = x;
oldY = y; }
void drawLine(GLint x, GLint y)
glBegin(GL_LINES);
glVertex2i(oldX, oldY);
void drawBox(GLint x, GLint y) {
glRecti(oldX, oldY, x, y);
oldX = x;
oldY = y; }
void myKeyboard(unsigned char theKey, int x, int y)
y = windowHeight - y; // reverse y axis
switch (theKey)
case 'c' : glClear(GL_COLOR_BUFFER_BIT);
break;
case '.': drawDot(x,y);
case 'l': drawLine(x,y);
case 'b': drawBox(x,y);
case 27: exit(-1); // esc key
glFlush();
glutKeyboardFunc(myKeyboard); // in main();
Execute this code with lab02 file. To set the keyboard callback function for this window, insert this statement in main routine.
This is a simple keyboard interaction lab file. we can draw a point, line and box. If you press ‘.’, it draw a point at the current mouse position. If you press ‘l’. After the next two clicks of the left mouse button is clicked, the line segment is drawn in the present color.
If you press ‘b’, the rectangle is drawn.
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

16. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
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)
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

17. 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
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

18. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Screen coordinate
(0,0)
(PixelXmax,PixelYmax)
PixelX axis
PixelY axis
(PixelX, PixelY)
PixelY
PixelX
PixelYmax
PixelXmax
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

19. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
World coordinate
WorldX axis
WorldYmax-WorldYmin
(0,0)
WorldY axis
(WorldXmax, WorldYmax)
(WorldXmin, WorldYmin)
(WorldX, WorldY)
WorldYmax-WorldY
WorldX - WorldXmin
WorldXmax - WorldXmin
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

20. Coordinate conversions
Therefore, PixelX = A*WorldX + B, PixelY = C*WorldY + D
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

21. 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
PixelX = A*3.5 + B = 16.67* = = 108,
PixelY = C*3.2 + D = -10* = 28
Therefore, the point (3.5, 3.2) in world coordinates will be drawn
at pixel location (108, 28).
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

22. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
glOrtho
The glOrtho function multiplies the current matrix by an orthographic matrix.
void glOrtho( 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.
This simple orthographic projection takes a point (x,y,z) and projects it into the point (x,y,0), as shown in next figure.
Because our two-dimensional world consists of only the plane z=0, the projection has no effect; however, we can employ the machinery of a three-dimensional graphics system to produce our image. In openGL, an orthographic projection with a right-parallelepiped viewing volume is specified via glOrtho.
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

23. Orthographic projection
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

24. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
glViewport
The glViewport function sets the viewport.
void glViewport( 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 OpenGL context is first attached to a window, width and height are set to the dimensions of that window.
A viewport is a rectangular area of the display window. By default, it is the entire window, but it can set to any smaller size in pixels via the function glViewport
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

25. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Viewport
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

26. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
lab03.cpp
// lab03.cpp, Computer Graphics,
#include <stdio.h>
#include <stdlib.h>
#include <GL/glut.h>
GLfloat size=2.0;
GLint N=4;
void myAxis(void) {
int i;
glColor3f(0.98, .04, .70);
glBegin(GL_LINES);
for(i=1; i<N; i++) {
glVertex2f(-size+2.0*i*size/N, -size);
glVertex2f(-size+2.0*i*size/N, size);
glVertex2f(-size, -size+2.0*i*size/N);
glVertex2f(size, -size+2.0*i*size/N); }
glEnd();
void myDraw(void) {
glColor3f(0.60, .40, .70);
glBegin(GL_POLYGON);
glVertex2f(-1., -1.);
glVertex2f(1., -1.);
glVertex2f(1., 1.);
glVertex2f(-1., 1.);
glEnd(); }
void myDisplay(void)
glClear(GL_COLOR_BUFFER_BIT);
myAxis();
myDraw();
glFlush();
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

27. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
lab03.cpp
void myReshape(int width, int height) {
glClearColor (.75, .75, .75, 0.0);
glViewport(0,0,width,height);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(-size, size, -size, size, -size, size);
glMatrixMode(GL_MODELVIEW); }
void main(int argc, char** argv)
glutInit(&argc,argv);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(500,500);
glutInitWindowPosition(0,0);
glutCreateWindow("lab03");
glutReshapeFunc(myReshape);
glutDisplayFunc(myDisplay);
glutMainLoop();
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

28. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
lab03
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

29. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Exercise 2.
From lab03
modify source code to display following figures
9 December 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.