Liuye Zhao@ZJU:~$Hi there!

Lecture 1: Mathematical foundations, Keyframe technology and Velocity Control

Computer Animation 第 1 讲

I.Transsformation and rotation representation

In images, we can use equations to define the movement of points. But objects in animation are not just points; they have size, shape, and orientation. We need a set of mathematical tools to describe changes in these properties, and that’s where geometric transformations come in.

1.1.Basic Transformations and Homogeneous Coordinates

The most basic three-dimensional transformations include:

  • Translate:
  • Scale:
  • Rotate:

Here, translation is addition, while scaling and rotation are multiplication, resulting in inconsistent forms. To unify them within the framework of matrix multiplication, we introduce homogeneous coordinates. We expand a three-dimensional point into a four-dimensional vector .

In this way, all transformations can be represented by a matrix:

  • Translation Matrix:
  • Scaling Matrix:
  • Rotating Matrix (Around the Z-axis):

The greatest advantage of using homogeneous coordinates in concatenation of transformations is that a series of complex transformations (e.g., scaling, rotation, and translation) can be precombined into a single composite transormation matrix:. Then this is used to transform all the vertices of the model, greatly improving efficiency.

Note: Matrix multiplication is not commutative; the order of transformations is crucial!

1.2.Challenges of Rotation Representation

Interpolation for translation and scaling is straightforward; it simply involves linear interpolation of the translation vector and the scaling factor. However, interpolation for rotation is a very tricky problem.

1.Rotation Matrix.

The rotation matrix is a orthogonal matrix (the row and column vectors are all unit vectors and mutually orthogonal), with a determinant of 1.

  • Advantage: It is mathematically rigorous and has no singularity.
  • Disadvantage: Redundancy: Representing a rotation with only 3 degree of freedom using 9 numbers; Interpolation difficulties: Directly performing linear interpolation on the 9 elements of the two rotation matrices results in an intermediate matrix that is no longer orthogonal, which introduces unwanted scaling and skewing distortions.

Example: Rotate from to around the Z-axis:

Linear interpolation to half (weight 0.5):

This is a strange matrix that flattens objects onto the Z-axis, which is not the rotation (identity matrix) we want!

2.Euler Angles / Fixed Angles.

This is the most intuitive representation. It decomposes any three-dimensional rotation into three consecutive rotations around three coordinate axes (e.g., X, Y, Z).

  • Fixed Angle: Each rotation revolves around an axis of the world coordinate system.
  • Euler angles: The first rotation is around the world coordinate axis, and subsequent rotations are around the axes of the object’s own (local) coordinate system. An interesting property is that a rotation with Euler angles in the order of (X, Y, Z) is equivalent to a rotation with fixed angles in the order of (Z, Y, X). As showm below: alt
  • Advantages: Compact: Uses only 3 numbers ; Intuitive: Easy for humans to understand and edit.
  • Disadvantages: Non-unique/non-uniform interpolation paths: Linear interpolation of three angles often results in rotational paths that are not the shortest and have non-uniform angular velocities; Gimbal Lock: This is a fatal flaw of Euler angles. When the middle rotation axis (e.g., the Y-axis) rotates , the first axis (X-axis) and the third axis (Z-axis) coincide. At this point, the system loses a rotational degree of freedom. Regardless of whether we change the angle of the X-axis or Z-axis, only rotation around the same world axis will occur. This leads to sudden, unnatural, rapid flips in animation.As showm below: Gimbal Lock

3.Axis-Angle.

According to Euler’s rotation theorem, any three-dimensional rotation can be represented as rotating about an axis in any direction by an angle .

  • Advantages: Intuitive interpolation: Rotation axes and rotation angles can be interpolated between two attitudes; no gimbal lock-up.
  • Disadvantages: Difficult to chain together: Two axis-angle representations of rotation, the axes and angles of the composite rotation do not have simple calculation formulas; Not unique representation: and represent the same rotation.

1.3.Ultimate Solution: Quaternions

A quaternion is a mathematical concept created by the Irish mathematician William Nouwen Hamilton in 1843. It is usually denoted by .

From a definite perspective, a quaternion is a non-commutative extension of complex numbers. If the set of quaternions is considered as a multidimensional real number space, then a quaternion represents a four-dimensional space, while complex numbers represent a two-dimensional space.

