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

Suriyong L., Computer Multimedia2 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 Multimedia3 Mouse and Track ball Mechanical and optical Mechanical measure motion Optical measure distance by counting lines Track ball The upside down mouse Mouse Trackball

Suriyong L., Computer Multimedia4 Mouse Output 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 Cursor Positioning

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

Suriyong L., Computer Multimedia6 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 Multimedia7 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 Multimedia8 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 Multimedia9 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 Multimedia10 IBM spaceball

Suriyong L., Computer Multimedia11 Spaceball

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

Suriyong L., Computer Multimedia13 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 Multimedia14 6 classes of logical device 1.String: Provide ASCII, physical is keyboard 2.Locator: Position of WCS, by pointing devices 3.Pick: Identified an object, usually same device with locator but separate software interface 4.Choice: Select one of a discrete number 5.Dial (or valuators): Analog input 6.Stroke: Array of location, mouse down-data in, mouse up- data stop

Suriyong L., Computer Multimedia15 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 Multimedia16 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 Multimedia17 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 Multimedia18 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 Multimedia19 Request mode Event-mode model Sample mode

Suriyong L., Computer Multimedia20 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 Multimedia21 Network

Suriyong L., Computer Multimedia22 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 Simple graphics architecture Display-processor architecture

Suriyong L., Computer Multimedia23 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 Multimedia24 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 BOX1 /* 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 Multimedia25 Function call for display list glCallList(); : function for calling the list Ex. glCallList(BOX); // draw a box on the server

Suriyong L., Computer Multimedia26 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 Stroke character (a)Filled strings (b)Magnified outlines

Suriyong L., Computer Multimedia27 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 = /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; Drawing of the letter “O” void OurFont(char c) { switch(c) { case ‘a’: … break; case ‘A’; … break; … }

Suriyong L., Computer Multimedia28 Code for 256-character set by using OurFont Function call for display character string 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(); } char *text_string; glCallLists((Glint) strlen(text_string), GL_BYTE, text_string);

Suriyong L., Computer Multimedia29 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 Multimedia30 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 Multimedia31 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 Multimedia32 glutEvent Window events when Redraw, resize Aspect ratio Attribute of new primitive Use glutReshapeFunc(reshape_function);

Suriyong L., Computer Multimedia33 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 Multimedia34 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 Multimedia35 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 Multimedia36 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 Multimedia37 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 Multimedia38 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 Multimedia39 (a)Normal window and display (b)Window and display after applying pick matrix

Suriyong L., Computer Multimedia40 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); writing to buffer model

Suriyong L., Computer Multimedia41 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 Multimedia42 Example practice Draw an elastical line : writing a program Animating an object Creating menu

Suriyong L., Computer Multimedia43 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 Multimedia44 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(); for next line erase, the old with xor and draw with normal mode

Suriyong L., Computer Multimedia45 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 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 beam and the lightpen’s position. Give the result using both centimeters and screen coordinates for the location on the screen 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 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 Multimedia47 Homework 3.18 Consider a table with a two-dimensional sensing device located at the end of two linked arms, as shown in Figure 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 sensing arm. l1l1 l2l2 θ φ

Index Suriyong L., Computer Multimedia48