User Interaction and Basic Animation
Event Driven Programs
Event-driven programs enter a loop, then “react”
to input events (e.g. key press) with callbacks
A callback function is just a function that’s called
whenever a particular type of event happens
2
Event Types
Window: resize, expose, iconify
Mouse: click one or more buttons
Motion: move mouse
Keyboard: press or release a key
Idle: nonevent
Define what should be done if no other event is in
queue
Timer
3
Callback Functions
Programming interface for event-driven input
Define a callback function for each type of event
the graphics system recognizes
This user-supplied function is executed when the
event occurs
mouse callback function
GLUT example: glutMouseFunc(mymouse)
4
GLUT callbacks
GLUT recognizes a subset of the events recognized
by any particular window system (Windows, X,
Macintosh)
- glutDisplayFunc
- glutMouseFunc
- glutReshapeFunc
- glutKeyboardFunc
- glutIdleFunc
- glutMotionFunc, glutPassiveMotionFunc
5
GLUT Event Loop
Recall that the last line in main.c for a program using
GLUT must be
glutMainLoop();
which puts the program in an infinite event loop
In each pass through the event loop, GLUT
looks at the events in the queue
for each event in the queue, GLUT executes the appropriate
callback function if one is defined
if no callback is defined for the event, the event is ignored
6
The display/draw callback
The display callback is executed whenever GLUT
determines that the window should be refreshed (i.e.
redraw the scene), for example:
When the window is first opened
When the window is reshaped
When a window is exposed
When the user program decides it wants to change the
display
In main.c
- glutDisplayFunc(mydisplay) identifies the function
to be executed
Every GLUT program must have a display callback
7
Posting Redisplays
Many events may invoke the display callback function
Can lead to multiple executions of the display callback on a
single pass through the event loop
We can avoid this problem by instead using
glutPostRedisplay();
which sets a flag.
GLUT checks to see if the flag is set at the end of the event
loop
If set then the display callback function is executed
8
Animating a Display
When we redraw the display through the display callback,
we usually start by clearing the window
- glClear()
then draw the altered display
Problem: the drawing of information into the frame buffer
is decoupled from the display of its contents
Graphics systems use dual ported memory
Hence we can see partially drawn display
9
Double Buffering
Display refreshes at 60 ~ 75 Hz
Rendering could be “faster” than the refresh period
Too fast leads to
Frames not shown
Too slow leads to
New and old frame mixed
Flickering
Solution:
Double (or multiple) Buffering
Actually more complex than this – see posted article
Double Buffering
Instead of one color buffer, we use two
Front Buffer: one that is displayed but not written to
Back Buffer: one that is written to but not displayed
Program then requests a double buffer in main.c
- glutInitDisplayMode(GL_RGB | GL_DOUBLE)
At the end of the display callback buffers are swapped
void mydisplay()
{
glClear(GL_COLOR_BUFFER_BIT|….)
.
/* draw graphics here */
.
glutSwapBuffers()
}
11
Using the idle callback
The idle callback is executed whenever there are no events
in the event queue
- glutIdleFunc(myidle)
Useful for animations
void myidle() void mydisplay()
{ {
// change something glClear();
t += dt // draw something that depends on t
glutPostRedisplay(); glutSwapBuffers();
} }
12
Using a timer for animation
If we want to run animations at a specified frame rate, use a timer
Idle function tries to redisplay frames as fast as hardware will run –
application dependent
GLUT provides a system timer, allows you to specify a callback function to
be run at specified intervals
glutTimerFunc(20, animationHandler, 0);
void animation Handler(int param)
{
/* change something */
t += dt
glutPostRedisplay();
glutTimerFunc(20, animationHandler, 0);
}
13
Using global variables
The form of all GLUT callbacks is fixed
void mydisplay()
void mymouse(GLint button, GLint state, GLint x, GLint y)
Must use globals to pass information to callbacks
float t; //global variable
void mydisplay()
{
// draw something that depends on t
}
14
The mouse callback
glutMouseFunc(mymouse);
void mymouse(GLint button, GLint state, GLint x, GLint y)
Returns:
which button caused event (GLUT_LEFT_BUTTON,
GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON)
state of that button (GLUT_UP, GLUT_DOWN)
position in window
15
Positioning
The position in the screen window is usually measured in pixels with the
origin at the top-left corner
Consequence of refresh done from top to bottom
Programmer sets up a world coordinate system
Programmer must convert screen pixel coordinates of mouse to world
coordinates
(0,0)
h
w
16
Obtaining the window size
●To convert, we need window width and height
● Width, Height can change during program execution
● Track them with a global variable
● New width, height returned to reshape callback that we
will look at in detail soon
● Can also use query functions
• glGetIntv
• glGetFloatv
to obtain any value that is part of the state
17
Using mouse motion callback
We can draw objects continuously as long as a mouse
button is depressed (and hence move them around with the
mouse) by using the motion callback
glutMotionFunc(drawSquare)
We can also draw continuously without depressing a button
using the passive motion callback
glutPassiveMotionFunc(drawSquare)
18
Using the keyboard
glutKeyboardFunc(mykey);
void mykey(unsigned char key, int x, int y) {…}
● Returns ASCII code of key depressed and mouse location
void mykey()
{
if(key == ‘Q’ | key == ‘q’)
exit(0);
}
19
Special and Modifier Keys
GLUT defines the special keys in glut.h
Function key 1: GLUT_KEY_F1
Up arrow key: GLUT_KEY_UP
◼ if(key == ‘GLUT_KEY_F1’ ……
Can also check of one of the modifiers
GLUT_ACTIVE_SHIFT
GLUT_ACTIVE_CTRL
GLUT_ACTIVE_ALT
is depressed by:
glutGetModifiers()
Allows emulation of three-button mouse with one- or two-
button mice
20
Reshaping the window
We can reshape and resize the OpenGL display window
by pulling the corner of the window
What happens to the display?
Must redraw it in your application
Two possibilities
◼ Display part of world
◼ Display whole world but force to fit in new window
◼ Can alter aspect ratio
21
The Reshape callback
glutReshapeFunc(myreshape);
void myreshape( int w, int h) {…}
Returns width and height of new window (in pixels)
A redisplay is posted automatically at end of execution of the
callback
GLUT has a default reshape callback but you probably want to
define your own
The reshape callback is good place to put viewing functions
because it is invoked when the window is first opened
22
Example Reshape for 2D Application
●This reshape preserves shapes by making the viewport and world window
have the same aspect ratio
void myReshape(int w, int h)
{
glViewport(0, 0, w, h);
glMatrixMode(GL_PROJECTION); /* switch matrix mode */
glLoadIdentity();
if (w <= h)
gluOrtho2D(-2.0, 2.0, -2.0 * (GLfloat) h / (GLfloat) w,
2.0 * (GLfloat) h / (GLfloat) w);
else gluOrtho2D(-2.0 * (GLfloat) w / (GLfloat) h, 2.0 *
(GLfloat) w / (GLfloat) h, -2.0, 2.0);
glMatrixMode(GL_MODELVIEW); /* return to modelview mode */
}
23
Toolkits and Widgets (GUIs)
Most window systems provide a toolkit or library of
functions for building user interfaces that use special types
of windows called widgets
Widget sets include tools such as
Menus
Slidebars
Dials
Input boxes
But toolkits tend to be platform dependent
GLUT provides only a few widgets including menus
24
Menus
GLUT supports pop-up menus
A menu can have submenus
Three steps
Define entries for the menu
Define action for each menu item
◼ Action carried out if entry selected
Attach menu to a mouse button
25
Defining a simple menu
In main.c
menu_id = glutCreateMenu(mymenu);
glutAddmenuEntry(“clear Screen”, 1);
gluAddMenuEntry(“exit”, 2);
clear screen
glutAttachMenu(GLUT_RIGHT_BUTTON);
exit
entries that appear when identifiers
right button depressed
26
Menu actions
● Menu callback
void mymenu(int id)
{
if(id == 1) glClear();
if(id == 2) exit(0);
}
● Note each menu has an id that is returned when it is created
● Add submenus by
glutAddSubMenu(char *submenu_name, submenu id)
entry in parent menu
27
GUI Library
Qt is an excellent choice
http://qt-project.org/
http://qt-project.org/doc/qt-5/examples-widgets-
opengl.html
Other functions in GLUT
●Dynamic Windows
● Create and destroy during execution
●Subwindows
●Multiple Windows
●Changing callbacks during execution
●Timers
●Portable fonts
- glutBitmapCharacter
- glutStrokeCharacter
29
