1 Input and Interaction

2 Input Devices Physical input devices Keyboard devices and pointing devices Logical input devices

3 Pointing Devices – 1/2 Mouse Mechanical versus optical Trackball Trackpoint (Pressure-sensitive) Data tablet

4 Pointing Devices – 2/2 Lightpen Light-sensing device Joystick Two velocities Variable-sentivity device Haptic device Spaceball Six degrees of freedom Data gloves

5 Positioning Relative Mouse, trackball, trackpoint Absolute Data tablet

6 Logical Input Devices – 1/2 Characteristics The measurements returned to the programs The time these measurements returned Six classes

7 Logical Input Devices – 2/2 String: by keyboard Locator: by mouse or trackball Pick: id of the selected object is returned Choice: select one of a distinct number of options, e.g. menus Dial or valuators: e.g. slidebars Stroke: returns an array of locations: multiple uses of a locator, could be implemented by a “mouse dragging”

8 Clients and Servers Servers: provide services Print servers, file servers, graphics servers… Clients: users and user programs that make use of these services OpenGL application programs

9 Programming Event-Driven Input Using the pointing device Move event Mouse is moved and one of the button pressed Passive move event Mouse is moved and no buttons are pressed Mouse event: one of mouse buttons is pressed or released glutMouseFunc(mouse): register the function void mouse(int button, int state, int x, int y)

10 Other Events and CallBacks Reshape event: whenever the window is resized glutReshapeFunc(myReshape); Motion event: glutMotionFunc(drawSquare); Keyboard event: glutKeyboardFunc(keyboard); void keyboard(unsigned char key, int x, int y) { if(key==‘q’ || key == ‘Q’) exit(); }

11 Display and Idle CallBacks glutDisplay(display); Idle callback: is invoked when there is no other events Callback could be changed at any time or disabled by set to NULL

12 A Program Example: Drawing Squares with Mouse?

13 A Program Example: Drawing Squares with Mouse Demo

14 A Simple Paint Program – 1/4 Draw geometric primitives: line segments, polygons Manipulate pixels Control attributes of primitives Include menus Should behave correctly when moved or resized

15 A Simple Paint Program – 2/4 Initial display of paint program Menu structure of paint program

16 A Simple Paint Program – 3/4 Five drawing modes: line segment, rectangle, triangle, pixel, and text Two (or three) clicks determine the locations of the end points of line segments, rectangles… Choose colors, pixel size, fill patterns…

17 A Simple Paint Program – 4/4 Demo

18 Animating Interacitve Programs A Rotating Square – 1/4 x=cos  y=sin  (cos , sin  ), (-sin , cos  ), (-cos , -sin  ), (sin , -cos  ) lie on the unit circle

19 A Rotating Square 2/2 Demo

20 Double Buffering How to avoid flickering?

21 Design of Interactive Programs A smooth display with no flickering A variety of interactive devices A variety of methods for entering and displaying information An easy-to-use interface Feedback to the user Tolerance for user error Consider human factors

22 Rubberbanding Demo

23 Logic Operation Copy or replacement mode There are 16 possible operations between 2 bits Source pixel and destination pixel d=d  s, where  means XOR (exclusive or) d=(d  s)  s, which means drawing something twice will erase it OpenGL support all 16 logic modes, GL_COPY is the default glEnable(GL_COLOR_LOGIC_OP); glLogicOP(GL_XOR); /* change it to XOR mode */

24 Summary and Notes Input devices Event mode and callbacks Sample interaction code Double buffering XOR and Rubberbanding