Adaptive Linearization

Converts a bezier curve into a series of lines based on an acceptable error value (i.e. it will add more lines where the curve is curvier, and less lines if it's mostly straight ).

There are many areas where this can be useful. From 2D games to the animation of SVG graphics.

Playground

Playground on gh-pages

Basic Usage

    const al = new AdaptiveLinearization(lineConsumer);
    
    al.linearize(0,50,33,0,66,100,100,50, { id: 12 });

The lineConsumer function is a callback that will be called whenever a line should be drawn.

Line consumer

Each line consumer can take 5 parameters

• x1 - x-coordinate of the start point
• y1 - y-coordinate of the start point
• x2 - y-coordinate of the end point
• y2 - y-coordinate of the end point
• data - passed through from the last argument to linearize.

    function lineConsumer(x1,y1,x2,y2,data)
    {
        // ...
    }

Usage with svgpath

AdaptiveLinearization has a second method svgPathIterator that is a convenient way to linearize complete SVG paths with the svgpath (NPM "svgpath") library.

    const SVGPath = require("svgpath");
    const path = SVGPath("M0,50 C33,0 66,100 100,50").unarc().abs();

    const al = new AdaptiveLinearization(lineConsumer);

    path.iterate(al.svgPathIterator);
    
    

This does the same linearization as the basic example above. It can handle the following SVG path commands:

* M
* H
* V
* L
* C
* Q 

The svgPathIterator function passes the segment index from svgpath's iterate as data argument so it is available in the line consumer.

Most of the work in reducing all svg paths to that is done with the .unarc().abs() which get rids of arc sections by converting them to curves and converts everything to absolute coordinates.

SVG transforms

What this does not solve is the issue of transform directives in the SVG translating the paths. To be able to reproduce the exact same paths, we need to handle the transforms. There are two strategies.

First you can get rid of all transform attributes manually by editing the SVG or by using something like the Inkscape extension Apply transforms automatically.

You can also load the complete SVG document in either a browser or with something like jsdom and then apply all the transforms around each path with svgpath's transform method.

Options

const options = {
    
    /**
     * Approximation scale: Higher is better quality
     */
    approximationScale: 1,
    
    /**
     * Limit to disregard the curve distance at
     */
    curve_distance_epsilon: 1e-30,
    
    /**
     * Limit to disregard colinearity at
     */
    curveColinearityEpsilon: 1e-30,
    
    /**
     * Limit disregard angle tolerance
     */
    curveAngleToleranceEpsilon:  0.01,

    /**
     * Angle tolerance, higher is better quality
     */
    angleTolerance: 0.4,
    /**
     * Hard recursion subdivision limit
     */
    recursionLimit: 32,

    /**
     * Limit for curve cusps: 0 = off (range: 0 to pi)
     */
    cuspLimit: 0
};

Links

• svgpath on github
• Implementation based on Antigrain:Adaptive Subdivision of Bezier Curves