12/22/ :38 1 Comp 175C - Computer Graphics Dan Hebert Computer Graphics Comp 175 Chapter 3 Instructor: Dan Hebert

22/22/ :38 2 Comp 175C - Computer Graphics Dan Hebert Outline 0 Input Device Types 0 Interactive Graphics Programming 0 Example Program

32/22/ :38 3 Comp 175C - Computer Graphics Dan Hebert Interaction 0 Interaction is an important component of graphics applications 0 Most modern APIs, such as OpenGL, doesn’t support interaction directly (why?) 0 We need additional libraries, such as GLUT, for device interaction

42/22/ :38 4 Comp 175C - Computer Graphics Dan Hebert Interaction with Graphics System Change Image React to Change Graphics SystemUser Input Device Display

52/22/ :38 5 Comp 175C - Computer Graphics Dan Hebert Computer Graphics Conceptual Model Application Model Application Program Graphics System Output Devices Input Devices API Function Calls or Protocol Data

62/22/ :38 6 Comp 175C - Computer Graphics Dan Hebert GL Library Organization (under X Windows) OpenGl application program GLU GL GLUT GLX Xlib, Xtk Frame buffer

72/22/ :38 7 Comp 175C - Computer Graphics Dan Hebert GL Library Organization Window OS Application GLGLUGLUT

82/22/ :38 8 Comp 175C - Computer Graphics Dan Hebert Input Devices We can think about input devices in two ways: Physical device – that can be described by their real-world physical properties. (mouse, keyboard, joystick…) Logical devices – that is characterized by its high- level interface with the user program. It is an abstraction of device data. (functions, think of the windows device driver)

92/22/ :38 9 Comp 175C - Computer Graphics Dan Hebert Physical Device Types 0 Keyboard 0 Choice 0 Locators

102/22/ :38 10 Comp 175C - Computer Graphics Dan Hebert Keyboard 0 Returns character codes with specific meanings

112/22/ :38 11 Comp 175C - Computer Graphics Dan Hebert Choice 0 Returns a choice that has been selected from a number of discrete options - Button box - Function keypad

122/22/ :38 12 Comp 175C - Computer Graphics Dan Hebert Locator Devices 0 Return a position and/or orientation – Mouse – Trackball – Tablet – Joystick – Touch screen

132/22/ :38 13 Comp 175C - Computer Graphics Dan Hebert 3D Input Devices 0 Return 3D position and /or orientation -Digitizer -3D Spaceball -Glove -Tracker

142/22/ :38 14 Comp 175C - Computer Graphics Dan Hebert 3D Input Devices Digitizer - 3D model

152/22/ :38 15 Comp 175C - Computer Graphics Dan Hebert 3D Input Devices 3D Spaceball

162/22/ :38 16 Comp 175C - Computer Graphics Dan Hebert 3D Input Devices Haptic Glove - Force feedback Tracking hand and finger position/orientation

172/22/ :38 17 Comp 175C - Computer Graphics Dan Hebert 3D Input Devices Motion Tracker - Magnetic - Acoustic - Inertial - Optical - GPS

182/22/ :38 18 Comp 175C - Computer Graphics Dan Hebert Logical Device 0 Characterized from the perspective of user application program -High-level interface with the user program -An abstraction of device data

192/22/ :38 19 Comp 175C - Computer Graphics Dan Hebert Logical Device Types 0 String -Returns ASCII strings 0 Locator -Returns position and or orientation 0 Pick -Returns the identifier of object 0 Choice -Returns a choice that has been selected from a number of options 0 Dial -Return analog input (continuous control) 0 Stroke -Returns an array of locations

202/22/ :38 20 Comp 175C - Computer Graphics Dan Hebert Describe Input Device Behavior 0 Ways to describe input device behavior -Measure: what the device returns to user program -Trigger: when the device returns those measurements

212/22/ :38 21 Comp 175C - Computer Graphics Dan Hebert Ways to Read Input Device 0 Sample mode 0 Request mode 0 Event mode

222/22/ :38 22 Comp 175C - Computer Graphics Dan Hebert Sample Mode Hi, What is its input right now? Give me the data immediately! Measure Process Program Sample (1) Measure (2) - No trigger needed - Return immediately - Prepare the data before function call

232/22/ :38 23 Comp 175C - Computer Graphics Dan Hebert Request Mode Do not return the measure until the device is triggered - Wait for triggering - Think of the C function call “ scanf() ” Measure Process Program Request (1) Measure (4) Trigger Process Trigger (3) (2)

