Simple morphing animation between two images

Question

I'm looking to implement a simple morphing animation between two images.

Here's a simple demo of what I'm trying to create: http://i.imgur.com/7377yHr.gif

I'm pretty comfortable with Objective-C and JavaScript but since the concepts and algorithms are abstract, I'm more than willing to see examples in any language or framework.

I would like to know how hard it would be to tackle this -- it doesn't have to be exact but as long as it gives the impression of a morph I'll be satisfied.

Where would I start?

Answer 1

It seems like in your example is being used a combination of mesh wrap morphing and cross dissolve morphing. Mesh morphing can be tricky and as far as I know it requires a manual input (defining the mesh), so depending on what you want to do it might not be suitable for you.

If you are looking for a cheap technique (in terms of effort), probably just doing cross dissolve would work for you, since is very easy to implement. You just need to combine both images by increasing the alpha of the target image and decreasing the alpha on the origin image.

These articles give an overview of the techniques:

[PDF] http://css1a0.engr.ccny.cuny.edu/~wolberg/pub/vc98.pdf

[PDF] http://www.sorging.ro/en/member/serveFile/format/pdf/slug/image-morphing-techniques

[PDF] http://cs.haifa.ac.il/hagit/courses/ip/Lectures/Ip05_GeomOper.pdf

The last link comes from a comment in a similar question: Morphing, 3 algorithms, image processing