Input and Interaction Chapter 3. CS 480/680Chapter 3 -- Input and Interaction2 n Introduction: -We...

Input and InteractionInput and Interaction

Chapter 3Chapter 3

CS 480/680 Chapter 3 -- Input and Interaction 2

Introduction:Introduction:- We now turn to the development of interactive We now turn to the development of interactive

graphics programs.graphics programs.

- Our discussion has three main partsOur discussion has three main parts• First, we consider the variety of devices available for First, we consider the variety of devices available for

interactioninteraction• We then consider client-server networks and client-We then consider client-server networks and client-

server graphicsserver graphics• Finally we develop a paint program that demonstrates Finally we develop a paint program that demonstrates

the important features of interactive graphics the important features of interactive graphics programming.programming.


1. Interaction1. Interaction

• One of the most important advances in One of the most important advances in computer technology was enabling users to computer technology was enabling users to interact with computer displaysinteract with computer displays

• Ivan Sutherland’s Ivan Sutherland’s Project SketchpadProject Sketchpad launched launched the present era of interactive computer the present era of interactive computer graphicsgraphics

– Since 1963 when this work was published there Since 1963 when this work was published there have been many advances in both hardware and have been many advances in both hardware and software, but the viewpoint ideas he introduced still software, but the viewpoint ideas he introduced still dominate computer graphics.dominate computer graphics.


• OpenGL does not support interaction directlyOpenGL does not support interaction directly– windowing and input functions were left out of the windowing and input functions were left out of the

API for portability reasons.API for portability reasons.

• We can avoid potential difficulties by using a We can avoid potential difficulties by using a simple library, or toolkit, as we did in Chapter 2.simple library, or toolkit, as we did in Chapter 2.

– Our use of the GLUT toolkit will enable us to avoid Our use of the GLUT toolkit will enable us to avoid the complexities inherent in the interactions among the complexities inherent in the interactions among the windowing systemthe windowing system

• Our outline for this chapter looks like this:Our outline for this chapter looks like this:– We start by describing several interactive devices We start by describing several interactive devices

and how to interact with themand how to interact with them– We then put these devices in the setting of a client-We then put these devices in the setting of a client-

server network.server network.– Then, we introduce an API for minimal interaction.Then, we introduce an API for minimal interaction.– Finally, we shall generate sample programs.Finally, we shall generate sample programs.


2. Input Devices2. Input Devices

- From the physical perspective, each device From the physical perspective, each device has properties that make it more suitable has properties that make it more suitable for certain tasks than for others.for certain tasks than for others.

- There are two primary types of physical There are two primary types of physical devices:devices:• Pointing DevicesPointing Devices• Keyboard DevicesKeyboard Devices


2.1 Physical Input Devices2.1 Physical Input Devices

• The The pointing devicepointing device allows the user to indicate allows the user to indicate a position on the screen, a position on the screen,

– and almost always incorporates one or more buttonsand almost always incorporates one or more buttons

• The The keyboard devicekeyboard device is almost always a is almost always a physical keyboard, physical keyboard,

– but can be generalized to include any device that but can be generalized to include any device that returns character codes to a programreturns character codes to a program


• Pointing devices can be broken into two Pointing devices can be broken into two subcategoriessubcategories

– relative-position devicesrelative-position devices

– absolute- position devicesabsolute- position devices


• Other Pointing DevicesOther Pointing Devices– JoystickJoystick

– SpaceBallsSpaceBalls


2.2 Logical Devices2.2 Logical Devices• Two major characteristics describe the logical Two major characteristics describe the logical

behavior of an input devicebehavior of an input device– What measurements the device returns to the user What measurements the device returns to the user

programprogram– When the device returns those measurements.When the device returns those measurements.

• Some API’s such as PHIGS and GKS consider Some API’s such as PHIGS and GKS consider six classes of logical input devices.six classes of logical input devices.

– OpenGL does not follow this approach, but we will OpenGL does not follow this approach, but we will look at these classes briefly and see how OpenGL look at these classes briefly and see how OpenGL provides similar functionalityprovides similar functionality