As a coordinate representation for describing real space, quaternions were created based on complex numbers and are expressed in the form to indicate the location of a point in space. , , and participate in operations as special imaginary units, and follow these operational rules: .

The geometric meaning of , , and can be understood as a rotation. The rotation represents a rotation from the positive X-axis to the positive Y-axis in the plane where the X and Y axes intersect; the rotation represents a rotation from the positive Z-axis to the positive X-axis in the plane where the Z and X axes intersect; the rotation represents a rotation from the positive Y-axis to the positive Z-axis in the plane where the Y and Z axes intersect; and , , and represent the opposite rotations of , , and , respectively.

1.3.1.Definition

Quaternions are all composed of real numbers plus three elements , and they have the following relationship:

Each quaternion is a linear combination of , and can generally be represented as .

To add two quaternions, simply add their similar coefficients, just like with complex numbers. The multiplication rule follows the multiplication table below:

The multiplication of the identity elements of quaternions forms an 8th-order quaternion group, .

1.3.2.Property

Unlike real or complex numbers, quaternions do not obey the anticommutative law of multiplication and are therefore noncommutative, for example:

Quaternions are an example of division rings. Except for the lack of a commutative property for multiplication, division rings are analogous to fields. Specifically, the associative property of multiplication still applies, and each non-zero element has a unique inverse.

Quaternions form a four-dimensional associative algebra (actually a division algebra) over real numbers, including complex numbers, but not forming an associative algebra with complex numbers. Quaternions (as well as real and complex numbers) are simply finite-dimensional associative division algebras of real numbers.

The noncommutativity of quaternions often leads to unexpected results. For example, an n-order polynomial of a quaternion can have more than distinct roots. For instance, the equation has infinitely many solutions. If any real number satisfies , then is a solution.

The conjugate of a quaternion is defined as:

Its absolute value is a non-negative real number, defined as:

Note that is generally not equal to

The multiplicative inverse of a quaternion can be calculated using

By using the distance function , quaternions can become a metric space homeomorphic to and have continuous arithmetic operations. Furthermore, for all quaternions and , . Modulo the absolute value, quaternions can form a real Banach space.

1.3.3.Group Rotation

The conjugate action of the multiplicative group of nonzero quaternions on the part of where the real part is zero can realize a rotation. The conjugate action of a unit quaternion (a quaternion with an absolute value of 1) with a real part of is a rotation of angle , with the axis of rotation being the direction of the imaginary part. The advantages of quaternions are:

  • The expression has no singularities (compared to representations such as Euler angles)
  • It is more concise (and faster) than matrices
  • A pair of unit quaternions can represent a rotation in four-dimensional space.

The set of all unit quaternions forms a three-dimensional sphere and a group (a Lie group) under multiplication. is a double superposition of the group of real orthogonal orthogonal matrices with determinant 1, since every two unit quaternions correspond to a rotation by the above relation. The group is isomorphic to , which is the group of complex unitary matrices with determinant 1. Let be the set of quaternions of the form , where are either integers or rational numbers with odd numerators and denominators of 2. The set is a ring and a lattice. There are 24 quaternions in the ring, which are the vertices of a regular 24-cell structure with the Schleifli notation {3,4,3}.

1.3.4.Application

Rotation using quaternions: To rotate a 3D vector using a unit quaternion , first promote to a pure quaternion , then perform the following operation:

The scalar part of the result will be 0, and its vector part is the rotated vector.

Proof Summary: This multiplication is very complex after expansion, but its core idea is that the operation preserves the magnitude of the vector, and the scalar part of the final result is 0, therefore it is a pure rotation.

Composite Rotation: Rotating first with , then with , is equivalent to performing a rotation using the composite quaternion . This is much simpler than serial axis-angle!

Quaternion Interpolation: SLERP The biggest advantage of quaternions is that they provide a smooth, singularity-free interpolation method. A unit quaternion can be viewed as a point on a unit hypersphere in four-dimensional space. Two orientations correspond to two points on the hypersphere.

  • Linear Interpolation (Lerp): Directly interpolating the four components of the quaternion linearly, then normalizing. Geometrically, this is equivalent to interpolating on a chord connecting two points, resulting in uneven speed.
  • Spherical Linear Interpolation (SLERP): This is the correct interpolation method. It performs uniform interpolation on a great circle connecting two points.

