Computer Graphics Keyframing and Interpola8on

Computer Graphics Keyframing and Interpola8on

This Lecture Keyframing and Interpola2on two topics you are already familiar with from your Blender modeling and anima2on of a robot arm Interpola2on linear cubic

Keyframing The simplest form of anima2ng an object θ 3 c 1 c 2 θ 1 c 3 θ 2 A 60 sec anima2on Video: 30 frames / sec = 1800 frames We have 6 key frames Keyframe system must generate 1794 frames t=0 t=50ms What s the in- between mo2on?

Interpola8on Mathema2cal problem: Given a set of points, what are the most reasonable points in between?

Simplest Linear Interpola8on. just use a weighted average between points. We abbreviate linearly interpolate as Lirp

The simplest solu2on given: p 0 and p 1 t is our control variable Linear Interpola8on p 1 Q Q(t) = (1 t)p 0 + tp 1 p 0 0 t 1 Note: we only do this for t between 0 and 1, inclusive

Linear Interpola8on: General Case What if we are not given values at t=0 and t=1? Say the value is p 0 at t 0 and p 1 at t 1 p 1 Q p 0 t ' = t t 0 t 1 t 0 t 0 t t 1 Q(t) = (1 t ')p 0 + t ' p 1 From this point on, we will assume that t varies 0 to 1

Linear Interpola8on: Example 1 An object lies at posi2on y 0 = 2 at 2me t = 0 and posi2on y 1 = 3.1 at 2me t = 1. Using linear interpola2on, approximate the posi2on of the object at 2me t = 0.6. y = (1 t)y 0 + ty 1 Answer: y 0 =2, y 1 =3.1, t=0.6 y = (1 0.6) 2 + 0.6 3.1 y = 2.66