- 1. String1. String• a device that provides ASCII strings to the user a device that provides ASCII strings to the user

program.program.• Most windowing systems and OpenGL do not Most windowing systems and OpenGL do not

distinguish between a logical string device and distinguish between a logical string device and the keyboard.the keyboard.

- 2. Locator2. Locator• a device that provides a position in world a device that provides a position in world

coordinates to the user program. coordinates to the user program. – It is usually implemented via a pointing device, such It is usually implemented via a pointing device, such

as a mouse or a trackball.as a mouse or a trackball.

• In OpenGL we usually have to do the In OpenGL we usually have to do the conversion from screen coordinates to world conversion from screen coordinates to world coordinates within our own programscoordinates within our own programs


- 3. Pick3. Pick• a device that returns the identifier of an object a device that returns the identifier of an object

to the user program.to the user program.– It is usually implemented with the same device as It is usually implemented with the same device as

the locator, but has a separate software interfacethe locator, but has a separate software interface

• In OpenGL, we can use a process called In OpenGL, we can use a process called selectionselection to accomplish picking. to accomplish picking.

- 4. Choice4. Choice• a device that allows the user to select one of a a device that allows the user to select one of a

discrete number of options.discrete number of options.• In OpenGL we can use various widgets In OpenGL we can use various widgets

provided by the windowing system.provided by the windowing system.


- 5. Dial5. Dial• Dials provide analog input to the user programDials provide analog input to the user program• Here again widgets provide this facility through Here again widgets provide this facility through

graphical devices, such as slidebarsgraphical devices, such as slidebars

- 6. Stroke6. Stroke• A device that returns an array of locations.A device that returns an array of locations.• Although we can think of a stroke as similar to Although we can think of a stroke as similar to

multiple locators, it is often implemented such multiple locators, it is often implemented such that an action, such as pushing down a mouse that an action, such as pushing down a mouse button, starts the transfer of data into the button, starts the transfer of data into the specified array, and a second action, such as specified array, and a second action, such as the releasing of the button, ends the transferthe releasing of the button, ends the transfer


2.3 Measure and Trigger2.3 Measure and Trigger- The manner by which physical and logical The manner by which physical and logical

input devices provide input to an input devices provide input to an application program can be described in application program can be described in terms of two entities:terms of two entities:• Measure -- what is returnedMeasure -- what is returned• Trigger -- when it is returnedTrigger -- when it is returned

• Measure can also include status informationMeasure can also include status information


2.4 Input Modes2.4 Input Modes- We can obtain the measure of a device in We can obtain the measure of a device in

three distinct modes.three distinct modes.• Each mode is defined by the relationship Each mode is defined by the relationship

between the measure process and the trigger.between the measure process and the trigger.

• The three modes are:The three modes are:– Request ModeRequest Mode– Sample-ModeSample-Mode– Event ModeEvent Mode


- Request Mode:Request Mode:• The measure of the device is not returned to The measure of the device is not returned to

the program until the device is triggered.the program until the device is triggered.

• This mode is standard in non-graphical This mode is standard in non-graphical applications such as typical C programsapplications such as typical C programs

– input is buffered until the trigger is hitinput is buffered until the trigger is hit– for scanf( ) the trigger is the “enter” key.for scanf( ) the trigger is the “enter” key.


- Sample Mode:Sample Mode:– The input is immediateThe input is immediate– As soon as the function call in the user program is As soon as the function call in the user program is

encountered, the measure is returned.encountered, the measure is returned.– Both request mode and sample mode are useful for Both request mode and sample mode are useful for

situations where the program guides the user, but situations where the program guides the user, but are not useful in applications where the user controls are not useful in applications where the user controls the flow of the program. (Flight Simulator)the flow of the program. (Flight Simulator)


- Event Mode:Event Mode:– Each time a device is triggered, an event is Each time a device is triggered, an event is

generated and placed into an event queue. From generated and placed into an event queue. From here there are two approacheshere there are two approaches

• 1) The program can then get events off the 1) The program can then get events off the queue, and “service” them.queue, and “service” them.

