block by alexmacy 50d4ab8dd53d13a00d5d8f1b6393f083

United States of Voronoi Tweening

Full Screen

This is another version of the shape tweening from this block. Inspired by Jason Davies’ United States of Voronoi.

The transition I had previously used for shape tweening plots the points along the new shape proportionally to where they were along the original shape. This potentially results in rounded or skipped corners, so I had to figure out a new way to do it.

The new transition used here draws the destination shapes by plotting the points form the old shape equally along each side of the new shape. The result isn’t always as clean of a transition, but it’s still pretty smooth and the resulting shape is free from any rounded or skipped corners.

I also put both transition functions in the standalone file ‘shapeTween.js’ to be able to easily reuse it later.

index.html

shapeTween.js