Xmorph tutorial

by Michael J. Gourlay

Xmorph: Information Screen shots Examples Download


Xmorph is a program that allows the user to manipulate, read and write meshes; read, write, warp and dissolve images, and automatically generate a sequence of morphed images. Xmorph writes and manipulates truecolor images, and can handle images of arbitrary size.


The Xmorph web site has the software and data needed to run Xmorph and to go through this tutorial.

Instructions for compiling and installing Xmorph are included with the Xmorph source code.

From the Xmorph mjg-alien directory, download these files:

Starting Xmorph

Xmorph will accept a number of command line options.

Here are some command line options accepted by Xmorph:

Here are some command line options provided via the X toolkit:

Enter this command:

The Xmorph main window will appear.

Xmorph Main Window

The "Help" menu provides detailed tips on how to use Xmorph.

Reading image files

Xmorph file menu The next step is to choose two images, the start (or source) and finish (or destination) images. The image files must be in the Targa TrueVision TGA image file format. The reason Xmorph only accepts this image file format is that it is the only common image file format which supports truecolor images with opacity. There are many image manipulation packages which convert to and from the TGA image file format, including GIMP, xv, ImageMagick, and Photoshop. Xmorph's job is not to perform image file conversion; its job is only to morph images.

Xmorph source file dialog To read the source image, select the "File" menu from the menu bar, and select the "Open source image..." entry. A dialog box will pop up asking for a source image filename. Type in "mjg-head-440x450.tga" and press the "Okay" button. An image of a human face will appear in the left image panel of the Xmorph main window.

Note that the sizes of the two images must be identical. If an image of a different size is read, then the alternate image is reset. For example, if a source image with size X by Y is read, then a destination image of size W by Z is read (where X!=W or Y!=Z) then as soon as the destination image is read, the source image is reset. If you want to morph between two images which are not the same size, then you will have to rescale, crop or pad one or both of the images until they are both the same size. Such image manipulation would have to be performed by a program other than Xmorph.

Xmorph main window with face The image might be too large to fit into the image panel, but scrollbars will appear to allow the image to be panned. The Xmorph main window can be resized, and the left and right image panels can be resized individually. This allows very large images to be manipulated and viewed even on small screens.

Now read the destination image. From the "File" menu, select "Open destination image...". A dialog box will appear asking for a destination image file name. Type in "alien-head-440x450.tga" and press the "Okay" button. An image of an alien face will appear in the right image panel of the Xmorph main window.

An alternative way to read the image files is from the command line when starting Xmorph. To achieve roughly the same effect as the above steps, issue this command:

Xmorph main window with two faces

One benefit of providing Xmorph with the image files at the command line is that the Xmorph window automatically sizes itself to fit the images, without needing scrollbars. Another difference is that the initial number of mesh lines will be different. Whether or not this is desirable depends on the preference of the user. As explained below, the number and position of mesh lines and points can be changed manually. In fact, this is the main purpose of the Xmorph graphical user interface.

Each image panel image can be dimmed. From within the image panel, select the "Properties" menu, and toggle the "Dim Image" button. The corresponding image will be dimmed. The purpose of dimming an image is to make the mesh lines and points more easily visible.

When an image is dimmed, only its display within the Xmorph image panel is dim. When the image is written to a file, the original brightness is used.

The mesh lines and mesh points in each of the image panels can be turned on or off via buttons in the "Properties" menu for each image panel.

If your display is a grayscale or pseudo-color display (e.g. if your display can not display more than 256 colors) then the images Xmorph displays will not be identical to what is stored in the image files. The displayed images might be dithered, and will have lower display quality than the actual images. The images used internally by Xmorph, however, are the full color images. This means that the image files produced by Xmorph will be truecolor images, even if your display can not display them as such. The benefit is that Xmorph can be used on low-quality displays yet produce high-quality image files. The image files produced by Xmorph have no relation to the display quality. In fact, a companion program to Xmorph, called Morph, is a command-line-only version of Xmorph which has no image display features at all, and can be run on machines that do not have displays. This allows morphs to be performed offline, distributed across many machines or many processors. This feature is explained below.

Manipulating meshes