• 2) associate a “callback” function with a specific 2) associate a “callback” function with a specific type of event and when that event comes to the type of event and when that event comes to the front of the queue, that function is automatically front of the queue, that function is automatically executed.executed.


3. Clients and Servers3. Clients and Servers

Def: ServerDef: Server- A Server is something that A Server is something that

can perform tasks for clients.can perform tasks for clients.

Clients and Servers can be Clients and Servers can be distributed over a network, distributed over a network, or contained entirely within or contained entirely within a computational unit.a computational unit.- OpenGL programs are OpenGL programs are

clients that use the graphics clients that use the graphics serverserver


4. Display Lists4. Display Lists

- We saw in Chapter 1 the history of We saw in Chapter 1 the history of graphics hardwaregraphics hardware


- Today:Today:• The display processor has become the The display processor has become the

graphics server, and the user program has graphics server, and the user program has become a client.become a client.

• The issue is not the refresh rate, but the The issue is not the refresh rate, but the amount of traffic between the client and the amount of traffic between the client and the serverserver

• Now we can send graphical entities to a display Now we can send graphical entities to a display in one of two ways:in one of two ways:

– immediate modeimmediate mode– retained-moderetained-mode


- Immediate Mode:Immediate Mode:• As soon as the program executes a statement As soon as the program executes a statement

that defines a primitive, that primitive is sent to that defines a primitive, that primitive is sent to the server for display and no memory of it is the server for display and no memory of it is retained.retained.

• To redisplay it, you must redefine it and resend To redisplay it, you must redefine it and resend itit

• For complex objects in highly interactive For complex objects in highly interactive applications, this process can cause applications, this process can cause considerable quantity of data to pass from the considerable quantity of data to pass from the client to the serverclient to the server


- Retained Mode:Retained Mode:• We define an object once,We define an object once,

– then put its description into a display listthen put its description into a display list

• The display list is stored in the server and The display list is stored in the server and redisplayed by a simple function call issued from redisplayed by a simple function call issued from the client to the server.the client to the server.

• Advantages:Advantages:– makes good use of hardware makes good use of hardware

• (compute and graphics)(compute and graphics)

• Disadvantages:Disadvantages:– memory on the servermemory on the server

– overhead of creating the listsoverhead of creating the lists


4.1 4.1 Definition and Execution of Display ListsDefinition and Execution of Display Lists

- Display lists have much in common with ordinary Display lists have much in common with ordinary files.files.

• There must be a mechanism to define/create them as There must be a mechanism to define/create them as well as and add-to/manipulate them.well as and add-to/manipulate them.

• OpenGL has a small set of functions to manipulate OpenGL has a small set of functions to manipulate display lists and placed only a few restrictions on display-display lists and placed only a few restrictions on display-list contents.list contents.

• We will look at several examples to show their use.We will look at several examples to show their use.


- Display lists are defined similarly to Display lists are defined similarly to geometric primitivesgeometric primitives

• Each display list must have a unique identifier Each display list must have a unique identifier

• #define BOX 1#define BOX 1• // GL_COMPILE says// GL_COMPILE says• glNewList(BOX, GL_COMPILE); // send to server glNewList(BOX, GL_COMPILE); // send to server • glBegin(GL_POLYGON); // but don’t displayglBegin(GL_POLYGON); // but don’t display• glColor3f(1.0,0.0,0.0);glColor3f(1.0,0.0,0.0);• glVertex2f(-1.0, -1.0);glVertex2f(-1.0, -1.0);• glVertex2f(-1.0, -1.0);glVertex2f(-1.0, -1.0);• glVertex2f(-1.0, -1.0);glVertex2f(-1.0, -1.0);• glVertex2f(-1.0, -1.0);glVertex2f(-1.0, -1.0);• glEnd();glEnd();• glEndList();glEndList();


• If we want an immediate display of the contents, we can If we want an immediate display of the contents, we can use the flaguse the flag

– GL_COMPIL_AND_EXECUTEGL_COMPIL_AND_EXECUTE

• Each time that we wish to draw the box on the server, we Each time that we wish to draw the box on the server, we execute the following:execute the following:

