block by veltman c582a31d347e04dd75d5331b0074558e

Jigsaw morphing

Full Screen

Tweening between a single polygon (California) and multiple polygons (Hawaii). The basic steps:

  1. Draw a relaxed Voronoi diagram over the single polygon with a bunch of random points.
  2. Traverse the graph and assign cells to islands one at a time, keeping the groups contiguous and roughly proportional in area.
  3. Convert the cells to a topology using Mike Bostock’s method and merge each group.
  4. Align the resulting puzzle piece polygon with the destination island for smoother animation using this method.

This isn’t totally robust - bad Voronoi luck can result in a weird clipping result that leaves out a chunk. But it works… almost all the time? The breadth-first search of all the cells is also way slower than it needs to be. A hex grid would probably be a lot simpler.

See also: Smoother polygon transitions, Voronoi Topology

index.html

HI.json

polybool.min.js