Given two unit quaternions and interpolation parameter , the SLERP formula is:

where is the angle between the two quaternions in four-dimensional space.

Practical Tip: “Shortest Path” Since and represent the same rotation, the interpolation from to has two paths (the shorter arc and the longer arc). We usually want to take the shortest path. This can be determined by checking the dot product . If , it means the angle is greater than 90 degrees, and we should interpolate to instead of to ensure that the shorter arc is taken.

// C++ Quaternion Slerp pseudocode
Quaternion Quaternion::slerp(const Quaternion& q1, const Quaternion& q2, float u) {
    Quaternion q2_temp = q2;
    float dot = q1.dot(q2);

    // If the dot product is negative, use the opposite of q2 to take the shortest path
    if (dot < 0.0f) {
        q2_temp = -q2;
        dot = -dot;
    }

    // Prevent the dot product from being slightly greater than 1 due to floating-point error
    if (dot > 0.9995f) {
        // Angle is very small, directly linearly interpolate and normalize to avoid division by 0
        return normalize(lerp(q1, q2_temp, u));
    }

    float theta_0 = acos(dot);        // Angle between q1 and q2
    float theta = theta_0 * u;        // Interpolated angle
    float sin_theta = sin(theta);
    float sin_theta_0 = sin(theta_0);

    float s1 = cos(theta) - dot * sin_theta / sin_theta_0;
    float s2 = sin_theta / sin_theta_0;

    return (q1 * s1) + (q2_temp * s2);
}

Conclusion: In animation systems, the common practice is as follows: externally, expose intuitive Euler angles to animators for editing; internally, convert Euler angles into quaternions for storage, interpolation, and computation; finally, when needed for application to vertices, convert the quaternions back to rotation matrices. Quaternions are the best standard for internally representing rotations!

II.Keyframe interpolation and Velocity Control

2.1.The Philosophy of Motion Control in Animation

The core tasks of computer animation can be summarized into three levels:

  • Representation of Motion: How to describe the motion state of an object using mathematical language (functions, parameters).
  • Control and Editing of Motion: How to provide animators with convenient and intuitive tools so they can freely express their creative intentions.
  • Generation of Motion: How to accurately calculate the motion parameters of each frame in the animation sequence based on the animator’s settings.

Among these, keyframe animation is the most fundamental and important technique. Animators only need to define the state of a few “key” moments (such as position, direction, color, shape, etc.), and the computer is responsible for automatically “filling in” the intermediate processes. This “filling in” process is what we will discuss today: interpolation.

In modern animation software such as Maya or Blender, animators are not faced with dry numbers, but with an intuitive graph editor. Each curve represents the change of a parameter (such as translation in the X direction) over time. By editing the shape of these curves, animators can precisely control every detail of the movement.

2.2.The Core Problems of Keyframe Interpolation

Suppose we have a simple task: to position an object at point in frame 22 and at point in frame 67. This seems simple, but to create expressive animation, we must answer several key questions:

1.What interpolation function should we use? Simple linear motion or smooth curved motion?

2.How do we parameterize the function? How do we map “time” onto the motion path?

3.How do we control the motion rhythm? For example, we want the object to first be stationary, then accelerate, reach maximum speed midway, then decelerate, and finally stop precisely in frame 67.

A poor interpolation can produce unnatural effects. For example, a bouncing ball, if improperly interpolated, might “pass through” the ground upon landing before bouncing again, instead of forming a smooth bounce.

Our solution consists of two steps:

1.Generating a Space Curve: First, define the geometric path of the object’s motion using a smooth mathematical curve.

2.Speed ​​Control: Then, define a function to describe how fast the object moves along this path.

2.3.Spline Curve

To generate smooth motion paths, we use a mathematical tool called a spline. A spline is essentially a piecewise polynomial, formed by splicing together many low-order polynomial curve segments.

Why choose piecewise cubic polynomials?

  • Below cubic? Quadratic polynomials (parabolas) lack inflection points, have a simple shape, and are difficult to fit complex shapes.
  • Above cubic? While higher-order polynomials are more flexible, they are prone to unwanted fluctuations and oscillations (known as the Runge phenomenon) and are computationally more expensive.
  • Cubic polynomials strike the perfect balance: they are simple enough and computationally efficient; yet flexible enough to have inflection points, satisfying our constraints on position and tangents, thus ensuring the smoothness of connections between curve segments.

