Input and Interaction

Suriyong L., Computer Multimedia

1

Input and InteractionInteractive program is

something make CG look interesting


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


3

Mouse and Track ball• Mechanical and optical

• Mechanical measure motion• Optical measure distance by counting

lines• Track ball

• The upside down mouse

Mouse Trackball


4

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


5

Track point• Pressure sensitive devices to control the encoder• Align between 2 key and in the middle of the

keyboard


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


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


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


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


10

IBM spaceball


11

Spaceball


12

Other physical devices• Laser-based structured-lighting

systems• Laser-ranging systems• Data gloves• Etc.


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)


14

6 classes of logical device1. String:

Provide ASCII, physical is keyboard2. Locator:

Position of WCS, by pointing devices3. 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


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


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


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


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


19

Request mode

Event-mode model

Sample mode


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


21

Network


22

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 architectureDisplay-processor architecture


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


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


25

Function call for display list

• glCallList(); : function for calling the list• Ex. glCallList(BOX); // draw a box on the server


26

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


27

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;

Drawing of the letter “O”

void OurFont(char c) {switch(c) {

case ‘a’:…

break;case ‘A’;

…break;

…}

}


28

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);


29

Font in GLUT• Access by glutStrokeCharacter()

• Raster fontglutStrokeCharacter(GLUT_STROKE_MONO_ROMAN, int character);

glutBitmapCharacter(GLUT_BITMAP_8_BY_13, int character);


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();

}


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();}


32

glutEvent• Window events when

• Redraw, resize• Aspect ratio• Attribute of new primitive• Use

glutReshapeFunc(reshape_function);


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();}


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


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)


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


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


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.


39

(a) Normal window and display (b) Window and display after applying pick matrix


40

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


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 whiteglColor(0, 0, 1); // draw the blueglColor(1, 1, 0); // the result is yellowglColor(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


42

Example practice• Draw an elastical line : writing a

program• Animating an object• Creating menu


43

Drawing and erasable lines

• use xor mode to draw a line

• switch to normal mode

// when first mouse press get first pointxm = x/500.;ym = (500-y)/500.;// the second mouse press get second point// when releasexmm = x/500.;ymm = (500-y)/500.;glLogicOp(GL_XOR);glBegin(GL_LINES);

glVertex2f(xm, ym);glVertex2f(xmm, ymm);

glEnd();glLogicOp(GL_COPY);glFlush();


44

glLogicOp(GL_XOR);glBegin(GL_LINES);


glEnd();glFlush();xmm = x/500.0;ymm = (500-y)/500.0;glBegin(GL_LINES);


glLogicOp(GL_COPY);glEnd();glFlush();

• for next line erase, the old with xor and draw with normal mode


45

Homework3.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


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 beam and the lightpen’s position. Give the result using both centimeters and screen coordinates for the location on the screen.

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


47

Homework3.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 sensing arm.

l1l2

θφ

Index


48

Documents

Input and Interaction