– glCallList(BOX);glCallList(BOX);

• Because the call to set the drawing color to Red will still Because the call to set the drawing color to Red will still be in effect, you usually see display lists with the be in effect, you usually see display lists with the following at the beginning:following at the beginning:

• glPushAttrib(GL_ALL_ATTRIB_BITS);glPushAttrib(GL_ALL_ATTRIB_BITS);

• glPushMatrix();glPushMatrix();

– and the following at the endand the following at the end

• glPopAttrib();glPopAttrib();

• glPopMatrix();glPopMatrix();


5. 5. Programming Event-Driven InputProgramming Event-Driven Input

• In this section, we develop event-driven input In this section, we develop event-driven input through a number of simple examples that use through a number of simple examples that use the callback mechanism we introduced earlier.the callback mechanism we introduced earlier.

• We will examine various events that are We will examine various events that are recognized by the window system and write recognized by the window system and write callback functions that govern how the callback functions that govern how the application responds to those events.application responds to those events.


5.1 Using the Pointing Device5.1 Using the Pointing Device- Two types of events are associated with Two types of events are associated with

the pointing devicethe pointing device• A move eventA move event

– this is generated if the mouse is moved with on of this is generated if the mouse is moved with on of the buttons depressedthe buttons depressed

• A passive eventA passive event– this is generated if the mouse is moved without a this is generated if the mouse is moved without a

button being held down.button being held down.

- A mouse event occurs when one of the A mouse event occurs when one of the mouse buttons is either depressed or mouse buttons is either depressed or releasedreleased


- We specify the mouse callback function in main with We specify the mouse callback function in main with the GLUT callthe GLUT call

• glutMouseFunc(mouse_callback_func);glutMouseFunc(mouse_callback_func);

- The mouse callback function must have the formThe mouse callback function must have the form• void mouse_callback_func(int button, int state, int x, int y);void mouse_callback_func(int button, int state, int x, int y);

- The code for this would look likeThe code for this would look like• void mouse_callback_function(int button, int state, int x, int y)void mouse_callback_function(int button, int state, int x, int y)• {{• if(button==GLUT_LEFT_BUTTON && if(button==GLUT_LEFT_BUTTON && • state==GLUT_DOWN)state==GLUT_DOWN)• exit();exit();• }}


- Note:Note:• with this code, if any other mouse event had with this code, if any other mouse event had

occurred, no response action would occur because occurred, no response action would occur because no callbacks corresponding to the events has been no callbacks corresponding to the events has been defined (or registered).defined (or registered).

- Our next example Our next example • is going to draw a box at the mouse location when is going to draw a box at the mouse location when

the left button is pushedthe left button is pushed• and terminate when the middle button is pushed.and terminate when the middle button is pushed.


• int main(int argc, char **argv)int main(int argc, char **argv)• {{• glutInit(&argc, argv);glutInit(&argc, argv);• glutInitDisplay(GLUT_SINGLE | GLUT_RGB);glutInitDisplay(GLUT_SINGLE | GLUT_RGB);• glutCreateWindow(“square”);glutCreateWindow(“square”);• myinit();myinit();• glutReshapeFunc(myReshape);glutReshapeFunc(myReshape);• glutMouseFunc(mouse);glutMouseFunc(mouse);• glutDisplayFunc(display);glutDisplayFunc(display);• glutMainLoop( );glutMainLoop( );• }}


- Reshape eventReshape event• is generated whenever the window is resized.is generated whenever the window is resized.• This is typically from user interaction.This is typically from user interaction.• We will discuss this later.We will discuss this later.

- DisplayDisplay• we don’t need the display function since things are we don’t need the display function since things are

only drawn when the mouse button is pushed, only drawn when the mouse button is pushed, • but it is required by GLUT, so our code will be:but it is required by GLUT, so our code will be:

– void display ( ) { }void display ( ) { }


- MouseMouse

