1. Tweening and Morphing
Tweening is a technique that allows “in-between” images to be created
between supplied key frames using linear interpolation (P=A(1-t)+Bt,
0≤t≤1). Tweening has applications on computer and hand drawn
animation and can also be extended for picture morphing.
Morphing is a transition between fully colored images. Morphing
an image into another involves a simultaneous warping and dissolving,
which are both variations of tweening.
Keywords: tweening, morphing, tween, morph, animation, linear
interpolation, warping, dissolving, alpha channel.
Introduction:
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 animationi. Tweening has applications in both computer
animation and hand drawn animationii. 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 interpolation1:
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

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

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

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

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

6. 6
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.”
Conclusion:
Tweening with the aid of computers may have fallen out of favor
with the majority of animators, but has found new uses in transmitting
low-bandwidth animations over the internet. Morphing has recently
become very popular. Michael Jackson’s “Black or White” video in
particular has done a lot to popularize the use of morphing. Few
applications in computer graphics are so simple, yet yield such
spectacular results.