CS430 Computer Graphics

1. CS430 Computer Graphics Vectors Part II Application of Linear Combination Chi-Cheng Lin, Winona State University

2. Topics • Lerp and Tweening • Double Buffering • Quadratic and Cubic Tweening

3. Lerp and Tween • Linear interpolation (lerp) of two points: P = A(1 - t) + Bt = A + (B – A)t • Lerp: affine combination of A and B • P : “tween” at t of points A and B • lerp(a, b, t) returns the fraction t of the way from a to b float lerp(float a, float b, float t) { return a + (b – a) * t }

4. Tweening for Animation • Morphing • Interpolation between corresponding vertices of two polylines • Fig 4.22 and 4.24: interpolation • Fig 4.25: interpolation and extrapolation

5. Tweening for Animation

6. Tweening for Animation • Generation of key frames • Compute a smooth path to move the camera between key frames

7. Tweening Routines - Tween • Tween: returns the tween at t of two points A and B Point2 Canvas::Tween(Point2 A, Point2 B, float t) // code of Tween is similar to lerp

8. Tweening Routines - drawTween • drawTween: draws the tween polyline at t of two polylines A and B of n vertices void Canvas::drawTween(Point2 A[], Point2 B[], int n, float t) { Point2 P = Tween( A[0], B[0], t); moveTo(P); for (int i=1; i<n; i++) { P = Tween( A[i], B[i], t); lineTo(P); } }

9. Tweening Routines - drawAll • drawAll: draws all the tween polylines of two polylines A and B of n vertices on canvas cvs void drawAll(Point2 A[], Point2 B[], int n) { for (float t=0.0f; t<=1.0; t+= 0.01f) { glClear(GL_COLOR_BUFFER_BIT); cvs.drawTween( A, B, n, t); glutSwapBuffers(); } }

10. Double Buffering • To generate an animation we can erase the current picture and then draw a new picture • Problem: Process of drawing new picture could be seen  bad visual effect • Solution: double buffering • Draw the new picture in an off-screen buffer and then display it by swapping the on-screen and off-screen buffers

11. Double Buffering in OpenGL • Initializing display mode glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB); • Swap buffers when a new picture ready glutSwapBuffers();

12. Quadratic and Cubic Tweening • Quadratic tweening • 1 = ((1 – t) + t)2 = (1 – t)2 + 2(1 – t) + t 2 • Bezier Curve for 3 points A, B, and C • P = (1 - t)2A + 2t (1 – t)B + t 2C • Cubic tweening • 1 = ((1-t)+t)3=(1-t)3 + 3(1-t)2t + 3(1-t)t 2 + t 3 • Cubic interpolation between 4 points A, B, C, and D : • P = (1-t)3A + 3(1-t)2t B+ 3(1-t)t 2C + t 3D

13. Quadratic and Cubic Tweening P(t) P(1) P(t) P(0)