• void mouse(int btn, int state, int x, int y)void mouse(int btn, int state, int x, int y)• {{• if(btn==GLUT_LEFT_BUTTON && if(btn==GLUT_LEFT_BUTTON && • state=GLUT_DOWN) state=GLUT_DOWN) • draw_square(x,y);draw_square(x,y);• if(btn==GLUT_MIDDLE_BUTTON &&if(btn==GLUT_MIDDLE_BUTTON &&• state==GLUT_DOWN) state==GLUT_DOWN) • exit( );exit( );• }}


• Glsizei wh = 500, ww = 500;Glsizei wh = 500, ww = 500;• Glfloat size = 3.0;Glfloat size = 3.0;

• void myinit(void)void myinit(void)• {{• glViewport(0,0,ww,wh);glViewport(0,0,ww,wh);• glMatrixMode(GL_PROJECTION);glMatrixMode(GL_PROJECTION);• glLoadIdentity( );glLoadIdentity( );• gluOrtho2D(0.0, (Gldouble)ww, 0.0, (Gldouble)wh);gluOrtho2D(0.0, (Gldouble)ww, 0.0, (Gldouble)wh);• glMatrixMode(GL_MODELVIEW);glMatrixMode(GL_MODELVIEW);• glClearColor(0.0,0.0,0.0,0.0);glClearColor(0.0,0.0,0.0,0.0);• glClear(GL_COLOR_BUFFER_BIT);glClear(GL_COLOR_BUFFER_BIT);• glFlush( );glFlush( );• }}


• void drawSquare(int x, int y)void drawSquare(int x, int y)• {{• y=wh-y;y=wh-y;• glColor3ub( (char)rand()%256, (char)rand()%256,glColor3ub( (char)rand()%256, (char)rand()%256,• (char)rand()%256); (char)rand()%256); • glBegin(GL_POLYGON);glBegin(GL_POLYGON);• glVertex2f( x+size, y+size);glVertex2f( x+size, y+size);• glVertex2f( x-size, y+size);glVertex2f( x-size, y+size);• glVertex2f( x-size, y-size);glVertex2f( x-size, y-size);• glVertex2f( x+size, y-size);glVertex2f( x+size, y-size);• glEnd( );glEnd( );• glFlush( );glFlush( );• }}

• Note: The position returned by the mouse is in the window’s Note: The position returned by the mouse is in the window’s system (origin is in the top left), hence we have to flip itsystem (origin is in the top left), hence we have to flip it


5.2 Window Events5.2 Window Events- If the window size changes, we have to If the window size changes, we have to

consider three questions:consider three questions:• 1. Do we redraw all the objects that were in the 1. Do we redraw all the objects that were in the

window before it was resized?window before it was resized?

• 2. What do we do if the aspect ratio of the new 2. What do we do if the aspect ratio of the new window is different from that of the old window is different from that of the old window?window?

• 3. Do we change the size or attributes of new 3. Do we change the size or attributes of new primitives if the size of the new window is primitives if the size of the new window is different from that of the old?different from that of the old?


- In our example:In our example:• We ensure that squares of the same size are We ensure that squares of the same size are

drawn, regardless of the size or shape of the drawn, regardless of the size or shape of the window.window.

– Therefore, we clear the screen each time it is Therefore, we clear the screen each time it is resized and use the entire new window as our resized and use the entire new window as our drawing area.drawing area.

• The reshape event returns the height and The reshape event returns the height and width of the new windowwidth of the new window

– We use these to create a new OpenGL clipping We use these to create a new OpenGL clipping window using gluOrtho2D,window using gluOrtho2D,

– As well as a new viewport with the same aspect As well as a new viewport with the same aspect ratio,ratio,

– We then clear the window to black.We then clear the window to black.


• void myReshape(Glsizei w, Glsizei h)void myReshape(Glsizei w, Glsizei h)• {{• glMatrixMode(GL_PROJECTION);glMatrixMode(GL_PROJECTION);• glLoadIdentity( );glLoadIdentity( );• gluOrtho2D(0.0, (Gldouble)ww, 0.0, (Gldouble)wh);gluOrtho2D(0.0, (Gldouble)ww, 0.0, (Gldouble)wh);• glMatrixMode(GL_MODELVIEW); glMatrixMode(GL_MODELVIEW); • glLoadIdentity( );glLoadIdentity( );

• glViewport(0,0,w,h);glViewport(0,0,w,h);• glClearColor(0.0,0.0,0.0,0.0);glClearColor(0.0,0.0,0.0,0.0);• glClear(GL_COLOR_BUFFER_BIT);glClear(GL_COLOR_BUFFER_BIT);• glFlush( );glFlush( );• }}


