These are experiments in multilayered interface for creating responsive animated characters. This demo is constantly evolving. Watch this space. - Ken Perlin


This interface allows traditional animators to make use of translucent layers, applying PhotoShop-like layering principles to real-time animation. An animator can build up complex animations, beginning with simple poses, to create cycles and gestures, and then blend and overlay these to make more complex and nuanced movements. The run-time engine can retime and remix these poses, depending on the character's mood and intentions.

After designing an animation, the animator can package it up and use it in place of a pose within a larger animation. For example, several walk cycles can be created, packaged up, and then dropped into another animation which is used to cross-modulate between these different walk cycles. These cross-modulations can be done in real-time, in response to the character's changing mood and environment.

Things to try:

  • create a key frame
    Click on the gray bar at the bottom of a layer. A pose icon will appear.
  • change the pose at a key frame
    Go into the actor window at the top right, and try posing the face in different ways.
  • run an animation
    Click on the "stop" button on the bottom left. It will change to a "slow" button, and you will see the face animate slowly. Click again and it will change to a "run" button, and you will see a full-speed animation. Click a third time to return to the stopped state.
  • change the in/out points of the animation loop
    Drag on the little circles at the left and right of the green bar along the bottom in order to change the in and out points of the running animation loop.
  • move a key frame in time
    Drag a pose icon left or right to change it backward or forward in time.
  • change the transition curve between key frames
    Between any two successive key frames you can see transition curves. When you place your mouse near these, black circles appear. These are Bezier spline knots. Drag on the circles to modify the timing of the transition.
  • delete a key frame
    Drag downward on a pose icon.
  • change the name of a layer
    Just type within a layer to rename it. You can see the layer name off to the left of the layer. Hit the DEL key to blank out the layer name.
  • retime an entire layer
    Hold down the SHIFT key and drag a pose icon left or right. The entire layer will be retimed around the moving icon.
  • add a new layer
    Click on the "new layer" button. The new layer starts out completely "opaque", overriding any movement in the previous layers.
  • turn off animatables in a layer
    If you click on the animatable buttons on the left of the new layer, you can make various animatables transparent. Click on them again to make them opaque again. When an animatable is transparent, then the effects of previous layers on that animatable show through and effect the animating actor. For example, you can make the "eye brows" transparent in the new layer. Then animating eyebrows in this layer will have no effect.
  • modulate the opacity of a layer
    Use our right mouse button to drag the Bezier knots of the red curve of a layer. The lower this curve, the more transparent that layer is at that moment in time, and the more that the effect of previous layers will come through.
  • copy a layer
    Click on the "copy layer" button. This will make an exact copy of the previous layer.
  • retime only some of the animatables in a layer
    You can copy a layer, and then turn off some of the animatables in the original layer, and complementary animatables in the new copy. Then you can retime the animatables in the new layer by holding down the shift key and dragging left or right on a pose icon. In this way you can, for example, modify a walk cycle to make the arms swing forward or back a little before or after the leg movement.