Input and Interaction

1. Input and Interaction Interactive program is something make CG look interesting Suriyong L., Computer Multimedia

2. Physical Input Devices • 2 Types • Pointing devices • Locate or indicate position on screen • Almost incorporate with 1 or more buttons • Ex. Mouse, track ball: using pairs of encoders for measure motion or distance • Keyboard devices • Character generator • Can be generalized to include any devices that return characters code to program Suriyong L., Computer Multimedia

3. Mouse Trackball Mouse and Track ball • Mechanical and optical • Mechanical measure motion • Optical measure distance by counting lines • Track ball • The upside down mouse Suriyong L., Computer Multimedia

4. Cursor Positioning MouseOutput • 2 screen axis is detected independently as position or velocity • Converted either in graphics system or hardware • For 2D able to position directly on the display if WCS and RCS are the same but rarely use • The output type • Position: almost relative value, absolute value is rarely used • Velocity: small deviation, small change, large deviation, large change • Relative positioning, used by measure moving of the mouse Suriyong L., Computer Multimedia

5. Track point • Pressure sensitive devices to control the encoder • Align between 2 key and in the middle of the keyboard Suriyong L., Computer Multimedia

6. Data Tablet • The Absolute position device • Tracing the diagram, follow the curve on the screen • Wires in rows and columns embedded under the surface and use the electromagnetic interaction • Touch sensitive: transparent screen • Placed over the CRT Suriyong L., Computer Multimedia

7. Light pen • Used in Sutherland’s original Sketchpad • Photocell is a sensitive device • The bright light spot of the screen enter the photocell make signal • Weak signal in the dark area Suriyong L., Computer Multimedia

8. Joystick • Measured with 2 orthogonal encoders • Integration measure and convert to position • Compose with spring and damper, good mechanical feeling • Well suited for flight simulator and game Suriyong L., Computer Multimedia

9. Spaceball • For 3D graphics • Joystick like but the stick doesn’t move • Measure 3 direction forces • Up-down, left-right, and front-back • Measure 3 independent twist also • Has 6 degrees of freedom Suriyong L., Computer Multimedia

10. IBM spaceball Suriyong L., Computer Multimedia

11. Spaceball Suriyong L., Computer Multimedia

12. Other physical devices • Laser-based structured-lighting systems • Laser-ranging systems • Data gloves • Etc. Suriyong L., Computer Multimedia

13. Logical devices • Use logical point of view • The return of measurements to the program • the time when the device return value • PHIGS and GKS consider the devices into 6 classes (6 types of input) Suriyong L., Computer Multimedia

14. 6 classes of logical device • String: Provide ASCII, physical is keyboard • Locator: Position of WCS, by pointing devices • Pick: Identified an object, usually same device with locator but separate software interface • Choice: Select one of a discrete number • Dial (or valuators): Analog input • Stroke: Array of location, mouse down-data in, mouse up- data stop Suriyong L., Computer Multimedia

15. OpenGL compatibility • String – keyboard • Locator – mouse • Pick – use “selection” process • Choice – use graphical widgets • Provided by windows or a toolkit • Typical widget: menu, scrollbar, graphical button • Dial - widget • Stroke - mouse button-up, button-down Suriyong L., Computer Multimedia

16. Measure and Trigger • Measure: what the device returns to the user • Trigger: what signal the device to signal the computer • Ex: • keyboard: measure string, trigger when press “enter” or “return” • Mouse: measure screen position, trigger when press button • Measure be able to include other information ex. Status • Pick device measures the identifier of the object • If only measure, we face the problems to take care the situation correctly. • The easy way, include status variable when measure to protect the device out of scope Suriyong L., Computer Multimedia

17. Input Mode • Depend on the relationship of measure and trigger • Request mode: • Collect measure, waiting for trigger ex. “scanf” • Sample mode: • Measured data return immediately, no trigger required • If a lot of devices these mode may have problem • Ex. Flight simulator, joystick, dial, buttons and switches, we do not know which one the pilot will use Suriyong L., Computer Multimedia

18. Event-mode • Each time device is triggered, an event is generated • The measure is placed on the event queue • Preferable mode for use in API • 3 step that we will describe this mode • Show event mode as measure-trigger model • As a preferred interaction mode to client and server model • Show the interface to OpenGL using GLUT Suriyong L., Computer Multimedia

19. Request mode Sample mode Event-mode model Suriyong L., Computer Multimedia

20. Client-server • Former graphics system • Big box which has a limit connection to the outside world • Present point of view • Networks and multi-user used in single-use isolated system • Box are called server :perform task for client • Work station can be both client and server • Graphic server : a work station that can provide I/O service • OpenGL program : clients that use the graphics server, we can run program on other graphics server on the network Suriyong L., Computer Multimedia

21. Network Suriyong L., Computer Multimedia

