# Critters:

procedural animation by direct manipulation

Nick Thompson

 Committee: Roger Dannenberg, chair Brad Myers Andy Witkin Ken Kahn, Animated Programs

# What?

• procedural animation
• direct manipulation
Critters:
• shapes express mathematical relationships
• before-and-after diagrams describe changes of state
• "parallel" execution of rules

• geometry is a useful way to explain a computation

## Vector Projection u = (w · v) · v / ||v||

## Reflections R = 2 · (L · N) · N - L

## Bézier Subdivision H = k · P2 + (1 - k) · P3
L1 = P1
L2 = k · P1 + (1 - k) · P2
L3 = k · L2 + (1 - k) · H
R4 = P4
R3 = k · P3 + (1 - k) · P4
R2 = k · H + (1 - k) · R3
L4 = R1 = k · L3 + (1 - k) · R2

• geometry is a useful way to explain a computation to people
• why not computers, too?
Thesis statement:
Diagrams can be used to represent a wide variety of computer programs as well as or better than traditional languages.

# Visual Language

• visual problems
• most important data type is position
• most important operation is movement
• the simplest movement is translation (vector addition)

# Vectors

• frequently used
• frequently drawn
• too abstract: no base, no position
a stick is a vector plus a position  # Snapping is Assignment   # Triangles

• triangles can represent rotation and scaling
• similar triangles are used in many geometric proofs   # Rotating and Scaling   # Special Triangles  # Cams  # Summary

mapping between shapes and usual language/chip primitives:
 operation shape +, - stick *, / triangle sin, cos, tan right triangle sqrt, ... cam

• geometry is a useful way to explain a computation to people
• geometry can be used to explain an expression to a computer

# Rule Rewriting

• Pictorial Janus • Cocoa / KidSim • 3D-Visulan # State

The before diagram contains the state of the critter.   # Demonstrating a Step

construct after in terms of before     • geometry is a useful way to explain a computation to people
• geometry can be used to explain an expression to a computer
• you can describe changes in state this way

# Events / Messages:

• clock ticks
• user input
• collisions
• communication

# Conditions

• presence of a condition indicates "X must be true"
• point in circle:  • stick intersection  • geometry is a useful way to explain a computation to people
• geometry can be used to explain an expression to a computer
• you can describe changes in state this way
• you can describe conditions that must be met to trigger a rule
• programs - algorithms = data structures • links can be assigned to by connecting them to a critter # Data Structures

• critters are used for composing state
• binary tree node: • geometry is a useful way to explain a computation to people
• geometry can be used to explain an expression to a computer
• you can describe changes in state this way
• you can describe conditions that must be met to trigger a rule
• geometry is also good for describing data structures
• hasn't somebody done this before?

 The ability to make moving drawings suggests that Sketchpad might be used for making animated cartoons. -- Ivan Sutherland, 1963

Geometer [Davis]
• inspiration for geometric computation
• limited to compass/ruler constructions
• not programming languages

Pictorial Janus [Kahn and Saraswat] ToonTalk [Kahn]
• visual equivalents of concurrent constraint languages
• Pictorial Janus has accidental layout
• ToonTalk can manipulate sprites numerically
• powerful data structures and communication

Cocoa / KidSim [Cypher and Smith] • grid-based rules - no smooth motion
• uses a calculator for arithmetic

Gamut [McDaniel and Myers]
• similar application area, but for end users
• sophisticated multiple-example inference algorithm:
often unclear what it has learned
• deck of cards metaphor for choices

Klik & Play [Maxis]
• commercial video game construction kit
• lots of built-in knowledge, little flexibility
Pavlov [Wolber]
• more like a keyframe animation system
• built-in limited knowledge of directional movement
• extensive use of numerals

# Contributions

• framework for geometric computation
• set of useful shapes
• integration of geometric expressions with programming constructs

# Status

• have prototype, written in STk
• stick manipulation and biases work
• rule construction and user input events work
• can build:
• straight-line motion
• parabolic trajectory
• spawning new critters

# Evaluation

• examples
• asteroids
• particle system
• bresenham
• user experience

# Conclusions

• geometry is a useful way to explain a computation to people
• geometry can be used to explain an expression to a computer
• you can describe changes in state this way
• you can describe conditions that must be met to trigger a rule
• geometry is also good for describing data structures
• this work combines the above in a new and powerful way