3

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!

2 Answers 2

6

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:

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

3
  • Thanks for your response! I understand what you are saying, however I am still very new to d3 and am having trouble implementing it. I was able to get this far based on your example, but it looks like I am resampling incorrectly. All the SVG shapes I plan on importing will be these little blob critters, so I figured the circle function should work ok if I can figure out how to pass in coordinates from SVG paths... if that is what I am supposed to be doing.
    – Saiato
    Aug 9, 2012 at 8:14
  • Well, you’ve got a curved path rather than polygon coordinates as in my example, so that adds some additional difficulty. You could use the SVG path element’s getTotalLength and getPointAtLength methods to sample the shapes at regular intervals and convert them to polygons (piecewise linear segments).
    – mbostock
    Aug 9, 2012 at 14:28
  • That makes sense! I'm sorry for having so much trouble, but I am still so new to d3. I tried converting my path into a polygon and then replacing california.json from your example with my JSON. However, it no longer renders anything.var pathone = $("svg path")[0]; var polyone = [[]]; for(var i = 0; i < pathone.getTotalLength(); i++){ var coordinate = [pathone.getPointAtLength(i).x, pathone.getPointAtLength(i).y]; polyone[0].push(coordinate); } var polygonone = {}; polygonone["type"] = "Polygon"; polygonone["coordinates"] = polyone;
    – Saiato
    Aug 12, 2012 at 22:31
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.