The concept of continuity

When splicing curve segments together, the smoothness of the connection points is crucial. We describe continuity using different orders:

  • Continuity (Positional Continuity): Curve segments connect at the junction without interruption. This is the most basic requirement.
  • Continuity (Tangential Continuity): At the junction, the two curve segments not only have the same position, but their tangent directions and magnitudes are also the same (i.e., the first derivative is the same). This ensures a smooth transition in the direction of motion, without sharp turns. For most animation applications, continuity is sufficient.
  • Continuity (Curvature Continuity): At the junction, the curvature of the curves is also the same (i.e., the second derivative is the same). This ensures a smooth change in acceleration, which is crucial for simulating camera paths in high-speed motion (such as roller coasters).

Next, we will delve into some of the most important and classic cubic spline curves.

2.3.1.Hermite Spline

Hermitian splines are a very basic and powerful type of interpolation spline. To define a Hermitian curve segment, we need four geometric constraints:

  • Starting point position
  • Ending point position
  • Starting point tangent vector
  • Ending point tangent vector

Mathematical Derivation Our goal is to find a cubic polynomial vector function with parameters in the range , satisfying the four conditions mentioned above.

Here, is a three-dimensional vector , and the coefficients are also three-dimensional vectors. We can derive the function independently for each component . Taking the -component as an example:

Its first derivative (the x-component of the tangent vector) is:

We substitute the four constraints:

We have obtained a system of four linear equations with unknown coefficients . Solving this system of equations, we get:

Substituting the solved coefficients back into the original polynomial yields a more elegant matrix form:

This formula can be simplified to , where:

  • is the parameter vector.
  • is the Hermite Basis Matrix.
  • is the geometric constraint vector.

Blending Functions: If we further expand the matrix and write as a linear combination of geometric constraints, we obtain:

The four polynomials in here are Hermitian mixture functions. They act like “weights,” determining how much each of the four geometric constraints (two points and two tangent vectors) contributes to the final position at parameter .

How to splice them? To create a long, smooth composite Hermitian curve, we simply use the endpoint and the endpoint tangent vector of the previous segment as the starting point and the starting point tangent vector of the next segment. This automatically ensures the continuity of .

2.3.2.Bézier Curve

  • The curve passes through the starting point and the ending point .

  • The two intermediate points are not on the curve, but rather act like “magnets,” attracting the curve and defining its shape.

  • The initial tangent vector is determined by , and the ending tangent vector is determined by .

Relationship with Hermitian Curves A Bézier curve can be viewed as a special form of a Hermitian curve, with the following geometric constraints:

  • Starting point:
  • Ending point:
  • Starting tangent vector:
  • Ending tangent vector:

Substituting these into Hermitian matrix form, we can derive the basis matrix of the Bézier curve:

Bernstein Polynomials Bézier curves can also be defined in a more classic and geometrically meaningful way, using Bernstein polynomials as mixing functions:

where are Bernstein basis functions, and are the binomial coefficients. For a cubic Bézier curve (), the formula expands to:

De Casteljau’s Algorithm This is a very elegant method for calculating the geometric construction of any point on a Bézier curve. Its core is recursive linear interpolation. To calculate the point corresponding to parameter :

  1. On each control edge , find the point interpolated proportionally to .
  2. Connect these new points to form new line segments.
  3. On these new line segments, interpolate again proportionally to .
  4. Repeat this process until only one point remains, which is .

Global Control A characteristic of Bézier curves is that moving any control point changes the shape of the entire curve. This property is called global control.

2.3.3 Catmull-Rom Spline

Animators usually want the curve to pass through all the key points they specify. Hermite requires specifying tangent vectors, and Bézier only passes through the start and end points. Catmull-Rom spline solves this problem. It is an interpolation spline that automatically calculates the tangent vectors of each internal key point, ensuring that the entire curve is continuous.

  • Given a series of control points .
  • The curve segment between and is jointly determined by these four points.
  • The tangent vector at point is cleverly defined as the vector in the direction of the line connecting its two adjacent points and : , where is a “tension” parameter, usually taken as .

