Responsive Controls & Expressive Shapes  

web menu by

"All points of visual contrast on a controlled body should respond intelligently to the forces acting on the body."

One of the most common ways we interact with images involves controlling the movement of an object on a screen. This behavior has a distinct similarity to puppetry: our hand inhabits and guides a proxy, conscripted with the task of carrying out our goals. Although the range of expression certainly varies drastically, a marionette shares a common lineage with a mouse cursor--a prehensile actor, and an extension of the operator’s will.

To understand the relationship between the controlled object and the controller, we must gain familiarity with the basic mechanism of motion perception in the human visual processing system. A few relevant principles become apparent:

In comprehending the enormity of the task of making expressive animation that responds appropriately to changing conditions, the animator seeks guidelines and resources to develop a strategy. Often, the character's "behaviors" are divided into a handful of categories, such as "running," "jumping," or "sliding". Looping sequences are animated to represent these actions. The first and last frames of the animation are created in consideration of the permissible transitions--this is called a 'hookup.' A careful set of loops can create a seamless animation experience.

However, there is a shortcoming to this technique. An on-screen character is guided by a set of mathematical rules, usually a handful of forces that are summed up and imposed on the character's position in space, calculated at each frame (hopefully sixty times per second). The resulting position shown through time is usually a graceful curve. The animated frames, one hopes, have their own grace in motion, also. But the lines of action and visual rhythms can never be in perfect correspondence. A character's trajectory can theoretically be at any angle, requiring more drawings than an animation sequence could accommodate. And practically, the amount of data becomes unwieldy and fluidity suffers.

If the formulas for the character's position are calculated precisely and gracefully at every frame, why not let this data inform the shape of the character? "Ragdoll physics" is one established incarnation of this idea (think three-dimensionally rendered mannequins), and it has shown increasing popularity. However, the complexity (and visual noise) introduced by procedurally moving 3D forms means that the resultant visual shape is almost always far too 'busy,' and precise control of the visible 2D shape and silhouette is impossible.

I propose a system of drawing character shapes with the following criteria:

The strength of this approach is that it affords perfect correspondence between the position of the character and its shape.

The seeming limitation is that the individual calculation of the position of every point imposes a significant labor burden on every elaboration of shape detail.

Whether or not this is a limitation is debatable. It is a considerable 'detail tax,' but can be seen as supporting another principle of visual perception which experiments have confirmed:

This explains why, in Super Mario Bros., Mario's motions are so much easier to read than more elaborately animated characters such as Popeye (released contemporaneously--see the traditions section). Mario's silhouette changes very little, and so the visual experience of seeing Mario in motion is comparatively 'smooth,' especially when the player is viewing the character in peripheral vision, focusing instead on obstacles ahead.

The aesthetic result of this approach may be polarizing, but if it's unacceptably austere, it can certainly be decorated--the true value of the shapes is in their expression of the state of forces acting on the character, and the fact that the shape changes are perfectly synchronized with the position changes. Polygon shapes produced in this fashion can be rendered out as per-frame guidelines to assist the production of interactive animation made with hand drawings, stop motion puppets, or any other technique.

Ensure you have the Unity Webplayer installed and permitted to display content, and then click below to launch an example of the ShapeLab:

arrow keys  move | spacebar  jump |
d  hide/show controls | c  random triangle colors | s  random sky color | x  mirror horizontal | y  flip vertical |

While the ShapeLab focuses on the exploration of shape change.
Here's the JumpLab, the most nuanced, expressive jumping around:

spacebar / up arrow / click   jump |

This sandbox is designed to hone the 'feel' of a character's jumping physics. The vertical sliders on the bottom row each represent a 'micropulse' upwards. They apply in sequence, from left to right, until you release the jump button (mouse click or up-arrow, or spacebar). Gravity can be multiplied using the vertical slider on the left, and the upward pulse can be augmented using the vertical slider on the right. The camera and scale sliders up top should be self-explanatory. Pressing '1', '2', and '3' results in one, two, or three frames of anticipatory squash by the box before the jump--note how it affects the feeling of upward thrust. If you press 'm' there's an easter egg, though it's not very easter eggy to document it...

The JumpLab and ShapeLab merged into a single environment.
arrow keys  move | spacebar  jump |
d  hide/show controls | c  random triangle colors | x  mirror horizontal | y  flip vertical |

In case you can't install the Unity plugin, here's a video: