Animation
A Series of Still Images We Call “Animation”
Animation needs no explanation. We see it in movies and games. We grew up with it in cartoons. Some of the most popular, longest-running television shows such as 'The Simpsons' are animated. Every year, there are more animated movies, and video games with cinematic transitions between game levels. But here we are going to describe animation from a technical aspect and the two types of animation s: Key-Frame Animations, and Procedural Animations.
Key-Frame animation consists of three parts: a timer, key frames, and the animated object. Just like an actor on-stage is directed to move from one location to another, computer animation is the same: start here; end over there, and do that in a specified amount of time.
Procedural animation differs from Key-Frame animation in that movement is determined by a computer program. A classic example is a bird-flocking algorithm. In flight, no two birds get too close or too far away from another, but there is a small randomness in each bird's flight. If an animation of birds was in perfect formation, a precise distance from each other, it would look fake. So the small randomness adds to the realism.
Procedural animation was used for the dinosaurs in Jurassic Park where the herd followed the lead dinosaur. The dinosaurs didn't wander too far off nor bang into one another. Artificial Intelligence (AI) is a variation on procedural animation where the characters vary their
movement on the game situation. Heuristics adds to AI where the objects learn as they go. But a good starting point to animation is Key-Frame Animation.
Key-Frame Animation
Most key-frame animation is a change in an object's translation (position) or rotation. However, other animation changes include the object's scale, color, vertices (also known as morphing), or its texture map to create visual effects such as a waterfall.
The timer simply outputs a value progressing between 0 and 1 that is a percent of the overall length of time known as cycle-time. A timer of 10 seconds outputs .6 at the 6 second mark.
Timers include other properties such as a true/false looping boolean, and can have a start-time which begins at the timer at a specific time. An enabled boolean controls if the time is active.
The key-frame interpolator takes a single value between 0 and 1 from the timer and outputs the transformation value. For example, a Starting point of (-4, -2, 0 ) and Finishing point of
( 2, 6, -4 ) at time = .75, using the equation S + (F – S)t gives us:
(-4, -2, 0 ) + (( 2, 6, -4 ) - (-4, -2, 0 ))*.75 = (-4, -2, 0 ) + ( 6, 8, -4)*.75 = ( .5, 4, -3 ).
Some interpolators ramp-up and ramp-down to accelerate or decelerate similar to a car's increasing velocity from a stop light or decreasing velocity braking for a stop sign.
The final part of the key-frame animation is the object's transformation, vertices (in the case of morphing), or appearance (changing the object's material color or texture map transformation).
Often animations have in-between key-frames in ascending order. An example might be key- frames at 0, .3, and 1, and a matching number of key-values at ( 1, 2, 3 ), ( 2, -3, 5 ) and ( 3, 1, 8 ).
If there are three key-frames, there must be three sets of key-values. So, when the timer gets to .3 (30% of the way through the timer), the animated object will be at ( 2, -3, 5 ). Locations between 0 and .3, and between .3 and 1 will be interpolated. For example, at time = .8, the equation for the animated transformation is:
S + ( F – S ) * t, where t = (tcurrent – tlow) / (thigh – tlow ) and tcurrent is the current time, which here is .8
tlow is the lower key of .3, and thigh is the higher key of 1.
t = ( .8 - .3 ) / ( 1 - .3 ) = .714
S + ( F – S ) * t = ( 2, -3, 5 ) + ( ( 3, 1, 8 ) - ( 2, -3, 5 ) ) * .714 = ( 2, -3, 5 ) + ( 1, 4, 3 ) * .714 = ( 2, -3, 5 ) + ( .714, 2.857, 2.143 ) = ( 2.714, .143, 7.7143 ) Animations of Rotations
Rotations are simply another animal. The reason is that there are three rotations: around the x- axis, y-axis and z-axis. Suppose we used the three rotation matrices for animations. Then every time there is a millisecond tick on the CPU clock for each new frame, we have to recalculate the three rotation matrices, then multiply these three 4x4 matrices. Additionally, the combined rotations might take the long route greater than 180 degrees, rather than the reverse order to be less than 180. For example, instead of flying from California to Australia over the Pacific Ocean, the multiplication of matrices could go the other direction – flying over the Atlantic Ocean, southeast over Africa, over the Indian Ocean and then to Australia.
Most 3D modeling programs specify animations in Axis-Angle format which is four values specifying the axis and the angle ( x, y, z, angle). The x, y, z values are a unit length such that x2 + y2 + z2 = 1. One way to envision Axis-Angle format is a unit sphere where the rotated object is moved from the center of the sphere to the x, y, z values on the edge of the sphere. This forms a new x-, y-, z-coordinate system tangent to this new x, y, z point. Then the object is rotated by the Axis-Angle's angle value.
Axis-Angle however has three issues for rotations: 1) it does not easily convert to a rotation matrix; 2) it's not a unique value on a unit sphere as ( x, y, z, angle ) = ( -x, -y, -z, -angle); and 3) it doesn't interpolate smoothly between two points. There is another problem known as Gimbal Lock where a rotation of 90 degrees around the y-axis results in rotations around the x and z axis now performing the same animation. This is experienced in aviation and was a problem
Quaternions
Quaternions are 4th dimensional values. What they do really well is animate smoothly around three axis, easily convert into a matrix for the 3d graphics pipeline and have a unique location on a unit sphere, thus solving our issues regarding axis-angle. But best of all, Quaternions enable a linear rotation in three dimensions where we only need to a single Starting quaternion, a Final quaternion, and the 't' time value to calculate the object's animation.
The conversion from Axis-Angle ( x, y, z, θ ) to a quaternion is:
[ cos θ/2, (sin θ/2) * v ] where 'v' = 'x, y, and z'.
The expanded quaternion is:
[ cos θ/2, (sin θ/2) * x, (sin θ/2) * y, (sin θ/2) * z ]
The quaternion is often written [w, x, y, z] where w = cos θ/2.
Quaternions are also unit values with: w2 + x2 + y2 + z2 = 1.
Let's take an example of this conversion using an Axis-angle of ( .8, -.5, .33, 1.2 ). The angle = 1.2 radians. The conversion to a quaternion is:
q = [ cos(1.2/2), (sin(1.2/2)) * v ] or:
q = [ cos(1.2/2), (sin(1.2/2))*.8, (sin(1.2/2))*(-.5), (sin(1.2/2))*.33 ] = [ cos.6, (sin.6)*.8, (sin.6)*(-.5), (sin.6)*.33 ]
= [ .825, .565*.8, .565*(-.5), .565*.33 ] = [ .825, .452, -.283, .187 ]
Note that .8252 + .4522 + (-.283)2 + .1872 = 1
Then the conversion from a quaternion [ w, x, y, z ] to a matrix is shown below:
[
1 - 2y2xy + 2wz2xz - 2wy02 - 2z2 1 - 2x2yz + 2wx2xy - 2wz02 - 2z2 1 - 2x2xz + 2wy2yz - 2wx02 - 2y2 0001]
Animations with Quaternions
A goal with any animation in real-time graphics is fast calculations. With translations, the math is relatively easy because the object is moving in a linear fashion as it goes from 20% to 30% to 40%, etc. along a time-line. But how do we calculate an animation around three axis and make it a simple linearly interpolation transformation from Start to Finish?
Recall our linear equation: S + (F – S)t. Here, t is the fraction of time from 0 to 1. We can use the same equation with quaternions where S is our starting quaternion, F is the finishing quaternion and t is the output from the timer advancing between 0 and 1.
First let's look at an example of an object with an Axis-Angle rotation of (1, 0, 0, 1.57), which is a 90 degree rotation (1.57 radians) around the x-axis. The ending rotation is (0, 0, 1, 1.57), or a 90 degree rotation around the z-axis.
If we calculated 40% of the way through the animation using Axis-Angle values:
S + (F – S)t = (1, 0, 0, 1.57) + ((0, 0, 1, 1.57) - (1, 0, 0, 1.57)) * .4 =
(1, 0, 0, 1.57) + (-1, 0, 1, 0) * .4 = (1, 0, 0, 1.57) + (-.4, 0, .4, 0) = ( .6, 0, .4, 1.57 ) Now we need to normalized this Axis-Angle value to get ( .83, 0, .55, 1.57).
Now, let's convert these two Axis-Angle values to quaternions:
Axis-Angle (1, 0, 0, 1.57) → q0 = [.707, .707, 0, 0 ] and Axis-Angle [ 0, 0, 1, 1.57 ] → q1 = [ .707, 0, 0, .707 ] Using our formula S + (F – S)t: q0 + ( q1 – q0 ) * .4 =
[.707, .707, 0, 0 ] + ( [ .707, 0, 0, .707 ] - [.707, .707, 0, 0 ] ) .4 = [.707, .707, 0, 0 ] + [ 0, -.707, 0, .707 ] .4 =
[.707, .707, 0, 0 ] + [ 0, -.2828, 0, .2828 ] = [ .707, .4242, 0, .2828 ]
Recall that w2 + x2 + y2 + z2 must equal 1 so we need to normalize this value by dividing all four values by sqrt( .7072 + .42422 + 02 + .28282 ) = .872
[ .707, .4242, 0, .2828 ] -> [ .707/.872, .4242/.872, 0/.872, .2828/.872 ] = [ .811, .487, 0, .324 ].
Before we go further, let us convert this quaternion back to Axis-Angle format using this formula: q[ w, x, y, z ] → ( x/||xyz||, y/||xyz||, z/||xyz||, 2*arccos(w) )
where ||xyz|| = sqrt( x2 + y2 + z2 ).
Plugging in the numbers above: ||xyz|| = sqrt( .4872 + 02 + .3242 ) = .585 q[ w, x, y, z ] → ( x/||xyz||, y/||xyz||, z/||xyz||, 2*arccos(w) )
[ .811, .487, 0, .324 ] → ( .487/.585, 0/.585, .324/.585, 2*arccos(.811) ) = ( .832, 0, .554, 1.25 )
So, quaternions achieve the correct rotations over interpolation with Axis-Angle. But there is still one problem with the previous equation: we had to normalize the quaternion and that is a bit more math than we would want so let's look at the next solution.
SLERP
Spherical Linear Interpolation, or SLERP, is a variation of the Linear Interpolation (LERP) we just calculated but handles the normalizing of the quaternion. Here is the equation:
SLERP(t; q0, q1) = ( q0 * sin(θ*(1 – t)) + q1 * sin(θ*t) ) / sin θ
θ is the angle between the Start and Finish on a 4th dimensional unit sphere and is the arc-cosine of the dot product of the two quaternions: θ = arccos( w0*w1 + x0*x1 + y0*y1 + z0*z1 )
Let's use the example from before: q0 = [.707, .707, 0, 0 ] and q1 = [ .707, 0, 0, .707 ] θ = arccos( .707*.707 + .707*0 + 0*0 + 0*.707 ) = arccos(.5) = 1.047
q0, q1 and θ are now known, so the only variable change is 't'. Using t = .4, we get:
SLERP(.4; q0, q1) = ( q0 * sin(1.047*(1 – .4)) + q1 * sin(1.047*.4) ) / sin 1.047 ( q0 * sin(1.047*.6) + q1 * sin(1.047*.4) ) / sin 1.047
( q0 * .588 + q1 * .407) / .866 = q0 * .679 + q1 * .470
[.707, .707, 0, 0 ] * .679 + [ .707, 0, 0, .707 ] * .470 =
[ .480, .480, 0, 0 ] + [.332, 0, 0, .332 ] = [ .812, .480, 0, .332 ] About what we had before – just some round-off errors.
While this might look like more extensive, keep in mind that a good portion of this will be calculated just one time, and that we have now achieved rotations in three dimensions using a linear formula, quite an achievement!
SLERP Optimization
When calculating θ, if the value is close to 1, then use the Linear Interpolation instead of SLERP.
Not if θ < 0, then the animated rotation is greater than 180 degrees and thus would be shorter rotation going the other direction. To achieve this, just invert the q1 values and that will give a shorter rotation.
Quaternions are a key concept in animation. Some graphics and game engines only work with quaternions so this is an important concept to know.