Thus, we have the position (from the input) and tangent vector (automatically calculated) for each point, and we can directly use the framework of Hermitian splines to construct each curve segment. This provides great convenience for animators.

Local Control Unlike Bézier curves, Catmull-Rom splines have local control. Moving a control point only affects the adjacent curve segments, and the distant curve is not affected.

2.4 Speed Control: Arc Length Parameterization

We have created a smooth motion path , but there is still a problem: when the parameter changes uniformly (for example, from 0 to 1), the speed of the object moving in space is not necessarily uniform. Where the curve bends sharply, the object’s speed will slow down; where the curve is gentle, the speed will increase.

To achieve precise speed control, we must decouple the geometric path and the motion speed. This requires introducing the concept of Arc Length.

Arc Length Function is defined as the path length from the start of the curve to the parameter :

where is the magnitude of the velocity vector at parameter , i.e., the speed.

The goal of Arc-Length Reparameterization is to find a new parameterization function such that when the new parameter (arc length) increases at a constant speed, the object moves at a constant speed in space. This process consists of two steps:

  1. Calculate the arc length function .
  2. Calculate its inverse function .
  3. Obtain the new curve equation .

Practical Application: Numerical Methods For complex spline curves, the arc length integral usually does not have an analytical solution. Therefore, we use numerical methods, the most common being Forward Differencing:

  1. Pre-computation: Perform dense sampling (e.g., 1000 points) within the range of the curve parameter from 0 to 1. 2. Construct a lookup table: Calculate the cumulative arc length from each sampling point to the starting point and store it in a lookup table [u, arc_length].
struct ArcLengthTableEntry {
    float u;
    float arc_length;
};

std::vector<ArcLengthTableEntry> build_arc_length_table(const Spline& curve, int num_samples) {
    std::vector<ArcLengthTableEntry> table;
    table.push_back({0.0f, 0.0f});

    glm::vec3 prev_point = curve.get_point(0.0f);
    float accumulated_length = 0.0f;

    for (int i = 1; i <= num_samples; ++i) {
        float u = (float)i / num_samples;
        glm::vec3 current_point = curve.get_point(u);
        accumulated_length += glm::distance(current_point, prev_point);
        table.push_back({u, accumulated_length});
        prev_point = current_point;
    }
    return table;
}

With this table, we can perform bidirectional queries:

  • Given u, find s: Directly search or interpolate in the table.
  • Given s, find u: Perform a binary or linear search in the arc_length column of the table to find the corresponding .

Speed ​​Curve Now, we can introduce the final control tool—the speed control curve. This is a 2D function , which maps the normalized time to the normalized arc length .

  • Uniform Motion: , which is a straight line.
  • Ease-in/Ease-out: is an S-shaped curve. It has a small slope at the beginning and end (slow speed), and a large slope in the middle (fast speed). This produces a very natural and smooth acceleration and deceleration effect.

Final Animation Generation Process For any given time (within the total time ):

  1. Calculate the normalized time .
  2. Obtain the normalized target arc length using the speed control curve.
  3. Multiply by the total arc length to obtain the actual target arc length .
  4. Look up the curve parameter corresponding to in the pre-calculated arc length table.
  5. Use this to calculate the final position of the object on the space curve .

Conclusion

In this lecture, we have explored the essential mathematical tools that underpin modern computer animation, from geometric transformations and rotation representations to keyframe interpolation and velocity control. By introducing homogeneous coordinates, we established a unified framework for combining translation, scaling, and rotation into efficient matrix operations. We then examined the limitations of traditional rotation representations and demonstrated how quaternions provide a robust, compact, and interpolation-friendly solution for handling orientation in three-dimensional space.

On the motion generation side, we analyzed how spline curves such as Hermite, Bézier, and Catmull–Rom splines enable the construction of smooth and controllable trajectories, satisfying important continuity constraints. Furthermore, through arc-length parameterization and speed control curves, we showed how to decouple geometric paths from temporal behavior, allowing animators to precisely shape acceleration and deceleration patterns.

Together, these techniques form the theoretical and practical foundation of keyframe-based animation systems. By combining intuitive external controls with mathematically rigorous internal representations, modern animation pipelines can achieve both artistic flexibility and computational efficiency. Mastery of these principles is essential for designing reliable, expressive, and scalable animation systems in real-world applications.