180

# SER332 Lecture 04

Introduction to Graphics and Game Development
Callback Functions
(201804)

January 18, 2018

## Transcript

1. jgs
SER332
Introduction to Graphics and Game
Development
Lecture 04: Callback Functions
Javier Gonzalez-Sanchez
[email protected]
PERALTA 230U
Office Hours: By appointment

2. jgs
GLUT
OpenGL Utility Toolkit

3. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 3
jgs
Example 1
/**
https://github.com/javiergs/SER332/blob/master/Lecture03/main.c
*/
// main
void main(int argc, char** argv){
glutInit(&argc, argv); // glut init
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(500,500); // actual window size
glutInitWindowPosition(0,0); // window location
glutCreateWindow("simple");
myInit();
glutDisplayFunc(myDisplay);
glutMainLoop(); //event loop
}

4. jgs
Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 4
// myInit
void myInit() {
glClearColor(0.764f, 0.129f, 0.282f, 1.0); // maroon
glColor3f(1.0f, 0.843f, 0.0f); // gold
// projection transformations
glMatrixMode(GL_PROJECTION);
gluOrtho2D(-1.0, 1.0, -1.0, 1.0); // units inside
}

5. jgs
Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 5
// myDisplay
void myDisplay() {
glClear(GL_COLOR_BUFFER_BIT); // clear the window
glBegin(GL_POLYGON); // fill connected polygon
glVertex2f(-0.7, 0.7); // vertices of the square
glVertex2f( 0.6, 0.7);
glVertex2f(-0.7, -0.6);
glEnd();
glBegin(GL_POLYGON); // fill connected polygon
glVertex2f( 0.7, 0.6); // vertices of the square
glVertex2f(-0.6, -0.7);
glVertex2f( 0.7, -0.7);
glEnd();
glFlush(); //forces issued commands to execute
}

6. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6
jgs
Example 1
500
500
(0.7,0.7)
(-0.7,-0.7)

7. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 7
jgs
Double Buffering
Double buffering is necessary for almost all OpenGL applications:
§ Render into back buffer
§ Swap buffers when finished rendering a frame: The old back buffer
becomes the front buffer that is displayed. The old front buffer becomes
the back buffer that is rendered into.
What happens when you do not use double buffering?
§ flickering artifacts, tearing artifacts
Commands:
§ glutInitDisplayMode( GLUT_RGBA | GLUT_DOUBLE );

8. jgs
Callback Functions

9. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 9
jgs
Callback Functions
§ What is this?
void (*func)(void)
§ GLUT uses callbacks to handle events
Windows system invokes a particular procedure when an event of particular type
occurs.
MOST IMPORTANT: display event. It is signaled when window first displays and
whenever portions of the window reveals from blocking window
glutDisplayFunc(void (*func)(void))
registers the display callback function

10. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 10
jgs
Callbacks Functions
§ glutDisaplyFunc(void (*func)(void))
whenever GLUT decides to redisplay the window, the registered callback is executed.
§ glutReshapeFunc(void (*func)(int w, int h))
indicates what action should be taken when the window is resized.
§ glutKeyboardFunc(void (*func)(unsigned char key, int x, int y))
glutMouseFunc(void (*func)(int button, int state, int x, int y))
glutSpecialFunc(void (*func)(unsigned char key, int x, int y))
allow you to link a keyboard key or a mouse button with a routine that's invoked
when the key or mouse button is pressed or released.

11. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 11
jgs
Callbacks Functions
§ glutMotionFunc(void (*func)(int x, int y))
registers a routine to call back when the mouse is moved while a mouse button is
also pressed.
§ glutIdleFunc(void (*func)(void))
registers a function that's to be executed if no other events are pending – use for
animation or continuous update

12. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 12
jgs
Example 2
/**
* https://github.com/javiergs/SER332/blob/master/Lecture04/main.c
*/
#include "glut.h"
// main
void main(int argc, char** argv) {
glutInit(&argc, argv); // glut init
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA);
glutInitWindowSize(500, 500);
glutInitWindowPosition(0, 0);
glutCreateWindow("simple");
myInit();
glutDisplayFunc(myDisplay);
glutKeyboardFunc(myKeyboard);
glutSpecialFunc(mySpecialKeys);
glutMouseFunc(myMouseClick);
glutMotionFunc(myMouseMotion);
glutMainLoop();
}

13. jgs
Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 13
// lets play with global variables
float triangle_color_R = 1.0f;
float triangle_color_G = 0.843f;
float triangle_color_B = 0.0f;
float corner_x = -0.7f;
float corner_y = 0.7f;
int mouse_button;
int mouse_button_state;
int shake =10;
// myInit
void myInit() {
glClearColor(0.764f, 0.129f, 0.282f, 1.0); // maroon
// projection transformations
glMatrixMode(GL_PROJECTION);
gluOrtho2D(-1.0, 1.0, -1.0, 1.0); // units inside
}