22. Simple graphics architecture Display-processor architecture Display Lists • How clients and servers improve interactive graphics performance • Former use general purpose: slow and expensive, few applications • Display CPU: display processor solve the problem, host free after sent message • Today use display hardware: • Host as client, DPU as server Suriyong L., Computer Multimedia

23. Mode of display for client-server model • Immediate mode • No retain memory in the system • If screen is cleared or move to new position, primitive must be redefine and be sent • High data pass for complex object • Retained mode • Object are defined once and store in the display list • Simple function call to redisplay from client • Configuration: • Server: special purpose graphic computer • Client: good in numerical processing • Disadvantage • Require more memory on the server: overhead Suriyong L., Computer Multimedia

24. Definition and execution with OpenGL • Mechanism to define (create) and manipulate (place information in) for display list • Definition: • Defined in glNewList/glEndList statement • Example define a red box in display list #define BOX 1/* or some other unused integer */ glNewList(BOX, GL_COMPILE); glBegin(GL_POLYGON); 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); glEnd(); glEndList(); Flag: GL_COMPILE: send to server but not display GL_COMPILE_AND_EXECUTE: with execute Suriyong L., Computer Multimedia

25. Function call for display list • glCallList(); : function for calling the list • Ex. glCallList(BOX);// draw a box on the server Suriyong L., Computer Multimedia

26. Stroke character • Filled strings • Magnified outlines Text and display list • Raster text: • Sending bit pattern for each character (which are equal in size) • Stroke text: • Store the drawing font definition in ROM and called by ASCII Suriyong L., Computer Multimedia

27. Drawing of the letter “O” void OurFont(char c) { switch(c) { case ‘a’: … break; case ‘A’; … break; … } } Case ‘O’ glTranslatef(0.5, 0.5, 0.0); /* move to center*/ glBegin(GL_QUAD_STRIP); for (i=0; i<=12; i++) { /* 12 vertices */ angle = 3.14159 /6.0*i; /* 30 degrees in radians */ glVertex2f(0.4*cos(angle), 0.4*sin(angle)); glVertex2f(0.5*cos(angle), 0.5*sin(angle)); } glEnd(); glTranslatef(0.5, -0.5, 0.0); /* move to lower right */ break; Suriyong L., Computer Multimedia

28. Code for 256-character setby using OurFont base = glGenLists(256); /* return index of first of 256 consecutive available ids */ for(i=0; i<256; i++) { glNewList(base + I, GL_COMPILE); OurFont(i); glEndList(); } Function call for display character string char *text_string; glCallLists((Glint) strlen(text_string), GL_BYTE, text_string); Suriyong L., Computer Multimedia

29. Font in GLUT • Access by glutStrokeCharacter() • Raster font glutStrokeCharacter(GLUT_STROKE_MONO_ROMAN, int character); glutBitmapCharacter(GLUT_BITMAP_8_BY_13, int character); Suriyong L., Computer Multimedia

30. Event-driven input programming • glutMainLoop(); /* an event loop function */ • Pointing device • Move event • Active move: mouse move, button depressed • Passive move: mouse move, button released • Mouse event • Mouse held in position, button either depressed or released, information return • GLUT Function • glutMouseFunc(mouse); /* call back in function main */ • mouse function void mouse(int button, int state, int x, int y) { if(button==GLUT_LEFT_BUTTON && state == GLUT_DOWN) exit(); } Suriyong L., Computer Multimedia

31. int main(int argc, char **argv) { glutInit(&argc, argv) glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutCreateWindow(“square”); myinit(); glutReshapeFunc(myReshape); glutMouseFunc(mouse); glutDisplayFunc(display); glutMainLoop(); } Suriyong L., Computer Multimedia

32. glutEvent • Window events when • Redraw, resize • Aspect ratio • Attribute of new primitive • Use glutReshapeFunc(reshape_function); Suriyong L., Computer Multimedia

33. Keyboard Events • When key pressed • Use • glutKeyboardFunc(keyboad_function); void keyboard_function(unsigned char key, int x, int y) { if(key == ‘q’ || key ==‘Q’) exit(); } Suriyong L., Computer Multimedia

34. menu • Glut provide pop-up menu, can use with mouse use: • glutCreateMenu(); // create menu • glutAddEntryMenu(); // add the menu entry Menu which has sub menu Suriyong L., Computer Multimedia

35. Double buffer mode display • Former graphic the use single buffer • Redraw directly on graphic • Flicker may happen especially the animation • User need to refresh the display at the display rate (50-70Hz) • The double buffer can resolve • One for display (front buffer) • One for redraw (back buffer) • Both is swappable for smooth graphic • Using glutSwapBuffers() at display function • Initial display mode set use GLUT_DOUBLE mode set at glutInitDisplayMode(); • (see at rotate square double buffers.exe) Suriyong L., Computer Multimedia

