2/15/20111Simple Keyframe Animationfor Scientific and Engineering ConceptualizationMike [email protected] State Universitymjb – February 15, 2011Oregon State UniversityComputer GraphicsThe Problem• Sometimes “visualization” means explaining an idea or a concept or a process to someone• Often, this idea is not data-driven or equation-driven, but rather is general concept-driven• How can we create such an animation without doing a lot of work?mjb – February 15, 2011Oregon State UniversityComputer Graphics2/15/20112Approaches to Animation1. Use the laws of physics2Uf ti l( ldi ) i ti2.Use functional (goal-driven) animation3. Use keyframingmjb – February 15, 2011Oregon State UniversityComputer GraphicsKeyframingKeyframing involves creating certain key positions for the objects in the scene, and then later developing the animation frames in between the key frames.In traditional animation, the key frames were developed by the senior animators, and the in-between frames were developed by the junior animators.PixarIn our case, you are going to be the senior animator, and the computer will do the in-betweening.mjb – February 15, 2011Oregon State UniversityComputer GraphicsBut, first we need to look into the mathematics of smooth curves . . .2/15/20113Bézier Curves: the DerivationP101 0 1(1 )PtP tP P01 1mjb – February 15, 2011Oregon State UniversityComputer GraphicsBézier Curves: the DerivationP101 0 112 1 2(1 )(1 )PtP tPPtP tP  P0P21 1mjb – February 15, 2011Oregon State UniversityComputer Graphics2/15/20114Bézier Curves: the DerivationP101 0 112 1 222012 01 12 0 1 2(1 )(1 )(1) (1) 2(1)PtPtPPtPtPPtP tP t P t tP tP       P0P21 11 2 1mjb – February 15, 2011Oregon State UniversityComputer GraphicsBézier Curves: the DerivationP1P301 0 112 1 222012 01 12 0 1 222(1 )(1 )(1) (1) 2(1)(1) (1) 2(1)PtPtPPtPtPPtP tP t P t tP tPP tP tP t P t tP tP       P0P21 11 2 1mjb – February 15, 2011Oregon State UniversityComputer Graphics123 12 23 1 2 3(1) (1) 2(1)P tP tP t P t tP tP  2/15/20115Bézier Curves: the DerivationP1P301 0 112 1 222012 01 12 0 1 222(1 )(1 )(1) (1) 2(1)(1) (1) 2(1)PtPtPPtPtPPtP tP t P t tP tPP tP tP t P t tP tP       P0P21 11 2 11 3 3 1mjb – February 15, 2011Oregon State UniversityComputer Graphics123 12 23 1 2 3(1) (1) 2(1)P tP tP t P t tP tP  32230123 012 123 0 1 2 3(1) (1) 3(1) 3(1)PtP tP t P t t P t tP tP 32230123( ) (1 ) 3 (1 ) 3 (1 )Pt t P t t P t tP tPBézier Curves: Drawing and Sculptingt = 0., .02, .04, .06, …, .98, 1.0mjb – February 15, 2011Oregon State UniversityComputer Graphics2/15/20116The General Form of Cubic Curves23()PtABtCtDt  In this form, you need to determine 4 quantities (A, B, C, D) in order to use the equation That means you have to provide 4 pieces of information In32230123( ) (1 ) 3 (1 ) 3 (1 )Pt t P t t P t tP tP     0APthe equation. That means you have to provide 4 pieces of information. In the Bézier curve, this happens by specifying the 4 points.Rearranging gives:mjb – February 15, 2011Oregon State UniversityComputer Graphics00101201233336333APBPPCPPPDPPPP   Coons (also called Hermite) Cubic CurvesAnother approach to specifying the 4 pieces of information would be to give a start point, an end point, a start slope, and an end slope.00dPPdt1dPP●●23If we do this, then the equation of the curve is:0P1P0dt11dtmjb – February 15, 2011Oregon State UniversityComputer Graphics000101010133222APBPCPPPPDPPPP 23PABtCt Dt  where:●●●●●2/15/20117Now, Let’s Apply this to the Y Translation of the Keyframe Animationmjb – February 15, 2011Oregon State UniversityComputer GraphicsYThe Y vs. Frame Curve Looks Like ThisFrame #3000 525450 800600200mjb – February 15, 2011Oregon State UniversityComputer Graphics2/15/20118Computing the End Slopes for the Y TranslationdY dY dFY11011YYdYdF F F●00001Ydt dF dt0AYBY20120YYdYdF F F1010011. 0.FFdFFFdt11101dY dY dFYdt dF dt●●mjb – February 15, 2011Oregon State UniversityComputer Graphics00101010133222BYCYYYYDY YYY 23YABtCt Dt  ●●●●Y650650650Getting the Two End SlopesFrame #3000 525450200400mjb – February 15, 2011Oregon State UniversityComputer Graphics1iiiidY dY dFdt dF dt111iiiidY dY dFdt dF dt2/15/20119Y650650650Getting the Two End Slopesii-1 i+1 i+2Frame #3000 52545020011YYdY400mjb – February 15, 2011Oregon State UniversityComputer Graphics1111iiiiiYYdYdF F F212iiiiiYYdYdF F F1iidFdtY650650650Getting the Two End Slopesii-1 i+1 i+2Frame #3000 525450200650 650YYdY400mjb – February 15, 2011Oregon State UniversityComputer Graphics1111650 650450 200iiiiiYYdYdF F F212650 400525 300iiiiiYYdYdF F F111450 300 1501. 0.iiiiiiFFdFFFdt2/15/201110Y650650650Getting the Two End SlopesFrame #3000 525450200400mjb – February 15, 2011Oregon State UniversityComputer Graphics10150 0250iiiidY dY dFdt dF dt111250150 166.7225iiiidY dY dFdt dF dtDo This Same Thing for the X, Y, and Z Translations and the X, Y, and Z Rotationsmjb – February 15, 2011Oregon State UniversityComputer Graphics2/15/201111if( AnimationIsOn ){// # msec into the cycle ( 0 - MSEC-1 ):int msec = glutGet( GLUT_ELAPSED_TIME ) % MSEC;// turn that into the current frame number:Using the System Clock in Animate( ) for Timing// turn that into the current frame number:NowFrame = (int) ( (float)MAXFRAME * (float)msec / (float)MSEC );// look through the keyframes and figure out which two keyframes this is between:for( int i = 0; i < maxKeyframes -1; i++ ){if( ????? ){KeyFrameBefore = ?????;KF Af?????mjb – February 15, 2011Oregon State UniversityComputer GraphicsKeyFrameAfter= ?????;break;}}// get the t (0.-1.) for that frame in that interval:NowT = ?????// determine the A, B, C, and D