Tweening and Morphing

Tweening is a very simple concept in computer graphics that has very powerful and visually impressive applications.  In tweening, key frames are provided and “in-between” frames are calculated to make smooth looking animation.  Tweening has applications in both computer animation and hand drawn animation.  It can also be extended to picture morphing techniques where one picture convincingly changes into another picture.  Morphing has become quite popular recently and is widely used in movies.

Tweening:

            The concept of tweening is very simple.  It is simply moving a point (or a series of points) from its initial position to a final position.  The equation for tweening along a straight line is a linear interpolation¹:

P=A(1-t)+Bt     0≤t≤1

Where A is the initial location of the point, B is the final position of the point, and t is the time from 0 to 1.  A and B are also referred to as “key frames,” and the linear interpolation creates the “in-betweens.”  This equation will create a point anywhere on the line that lies between A and B.  The images A and B are sets of points.  Tweening in more than one dimension adds no more complexity than when simple tweening in one.  The tween is simply applied to each axis in the n-dimensional coordinate space.  For example, to tween between two colors in three dimensional color space (R,G,B), all that

would be required is for a tween to be applied to the R, G, and B values simultaneously.  

The code required for tweening an image is very simple.  It requires only a loop that applies a linear interpolation for each point from its initial location to its final location at the current time t.  The difficulty in tweening objects made up of many points is creating the two key frames to be tweened.  The two frames must have to have an equal number of points and have to have a meaningful mapping from one point to the other¹.  A meaningful mapping is one that produces a tween that is realistic looking.  If tweening between a frog and a human, the point that corresponds to one of the frog’s fingers should map to one of the human’s fingers.  Carefully mapping the points is crucial in creating a realistic tween.  This picture demonstrates the tweening of two identical pictures, one with a meaningful mapping between points that produces a realistic tween, and one with a random relationship between points:

In both cases, in-betweens are created from A to B.  Only the mapping between the points is different.  Notice that the first picture is a nice transition from a sphere to a torus, but the second picture has a very unnatural transition.  The resulting animation makes the sphere seem to break up into a cloud of dots that spontaneously form a torus.  The relationship between points in the images to be tweened is difficult to set up and can only be properly created by a human.  There is no algorithm that can be used to create the relationship since “what looks best” is open to interpretation.

            Tweening does not have to be performed on objects of different shapes.  If it is performed on two objects with the same shape, but different size, it will create an animation that expands or contracts the initial image.  Also, if an object is tweened to an identical object in another location, the resulting animation will be the movement of the object from A to B with no deformation or change of shape.  These techniques are used in “Flash” software to produce animation for transmission over the internet that require very little bandwidth.  Only two vector-based objects and a description of the tweens to be applied to them are needed to produce complex animations.

            The effect of tweening beyond t=1 results in what is called extrapolation¹.  When t is greater than 1, the resulting image results in the tweened points moving beyond B in the direction of A to B.  This sometimes causes a caricature-like distortion.

¹

The second image of Elizabeth Taylor is tweened into the fourth image of John F. Kennedy, the third image is the tween.  The three other images are extrapolations.  Extrapolations exaggerate the differences between the images A and B by continuing to move the pixel past point B along the line from A to B.  Note that the major differences between the images at t=0 and t=1 are the size of the chin and ears.  The extrapolation at t=2.0 greatly exaggerates these features. 

Tweening is not new to computer graphics.  It has been used in hand drawn animation long before computers came around.  In hand drawn animation, a highly skilled animator would draw the outlines of the “key frames”, and the lower paid, less skilled animators would draw the in-betweens. Afterwards yet another person would color in all the frames.  The first commercial animation system that allowed animators to draw key frames and have the computer calculate the in-betweens was “TWEEN.”  While this software sped up the animation process, it had an overly distinctive fluid look and the software was never widely used.²  The animations did not comply with “cartoon physics.”³  Many of today’s leading software packages for computer assisted 2D character animation intentionally come without tweening functions.  One such package, Animation Stand, explains the absence in its FAQ: “Q: Why doesn't Animation Stand do automatic inbetweening (tweens)?    A: There's no substitute for a good artist.”

Tweening is not only performed by linear interpolation.  Tweening means producing “in-betweens” between two images.  Quadratic interpolation can be used to created a curved path of “tweens.” A Bezier curve is an example of a curved tween. 

¹

Morphing:

A related application of tweening is morphing.  The term tweening generally only applies to the transition of points that define an image, while morphing applies to transitions between fully colored images.³  The first feature film to use digital morphing technology was Willow.[v]  It was used to create a scene where people were morphed into pigs.  While morphing appears much more complex than tweening, it is actually an easy to understand extension of it.  The first step is to set up a mesh (or grid) over the first image A, and also to corresponding parts of the destination image B (the person’s eyes and the pig’s eyes if morphing from a person to a pig). An example is:

In these two images the major features such as the eyes, nose, and mouth have corresponding regions in the mesh and that the hair in the first image corresponds to a very small region on the alien’s head so that it will seem to disappear during the transition.  The images are morphed by a simultaneous process of warping and dissolving⁶.  When particular areas of the images are isolated in the mesh, they can be meaningfully warped and dissolved.

Warping is similar to tweening.  Linear extrapolation is used to tween one region of mesh A into its corresponding region in mesh B⁶.  It is performed by linearly interpolating the four vertices of each region in A into the four vertices of the corresponding region B.  This will distort and move the grid in A into the grid in B.  While this happens, the image data inside the region is stretched and compressed accordingly. 

The dissolve is also related to tweening.  Dissolving slowly fades from image A into B.  This is performed by linearly extrapolating the alpha channel (transparency factor) to fade A while unfading B.¹  The warping is much more believable than the dissolve, so while the warping is smooth throughout the animation, all of the dissolving is done very quickly in the middle of the transition.⁶  The resulting morph looks like this:

⁶

            The two images in this example are similar in both color and features (eyes, nose, mouth, etc.) so the dissolving in the middle of the transition is believable and can happen slowly, but most images are not so similar.  These images must have a quicker dissolve in the middle.  If it happens quickly the viewer will notice the nice warping before and after the dissolve, but the dissolve will be too short to really notice.  The following animation involves two images that are not similar:

The dissolving is done very quickly (just a few frames) and looks very good when it is played fast.  All that is noticed is a smooth warp into an alien, and the dissolve is barely noticed.

            Just like tweening, good morphing animations cannot be fully automated.  A skilled human is always required to produce quality morphing animations.   The user must set the grid properly, and fine tune the warping and dissolving speeds at various stages of the morph.  It takes extensive tweaking of the values to determine what values and grid should be applied to create a morph that “looks right.”