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