5.3 Keyboard Events5.3 Keyboard Events• Keyboard events are generated when the Keyboard events are generated when the

mouse is in the window and one of the keys is mouse is in the window and one of the keys is depressed.depressed.

• GLUT ignores key releasesGLUT ignores key releases

– All the keyboard callbacks are registered in a single All the keyboard callbacks are registered in a single callback function such as:callback function such as:

• glutKeyboardFunc(keyboard);glutKeyboardFunc(keyboard);

– For example:For example:• void keyboard(unsigned char key, int x, int y)void keyboard(unsigned char key, int x, int y)• {{• if(key==‘q’ || key ==‘Q’) exit();if(key==‘q’ || key ==‘Q’) exit();• }}


5.4 The Display and Idle Callbacks5.4 The Display and Idle Callbacks• glutDisplayFunc(display); glutDisplayFunc(display);

– display is invoked when GLUT determines that the display is invoked when GLUT determines that the window should be redisplayedwindow should be redisplayed

• window initially opened, window initially opened, – We can also tell GLUT to call it withWe can also tell GLUT to call it with

• glutPostDisplay();glutPostDisplay();

• idle idle – The idle callback is invoked when there are no other The idle callback is invoked when there are no other

events.events.– Its default is the null function.Its default is the null function.


5.5 Window Management5.5 Window Management• GLUT also supports both multiple windows and GLUT also supports both multiple windows and

subwindowssubwindows

– We can open a second top-level window byWe can open a second top-level window by• id=glutCreateWindow(“second window”);id=glutCreateWindow(“second window”);

– The id allows us to select which window to work in byThe id allows us to select which window to work in by• glutSetWindow(id);glutSetWindow(id);

– We can make this window have different properties by We can make this window have different properties by invoking the glutInitDisplayMode before invoking the glutInitDisplayMode before glutCreateWindow.glutCreateWindow.

– And each window can have its own set of callback And each window can have its own set of callback functions, because callback specifications refer to the functions, because callback specifications refer to the present window.present window.


6. Menus6. Menus

- GLUT provides pop-up menus that we can GLUT provides pop-up menus that we can use with the mouse to create sophisticated use with the mouse to create sophisticated interactive applications.interactive applications.

- Using the menus involves taking a few Using the menus involves taking a few simple stepssimple steps• define the entriesdefine the entries• link the menu to a mouse buttonlink the menu to a mouse button• define a callback for each menu entry.define a callback for each menu entry.


• glutCreateMenu(demo_menu);glutCreateMenu(demo_menu);• glutAddMenuEntry(“quit”,1);glutAddMenuEntry(“quit”,1);• glutAddMenuEntry(“increase square size”,2);glutAddMenuEntry(“increase square size”,2);• glutAddMenuEntry(“decrease square size”,3);glutAddMenuEntry(“decrease square size”,3);• glutAttachMenu(GLUT_RIGHT_BUTTON);glutAttachMenu(GLUT_RIGHT_BUTTON);

- Our callback function is:Our callback function is:• void demo_menu(int id)void demo_menu(int id)• {{• if(id==1) exit( );if(id==1) exit( );• else if(id==2)size = 2*size;else if(id==2)size = 2*size;• else if (size>1) size = size/2;else if (size>1) size = size/2;• glutPostRedisplay( );glutPostRedisplay( );• }}


- GLUT also supports hierarchical menusGLUT also supports hierarchical menus

• sub_menu = glutCreateMenu(size_menu);sub_menu = glutCreateMenu(size_menu);• glutAddMenuEntry(“increase square size”,2);glutAddMenuEntry(“increase square size”,2);• glutAddMenuEntry(“decrease square size”,3);glutAddMenuEntry(“decrease square size”,3);