The main purpose of the image panels is to provide a way to manipulate control meshes. Drawn over each image are meshes. These meshes indicate features of each image which corresponds to features of the other image. This concept will be explained below by example.

There are three different meshes: The "source" mesh, the "destination" mesh, and the "tween" mesh. The user can manipulate mesh points in the source and destination meshes. The tween mesh, however, is a slave to the other two meshes, and is always somewhere between (hence the name "tween" mesh). The three different meshes each have a different color. Usually, the source mesh is green, the destination mesh is red, and the tween mesh is yellow. (It is possible, however, that other colors are used to designate the meshes, because Xmorph has a feature that allows people who are red-green colorblind to use other colors. This feature is explained in the Makefile, which is used to compile Xmorph.)

The objective is to manipulate the meshes to match features between the source and destination images. Mesh operations include adding and deleting horizontal or vertical mesh lines, and moving mesh points. The table shows what mouse and keyboard buttons to use to perform these operations.

move mesh point click with left mouse button, drag to new location, release mouse button.
add vertical mesh line click on image with middle mouse button
add horizontal mesh line click on image with right mouse button
delete vertical mesh line hold "shift" key, click on mesh point with middle mouse button
delete horizontal mesh line hold "shift" key, click on mesh point with right mouse button

One issue to be aware of is which mesh is manipulated. Note that each image panel has two sliders: warp and dissolve. The warp slider controls the tween mesh, which (as noted earlier) always lies somewhere between the source and destination meshes. Initially, the left image panel has the tween mesh set to the source mesh, and the right image panel has the tween mesh set to the destination mesh. The tween mesh position in each image panel controls which mesh is manipulated. If the tween mesh in a particular image panel is closer to the source mesh, then in that image panel the source mesh will be manipulated by the mouse controls listed in the table. Likewise, if the tween mesh in a particular image panel is closer to the destination mesh, then in that image panel the destination mesh will be manipulated by the mouse controls listed in the table. When moving mesh points, the mouse cursor will change colors to indicate which mesh (source or destination) is being manipulated.

The two image panels are redundant. Either image panel can be used to manipulate either mesh, or display either image. Both image panels have identical controls. The reason for having two image panels is to see more easily how mesh points correspond between two images. Aside from this benefit, there is no reason why two image panels are required.

Notice that when a mesh point is selected for being moved, it is highlighted in both the source and destination image panels. This makes it easier to identify how mesh points correspond to each other in the two images.

A very rough approximation in the person/alien example would be to use one mesh line to delineate each of the following features: the top, bottom, left and right of each head, and the top, bottom, left and right of the image frame. Such a mesh would have 4 vertical and 4 horizontal lines, and would vaguely match the outline shapes of each head during the morph. This would yield a very unsatisfying morph, however, since the mesh lines would not fit the head shapes very well, and other features, such as the locations and sizes of the eyes, lips, ears and nose would not match.

Xmorph main window with two faces with meshes A more refined approach is to identify features which should match, and use multiple mesh points to surround each feature. For example, in addition to having a mesh line at top, bottom, left and right of the head outline, also add a vertical mesh line for each eye, two vertical mesh lines to go on the left and right of the nose, and a vertical mesh line for the border between the hair and skin on each side. Also add horizontal mesh lines for the hair line at the top, the eyebrows, the top and bottom of the eyes, across the nostrils, above and below the lips, at the chin line and at the shoulders.

The meshes can (and should) be written to files. It is wise to save often, and to save multiple copies of the meshes to have a history of modifications.

A mesh can be read for an image even if the mesh was not originally intended for that image. This can be useful in a number of situations. For example, imagine that you want to morph two versions of the same pair of images, where the images are identical except that one version is scaled up or down. The meshes would then be identical except for an overall scale factor. In such a case, Xmorph can use the same mesh file for both sizes of the images.

Another case where it is useful to use a mesh for an image other than the originally intended image is when a morph is performed between two strings of moving images instead of two still frames. For moving images, the meshes for sequential frames would be only slightly different from each other, so the mesh for one frame would be a good starting place for the mesh of adjacent frames.

