Header image
Ph.D. Student  

Morph animation

This project demonstrates a deformation of a image as well as a morph between two images. I used the cubic-fit version of Jareks mesh-warp and tweaked a little bit to give it realtime performance. I don't use the cg version, cause I didn't like the global nature of it.
I used a sample movie and pictures from Elastic Reality for inspiration, it is the 'president-warp'. This warp is rather complicated. We have a clear silouhette, the silouhettes differ very much, and both drawings have lots of patterns that could be easily destroyed in the blending step. Furthermore there are elements in one picture you don't see in the other.

Source picture:

Destination picture:


There are two different modes implemented, a twister mode, which is best suited for global deformations, and which was used to make the cartoon morphs and a bezier curve mode, inspired by Avid's Elastic Reality from 1999, which allows to control the movement very easy but also accurate. You can switch between both modes by pushing the button on the right.

Getting started

To see the bezier warp in action, press 'x' to load, 'c' to build the constrains and 'a' to animate. Switch the different views with 'p'.

Twister mode

Click somewhere to add a new twister gizmo. Now you can move it by draging the center or change the orientation with the blue handle. You can also change the area of interest, where the decay is applied. The decay is modeled by the cos-square function given by Jarek's paper.
  • a starts the animation
  • i inverts the animation
  • m makes a movie in application mode


The Bezier-mode is more sophisticated and the main part of the program. Click the 'new curve button to create a new curve. Place the control points with the mouse and hit enter to add the curve and backspace to dismiss it. Afterwards by clicking on the 'adjust curve' mode you can adjust the tangents and the control points, or add new points by clicking on the highlighted mid-points. You can also add anytime control points (not related to any curve) by just clicking on the image. You can drag them to their destination. Switching between source and destination can be obtained by hitting 'p'. To use the bezier-curves, press 'c' and the curves will be sampled based on the curve distance and the specific control points will be introduced. Shortcuts:
  • a starts the animation
  • p switches between first image, overlay of both and second image. When animating a fourth mode called warping is also available
  • o Switches between source and destination. This is to place control points and specify their trajectory
  • m makes a movie in application mode
  • c extract control points from bezier-curves


  • z save your work (does not work online)
  • x load your work

[ Movie Cinepak encoded (8MB) | Movie Indeo 4.5 encoded (3MB) | applet page ]
And the original sample movie from a Elastic Reality tutorial, the quality they are able to produce is just amazing.
[ Original movie (2 MB) ]