242/22/ :38 24 Comp 175C - Computer Graphics Dan Hebert Event Mode Wait until a device is triggered and user does something Two asynchronous processes - Event generation (device trigger) - User request (event query) Event generation and process are independent Multiple input devices

252/22/ :38 25 Comp 175C - Computer Graphics Dan Hebert Event Mode Let ’ s think of the Windows event mechanism - Generate a event by a device trigger - Place the event in the event queue - Examine the event queue and process Event process Mouse Keyboard … Process Event 1 Event 2 Event 3 … Event queue Event sources

262/22/ :38 26 Comp 175C - Computer Graphics Dan Hebert Event Mode Two Asynchronous Processes Measure Process Program Await (1) Event (2) Trigger Process Event Queue Trigger (1) Measure (2)

272/22/ :38 27 Comp 175C - Computer Graphics Dan Hebert Demonstration (code)

282/22/ :38 28 Comp 175C - Computer Graphics Dan Hebert Interactive Graphics Programming We will focus on 0 Event-driven Input mode 0 Callback mechanism to do event process 0 GLUT programming

292/22/ :38 29 Comp 175C - Computer Graphics Dan Hebert Callback Functions 0 Callback Function Routine to call when some event happens. e.g. mouse/keyboard, window changes, etc. 0 GLUT uses a callback mechanism to do its event processing.

302/22/ :38 30 Comp 175C - Computer Graphics Dan Hebert Event-driven Input Programming 0 Decide input events -mouse, keyboard, window…… 0 Write callback functions -respond to each input event, …… 0 Register callback functions -tell the system to handle the event, …… 0 Event processing loop -Wait and process

312/22/ :38 31 Comp 175C - Computer Graphics Dan Hebert GLUT Event Callback Functions GLUT can handle on the most common used input events Ex: 0 Key action 0 Mouse action 0 Idle (called when nothing else is going on) 0 Window events (contents, resized or moved)

