DOCSEARCHbyAlgolia
Submit Docs

flubber

repository·master·Indexed 27 days ago

https://github.com/veltman/flubber

A library for smoothly interpolating and animating between 2D shapes, such as SVG paths or arrays of points. It provides 'best-guess' interpolation to prevent jumps and inversions when shapes lack a direct one-to-one correspondence. Features include tools for interpolating between single or multiple shapes (separate, combine, interpolateAll), as well as specialized functions for transitioning to and from circles and rectangles.

Tokens
2.9K
Snippets
7
Records
28
Agent score
90%

What's inside flubber

  1. Import flubber

    master

    Depending on your environment, use the following syntax to import flubber:

    Node.js (Classic):

    var flubber = require("flubber");

    ES6 Modules:

    import { interpolate } from "flubber";
    import { interpolate } from "flubber"

  3. Interpolate between two arrays of shapes with interpolateAll()

    master

    Use flubber.interpolateAll(fromShapeList, toShapeList [, options]) to interpolate between two arrays of shapes of the same length. Shapes are matched by index (the first item in fromShapeList morphs into the first item in toShapeList, etc.).

    Options: Same as flubber.interpolate() and flubber.separate() (including the single option).

  4. Interpolate between one shape and multiple shapes with separate()

    master

    Use flubber.separate(fromShape, toShapeList [, options]) to interpolate between a single shape and an array of multiple shapes.

    Arguments:

    • fromShape: A ring or SVG path string.
    • toShapeList: An array of rings or SVG path strings.

    Options:

    • single (boolean, default: false):
      • If false, returns an array of n interpolator functions (where n is the length of toShapeList).
      • If true, returns a single interpolator that combines everything into one giant path string or one big array of rings.

    Example (Multiple elements):

    var interpolators = flubber.separate(triangle, [square, otherSquare]);
// interpolators is an array of two functions
    var interpolators = flubber.separate(triangle, [square, otherSquare]);

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

  5. Transform from a rectangle with fromRect()

    master
    Use flubber.fromRect(x, y, width, height, toShape [, options]) to interpolate from a rectangle with the upper-left corner at [x, y] and dimensions width x height to a target shape. This is the reverse of toRect().

  6. Split path string with splitPathString()

    master

    A helper function that takes an SVG path string (which may contain multiple shapes) and splits it into an array of individual one-shape path strings.

    flubber.splitPathString("M1,1 L2,1 L1.5,2Z M3,3 L4,3 L3.5,4 Z");
// Returns ["M1,1 L2,1 L1.5,2Z", "M3,3 L4,3 L3.5,4 Z"]

  7. Transform to a rectangle with toRect()

    master

    Use flubber.toRect(fromShape, x, y, width, height [, options]) to interpolate from an arbitrary shape to a rectangle with the upper-left corner at [x, y] and dimensions width x height.

    Options: Same as flubber.interpolate().

    var interpolator = flubber.toRect(triangle, 10, 50, 100, 200);

  9. Transform to a circle with toCircle()

    master

    Use flubber.toCircle(fromShape, x, y, r [, options]) to interpolate from an arbitrary shape to a circle centered at [x, y] with radius r.

    Options: Same as flubber.interpolate().

    var interpolator = flubber.toCircle(triangle, 100, 100, 10);

  10. Interpolate between two shapes with interpolate()

    master

    Use flubber.interpolate(fromShape, toShape [, options]) to create an interpolator function. This function accepts a value t from 0 to 1 and returns the in-between shape.

    Input Formats:

    • An SVG path string (e.g., "M100,100 L200,100 L150,200Z")
    • An array of [x, y] points (a "ring") (e.g., [[100, 100], [200, 100], [150, 200]])

    Options:

    • string (boolean, default: true): Whether to output results as an SVG path string or an array of points.
    • maxSegmentLength (number | false | Infinity, default: 10): Controls smoothness. Lower values are smoother but slower. Set to false or Infinity for no smoothing.

    Note: If a path string includes holes or multiple shapes, only the first outer shape is used.