6. Dynamics and Animation¶

Introduction ¹¶

Animation is the ability to create motion within a graphics scene by rendering the scene repeatedly while changing some elements within the scene.
Industries that use animation:
- Gaming.
- Product engineering.
- Simulation.
- Medical imaging.
- Entertainment.
There are two types of animation: real-time and frame-at-a-time.
Real-time animation:
- It generates frames in real time.
- It is essential for interactive animation as the animation must dynamically change based upon the interaction and input from the user.
- Standard: 30 frames per second; more frames, more realistic and smoother the animation.
- It is more challenging and expensive to create as it may exceeds the current capabilities of the hardware.
Frame-at-a-time animation: (aka, offline, production, or pre-rendered animation):
- It renders a preset sequence of animation.
Animation companies such as DreamWorks, Pixar, Disney, and Lucas Films all use what is called render farms or large collections of computer servers that have been optimized to perform the computations necessary to render a frame that includes vast numbers of polygons.
These changes can be in the form of transformations where the geometry is transformed in some way (scaled, rotated, transformed) or the lighting interacts with the scene differently.
There are 3 types of approaches to animation:
- Procedural animation:
  - The program (and programmer) explicitly defines transformations by altering the parameters of the geometry, scene, perspective (cameras), or lighting
- Keyframe animation:
  - It defines the end states of a scene and leaves the movement between up to interpolations.
  - A keyframe is one of the defined end-states of a scene.
- Interpolation animation:
  - It creates two geometries are typically defined with one being a starting point. The other is an ending point.
  - The first geometry is morphed into the second geometry using interpolation calculations.
  - The keyframes are typically transformed states of the same geometry and not entirely different geometry that is often the case in interpolation animation.

Basics of Computer Animation ²¶

Squash: flatten an object or character by pressure or by its own power.
Stretch: used to increase the sense of speed and emphasize the squash by contrast.
Timing completely changes the interpretation of the motion (heavier objects move slower).
There are 2 types of animation:
- Production (aka, frame-at-a-time animation):
  - It is used in movies and commercials.
  - It is not interactive.
  - It involves hardcoded, entire sequence know beforehand.
- Interactive (aka, real-time animation):
  - It is used in games and simulations.
  - It involves the user’s input to determine the sequence of events.
There are 3 approaches to animation:
- Procedural animation:
  - Describes the motion algorithmically: Express animation as a function of small number of parameters.
  - Examples: Bouncing ball, grass in the wind, trees swaying, clock on the wall, etc.
- Keyframe animation:
  - Specify scene only at some instants of time.
  - Generate in-between frames automatically.
- Physically-based:
  - It assigns physical properties to objects, and respects the laws of physics.
  - Examples: Gravity, friction, etc.
  - Simulate physics by solving equations of motion: Rigid bodies, fluids, plastic deformation, etc.
Building the controls is called “rigging”.
Skinning:
- Embed a skeleton into a detailed character mesh.
- Animate the skeleton (bones).
- Bind skin mesh vertices to bones.
- We need to infer how skin deforms from bone transformations, and hence we use Skeletal Subspace Deformation (SSD), or simply Skinning.
- Other methods: vertex blending, matrix palette skinning, linear blend skinning, etc.

3D Transform and Animation ³¶

We can represent 3D transformations by 4 × 4 matrices.
Transformations:
- Translation: Move an object from one position to another.
- Rotation: Rotate an object around an axis.
- Scaling: Increase or decrease the size of an object.
- Shearing: Distort an object, making it longer or shorter in a particular direction.
- Reflection: Mirror an object across a line.
Translation:
- \((x, y, z) → (x + t_x, y + t_y, z + t_z)\)
- \[ \begin{aligned} x’ = 1x + 0y + 0z + tx \\ y’ = 0x + 1y + 0z + ty \\ z’ = 0x + 0y + 1z + tz \\ \end{aligned} \]
- \[ \begin{bmatrix} x’ \\ y’ \\ z’ \\ \end{bmatrix} = \begin{bmatrix} 1 & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ z \\ \end{bmatrix} + \begin{bmatrix} tx \\ ty \\ tz \\ \end{bmatrix} \]
Scaling about the origin:
- \((x, y, z) → (a_x, b_x, c_z)\)
Scaling about a point:
- Translate the point as the origin, scale, and then translate back.
Rotation around z-axis:
- \[ \begin{aligned} x’ = x \cos \theta - y \sin \theta \\ y’ = x \sin \theta + y \cos \theta \\ z’ = z \\ \end{aligned} \]
Rotation around x-axis:
- \[ \begin{aligned} x’ = x \\ y’ = y \cos \theta - z \sin \theta \\ z’ = y \sin \theta + z \cos \theta \\ \end{aligned} \]
Rotation around y-axis:
- \[ \begin{aligned} x’ = x \cos \theta + z \sin \theta \\ y’ = y \\ z’ = -x \sin \theta + z \cos \theta \\ \end{aligned} \]
Modeling and animation are loosely coupled.
- Modeling describes control values and their actions.
- Animation describes how to vary the control values.
Anything can be keyframed and interpolated. Position, Orientation, Scale, Deformation, Patch Control Points (facial animation), Color, Surface normals.