322/22/ :38 32 Comp 175C - Computer Graphics Dan Hebert Keyboard Event void keyboard_callback_func ( unsigned char key, int x, int y ) { switch (key) { case ‘q’ : exit (0); break; …… } It’s called when a key is struck on the keyboard glutKeyboardFunc ( keyboard_callback_func );

332/22/ :38 33 Comp 175C - Computer Graphics Dan Hebert Special Keyboard Event void special_callback_func ( unsigned char key, int x, int y ) { switch (key) { …. It’s called when a function or direction key is struck on the keyboard glutSpecialFunc ( special_callback_func );

342/22/ :38 34 Comp 175C - Computer Graphics Dan Hebert Mouse Event void mouse_callback_func ( int button, int state, int x, int y ) - button: which button is depressed/released. GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON - state: action state. GLUT_DOWN, GLUT_UP - x, y: position It’s called when a mouse button is depressed/released glutMouseFunc ( mouse_callback_func );

352/22/ :38 35 Comp 175C - Computer Graphics Dan Hebert Mouse Event void mouse_callback_func ( int button, int state, int x, int y ) { if ( button == GLUT_LEFT_BUTTON && state == GLUT_DOWN ) exit (0); …… }

362/22/ :38 36 Comp 175C - Computer Graphics Dan Hebert Mouse Passive Motion Event void mouse_passivemotion_func (int x, int y ) - x, y: position It’s called when a mouse is moved in a window and no buttons are pressed glutPassiveMotionFunc ( mouse_passivemotion_func );

372/22/ :38 37 Comp 175C - Computer Graphics Dan Hebert Mouse Motion Event void mouse_motion_func (int x, int y ) - x, y: position It’s called when a mouse is moved in a window and one or more buttons are pressed glutMotionFunc ( mouse_motion_func );

382/22/ :38 38 Comp 175C - Computer Graphics Dan Hebert Mouse Entry Event void mouse_motion_func (int state ) - GLUT_LEFT or GLUT_ENTERED It’s called when a mouse enters or leaves a window and one or more buttons are pressed glutEntryFunc ( mouse_entry_func );

392/22/ :38 39 Comp 175C - Computer Graphics Dan Hebert Windows Events – Reshape Event - Redraw the objects - Keep the aspect ratio It’s called when the window is resized or reshaped. glutReshapeFunc ( reshape_callback_func );

402/22/ :38 40 Comp 175C - Computer Graphics Dan Hebert Windows Events – Reshape Event glutReshapeFunc ( reshape_callback_func ); void reshape_callback_func ( int width, int height ) - width, height: the width and height of the new window

412/22/ :38 41 Comp 175C - Computer Graphics Dan Hebert Windows Events – Visibility Event - Redraw the objects It’s called when the visibility of a window changes. glutVisibilityFunc ( visibility_callback_func );

422/22/ :38 42 Comp 175C - Computer Graphics Dan Hebert Windows Events – Visibility Event glutVisibilityFunc ( visibility_callback_func ); void visibility_callback_func ( int state ) -state: GLUT_NOT_VISIBLE or GLUT_VISIBLE -GLUT_VISIBLE does not distinguish a window being totally versus partially visible. -GLUT_NOT_VISIBLE - means no part of the window is visible, i.e., until the window’s visibility changes, all further rendering to the window is discarded.

432/22/ :38 43 Comp 175C - Computer Graphics Dan Hebert Display Callback void display_callback_func ( void ) { Do all of your drawing here! } It’s called when the window should be redisplayed. For example, when the window is first opened. This callback function is necessary for a GLUT program glutDisplayFunc ( display_callback_func );

442/22/ :38 44 Comp 175C - Computer Graphics Dan Hebert Idle Callback void idle_callback_func ( void ) { t += 10; ….. } It’s called when nothing else is going on. It is very useful for animation and continuous update. glutIdleFunc ( idle_callback_func );

452/22/ :38 45 Comp 175C - Computer Graphics Dan Hebert Menu Status (State) Callback Called with the value GLUT_MENU_IN_USE for its value parameter when pop-up menus are in use by the user; called with the value GLUT_MENU_NOT_IN_USE for its status parameter when pop-up menus are no longer in use. The x and y parameters indicate the location in window coordinates of the button press that caused the menu to go into use, or the location where the menu was released (may be outside the window). MenuState is a deprecated version of MenuStatus (no x,y parameters). glutMenuStatusFunc(int status, int x, int y); glutMenuStateFunc(int status);

462/22/ :38 46 Comp 175C - Computer Graphics Dan Hebert Menu Management GLUT provides the pop-up menu functions that can be used with mouse for interactive control. glutCreateMenu ( menu_callback_func ); void menu_callback_func ( int ID ) { put your menu control here! }

472/22/ :38 47 Comp 175C - Computer Graphics Dan Hebert Menu Creation glutAddMenuEntry ( const char *label, int value ); - label: the displayed name of this menu item. - value: the ID passed to the menu callback function when this entry is selected.

482/22/ :38 48 Comp 175C - Computer Graphics Dan Hebert Menu Creation glutAttachMenu ( int button ); - button: which mouse button is associated with the menu. GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON

492/22/ :38 49 Comp 175C - Computer Graphics Dan Hebert Implementing Choice: Menus in GLUT 0 Four steps: -Create menu: glutCreateMenu(menu); -Define menu entries: glutAddMenuEntry -Attach menu to a mouse button: glutAttachMenu -Define callback function: void menu(int id);

502/22/ :38 50 Comp 175C - Computer Graphics Dan Hebert Creating a Menu in GLUT int glutCreateMenu(void (*func)(int value)); Creates a new pop-up menu. Returns a unique integer identifier for the menu. Takes as argument a pointer to a single callback function that takes an integer argument. The integer argument of the callback is mapped to the menu choice. Sets the current menu to the newly created menu. Menu Identifier Callback Function Choice

512/22/ :38 51 Comp 175C - Computer Graphics Dan Hebert Associating a Menu with a Mouse Key void glutAttachMenu(int button); Associates the selected button with the current menu. button is selected from the GLUT defined button constants: GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON

522/22/ :38 52 Comp 175C - Computer Graphics Dan Hebert Adding Entries to the Menu void glutAddMenuEntry(char *name, int value); String to appear in menu entry. Value to be passed to callback function. Adds a menu entry to the bottom of the current menu.

532/22/ :38 53 Comp 175C - Computer Graphics Dan Hebert Building a Sub-menu void glutAddSubMenu(char *name, int menu); ASCII string to display in the menu item from which to cascade sub-menu. Identifier of menu to cascade from this sub-menu item.

542/22/ :38 54 Comp 175C - Computer Graphics Dan Hebert Window Management Standard GLUT initialization glutInit (int argc, char ** argv) Display model glutInitDisplayMode (unsigned int mode) Window size and position glutInitWindowSize (int width, int height) glutInitWindowPosition(int x, int y) Create window glutCreateWindow (char *name);

552/22/ :38 55 Comp 175C - Computer Graphics Dan Hebert You Must Register Callback void main (int argc, char **argv) { …… glutDisplayFunc ( display ); // display callback glutReshapeFunc ( resize ); // window resize glutKeyboardFunc ( key ); // keyboard callback …… }

562/22/ :38 56 Comp 175C - Computer Graphics Dan Hebert Demonstration (look at code)

572/22/ :38 57 Comp 175C - Computer Graphics Dan Hebert Put Thing Together – A example Question: 0 Create a viewport in one window. The viewport is 256x256 pixels in size and has a background color of white. It shows a square with surface of blue color. 0 Using mouse right_button depressed to pop up a menu. The pop_up menu has just one entry that allows user to exit the program.

582/22/ :38 58 Comp 175C - Computer Graphics Dan Hebert Main Function void main (int argc, char **argv) { glutInit ( &argc, argv ); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowSize (256, 256); glutCreateWindow (“My First Program"); myinit (); glutDisplayFunc ( square ); // register callback… More??? glutMainLoop (); }

592/22/ :38 59 Comp 175C - Computer Graphics Dan Hebert OpenGL Initialization void myinit (void) { glClearColor (1.0, 1.0, 1.0, 0.0); // background glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D (0.0, 256.0, 0.0, 256.0); glMatrixMode(GL_MODELVIEW); glClear(GL_COLOR_BUFFER_BIT); // clear the window }

602/22/ :38 60 Comp 175C - Computer Graphics Dan Hebert Display Callback Function void square (void) { typedef GLfloat point2D[2]; point2D vertices[4] = {{100.0, 100.0},{200.0, 100.0},{200.0, 200.0},{100.0, 200.0}}; glClear(GL_COLOR_BUFFER_BIT); // clear the window glColor3f (0.0, 0.0, 1.0); glBegin(GL_POLYGON); glVertex2fv (vertices[0]); glVertex2fv (vertices[1]); glVertex2fv (vertices[2]); glVertex2fv (vertices[3]); glEnd(); glFlush(); }

612/22/ :38 61 Comp 175C - Computer Graphics Dan Hebert What it Looks Like

622/22/ :38 62 Comp 175C - Computer Graphics Dan Hebert Add Interaction void main (int argc, char **argv) { glutInit ( &argc, argv ); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowSize (256, 256); glutCreateWindow (“My First Program"); myinit (); glutCreateMenu (menu); // register menu callback glutAddMenuEntry(“Quit”, 1); glutAttachMenu(GLUT_RIGHT_BUTTON); glutDisplayFunc ( square ); // register display callback glutMainLoop (); }

632/22/ :38 63 Comp 175C - Computer Graphics Dan Hebert Menu Callback Function void menu (int ID) { if ( ID == 1 ) exit (1); }

642/22/ :38 64 Comp 175C - Computer Graphics Dan Hebert What it Looks Like

652/22/ :38 65 Comp 175C - Computer Graphics Dan Hebert Problems  Create a program with a multi-tiered menu as follows :  Line Width – 4 entries to set line width from 2-5  Line Color – 5 entries to set line color (blue, green, black, white, red)  Draw line – no entries, draws a line from (200, 200, 0) to (400, 400, 0)  Create a program which senses mouse movement and mouse button 3  When mouse movement occurs, display a blue point  When mouse button 3 is pressed, end the program

662/22/ :38 66 Comp 175C - Computer Graphics Dan Hebert Problems (continued)  Create a program which senses key presses  When “ p ” is pressed, draw a polygon  When “ s ” is pressed, draw a square  When “ l ” is pressed, draw a line  When “ q ” is pressed, end program

672/22/ :38 67 Comp 175C - Computer Graphics Dan Hebert Example: Simple Square Drawing Program 0 Open a window. 0 Clear it to black. 0 Draw a box at location of the mouse each time the left button is clicked. Color of box should be randomly selected from RGB space. 0 Clear window when resized. 0 Quit when right button is clicked.

682/22/ :38 68 Comp 175C - Computer Graphics Dan Hebert Square Program Source Code Slide 1 /* This program illustrates the use of the glut library for interfacing with a Window System */ /* The program opens a window, clears it to black, then draws a box at the location of the mouse each time the left button is clicked. The right button exits the program The program also reacts correctly when the window is moved or resized by clearing the new window to black*/ #include /* globals */ GLsizei wh = 500, ww = 500; /* initial window size */ GLfloat size = 3.0; /* half side length of square */

692/22/ :38 69 Comp 175C - Computer Graphics Dan Hebert Square Program Source Code Slide 2 void drawSquare(int x, int y) { y=wh-y; glColor3ub( (char) random()%256, (char) random()%256, (char) random()%256); glBegin(GL_POLYGON); glVertex2f(x+size, y+size); glVertex2f(x-size, y+size); glVertex2f(x-size, y-size); glVertex2f(x+size, y-size); glEnd(); glFlush(); }

702/22/ :38 70 Comp 175C - Computer Graphics Dan Hebert Square Program Source Code Slide 3 void myReshape(GLsizei w, GLsizei h) { /* adjust clipping box */ glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(0.0, (GLdouble)w, 0.0, (GLdouble)h, -1.0, 1.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); /* adjust viewport and clear */ glViewport(0,0,w,h); glClearColor (0.0, 0.0, 0.0, 0.0); glClear(GL_COLOR_BUFFER_BIT); glFlush(); /* set global size for use by drawing routine */ ww = w; wh = h; }

712/22/ :38 71 Comp 175C - Computer Graphics Dan Hebert Square Program Source Code Slide 4 void myinit(void) { glViewport(0,0,ww,wh); /* Pick 2D clipping window to match size of screen window This choice avoids having to scale object coordinates each time window is resized */ glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(0.0, (GLdouble) ww, 0.0, (GLdouble) wh, -1.0, 1.0); /* set clear color to black and clear window */ glClearColor (0.0, 0.0, 0.0, 0.0); glClear(GL_COLOR_BUFFER_BIT); glFlush(); /* callback routine for reshape event */ glutReshapeFunc(myReshape); }

722/22/ :38 72 Comp 175C - Computer Graphics Dan Hebert Square Program Source Code Slide 5 void mouse(int btn, int state, int x, int y) { if(btn==GLUT_RIGHT_BUTTON&state==GLUT_DOWN) exit(); } int main(int argc, char** argv) { glutInit(&argc,argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutCreateWindow("square"); myinit (); glutReshapeFunc (myReshape); glutMouseFunc (mouse); glutMotionFunc(drawSquare); glutMainLoop(); }

732/22/ :38 73 Comp 175C - Computer Graphics Dan Hebert Output of “Square” Program

742/22/ :38 74 Comp 175C - Computer Graphics Dan Hebert Example: Paint Program 0 Select from simple geometric shapes to draw. 0 Select from 8 colors. 0 Turn fill on or off. 0 Increase or decrease size of points. 0 Quit or clear screen under menu control.

752/22/ :38 75 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 1

762/22/ :38 76 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 2

772/22/ :38 77 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 3

782/22/ :38 78 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 4

792/22/ :38 79 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 5

802/22/ :38 80 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 6

812/22/ :38 81 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 7

822/22/ :38 82 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 8

832/22/ :38 83 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 9

842/22/ :38 84 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 10

852/22/ :38 85 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 11

862/22/ :38 86 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 12

872/22/ :38 87 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 13

882/22/ :38 88 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 14

892/22/ :38 89 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 15

902/22/ :38 90 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 16

912/22/ :38 91 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 17

922/22/ :38 92 Comp 175C - Computer Graphics Dan Hebert Source Code for Paint Program Slide 18

932/22/ :38 93 Comp 175C - Computer Graphics Dan Hebert Output of “Paint” Program

942/22/ :38 94 Comp 175C - Computer Graphics Dan Hebert Animating a Program  Look at single and change from single to double buffering

952/22/ :38 95 Comp 175C - Computer Graphics Dan Hebert Single Buffering vs Double Buffering Single buffering is good for static graphics, double buffering is necessary for animated graphics glutInitDisplayMode ( GLUT_SINGLE | GLUT_RGB ); glutInitDisplayMode ( GLUT_DOUBLE | GLUT_RGB ); and glutSwapBuffers ();

962/22/ :38 96 Comp 175C - Computer Graphics Dan Hebert Animating a Program continued)  Run singledouble program

972/22/ :38 97 Comp 175C - Computer Graphics Dan Hebert Problems  Create a program which does the following :  Draws a triangle, not an equilateral triangle  Rotates the triangle and moves it across the screen  Senses left mouse button down and moves the triangle to the mouse position, it then continues rotating and moving  Senses right mouse button down and ends the program

982/22/ :38 98 Comp 175C - Computer Graphics Dan Hebert Homework Assignment 0 Develop an OpenGl program which has the following : -A menu and 1 or more submenus attached to the right mouse button to select 1 of 4 different graphics to draw on the screen -Keyboard input to determine which color to draw the selected graphic -Mouse movement to define where to draw the selected graphic 0 Graphic can be as simple as a primitive (triangle, square, etc) or a more complex drawing 0 Due February 21 at start of class