# Chapter 43: Basics of Animation

How do we animate?

Modifying scene parameters as a function of time.

## Scripting

Specifiying the parameters at every frame.

define spinningCube()

define carScript()


### Hierarchical Modeling

This is the order you typically apply rotations:

Why?

• Non-uniform scale will mess up rotations
• Translation will mess up everything

In a hierarchical model, generally do T and R, then push() for S, draw, and pop() before continuing on. Unless your models are positioned with the origin at where you want it to pivot, you typically also need to do a translate after the rotate but before the scale (because translates mess up everything).

Here’s the (simplified) javascript code for the above example.

push(); // upper-arm rectangle (red)

rotate(upperArmRotation);
drawAnchor();
push();
translate(100, 0);
drawRect(200, 100); // box
pop();

push(); // lower-arm rectangle (green)

translate(200, 0);
rotate(lowerArmRotation);
drawAnchor();
push();
translate(100, 0);
drawRect(200, 80); // box
pop();

push(); // hand rectangle (blue)

translate(200, 0);
rotate(handRotation);
drawAnchor();
push();
translate(75, 0);
drawRect(150, 60); // box
pop();

pop();

pop();

pop();


The boxes we draw are centered at the origin, so we need to translate out $1/2$ the width to get the pivots/anchors we want.

## Key-Framing

Key-framing means defining specific animation frames and interpolating between them to get frame-by-frame animation poses. Typically an artist creates the keyframes.

But how do we interpolate the poses? Can we just use linear interpolation?

For poses $p_0$ and $p_1$ and $t$, which goes from 0 for pose 0 and to 1 for pose 1.

• For positions? Absolutely?
• Scales? Yes.
• Rotations? Nope.

## Outline

1. Forward Kinematics/Key framing
2. Inverse Kinematics
3. Motion capture
4. Simulation
5. Behavioral Animation
6. Physically based (Dynamics)
• Key framing
• Interpolation
• Rotations
• Euler angles
• Quaternions
• Splines
• Skinning
• Kinematics
• Inverse kinematics
• Motion capture
• Collision detection
• Spatial data structures
• Principles of animation
• Squash and stretch
• Timing and motion
• Anticipation
{"ft_lang_label":"__label__en","ft_lang_prob":0.66703814,"math_prob":0.947277,"size":2251,"snap":"2021-21-2021-25","text_gpt3_token_len":564,"char_repetition_ratio":0.12327548,"word_repetition_ratio":0.011869436,"special_character_ratio":0.260773,"punctuation_ratio":0.16103896,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.95705265,"pos_list":[0],"im_url_duplicate_count":[null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2021-05-14T09:35:12Z\",\"WARC-Record-ID\":\"<urn:uuid:2dad14bb-14db-484f-ace2-db03e5550de7>\",\"Content-Length\":\"12374\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:c717f1d3-abc1-4150-838e-280e1dc96b7f>\",\"WARC-Concurrent-To\":\"<urn:uuid:38d7d6aa-8986-4f91-8d23-621a483e6f51>\",\"WARC-IP-Address\":\"185.199.108.153\",\"WARC-Target-URI\":\"https://graphicscompendium.com/gamedev/11-animation-intro\",\"WARC-Payload-Digest\":\"sha1:T5NYMZHRJCMNVBQQQJZQ7QV6Z6D3XLPP\",\"WARC-Block-Digest\":\"sha1:MZE4EEZ2GJN2LFY24RNSMB75DSK7XXKN\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2021/CC-MAIN-2021-21/CC-MAIN-2021-21_segments_1620243990449.41_warc_CC-MAIN-20210514091252-20210514121252-00238.warc.gz\"}"}