Types of Animation ⁴¶

Traditional Animation (aka, cel animation or hand-drawn animation):
- Examples: old cartoons and movies.
- It is the oldest form of animation and hand-drawn.
- 12 fps (or 24 fps but less common).
- Draw every two frames.
2D Vector-based Animation:
- Examples: flash animation, etc.
3D Computer Animation:
- Examples: Toy Story, Shrek, etc.
- Keyframe animation, procedural animation, and physically-based animation.
- Interpolation is automatically generated by the computer; animator only needs to specify the keyframes.
- 24 fps (or 30 fps).
Motion Graphics:
- Examples: title sequences, commercials, explainer videos,, tv promos, film opening titles, etc.
- Usually the characters are not animated, but the text and graphics are; and the camera is moving around.
Stop Motion Animation:
- Taking a picture of an object, moving it slightly, and taking another picture.
- Examples: claymation, puppet animation, ctu-out, silhouette, etc.
- It is like traditional animation but with real objects.

Timing and Spacing ⁵¶

Timing is the speed and rhythm of the action. How many frames do you use to make a movement.
Spacing is the variation of the speed during the movement. More frames are needed for slower movements.
Deformation of the volume: Squash and stretch, the volume of the object should remain constant, only the shape changes.
Stretch changes the shape of the object (becomes vertical oval, +height, - width) before and after the impact (collision with the ground).
Squash change the shape of the object during the impact. It becomes a horizontal oval, -height, +width.
Not all objects need to squash and stretch. It depends on the material and the speed of the object. E.g. rubber ball squashes and stretches, but a bowling ball does not.
Slow-fast-slow: the object starts slow, speeds up, and slows down again.

Time-based vs. Frame-based Movement ⁶¶

Time based ensures that interactions happen correctly even if there is a lag, on different hardware, or if frame rates drop.
Frame rates are not constant, and they can drop; hence, time-based movement is more reliable.
Example: moving an object 600 pixels should take 5 seconds, regardless of the frame rate.
If it was frame-based, then the movement will take less time if the frame rate is higher, or more times if the frame rate is lower.
Carefully combining time-based and frame-based movement is the best approach.
You keep track of the time since the last frame has happened, and you move the object based on that time.

Techniques of Animation ⁷¶

Procedural animation:
- Based on a meaningful set of rules: E.g. time.
- Frame-to-frame incremental changes.

References¶

‌ ‌

‌ ‌ ‌

Learning Guide Unit 6: Introduction | Home. (2024). Uopeople.edu. https://my.uopeople.edu/mod/book/view.php?id=444295&chapterid=540616 ↩
Massachusetts Institute of Technology (2020). Coordinates and Transformations. MITOpenCourseware.https://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-837-computer-graphics-fall-2012/lecture-notes/. (Original work published 2001). Read Lecture #6: Basics of Computer Animation. ↩
National Open University of Nigeria (2009). Introduction to Computer Graphics and Animation. https://nou.edu.ng/coursewarecontent/CIT371.pdf Read Module 3, Unit 4: 3D Transform and Animation. Page 126 -133 ↩
The. (2015, September 14). The 5 Types of Animation. YouTube. https://www.youtube.com/watch?v=NZbrdCAsYqU ↩
Lesson05📗- TIMING & SPACING Animation Principles. (2017, March 16). Lesson05📗- TIMING & SPACING (Animation Principles). YouTube. https://www.youtube.com/watch?v=byyFBdJFFCw ↩
Gamedev In-depth Topics: Time-based vs. Frame-based Movement. (2016, July 13). Gamedev In-depth Topics: Time-based vs. Frame-based Movement. YouTube. https://www.youtube.com/watch?v=TIiYJaY8ZR0 ↩
Unit 6 Lecture 1: Techniques of Animation | Home. (2024). Uopeople.edu. https://my.uopeople.edu/mod/kalvidres/view.php?id=444302 ↩

6. Dynamics and Animation¶

Introduction 1¶

Basics of Computer Animation 2¶

3D Transform and Animation 3¶

Types of Animation 4¶

Timing and Spacing 5¶

Time-based vs. Frame-based Movement 6¶

Techniques of Animation 7¶

References¶

Introduction ¹¶

Basics of Computer Animation ²¶

3D Transform and Animation ³¶

Types of Animation ⁴¶

Timing and Spacing ⁵¶

Time-based vs. Frame-based Movement ⁶¶

Techniques of Animation ⁷¶