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

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

3. 3 Lerp and Tween l Linear interpolation (lerp) of two points: P = A(1 - t) + Bt = A + (B – A)t zLerp: affine combination of A and B zP : “tween” at t of points A and B l 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. 4 Tweening for Animation l Morphing zInterpolation between corresponding vertices of two polylines zFig 4.22 and 4.24: interpolation zFig 4.25: interpolation and extrapolation

5. 5 Tweening for Animation

6. 6 l Generation of key frames l Compute a smooth path to move the camera between key frames

7. 7 Tweening Routines - Tween l 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. 8 Tweening Routines - drawTween l 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. 9 Tweening Routines - drawAll l 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. 10 Double Buffering l To generate an animation we can erase the current picture and then draw a new picture l Problem: Process of drawing new picture could be seen  bad visual effect l Solution: double buffering zDraw the new picture in an off-screen buffer and then display it by swapping the on-screen and off-screen buffers

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

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

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