Graphical

6.53
Input
Computer Graphics
CPIT285
 OBJECTIVES
⮚Introduce the basic input devices
Physical Devices
Logical Devices
Input Modes
⮚Event-driven input
⮚Introduce double buffering for smooth animations
⮚Programming event input with GLUT
⮚Learn to build interactive programs using GLUT callbacks
Mouse
Keyboard
Reshape
⮚Introduce menus in GLUT

2
 PROJECT SKETCHPAD

Ivan Sutherland (MIT 1963) established the basic interactive paradigm that
characterizes interactive computer graphics:

• User sees an object on the display

• User points to (picks) the object with an input device (light pen, mouse, trackball)

• Object changes (moves, rotates, morphs)

• Repeat

Angel: Interactive Computer Graphics 5E © Addison- 3

Wesley 2009
 GRAPHICAL INPUT
⮚Devices can be described either by
- Physical properties
Mouse
Keyboard
Trackball
- Logical Properties
What is returned to program via API
A position
An object identifier
- Modes
How and when input is obtained
Request or event

Angel: Interactive Computer Graphics 5E © Addison- 4

Wesley 2009
 PHYSICAL DEVICES

mous
trackbal light
e
l pen

data joystick space

tablet ball
5
 INCREMENTAL (RELATIVE) DEVICES

Devices such as the data tablet return a position directly to the

operating system
Devices such as the mouse, trackball, and joystick return incremental
inputs (or velocities) to the operating system
Must integrate these inputs to obtain an absolute position
Rotation of cylinders in mouse
Roll of trackball
- Difficult to obtain absolute position
- Can get variable sensitivity

Angel: Interactive Computer Graphics 5E © Addison- 6

Wesley 2009
 LOGICAL DEVICES

Consider the C and C++ code

C++: cin >> x;
C: scanf (“%d”, &x);

What is the input device?

Can’t tell from the code
Could be keyboard, file, output from another program
The code provides logical input
A number (an int) is returned to the program regardless of the physical device

Angel: Interactive Computer Graphics 5E © Addison- 7

Wesley 2009
 GRAPHICAL LOGICAL DEVICES

Graphical input is more varied than input to standard programs which is usually numbers,
characters, or bits
⮚Two older APIs (GKS, PHIGS) defined six types of logical input
Locator: return a position
Pick: return ID of an object
Keyboard: return strings of characters
Stroke: return array of positions
Valuator: return floating point number
Choice: return one of n items

Angel: Interactive Computer Graphics 5E © Addison- 8

Wesley 2009
 X WINDOW INPUT

The X Window System introduced a client-server model for a network of workstations

Client: OpenGL program
Graphics Server: bitmap display with a pointing device and a keyboard

9
 INPUT MODES

Input devices contain a trigger which can be used to send a signal to the operating system
Button on mouse
Pressing or releasing a key

When triggered, input devices return information (their measure) to the system
Mouse returns position information
Keyboard returns ASCII code

Angel: Interactive Computer Graphics 5E © Addison- 10

Wesley 2009
 REQUEST MODE

Input provided to program only when user triggers the device

Typical of keyboard input
Can erase (backspace), edit, correct until enter (return) key (the trigger) is depressed

Angel: Interactive Computer Graphics 5E © Addison- 11

Wesley 2009
 EVENT MODE

Most systems have more than one input device, each of which can be triggered at
an arbitrary time by a user
Each trigger generates an event whose measure is put in an event queue which can
be examined by the user program

Angel: Interactive Computer Graphics 5E © Addison- 12

Wesley 2009
 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

Angel: Interactive Computer Graphics 5E © Addison- 13

Wesley 2009
 CALLBACKS

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
GLUT example: glutMouseFunc(mymouse)

mouse callback
function

Angel: Interactive Computer Graphics 5E © Addison- 14

Wesley 2009
 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

Angel: Interactive Computer Graphics 5E © Addison- 15

Wesley 2009
 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

Angel: Interactive Computer Graphics 5E © Addison- 16

Wesley 2009
 THE DISPLAY CALLBACK

The display callback is executed whenever GLUT determines that the

window should be refreshed, 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

Angel: Interactive Computer Graphics 5E © Addison- 17

Wesley 2009
 POSTING REDISPLAYS

Many events may invoke the display callback function

⮚That can lead to multiple executions of the display callback on a single pass through the event loop

We can avoid this problem by using glutPostRedisplay(); instead, which sets a

