1. Interactive Computer Graphics CS 418 MP1: Dancing I TA: Zhicheng Yan Sushma S Kini Mary Pietrowicz Slides Taken from: “An Interactive Introduction to OpenGL Programming” Dave Shreiner, Ed Angel, Vicki Shreiner

2. Agenda  MP1 Submission  A little more OpenGL  Applications Structure  Callback functions  Double Buffering (required)  Animation Techniques  MP Q&A

3. MP1 : Mesh Rendering  Due on 12:30pm CST 10 Feb. 2015.  Compass is sometimes not very stable. Try to submit earlier  Check the Piazza post MP1 submission instructions  We want a zip file named cs418_mp1_{netid}.zip: ▪ Source code folder ▪ Screen shot folder ▪ README with compilation instructions and link to mandatory video demo  Depth Test : “glEnable(GL_DEPTH_TEST);”  Demo: http://zyan3-2.cs.illinois.edu:8000/http://zyan3-2.cs.illinois.edu:8000/

4. 4 GLUT Basics  Application Structure  Configure and open window  Initialize OpenGL state  Register input callback functions ▪ render/display ▪ resize ▪ input: keyboard, mouse, etc.  Enter event processing loop

5. 5 Sample Program void main( int argc, char** argv ) { int mode = GLUT_RGB|GLUT_DOUBLE; glutInitDisplayMode( mode ); glutCreateWindow( argv[0] ); init(); glutDisplayFunc( display ); glutReshapeFunc( resize ); glutKeyboardFunc( key ); glutIdleFunc( idle ); glutMainLoop(); }

6. 6 OpenGL Initialization  Set up whatever state you’re going to use.  In our MP1 Case only this: void init( void ) { glClearColor( 0.0, 0.0, 0.0, 1.0 ); }

7. 7 GLUT Callback Functions  Routine to call when something happens  window resize or redraw  user input  animation  “Register” callbacks with GLUT glutDisplayFunc( display ); glutIdleFunc( idle ); glutKeyboardFunc( keyboard );

8. 8 Rendering Callback  Do all of your drawing here glutDisplayFunc( display ); void display( void ) { glClear( GL_COLOR_BUFFER_BIT ); glBegin( GL_TRIANGLE_STRIP ); glVertex3fv( v[0] ); glVertex3fv( v[1] ); glVertex3fv( v[2] ); glVertex3fv( v[3] ); glEnd(); glutSwapBuffers(); }

9. 9 Idle Callbacks  Use for animation and continuous update glutIdleFunc( idle ); void idle( void ) { glutPostRedisplay(); }

10. 10 User Input Callbacks  Process user input glutKeyboardFunc( keyboard ); void keyboard( char key, int x, int y ) { switch( key ) { case ‘q’ : case ‘Q’ : exit( EXIT_SUCCESS ); break; case ‘r’ : case ‘R’ : rotate = GL_TRUE; break; }

11. 11 Double Buffering 1 2 4 8 16 1 2 4 8 Front Buffer Back Buffer Display

12. 12 Animation Using Double Buffering  Request a double buffered color buffer glutInitDisplayMode(GLUT_RGB |GLUT_DOUBLE);  Clear color buffer glClear( GL_COLOR_BUFFER_BIT );  Render scene  Request swap of front and back buffers glutSwapBuffers(); Interesting Example  Repeat steps 2 - 4 for animation

13. Sine Waves-Simple Animation  2 ways to generate sine waves in software:  y = sin(x) ▪ Ex. glVertex2f(sin(x), cos(y)); ▪ Don’t change every point with the same function otherwise the animation would be uniform.  Look Up Table

14. Lookup Table  generate an array of the sine values and store them in memory. ▪ use the symmetry properties of the sine wave to minimize the memory storage Example: Obtain y=sin(x) in one degree steps: For x Є (0,90), we can create the array: float sine[91], pi=3.141592653; for (int i=0;i<=90;i++) sine[i] = sin(pi/180 * i); Then, if we wanted the sine of 45 degrees, we simply write y = sine[45];

15. Lookup Table (cont.) Example (cont.): Obtain the other 3/4's of the circle: we can use the symmetry of sine wave. Each quadrant is obtained as follows: y = sine[ 180 - x]; /* 90 <= x <= 180 */ y = -sine[x - 180]; /* 180 <= x <= 270 */ y = -sine[360 - x]; /* 270 <= x <= 360 */

16. Q&A