14. jgs
Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 14
// display callback code
void myDisplay() {
glClear(GL_COLOR_BUFFER_BIT); // clear the window
glColor3f(triangle_color_R, triangle_color_G, triangle_color_B);
//gold
glBegin(GL_POLYGON); // fill connected polygon
glVertex2f(corner_x, corner_y);
glVertex2f(corner_x+1.30, corner_y);
glVertex2f(corner_x, corner_y-1.30);
glEnd();
glBegin(GL_POLYGON); // fill connected polygon
glVertex2f(corner_x+1.40, corner_y-0.1);
glVertex2f(corner_x+0.1, corner_y-1.40);
glVertex2f(corner_x+1.40, corner_y-1.40);
glEnd();
glutSwapBuffers(); //forces issued commands to execute
}

15. jgs
Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 15
// keyboard callback code
void myKeyboard(unsigned char key, int x, int y) {
switch (key) {
case 'q': case 'Q':
exit(0); // exit the program
break;
case 'i': case 'I':
int mod = glutGetModifiers();
if (mod == GLUT_ACTIVE_ALT) { // if ALT key
triangle_color_R = 1.0f;
triangle_color_G = 1.0f;
triangle_color_B = 1.0f;
} else {
triangle_color_R = 1.0f;
triangle_color_G = 0.843f;
triangle_color_B = 0.0f;
}
glutPostRedisplay(); // update the display
break;
}
}

16. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 16
jgs
Key Modifiers
int glutGetModifiers(void)
To detect if any modifier key is pressed
§ GLUT_ACTIVE_SHIFT SHIFT key
§ GLUT_ACTIVE_CTRL CTRL key
§ GLUT_ACTIVE_ALT ALT key

17. jgs
Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 17
//special key callback code
void mySpecialKeys(int key, int x, int y) {
switch (key) {
case GLUT_KEY_UP:
triangle_color_R = triangle_color_R + 0.1;
break;
case GLUT_KEY_DOWN:
triangle_color_R = triangle_color_G - 0.1;
break;
case GLUT_KEY_LEFT:
triangle_color_B = triangle_color_B + 0.1;
break;
case GLUT_KEY_RIGHT:
triangle_color_B = triangle_color_B - 0.1;
break;
}
glutPostRedisplay();
}

18. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 18
jgs
Special Keys
§ GLUT_KEY_F1 F1 function key
§ …
§ GLUT_KEY_F12 F12 function key
§ GLUT_KEY_LEFT Left function key
§ GLUT_KEY_RIGHT Up function key
§ GLUT_KEY_UP Right function key
§ GLUT_KEY_DOWN Down function key
§ GLUT_KEY_PAGE_UP Page Up function key
§ GLUT_KEY_PAGE_DOWN Page Down function key
§ GLUT_KEY_HOME Home function key
§ GLUT_KEY_END End function key
§ GLUT_KEY_INSERT Insert function key

19. jgs
Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 19
// mouse callback function
void myMouseClick(int button, int state, int x, int y) {
// button: GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON
// state: GLUT_DOWN, GLUT_UP
if (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) {
corner_x = (x/250.0) -1; // from 0 : 500 to -1 : 1
corner_y =- ((y/250.0)-1);
}
mouse_button = button;
mouse_button_state = state;
glutPostRedisplay();
}

20. jgs
Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 20
// mouse motion callback
void myMouseMotion(int x, int y) {
if (mouse_button == GLUT_LEFT_BUTTON &&
mouse_button_state== GLUT_DOWN) {
corner_x = (x / 250.0)-1; // from 0 : 500 to -1 : 1
corner_y = -((y / 250.0)-1);
} else {
shake=-shake; // shaking triangles
corner_x=((x-shake)/250.0)-1; //from 0 : 500 to -1 : 1
corner_y = -(((y-shake) / 250.0) - 1);
}
glutPostRedisplay();
}

21. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 21
jgs
Mouse Passive Motion Callback
glutPassiveMotionFunc( myMousePMotion );
§ Almost as same function as the glutMotionFunc();
§ The (Active) motion callback is called when the mouse moves within the
window while one or more mouse buttons are pressed.
§ The Passive motion callback is called when the mouse moves within the
window while no mouse buttons are pressed.

22. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 22
jgs
Example 2
§ Change color with the arrow keys
§ Move the triangles with the mouse (left click)
§ Move and shake with the mouse (right click)

23. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 23
jgs
OpenGL command syntax
§ Red Book(pdf): ch1 p17 – p18
Understand OpenGL’s state machine model
§ Red Book(pdf):ch1 p18
Understand OpenGL’s client server model
§ An example, glFlush, Red Book(pdf): ch2 p32
§ Think about the differences between glFlush, glFinish, glutSwapBuffers. To
better understand glFinish, think if you want to measure the exact rendering
time of one frame on GPU.

24. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 24
jgs
Animation & Double buffering
§ Red Book(pdf): ch1 p24, explains double buffering and glutSwapBuffers
GLUT (important)
§ Red Book(pdf): ch1 p21 - p28
§ Hearn Baker ch6 p307 – p34, similar as above but in more details
§ Red Book Appendix D
§ Example 1-2, Example 1-3 (Animation)
§ Glut.h will show you the technical details

25. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 25
jgs
Homework
Programming, Programming, and Programming

26. jgs
SER332 Introduction to Graphics
Javier Gonzalez-Sanchez
[email protected]
Spring 2018
Disclaimer. These slides can only be used as study material for the class SER332 at ASU. They cannot be distributed or used for another purpose.