flag.

GLUT checks to see if the flag is set at the end of the event loop.
⮚ If sets then the display callback function is executed

Angel: Interactive Computer Graphics 5E © Addison- 18

Wesley 2009
 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()
}
Angel: Interactive Computer Graphics 5E © Addison- 20
Wesley 2009
 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() {
/* change something */
t += dt
glutPostRedisplay();
}

Void mydisplay() {
glClear();
/* draw something that depends on t */
glutSwapBuffers();
}

Angel: Interactive Computer Graphics 5E © Addison- 21

Wesley 2009
 USING GLOBALS

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 */

void mydisplay()
{
/* draw something that depends on t
}

Angel: Interactive Computer Graphics 5E © Addison- 22

Wesley 2009
 THE MOUSE CALLBACK

glutMouseFunc(mymouse)
void mymouse(GLint button, GLint state, GLint x, GLint y)
Returns
which button (GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON)
caused event
state of that button (GLUT_UP, GLUT_DOWN)
Position in window

Angel: Interactive Computer Graphics 5E © Addison- 23

Wesley 2009
 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
• OpenGL uses a world coordinate system with origin at the bottom left
• Must invert y coordinate returned by callback by height of window
• y = h – y;

(0,0)
h

24
 OBTAINING THE WINDOW SIZE

To invert the y position, we need the window height

Height can change during program execution
Track with a global variable
New 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

Angel: Interactive Computer Graphics 5E © Addison- 25

Wesley 2009
 TERMINATING A PROGRAM

In our original programs, there was no way to terminate them through OpenGL
We can use the simple mouse callback

void mouse(int btn, int state, int x, int y)

{
if(btn==GLUT_RIGHT_BUTTON && state==GLUT_DOWN)
exit(0);
}

Angel: Interactive Computer Graphics 5E © Addison- 26

Wesley 2009
 USING THE MOUSE POSITION

In the next example, we draw a small square at the location of the mouse each time the left
mouse button is clicked

This example does not use the display callback but one is required by GLUT; We can use the
empty display callback function
mydisplay(){}

Angel: Interactive Computer Graphics 5E © Addison- 27

Wesley 2009
 DRAWING SQUARES AT CURSOR LOCATION
void mymouse(int btn, int state, int x, int y)
{
if(btn==GLUT_RIGHT_BUTTON && state==GLUT_DOWN)
exit(0);
if(btn==GLUT_LEFT_BUTTON && state==GLUT_DOWN)
drawSquare(x, y);
}
void drawSquare(int x, int y)
{
y=w-y; /* invert y position */
glColor3ub( (char) rand()%256, (char) rand )%256, (char) rand()%256); /* a random
color */
glBegin(GL_POLYGON);
glVertex2f(x+size, y+size);
glVertex2f(x-size, y+size);
glVertex2f(x-size, y-size);
glVertex2f(x+size, y-size);
glEnd();
} Angel: Interactive Computer Graphics 5E © Addison- 28
Wesley 2009
 USING THE MOTION CALLBACK

We can draw squares (or anything else) continuously as long as a mouse button is
depressed by using the motion callback
glutMotionFunc(drawSquare)

We can draw squares without depressing a button using the passive motion callback
glutPassiveMotionFunc(drawSquare)

Angel: Interactive Computer Graphics 5E © Addison- 29

Wesley 2009
 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);
}

Angel: Interactive Computer Graphics 5E © Addison- 30

Wesley 2009
 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

Angel: Interactive Computer Graphics 5E © Addison- 31

Wesley 2009
 TOOLKITS AND WIDGETS

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
Slide bars
Dials
Input boxes

But toolkits tend to be platform dependent

GLUT provides a few widgets including menus

Angel: Interactive Computer Graphics 5E © Addison- 32

Wesley 2009
 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

33
 DEFINING A SIMPLE MENU

⮚In main.c
menu_id = glutCreateMenu(mymenu);
glutAddmenuEntry(“clear Screen”, 1);

gluAddMenuEntry(“exit”, 2);
clear
glutAttachMenu(GLUT_RIGHT_BUTTON); screen
exi
t

entries that appear when

identifiers
right button depressed

34
 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

35
 OTHER FUNCTIONS IN GLUT

Dynamic Windows
- Create and destroy during execution
Subwindows
Multiple Windows
Changing callbacks during execution
Timers
Portable fonts
glutBitmapCharacter
glutStrokeCharacter

36
THANK YOU