Yesterday I tackled the issue of morphing animation. As you might expect, morphing generates a path that is an interpolation of a source and destination path. My test subjects we’re these two innocent looking paths:

So we’re trying to get the shape on the left to morph into the shape on the right. The first attempt was, errr, “interesting”:

The second attempt was better. But, you know, better is a relative term …

A bit of tinkering later, it worked! And then I went nuts trying out different shapes and stuff. The result:

So that’s what we’ve got in the way of pretty pictures. Technical details below the cut.

Morphing works by a simple linear interpolation of the path segment coordinates. Thus, the only requirement is that the source and destination path have the same number of segments. The neat part is that morphing will work even if the segments are not of the same type. So Bezzy is able to interpolate a line into a curve and vice versa.

The keen-eyed reader will note that the third example (in the final image above) breaks this requirement. It morphs a pentagon into a square. I cheated. The right edge of the square is actually made up of two edges. It’s a simple change to make, and shows that this minor limitation can be easily overcome with a little bit of tweaking to the paths.

Morphing a line into another line is simple enough, as is morphing a curve into another curve. Morphing a line into a curve is a bit trickier though. My solution is to turn the line into a curve, and then do a curve-to-curve interpolation. I chose to set the control points on the line at 25% and 75% down the line.

It seems to work pretty well, but I’m curious to see what effects I could achieve by tweaking the position of the control points on the line.