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:

• The primary unit of visual comprehension is contrast. A region with intentionally greater contrast can be called a 'node.' Unintentionally attractive contrasts can be referred to as 'knots' (these terms were first defined by Rudolf Arnheim, an art, film, and visual perception researcher).
• Visual attention is a finite resource in an image: once the viewer has processed the most salient nodes in an image, fatigue and boredom set in as the viewer has formed a concept of the image. This means that images should be crafted with a priority on the fastidious use of contrast.
• The illusion of motion within an image (produced by showing sequences of images) compounds the importance of managing points of contrast. New phenomena emerge when images of visual contrasts are perceived in motion. As animators know, drawings shown in rapid, changing sequences need to be scrutinized for rapid, predictable legibility.
• Image sequences that change in response to user input are not just subject to the complexities of moving sequences--they face a formidable challenge in that there are multiple (and potentially infinite) sequences that may be created from the same set of images. Making images that afford the maintenance of organized visual communication is a task underestimated at the artist's peril. Every point of contrast needs to be curated to preserve its relevance to the sequence, lest it contribute to the accumulation of visual noise.

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 absolute fewest number of visual nodes that meet the expressive criteria. For experimentation purposes, I am starting with the fewest number of points than can comprise a shape: three.
• The position of each point in the shape should be influenced by the identical forces that are moving the position of the character itself, with identical frequency.

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:

• There are two ‘streams’ of images to be acknowledged: that of the object’s motion within its boundaries, and also the stream of the object relative to the screen’s boundaries. In perceptual psychology, these two streams can be correlated with the 'motion' pathway and the 'form' pathway. The 'motion' pathway processes the position of images in space, and can very rapidly calculate trajectories (to understandable evolutionary advantage). The 'form' pathway construes the identity of objects through the reckoning of its shape. The 'form' pathway is much slower. In situations where an objects form and position are both changing rapidly, the motion pathway takes precedence. Form changes are essentially discarded, and perceived as noise.

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:

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

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...