Transitioning between shapes with javascript or d3.js

Question

I am trying to write a program that steps between two shapes created in Adobe Illustrator using javascript. I was able to accomplish this by exporting the shapes as SVG and then using Raphael.js:

http://jsfiddle.net/ZLfkZ/4/

However, the interpolations between the two shapes look pretty bad. I've learned from researching this topic that it is preferable to interpolate using algorithms that use b-spline curves and add or subtract the vertices where appropriate, which I am assuming the SVG standard used by Raphael does not do. I am wondering if it is possible to accomplish this with d3.js, since I noticed it has interpolation options in it's SVG documentation and "basis" seems to use b-spline. Can my jsfiddle be done in d3 with proper interpolation?

Alternatively, is there a better way to approach this? I may have gone down the wrong path by using SVG, since the resulting path will be rendered in a canvas anyway. I originally chose SVG because the path would be easy to store as a string. I noticed there is an Illustrator to canvas plugin that exports canvas commands, would it be possible to interpolate those? Should I be capturing the shape from illustrator as an array of points somehow? Any insight would be appreciated!

Answer 1

I'm not aware of a great off-the-shelf solution for this in JavaScript; implementing the algorithms in the papers you linked looks fairly time-consuming (though fun!). Depending on the specific shapes you are trying to interpolate, you may be able to get away with a simpler solution.

Typically you need to resample either the source or target shape (or both) so they have the same number of control points. Once you've resampled the shapes, you can use standard linear interpolation, such as d3.interpolate.

One way to resample is to measure the distance of each control point in the source shape along its circumference, and then resample the target shape at equivalent (scaled) distances. Here is a demonstration of this technique interpolating between California and a circle:

• http://bl.ocks.org/3081153

Linear interpolation has a tendency to self-intersect, but for mostly convex shapes, it works fairly well and is fast.

Answer 2

There's a new solution to this using the superformular plugin : http://bl.ocks.org/mbostock/1020902