36. Picking • Allow the user to identify an object on the display • For modern system, picking is more difficult • Nature of their rendering pipeline • The pipeline hardware process is not reversible Suriyong L., Computer Multimedia

37. Dealing with Picking(selection process) • Selection • Use clipping and view port which near the cursor to get the hit list • Compare the hit list by user program • Bounding rectangle ( window defining) • use smallest rectangle • object that aligned with the axe is detected • Using back buffer • draw the objects into the back buffer with the pick colors. • get mouse position using the mouse callback. • Find the color at frame position use glReadPixels() • Find the object which corresponds to the read color Suriyong L., Computer Multimedia

38. Four steps that are initiated by a pick function in the application. • draw objects into the back buffer with pick colors. • get position of mouse using mouse callback. • use glReadPixels() to find the color at the position correspond to mouse position in the frame buffer. • search a table of colors to find which object corresponds to the color read. Suriyong L., Computer Multimedia

39. Normal window and display • Window and display after applying pick matrix Suriyong L., Computer Multimedia

40. writing to buffer model Logics operation • There are several modes to draw pixel in frame buffer • 16 possible function to writing bits but interested in 2 • replacing mode • XOR mode • d’=d.xor.s • if we draw twice, it return to original mode • d =(d.xor.s).xor.s • mode of draw activate by glEnable(GL_COLOR_LOGIC_OP); glLogicOP(GL_XOR); Suriyong L., Computer Multimedia

41. The XOR of color • When use xor mode for drawing an image The color is xor bit by bit. suppose: glClearcolor(1,1,1); // screen is white glColor(0, 0, 1); // draw the blue glColor(1, 1, 0); // the result is yellow glColor(0, 0, 1); // draw blue again result is white • we use this mode to draw with undisturbed the system • eg. cursor in CAD pass the object Suriyong L., Computer Multimedia

42. Example practice • Draw an elastical line : writing a program • Animating an object • Creating menu Suriyong L., Computer Multimedia

43. Drawing and erasable lines • use xor mode to draw a line • switch to normal mode // when first mouse press get first point xm = x/500.; ym = (500-y)/500.; // the second mouse press get second point // when release xmm = x/500.; ymm = (500-y)/500.; glLogicOp(GL_XOR); glBegin(GL_LINES); glVertex2f(xm, ym); glVertex2f(xmm, ymm); glEnd(); glLogicOp(GL_COPY); glFlush(); Suriyong L., Computer Multimedia

44. for next line erase, the old with xor and draw with normal mode glLogicOp(GL_XOR); glBegin(GL_LINES); glVertex2f(xm, ym); glVertex2f(xmm, ymm); glEnd(); glFlush(); xmm = x/500.0; ymm = (500-y)/500.0; glBegin(GL_LINES); glVertex2f(xm, ym); glVertex2f(xmm, ymm); glLogicOp(GL_COPY); glEnd(); glFlush(); Suriyong L., Computer Multimedia

45. Homework 3.2 Rewrite the Sierpinski-gasket program from Chapter 2 such that the left mouse button will start the generation of points on the screen, the right mouse button will halt the generation of new points, and the middle mouse button will terminate the program. Include a reshape callback Suriyong L., Computer Multimedia

46. 3.19 Suppose that a CRT has a square face of 40 × 40 centimeters and is refreshed in a noninterlaced manner at a rate of 60 Hz. Ten percent of the time that the system takes to draw each scan line is used to return the CRT beam from the right edge to the left edge of the screen (the horizontal-retrace time), and 10 percent of the total drawing time is allocated for the beam to return from the lower-right corner of the screen to the upper-left corner after each refresh is complete (the vertical-retrace time). Assume that the resolution of the display is 1024 × 1024 pixels. Find a relationship between the time at which a lightpen detects the beamandthelightpen’sposition.Givetheresultusingbothcentimeters andscreencoordinatesforthelocationonthescreen. 3.20 Circuit-layout programs are variants of paint programs. Consider the design of logical circuits using the Boolean AND, OR, and NOT functions. Each of these functions is provided by one of the three types of integrated circuits (gates), the symbols for which are shown in Figure 3.29. Write a program that allows the user to design a logical circuit by selecting gates from a menu and positioning them on the screen. Consider methods for connecting the outputs of one gate to the inputs of others. Figure 3.29 Suriyong L., Computer Multimedia

47. φ l2 l1 θ Homework 3.18 Consider a table with a two-dimensional sensing device located at the end of two linked arms, as shown in Figure 3.28. Suppose that the lengths of the two arms are fixed, and the arms are connected by simple (1-degree- of-freedom) pivot joints. Determine the relationship between the joint angles θ and φ and the position of the sensor. Figure 3.28 Two-dimensional sensingarm. Suriyong L., Computer Multimedia

48. Index Suriyong L., Computer Multimedia