A few months ago, I tried to implement a simple class in AS 3.0 to do morphing between two images. I think it could be interesting and cool to share it and explain a bit how it works. You can see below a wonderful geek’s example to illustrate the final result :

Principes

Morphing is an image processing to operate a metamorphosis between two images. I guess until there I teach you nothing .  A simple way to transform an image to an other is to do cross-dissolving. It is just a pixel by pixel color interpolation to fade from one image to an other. But the result is usually bad because the two images are often not aligned and just cross-dissolving gives a “double-image” effect. If you think of an example of two faces where eyes, mouth, etc are not at the same positions you can easily understand the problem of misaligned regions when you simply blend the two images. In order to overcome this problem and to build a fluid transition you have to firstly warp/distort the two images. Warping determines the way in which the pixels in one image should be mapped to the pixels in the other image. It allows a kind of “shape matching” between the two image at each instant t of the morphing process.

Below is a little schema of the process for t = 0.5 (t is between 0 and 1):

Warping

Warping is the difficult step of morphing. There are a lot of techniques available. For my part I used a technique based on a triangular mesh because it works well and is easy to implement with the Flash drawing API. Let see how it works:

• Firstly I find some corresponding points between the two images:

• Then according those fields of points I can build the initial triangular mesh for each images. To achieve that I use the Delaunay triangulation algorithm. Some talented developers have already explained and  implemented it in AS 3.0. You can find one here from Zachary Forest Johnson or  here from  Nicoptère.

• Now I have my two initials meshes I can interpolate an intermediate mesh for each intermediate image of the morphing process. The final step is to texture each triangle of the mesh according the triangle transformation and the initial triangle texture.

As I use the Flash drawing API to texture my triangles I just need to find a transformation matrix for each triangles. In fact a way to achieve” triangle texturing” has already been implemented here by the magic André Michelle. It’s the same method is  used in a lot of  Flash 3d engines. This method is just a combination of transformation.  I recently found this well-done paper made by renderhjs and posted on the Flashkit board. You should read if you want to understand the method.

Cross-dissolving

This is the easiest step. Just blend the two warped images in setting the alpha of each images according the t parameter of the morphing process. First image alpha = 1 and the second image (on the first) alpha = t.

Application

Demo Just a little Flex application to edit images meshes and test the morphing

Sources:

Morpher.as The class to compute the morphing intermediate images

MeshTriangle.as The class to build a mesh triangle. Each point of the triangles is referenced by the index of the points in an array of points.

Mesh.as The class which builds a valid mesh object used by the Morpher class. It is built by an array of poinst and an array of MeshTiangle object built with thoses points.

Now you can try by yourself with different images,  and have fun!

Tags: bitmapdata, delaunay, morphing, texture, warping

This entry was posted on Sunday, May 10th, 2009 at 7:01 pm and is filed under actionscript, image processing. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.