• glutCreateMenu(top_menu);glutCreateMenu(top_menu);• glutAddMenuEntry(“quit”,1);glutAddMenuEntry(“quit”,1);• glutAddSubMenu(“Resize”, sub_menu);glutAddSubMenu(“Resize”, sub_menu);• glutAttachMenu(GLUTRIGHTBUTTON);glutAttachMenu(GLUTRIGHTBUTTON);


7. Picking7. Picking

- Picking is an input operation that allows the Picking is an input operation that allows the user to identify an object on the display.user to identify an object on the display.

• Although the action uses the pointing device, Although the action uses the pointing device, the information the user wants is not a position.the information the user wants is not a position.

• A pick device is considerably more difficult to A pick device is considerably more difficult to implement on a modern system than is a implement on a modern system than is a locatorlocator

– The text gives some ideasThe text gives some ideas


8. A Simple Paint Program8. A Simple Paint Program

- Any paint program should demonstrate Any paint program should demonstrate most of the following features:most of the following features:• ability to work with geometric objectsability to work with geometric objects• ability to manipulate pixelsability to manipulate pixels• provide control of attributes (color, ...)provide control of attributes (color, ...)• include menus for controlling the applicationinclude menus for controlling the application• behave correctly when the window is moved or behave correctly when the window is moved or

resized.resized.


9. Animating Interactive 9. Animating Interactive ProgramsPrograms

- So far our programs have been staticSo far our programs have been static• Once a primitive was placed on the display its Once a primitive was placed on the display its

image did not change until the screen was image did not change until the screen was cleared.cleared.

- Suppose that we want to create a picture in Suppose that we want to create a picture in which one or more objects are changing or which one or more objects are changing or moving, and thus their images must moving, and thus their images must change.change.


9.1 The Rotating Square9.1 The Rotating Square• Consider the rotating two dimensional point Consider the rotating two dimensional point

wherewhere– x = cos x = cos ,,– y = sin y = sin


• void display( )void display( )• {{• glClear( );glClear( );• glBegin(GL_POLYGON); glBegin(GL_POLYGON); • thetar = theta/((2*3.14159)/360.0);thetar = theta/((2*3.14159)/360.0);• glVertex2f(cos(thetar), sin(thetar));glVertex2f(cos(thetar), sin(thetar));• glVertex2f(sin(thetar), cos(thetar));glVertex2f(sin(thetar), cos(thetar));• glVertex2f(-cos(thetar), -sin(thetar));glVertex2f(-cos(thetar), -sin(thetar));• glVertex2f(sin(thetar), -cos(thetar));glVertex2f(sin(thetar), -cos(thetar));• glEnd( );glEnd( );• }}


- Now suppose we want to increase theta by a fixed Now suppose we want to increase theta by a fixed amount whenever nothing else is happening.amount whenever nothing else is happening.

• glutIdleFunc(idle);glutIdleFunc(idle);

• void idle( )void idle( )• {{• theta+=2;theta+=2;• if(theta >=360.0) theta-=360.0;if(theta >=360.0) theta-=360.0;• glutPostRedisplay( );glutPostRedisplay( );• }}


- So, what would this do?So, what would this do?

• glutMouseFunc(mouse);glutMouseFunc(mouse);

• void mouse(int button, int state, int x, int y)void mouse(int button, int state, int x, int y)• {{• if(button==GLUT_LEFT && state==GLUT_DOWN) if(button==GLUT_LEFT && state==GLUT_DOWN) • glutIdleFunc(idle);glutIdleFunc(idle);• if(button==GLUT_MIDDLE && state==GLUT_DOWN) if(button==GLUT_MIDDLE && state==GLUT_DOWN)

• glutIdleFunc(NULL);glutIdleFunc(NULL);• }}


9.2 Double Buffering9.2 Double Buffering

- Why do we want double buffering?Why do we want double buffering?

- In main we request a double buffered display by:In main we request a double buffered display by:• glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE)glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE)

- After we have finished drawing, we call After we have finished drawing, we call • glutSwapBuffers( );glutSwapBuffers( );