Note that if a mesh is read which has a different number of mesh lines than the current mesh, then the alternate mesh is reset completely, and the previous alternate mesh is destroyed. For example, if the current source mesh has M vertical and N horizontal lines, and then a destination mesh is read which has J vertical and K horizontal lines (where either M!=J or N!=K) then as soon as the destination mesh is read, the source mesh is reset to one with J vertical and K horizontal lines. It is therefore useful always to work with meshes in pairs instead of individually. If meshes already exist for two images, but those meshes have different numbers of mesh lines, and you want to use them together, then it will be necessary first to individually edit the meshes so that they have the same number of mesh lines before they can be used together at the same time.

Morphing images

Images can be morphed manually individually, or automatically as a sequence. Usually the automated morph sequence would be used to produce images for an animated morph, but manually morphing individual images gives the user more control over the morph parameters, and is useful for generating single in-betweener images, such as if you wanted to speculate on what a hybrid of two people might look like.

Read the source and destination images and create the meshes before performing any morphing.

Two controls for creating a morphed image are "warp" and "dissolve". "Warp" controls how the shape of each image is altered. "Dissolve" controls the cross-fade between the two warped images. These two processes combined constitute a "morph".

The warp part of a morph changes the shape of the images. The shape of both images is determined by the mesh associated with the original image, and the tween mesh. For example, the original shape of the "source" image is described by the "source" mesh, and the original shape of the "destination" image is described by the "destination" mesh. The "tween" mesh described the final shape of both images. In this way, the shape of both images is brought into the same shape, which is the shape described by the "tween" mesh.

Xmorph main window with two warped faces For example, if the tween mesh is set to the shape of the "source" mesh (i.e. if the "warp" slider is all the way to the left), then when the "source" and "destination" images are warped, the "source" image will be unchanged and the "destination" image will be reshaped into the shape described by the "source" mesh. Likewise, if the tween mesh is set to the shape of the "destination" mesh (i.e. if the warp slider is all the way to the right) and the images are warped, then the destination image will be unchanged and the source image will be reshaped into the shape described by the destination mesh.

Single morphed images

To manually create a single morphed image, move the "warp" slider to set the shape of the "tween" mesh, select the "Commands" menu within an image panel, and select the "Warp Image" button. Both images will be warped. This process can take several seconds or minutes, depending on the size of the images and the speed of the computer. Now move the "dissolve" slider to see the warped images.

To save a morphed image displayed in an image panel, select the "Commands" menu and select the "Save Image..." button. A dialog box will pop up asking for an image filename. Type in the name of the file you want use to to save the image. The image file will be written in the Targa TrueVision TGA image file format.

Morph sequence

Usually a morph is performed as a sequence of images which are later combined to form an animation. Xmorph can automate the morph sequence process.

Xmorph sets the values for the warp and dissolve parameters differently in time. The warp parameter changes linearly in time, but the dissolve parameter changes slowly at first, rapidly in the middle, and slowly at the end of the morph sequence. The reason for this is that the warping looks more plausible than the dissolving, so the dissolving is performed relatively rapidly in the middle of the morph sequence when both images are reshaped to about mid-way between the source and destination shapes.

An alternative way to generate a morphed images is to use the command-line program "Morph" which accompanies Xmorph. After the meshes have been generated, execute "morph" once for each image:

where SRC_IMG is the source image filename, DST_IMG is the destination image filename, SRC_MESH is the source mesh filename, DST_MESH is the destination mesh filename, WARP is the warp parameter (between 0 and 1), and DISSOLVE is the dissolve parameter (between 0 and 1).

Animating the morph sequence

Xmorph morph animation To animate the morph sequence, a program other than Xmorph has to be used. Xmorph generates the morphed images but does not create a consolidated animation file. The reason for this missing feature is that there are simply far too many options for animations: MPEG (multiple versions), motion JPEG (many nonstandard varieties), animated GIF, QuickTime (many versions), many forms of digital video, and so on. Just as Xmorph leaves to other programs the task of image file conversion, Xmorph also leaves to other programs the conversion from images to movies.

Still, for the purposes of this tutorial, let's assume you have a Unix machine, the NetPbm utilities, and whirlgif. Convert each morphed image from TGA to GIF like this:

Then combine the GIF images into a single animation:

Michael J. Gourlay / gourlay at colorado-research dot com