All examples By author By category About


Custom Shape Tweening

This is an attempt at finding a way to make cleaner transitions between polygons. mbostock's block: Shape Tweening works excellently for morphing a shape into a circle, but not for morphing into smoething like a polygon. I was looking for a way to do something much like his other block: Superformula Tweening, but with the ability to pass coordinates for the new shape instead of control points for the superformula to make sense of.

The three biggest challenges were:

Finding the starting points for each path was simply done by looping through the incomming shape's points to find the closest point to the start of the outgoing shape's path. Then it's just a matter of changing the order of the incomming shape's points.

For matching the number of points, I created a linear scale using the length of the outgoing shape and plotted the necessary points along the incomming shape's path proportionally to where they were along the outgoing shape's path. This required using a hidden path element '#hiddenShape' in order to be able to compare the two before rendering the new shape. Most of this is done within the converPath() function.

And matching the orientation of the shape's points was done by using d3.polygonArea(). This tells you the orientation by being either positive or negative, so some logic at the end of convertPath() decides if it should return the array as-is, or reversed.

forked from alexmacy's block: Custom Shape Tweening