Animations


In film the illusion of movement is created by taking multiple pictures of a scene over a span of time and then replaying them in sequence. Computer graphics simulate movement in a similar manner. As we have seen so far matrices are used to describe the movement of objects. We have scaling, rotation, and translation matrices, and by applying them to the vertices of our objects we can accomplish any configuration of an object.

To animate objects we create a function of time which outputs a matrix for each moment in time \( f(t) = T_{Animation} \). Each matrix moves our object by some amount and when you apply a series of matrices over time the illusion of movement is created. To make the animation feel smooth this graphics engine makes sure to call our function 60 times per second. Below are three interactive programs which show how functions of time can be used to create scaling, rotation, and translation animations.

Scaling

\( f(t) = \begin{bmatrix} {\color{vred}x_t} & 0 & 0 & 0 \\ 0 & {\color{vred}y_t} & 0 & 0 \\ 0 & 0 & {\color{vred}z_t} & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \)

To make an animation of an object being scaled we make a function of time which returns a scaling matrix. Because we can scale in the x, y, and z direction we make the \( x_t \), \( y_t \) and \(z_t \) components of the matrix be themselves functions of time. Use the dropdowns in the program below to specify the functions of \( x_t \), \( y_t \) and \(z_t \). Press the start animation button to visualize what this function of time looks like.

\( t = \) 0 s

\( T_{Anim} = \begin{bmatrix} {\color{vred}cos(t)} & {\color{vred}cos(t)} & 0 & 0 \\ {\color{vred}sin(t)} & {\color{vred}cos(t)} & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \)

Start Animationtimer

Rotation

To make an animation of an object being rotated we make a function of time which returns a rotation matrix. Because we can rotate along the x, y, and z axis we choose the appropriate matrix for the axis we want to rotate about. By choosing the function of theta, \( f(t) = \theta_t \) we can rotate at different speeds. Use the dropdowns in the program below to create a rotation animation and press the start animation button to visualize what this function of time looks like.

Rotation About X-Axis

\( \begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & {\color{vred}cos(\theta_t)} & {\color{vred}-sin(\theta_t)} & 0 \\ 0 & {\color{vred}sin(\theta_t)} & {\color{vred}cos(\theta_t)} & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \)

Rotation About Y-Axis

\( \begin{bmatrix} {\color{vred}cos(\theta_t)} & 0 & {\color{vred}sin(\theta_t)} & 0 \\ 0 & 1 & 0 & 0 \\ {\color{vred}-sin(\theta_t)} & 0 & {\color{vred}cos(\theta_t)} & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \)

Rotation About Z-Axis

\( \begin{bmatrix} {\color{vred}cos(\theta_t)} & {\color{vred}-sin(\theta_t)} & 0 & 0 \\ {\color{vred}sin(\theta_t)} & {\color{vred}cos(\theta_t)} & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \)

\( t = \) 0 s

\( T_{Anim} = \begin{bmatrix} {\color{vred}cos(t)} & {\color{vred}cos(t)} & 0 & 0 \\ {\color{vred}sin(t)} & {\color{vred}cos(t)} & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \)

Start Animationtimer

Translation

\( f(t) = \begin{bmatrix} 1 & 0 & 0 & {\color{vred}x_t} \\ 0 & 1 & 0 & {\color{vred}y_t} \\ 0 & 0 & 1 & {\color{vred}z_t} \\ 0 & 0 & 0 & 1 \end{bmatrix} \)

To make an animation of an object being translated we make a function of time which returns a translation matrix. Because we can translate along the x, y, and z axis we set the \(x_t \) , \(y_t \) and \(z_t \) components of the matrix themselves be functions of time. Use the dropdown in the program below to choose these functions and press the start animation button to visualize what this function of time looks like.

\( t = \) 0 s

\( T_{Anim} = \begin{bmatrix} {\color{vred}cos(t)} & {\color{vred}cos(t)} & 0 & 0 \\ {\color{vred}sin(t)} & {\color{vred}cos(t)} & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \)

Start Animationtimer