Tweening and MorphingTweening is a technique that allows “in-between” images to be createdbetween supplied key frames using linear interpolation (P=A(1-t)+Bt,0≤t≤1). Tweening has applications on computer and hand drawnanimation and can also be extended for picture morphing. Morphing is a transition between fully colored images. Morphingan image into another involves a simultaneous warping and dissolving,which are both variations of tweening.Keywords: tweening, morphing, tween, morph, animation, linearinterpolation, warping, dissolving, alpha channel.Introduction: Tweening is a very simple concept in computer graphics that hasvery powerful and visually impressive applications. In tweening, keyframes are provided and “in-between” frames are calculated to makesmooth looking animationi. Tweening has applications in both computeranimation and hand drawn animationii. It can also be extended to picturemorphing techniques where one picture convincingly changes intoanother picture. Morphing has become quite popular recently and iswidely used in movies.Tweening: The concept of tweening is very simple. It is simply moving apoint (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≤1Where A is the initial location of the point, B is the final position of thepoint, and t is the time from 0 to 1. A and B are also referred to as “keyframes,” and the linear interpolation creates the “in-betweens.” Thisequation will create a point anywhere on the line that lies between A andB. The images A and B are sets of points. Tweening in more than onedimension 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 dimensionalcolor space (R,G,B), all thatwould be required is for a tween to be applied to the R, G, and B valuessimultaneously. The code required for tweening an image is very simple. Itrequires only a loop that applies a linear interpolation for each pointfrom its initial location to its final location at the current time t. Thedifficulty in tweening objects made up of many points is creating thetwo key frames to be tweened. The two frames must have to have anequal number of points and have to have a meaningful mapping fromone point to the other. A meaningful mapping is one that produces atween 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 oneof the human’s fingers. Carefully mapping the points is crucial increating a realistic tween. This picture demonstrates the tweening oftwo identical pictures, one with a meaningful mapping between pointsthat produces a realistic tween, and one with a random relationshipbetween points:In both cases, in-betweens are created from A to B. Only the mappingbetween the points is different. Notice that the first picture is a nicetransition from a sphere to a torus, but the second picture has a veryunnatural transition. The resulting animation makes the sphere seem tobreak up into a cloud of dots that spontaneously form a torus. Therelationship between points in the images to be tweened is difficult to setup 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” isopen to interpretation. Tweening does not have to be performed on objects of differentshapes. If it is performed on two objects with the same shape, butdifferent size, it will create an animation that expands or contracts theinitial image. Also, if an object is tweened to an identical object inanother location, the resulting animation will be the movement of theobject from A to B with no deformation or change of shape. Thesetechniques are used in “Flash” software to produce animation fortransmission over the internet that require very little bandwidth. Onlytwo vector-based objects and a description of the tweens to be applied tothem are needed to produce complex animations. The effect of tweening beyond t=1 results in what is calledextrapolation1. When t is greater than 1, the resulting image results inthe tweened points moving beyond B in the direction of A to B. Thissometimes causes a caricature-like distortion.The second image of Elizabeth Taylor is tweened into the fourth imageof John F. Kennedy, the third image is the tween. The three otherimages are extrapolations. Extrapolations exaggerate the differencesbetween the images A and B by continuing to move the pixel past pointB along the line from A to B. Note that the major differences betweenthe images at t=0 and t=1 are the size of the chin and ears. Theextrapolation at t=2.0 greatly exaggerates these features. Tweening is not new to computer graphics. It has been used inhand drawn animation long before computers came around. In handdrawn animation, a highly skilled animator would draw the outlines ofthe “key frames”, and the lower paid, less skilled animators would drawthe in-betweens. Afterwards yet another person would color in all theframes. 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 anoverly distinctive fluid look and the software was never widely used.The animations did not comply with “cartoon physics.” Many oftoday’s leading software packages for computer assisted 2D characteranimation intentionally come without tweening functions. One suchpackage, Animation Stand, explains the absence in its FAQ: “Q: Whydoesnt Animation Stand do automatic inbetweening (tweens)? A:Theres no substitute for a good artist.” Tweening is not only performed by linear interpolation. Tweeningmeans producing “in-betweens” between two images. Quadraticinterpolation can be used to created a curved path of “tweens.” A Beziercurve is an example of a curved tween.1Morphing: A related application of tweening is morphing. The term tweeninggenerally only applies to the transition of points that define an image,while morphing applies to transitions between fully colored images. Thefirst feature film to use digital morphing technology was Willow. It wasused to create a scene where people were morphed into pigs. Whilemorphing appears much more complex than tweening, it is actually aneasy to understand extension of it. The first step is to set up a mesh (orgrid) over the first image A, and also to corresponding parts of thedestination 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 mouthhave corresponding regions in the mesh and that the hair in the firstimage corresponds to a very small region on the alien’s head so that itwill seem to disappear during the transition. The images are morphed bya simultaneous process of warping and dissolving. When particularareas of the images are isolated in the mesh, they can be meaningfullywarped and dissolved. Warping is similar to tweening. Linear extrapolation is used totween one region of mesh A into its corresponding region in mesh B. Itis performed by linearly interpolating the four vertices of each region inA into the four vertices of the corresponding region B. This will distortand move the grid in A into the grid in B. While this happens, the imagedata inside the region is stretched and compressed accordingly. The dissolve is also related to tweening. Dissolving slowly fadesfrom image A into B. This is performed by linearly extrapolating thealpha channel (transparency factor) to fade A while unfading B. Thewarping is much more believable than the dissolve, so while the warpingis smooth throughout the animation, all of the dissolving is done veryquickly in the middle of the transition. The resulting morph looks likethis:
6 The two images in this example are similar in both color andfeatures (eyes, nose, mouth, etc.) so the dissolving in the middle of thetransition is believable and can happen slowly, but most images are notso similar. These images must have a quicker dissolve in the middle. Ifit happens quickly the viewer will notice the nice warping before andafter the dissolve, but the dissolve will be too short to really notice. Thefollowing animation involves two images that are not similar:The dissolving is done very quickly (just a few frames) and looks verygood when it is played fast. All that is noticed is a smooth warp into analien, and the dissolve is barely noticed. Just like tweening, good morphing animations cannot be fullyautomated. A skilled human is always required to produce qualitymorphing animations. The user must set the grid properly, and fine tunethe warping and dissolving speeds at various stages of the morph. Ittakes extensive tweaking of the values to determine what values and gridshould be applied to create a morph that “looks right.”Conclusion: Tweening with the aid of computers may have fallen out of favorwith the majority of animators, but has found new uses in transmittinglow-bandwidth animations over the internet. Morphing has recentlybecome very popular. Michael Jackson’s “Black or White” video inparticular has done a lot to popularize the use of morphing. Fewapplications in computer graphics are so simple, yet yield suchspectacular results.