Linear Interpola8on: Example 2 The brightness of a moving light source is b 0 = 1.0 when it lies at posi2on x 0 = 1.1 and b 1 = 0.5 when it lies at posi2on x 1 = 1.5. Using linear interpola2on, approximate the brightness of the light source when it lies at posi2on x = 1.4. We start at p 0 = 1.1, end at p 1 = 1.5, approximate at x = 1.4 Approximate at x =0.75: x' = (x x 0 ) / (x 1 x 0 ) x' = (1.4 1.1) / (1.5 1.1) = 0.75 b = (1 x')b 0 + x'b 1 b = (1 0.75) 1.0 + 0.75 0.5 = 0.625

Linear Interpola8on: Example 3 The (x,y) posi2on of an object is (0, 1) at 2me t = 0 and (2, 10) at t = 1. Using linear interpola2on, approximate the posi2on of the object at 2me t = 0.1. Linearly interpolate the two coordinates separately x = (1 t)x 1 + tx 2 x = (1 0.1) 0 + 0.1 2 = 0.2 y = (1 t)y 1 + ty 2 y = (1 0.1) 1+ 0.1 10 =1.9 The object posi2on at 2me 0.1 is (0.2, 1.9)

Hands- On Session Download robotinterp.cpp, keyframe.cpp, keyframe.h and keyframe.txt from the class website Copy keyframe.txt to the resources folder of the project 05_asset_instance, then add it to the resources group of this project. Depending on the configura2on on your compiler, you might need to save it in the Debug directory of your project. Copy robotinterp.cpp, keyframe.cpp, keyframe.h to the sources directory of 05_asset_instance, and add them to your project. The file robotinterp.cpp will replace the current main file of your project. The keyframe files include code for linear interpola2on Add the appropriate header files to robotinterp.cpp, then compile the project and run. Higng the key 'a' will start the robot anima2on based on linear interpola2on

Hands- On Ac8vity 1 The format of the keyframe.txt file is as follows: keyframe time param1 param2 Here time is the actual 2me of the keyframe, param1 is the lei upper arm angle, and param2 is the lei lower arm angle The file keyframe.cpp includes code for reading this file and interpola2ng all parameters given in the file Study the code for keyframe.cpp and the connec2on with robotinterp.cpp (in Update, by means of the params array) Add code to robotinterp.cpp and configure keyframe.txt to have the robot wave both arms Show the anima2on to your instructor when finished

Hands- On Ac8vity 2 You can interpolate not only the joint angles of the robot, but also the posi2on or other akributes (color, texture, lights, camera) Let s experiment with the robot posi2on in the world: Add another parameter to keyframe.txt to represent the robot posi2on in each keyframe (in addi2on to joint angles) Add code to robotinterp.cpp to make the robot change posi2on (for example, it may vanish along the nega2ve z- axis) while waving Show the anima2on to your instructor when finished

Hands- On Ac8vity 3 In your latest assignment you got a taste of Vizard and its power for quick graphics development. Extend your Vizard script to make the camera fly over the piazza using keyframe interpola2on: You may hardcode the keyframes, so that you can focus on interpola2on rather than file handling. For example, if you alter only the (x,y,z) posi2on of the camera, your keyframes look like keyframes = [[0,0,0,0],[1.2,0,3,2],[2.2,5,3,4], etc.] Define a func2on linearinterpolation(time) similar to the one given in the OpenGL robot code Define a func2on navigate that uses linear interpola2on to set the posi2on (and orienta2on) of your camera, and schedule its execu2on using a 2mer

Hands- On Ac8vity 3 (contd.) To make sure that your linearinterpolation func2on works properly, place an object of your choice at each interpolated posi2on to trace the path that the camera takes. Here s an example: Show the anima2on to your instructor when finished

Hands- On Ac8vity 4 In your latest assignment you have also imported your own Blender object into your graphics scene Extend your Vizard script to make your Blender object move around the piazza using keyframe interpola2on Show the anima2on to your instructor when finished

Linear Interpola8on: Limita8ons Requires a large number of keyframes when the mo2on is highly nonlinear Solu2on: cubic interpola2on

Cubic Interpola8on

Parametric Curves We want con2nuous smooth curve f passing through the data points Explicit form y = f (x) Implicit form f (x, y) = 0 (x, y) Parametric form x = f (t), y = g(t)

Parametric Curve Example What curve does this represent? x = cos(t) y = sin(t)

Cubic Curves We can use a cubic func2on to represent a smooth curve in 3D Q x (t) = a x t 3 + b x t 2 + c x t + d x 0 t 1 Vector form: Q y (t) = a y t 3 + b y t 2 + c y t + d y Q z (t) = a z t 3 + b z t 2 + c z t + d z a = a x a y a z % Q(t) = at 3 + bt 2 + ct + d

Smooth Curves Controlling the shape of the curve Q x 2 3 ( t) = 1 t + t t Q x 2 3 ( t) = 1 t + 3t t

Constraints on the Cubics How many constraints do we need to determine a cubic curve? 4 control points Q(t) = at 3 + bt 2 + ct + d Q(t 1 ) Q(t 2 ) Q(t 3 ) Q(t 1 ) Q(t 2 ) Q(t 3 ) Q(t 4 ) = % 3 t 1 3 t 2 3 t 3 3 t 4 2 t 1 2 t 2 2 t 3 2 t 4 t 1 1 t 2 1 t 3 1 t 4 1 % a b c d % a b c d = % 3 t 1 3 t 2 3 t 3 3 t 4 2 t 1 2 t 2 2 t 3 2 t 4 t 1 1 t 2 1 t 3 1 t 4 1 % 1 Q(t 4 ) Q(t 1 ) Q(t 2 ) Q(t 3 ) Q(t 4 ) %

Natural Cubic Curve Q(t) = at 3 + bt 2 + ct + d Q(t 1 ) Q(t 2 ) Q(t 3 ) Q(t 4 ) Q(t) = t 3 t 2 t 1 % 3 t 1 3 t 2 3 t 3 3 t 4 2 t 1 2 t 2 2 t 3 2 t 4 t 1 1 t 2 1 t 3 1 t 4 1 % 1 Q(t 1 ) Q(t 2 ) Q(t 3 ) Q(t 4 ) % Control Points Q = (Q x, Q y, Q z )

Natural Cubic Spline A spline is a curve that is piecewise- defined and is smooth at the places where the pieces connect p 0 p 4 Disadvantage: p 1 p 2 p 3 p 6 No local control Solu2on: p 5 Hermite spline

Hermite Curves

Hermite Curves A Hermite curve is a cubic curve determined by endpoints p 0 and p 1 tangent vectors (veloci2es) v 0 and v 1 at endpoints v 0 v 1 p 1 p 0 Demo hkp://processingjs.nihongoresources.com/bezierinfo/

Examples of Hermite Curves

Review Tangents (Deriva8ves) Finding the deriva2ve of a curve is easy: Q = at 3 + bt 2 + ct + d dq dt = 3at 2 + 2bt + c Q = t 3 t 2 t 1 % a b c d % dq dt = 3t 2 2t 1 0 % a b c d % v 0 v 1 p 1 p 0

Hermite Curves v 0 p 0 v 1 p 1 Q(t) = at 3 + bt 2 + ct + d Q'(t) = 3at 2 + 2bt + c The curve value is Q(0)=p 1 at t=0 and Q(1)=p 1 at t=1 The deriva2ve of the curve is v 0 at t=0 and v 1 at t=1

Hermite Curves v 0 p 0 v 1 p 1 Q(t) = at 3 + bt 2 + ct + d Q'(t) = 3at 2 + 2bt + c Q 0 ( ) Q 1 ( ) Q' 0 ( ) Q' 1 ( ) = p 0 = p 1 = v 0 = v 1 = a 0 3 + b 0 2 + c 0 + d = a 1 3 + b 1 2 + c 1+ d = 3a 0 2 + 2b 0 + c = 3a 1 2 + 2b 1+ c = d = a + b + c + d = c = 3a + 2b + c

Hermite Curves v 1 p 1 p 0 v 0 c b a v c v d c b a p d p + + = = + + + = = 2 3 1 0 1 0 p 0 p 1 v 0 v 1 % = 0 0 0 1 1 1 1 1 0 0 1 0 3 2 1 0 % a b c d %

Matrix Form of Hermite Curve a b c d % = 0 0 0 1 1 1 1 1 0 0 1 0 3 2 1 0 % 1 p 0 p 1 v 0 v 1 % v 1 p 1 p 0 v 0 a b c d % = 2 2 1 1 3 3 2 1 0 0 1 0 1 0 0 0 % p 0 p 1 v 0 v 1 %

Hermite Interpola8on v 0 Q = t 3 t 2 t 1 p 0 v 1 p 1 % 2 2 1 1 3 3 2 1 0 0 1 0 1 0 0 0 Hermite Basis Matrix % p 0 p 1 v 0 v 1 % p 0 x p 0 y p 0z p 1x p 1y p 1z v 0 x v 0 y v 0z v 1x v 1y v 1z %

Hands- On Ac8vity 5 Extend your Vizard script to trace a curve over the piazza using Hermite keyframe interpola2on. Each keyframe needs 7 parameters: 2me, posi2on (x, y, z) and velocity (x, y, z). Example: keyframes = [[0,-2,0,5,0,10,0],[1,2,0,5,0,-10,0]] What shape is this curve? Define a func2on HermiteInterpolation(time)that implements Hermite interpola2on Q = t 3 t 2 t 1 Define a func2on drawcurve that uses Hermite interpola2on to set the posi2on of an object of your choice along the curve Schedule the execu2on of drawcurve using a 2mer Show the graphics output to your instructor when finished % 2 2 1 1 3 3 2 1 0 0 1 0 1 0 0 0 % p 0 p 1 v 0 v 1 %

Hands- On Ac8vity 5 Output Example

Splines: Chaining Curve Segments Spline = piecewise polynomial curve Spline that is not C1- con2nuous Spline that is C1- con2nuous hkp://wiki.blender.org/

Problems with Splines? Must explicitly define deriva2ves at each point How can we solve this? Catmull- Rom Splines

Catmull- Rom spline Tangent at P i is half the vector connec2ng P i- 1 to P i+1 p i p' i = p i+1 p i 1 2

Demo hkps://www.youtube.com/watch?v=0bdjhxloy8 Compared with Hermite/Bezier: Fewer control points needed, but less freedom

Catmull Rom Spline Hermite curve Q = t 3 t 2 t 1 % 2 2 1 1 3 3 2 1 0 0 1 0 1 0 0 0 % p 0 p 1 v 0 v 1 % For two control points p i and p i+1 Q = t 3 t 2 t 1 % 2 2 1 1 3 3 2 1 0 0 1 0 1 0 0 0 % p i p i+1 p i+1 p i 1 2 p i+2 p i 2 %

Catmull- Rom Spline Q = t 3 t 2 t 1 % 2 2 1 1 3 3 2 1 0 0 1 0 1 0 0 0 % p i p i+1 p i+1 p i 1 2 p i+2 p i 2 % Q = t 3 t 2 t 1 % 2 2 1 1 3 3 2 1 0 0 1 0 1 0 0 0 % 0 1 0 0 0 0 1 0 1 1 0 2 2 0 0 1 1 0 2 2 % p i 1 p i p i+1 p i+2 %

Catmull- Rom Spline End result Q = 1 2 t 3 t 2 t 1 % 1 3 3 1 2 5 4 1 1 0 1 0 0 2 0 0 % p i 1 p i p i+1 p i+2 % Curve piece between control points p i and p i+1 First and last curve segments are special cases

Hands- On Ac8vity 6 Extend your Vizard script to trace a Catmull- Rom spline over the piazza

Contact pose - Both legs are at their extreme point. Opposite arm is forward. Recoil - Weight falls on the recoil pose. Front foot fully touches. Body at lowest posi2on, arms at extreme. Passing - Back leg passes the contact leg. Arms at sides. High point - Body at highest pose. Back leg is pushing body forward. Back toe peels off the ground. Contact DOWN to Recoil UP to high- point AND Contact - -..

OpenGL Assignment Animate the robot to walk: Set the key walking poses interac2vely Save the walking poses Interpolate between them OR animate your hierarchical object The one from Assignment 6 is a good choice Set a small number of key frames Interpolate between them Assignment details on the class website

Use the your own character or the one provided by your instructor. 1. Use the Auto Key technique. 2. Set your total anima2on 2me to 25 frames (8 sec) 3. Hint: The 2me between strides is 1 second for full cycle (30 frames), ½ second per leg (15 frames) 4. Note the body translates at a constant rate in space

Demos Addi2onal Online Material hkp://algorithmist.wordpress.com/online- demos/ OpenGL curves hkp://www.glprogramming.com/red/chapter12.html

Bezier Curves

Bezier Curves Specifying tangent vectors may some2mes be inconvenient Bezier curves indirectly specify tangent vectors at p 0 and p 3 by specifying two intermediate points, p 1 and p 2 p 1 p 0 Q(t) p 2 How to define Bezier Curves? p 3

Bezier Curve Formula8on There are lots of ways to formulate Bezier curves: De Castlejau (recursive linear interpola2ons) Bernstein polynomials Cubic equa2ons Matrix form In prac2ce, matrix form is the most useful in computer anima2on, but the others are important for understanding

Bezier Curves Find the curve Q(t) as a func2on of parameter t endpoints p 0 and p 3 tangents aligned with p 0 p 1 and p 3 p 2 v0=α(p1- p0) v1=α(p3- p2) p 1 p 0 Q(t) p 2 p 3

De Casteljau Algorithm Recursive series of linear interpola2ons Given p 0,p 1,p 2,p 3, find Q(t), 0 t 1 We use t=0.25 p 1 p 0 p 2 p 3

De Casteljau Algorithm Lirp t, a, b ( ) = 1 t ( )a + tb p 1 q 0 = Lirp( t, p 0, p ) 1 q 1 = Lirp( t, p 1, p ) 2 q 2 = Lirp( t, p 2, p ) 3 p 0 q 0 q 1 q 2 p 2 p 3

De Casteljau Algorithm p 1 r 0 = Lirp( t, q 0, q ) 1 p 0 q 0 r 0 q 1 r 1 r 1 = Lirp( t, q 1, q ) 2 p 2 q 2 p 3

De Casteljau Algorithm p 1 p 0 q 0 r 0 Q q 1 r 1 Q = Lirp( t, r 0, r ) 1 p 2 q 2 p 3

De Casteljau Algorithm Recursive Linear Interpola2on: p 1 p 0 Q p 2 Q = Lirp( t, r 0, r 1 ) ( ) ( ) r 0 = Lirp t, q 0, q 1 r 1 = Lirp t, q 1, q 2 ( ) ( ) ( ) q 0 = Lirp t, p 0, p 1 q 1 = Lirp t, p 1, p 2 q 2 = Lirp t, p 2, p 3 p p p p 0 1 2 3 p 3

Demo hkp://en.wikipedia.org/wiki/b%c3%a9zier_curve

Expanding the Lirps q 0 = Lirp( t, p 0, p ) 1 = ( 1 t)p 0 + tp 1 q 1 = Lirp( t, p 1, p ) 2 = ( 1 t)p 1 + tp 2 q 2 = Lirp( t, p 2, p ) 3 = ( 1 t)p 2 + tp 3 r 0 = Lirp( t, q 0, q ) 1 = ( 1 t) 1 t r 1 = Lirp( t, q 1, q ) 2 = ( 1 t) 1 t Q = Lirp( t, r 0, r ) 1 = ( 1 t) ( 1 t) 1 t + t 1 t (( )p 0 + tp ) 1 + t ( 1 t)p 1 + tp 2 ( ) (( )p 1 + tp ) 2 + t ( 1 t)p 2 + tp 3 ( ) ( (( )p 0 + tp ) 1 + t (( 1 t)p 1 + tp )) 2 (( )(( 1 t)p 1 + tp ) 2 + t (( 1 t)p 2 + tp )) 3

Bernstein Form of a Bezier Curve Q = 1 t ( (( )p 0 + tp ) 1 + t (( 1 t)p 1 + tp )) 2 ( ) ( 1 t) 1 t (( )(( 1 t)p 1 + tp ) 2 + t (( 1 t)p 2 + tp )) 3 + t 1 t Q = 1 t ( ) 3 p 0 + 3 1 t ( ) 2 tp 1 + 3 1 t ( )t 2 p 2 + t 3 p 3 B 3 0 (t) = (1 t)3 B 3 1 (t) = 3t(1 t)2 B 3 2(t) = 3t 2 (1 t) Cubic B 3 3 (t) = t3 Q = B 0 3 ( t)p 0 + B 3 ( 1 t)p 1 + B 3 ( 2 t)p 2 + B 3 ( 3 t)p 3 Bernstein Polynomials Expansion of (1- t+t) 3

Bezier Cubic Equa8on Form Q = 1 t ( ) 3 p 0 + 3 1 t ( ) 2 tp 1 + 3 1 t ( )t 2 p 2 + t 3 p 3 Regroup the equa2on by terms of exponents of t, to get it in the standard cubic form: Q = ( t 3 + 3t 2 3t +1)p 0 + ( 3t 3 6t 2 + 3t)p 1 + ( 3t 3 + 3t 2 )p 2 + ( t 3 )p 3 Q = ( p 0 + 3p 1 3p 2 + p 3 )t 3 + ( 3p 0 6p 1 + 3p 2 )t 2 + ( 3p 0 + 3p 1 )t + ( p 0 )1

Bezier Cubic Equa8on Form Q = ( p 0 + 3p 1 3p 2 + p 3 )t 3 + ( 3p 0 6p 1 + 3p 2 )t 2 + ( 3p 0 + 3p 1 )t + ( p 0 )1 Q = at 3 + bt 2 + ct + d a = ( p 0 + 3p 1 3p 2 + p ) 3 b = ( 3p 0 6p 1 + 3p ) 2 c = ( 3p 0 + 3p ) 1 d = ( p ) 0 This form is very good for fast evalua2on, as all constant terms (a,b,c,d) can be precomputed.

Bezier Matrix Form From cubic form a = ( p 0 + 3p 1 3p 2 + p ) 3 Q = at 3 + bt 2 + ct + d b = ( 3p 0 6p 1 + 3p ) 2 c = ( 3p 0 + 3p ) 1 d = ( p ) 0 to matrix form Q = t 3 t 2 t 1 % a b c d % a b c d = % 1 3 3 1 3 6 3 0 3 3 0 0 1 0 0 0 % p 0 p 1 p 2 p 3 %

Bezier Matrix Form Q = t 3 t 2 t 1 % 1 3 3 1 3 6 3 0 3 3 0 0 1 0 0 0 % p 0 p 1 p 2 p 3 % Q = t 3 t 2 t 1 % 1 3 3 1 3 6 3 0 3 3 0 0 1 0 0 0 % p 0 x p 0 y p 0z p 1x p 1y p 1z p 2 x p 2 y p 2z p 3x p 3y p 3z %

Hermite vs. Bezier Curves Hermite curves: Q = t 3 t 2 t 1 % 2 2 1 1 3 3 2 1 0 0 1 0 1 0 0 0 % p 0 p 1 v 0 v 1 % Bezier curves: Q = t 3 t 2 t 1 % 1 3 3 1 3 6 3 0 3 3 0 0 1 0 0 0 % p 0 p 1 p 2 p 3 %

Hermite vs. Bezier Curves It turns out that Bezier and Hermite curves can be related as follows: p 0 p 1 v 0 v 1 = % v 0 = 3(p 1 p 0 ) v 1 = 3(p 3 p 2 ) p 0 = p 0 p 1 = p 3 1 0 0 0 0 0 0 1 3 3 1 0 0 0 3 3 (lei as an exercise for those who want to figure out why) % p 0 p 1 p 2 p 3 %

Bezier Splines Bezier Spline