flubber

Flubber

Some best-guess methods for smoothly interpolating between 2-D shapes.

Flubber in action

Why?

Let’s say you want to animate between two SVG paths or canvas shapes in a visualization. If you plug in their coordinates or their path strings to something like d3.transition(), it might work if the shapes correspond to each other really well – for example, turning a triangle into a different triangle. But once your shapes don’t really correspond, you’ll get unpredictable results with weird inversions and sudden jumps.

The goal of this library is to provide a best-guess interpolation for any two arbitrary shapes (or collections of shapes) that results in a reasonably smooth animation, without overthinking it.

Installation

In a browser (exposes the flubber global):

<script src="https://unpkg.com/flubber@0.3.0"></script>

With NPM:

npm install flubber

And then import/require it:

var flubber = require("flubber"); // Node classic
import { interpolate } from "flubber" // ES6

How to use

Flubber expects a shape input to be either an SVG path string or an array of [x, y] points (a “ring”):

"M100,100 L200,100 L150,200Z" // A triangle as a path string
[[100, 100], [200, 100], [150, 200]] // A triangle as a ring

Flubber methods return interpolators, functions that you can call later with a value from 0 to 1 to get back the corresponding shape, where 0 is the beginning of the animation and 1 is the end.

Using D3, usage could look something like:

var triangle = [[1, 0], [2, 2], [0, 2]],
    pentagon = [[0, 0], [2, 0], [2, 1], [1, 2], [0, 1]];

var interpolator = flubber.interpolate(triangle, pentagon);

d3.select("path")
    .transition()
    .attrTween("d", function(){ return interpolator; });

Without D3, usage might look something like this:

// Mixing and matching input types is OK
var triangle = "M1,0 L2,2 L0,2 Z",
    pentagon = [[0, 0], [2, 0], [2, 1], [1, 2], [0, 1]];

var interpolator = flubber.interpolate(triangle, pentagon);

requestAnimationFrame(draw);

function draw(time) {
    var t = howFarAlongTheAnimationIsOnAScaleOfZeroToOne(time);
    myPathElement.setAttribute("d", interpolator(t));
    if (t &lt; 1) {
        requestAnimationFrame(draw);
    }
}

Note: it doesn’t matter whether your ring has a closing point identical to the first point.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.