9.3 Other Buffering 9.3 Other Buffering ProblemsProblems- Suppose we want to Suppose we want to

add an elapsed time add an elapsed time clockclock• single buffer causes single buffer causes

clock to flickerclock to flicker• double buffer causes double buffer causes

drawing to flickerdrawing to flicker• answer is to draw the answer is to draw the

items to both buffers items to both buffers – See Chapter 9 for See Chapter 9 for

detailsdetails


10. Design of Interactive 10. Design of Interactive ProgramsPrograms

- A good interactive program should have:A good interactive program should have:• A smooth display (no flicker or artifacts of refresh)A smooth display (no flicker or artifacts of refresh)• A variety of interactive devices on the displayA variety of interactive devices on the display• A variety of methods for entering and displaying A variety of methods for entering and displaying

informationinformation• An easy to use interface that does not require substantial An easy to use interface that does not require substantial

effort to learn.effort to learn.• Feedback to the user.Feedback to the user.• Tolerance for user errorsTolerance for user errors• A design that incorporates consideration of both visual A design that incorporates consideration of both visual

and motor properties of humans.and motor properties of humans.


10.1 10.1 Toolkits, Widgets, and the Frame BufferToolkits, Widgets, and the Frame Buffer• The paint program used interactive tools, such The paint program used interactive tools, such

as pop-up menus that were provided by GLUT.as pop-up menus that were provided by GLUT.• There are many more possibilities, such as There are many more possibilities, such as

slide-bars, dials, hot areas on the screen, slide-bars, dials, hot areas on the screen, sound, and iconssound, and icons

– Usually these tools are supplied with various toolkits, Usually these tools are supplied with various toolkits, although there is nothing to prevent you from writing although there is nothing to prevent you from writing your own.your own.

– Designing our own widget set will be much easier Designing our own widget set will be much easier after pixel operations are introduced in Chapter 9after pixel operations are introduced in Chapter 9

– most of these operations are described in terms of most of these operations are described in terms of the contents of the frame buffer the contents of the frame buffer

• bit-block transfer operations (bitblt)bit-block transfer operations (bitblt)


- Rubberbanding is one of Rubberbanding is one of those techniquesthose techniques

• Note that before each Note that before each new line segment is new line segment is drawn, the previous line drawn, the previous line segment must be erased.segment must be erased.

• Usually the Usually the rubberbanding begins rubberbanding begins when the mouse button is when the mouse button is depressed and continues depressed and continues until the button is until the button is released.released.

• Other objects that are Other objects that are drawn interactively with drawn interactively with rubberbanding include rubberbanding include rectangles and circles.rectangles and circles.


11. Summary11. Summary

• In this chapter, we have touched on a number of In this chapter, we have touched on a number of topics related to interactive computer graphics topics related to interactive computer graphics

– These interactive aspects make the field exciting and These interactive aspects make the field exciting and fun.fun.

• We handled simple interaction using GLUTWe handled simple interaction using GLUT• We have been heavily influenced by the client-We have been heavily influenced by the client-

server perspectiveserver perspective– This will be crucial in Chapter 8This will be crucial in Chapter 8

– The overhead of setting up a program to run in this The overhead of setting up a program to run in this environment is small. Each program is structured the environment is small. Each program is structured the same.same.


12. Suggested Readings12. Suggested Readings

- Sutherland’s Sutherland’s Project SketchpadProject Sketchpad - Xerox PARC Research of the 70’sXerox PARC Research of the 70’s

• windows-icons-menus-pointing interfaceswindows-icons-menus-pointing interfaces

- Human Computer InterfaceHuman Computer Interface• Foley, Van Dam, et.alFoley, Van Dam, et.al

- UI ToolkitsUI Toolkits• GLUT, GLUT, • Scripting ones -- tcl/tkScripting ones -- tcl/tk• ... ...

Input and Interaction Chapter 3. CS 480/680Chapter 3 -- Input and Interaction2 n Introduction: -We...

Documents

Transcript of Input and Interaction Chapter 3. CS 480/680Chapter 3 -- Input and Interaction2 n Introduction: -We...