npm promotes metadefinitions

    gm-bezier

    1.6.0 • Public • Published

    bezier

    Bezier Curve functions in a handy CommonJS module (npm/browserify style).

    Supports Linear, Quadratic and Cubic Bezier curves. By default curves are Cubic.

    Also supports 'Find the value of Y at X(t)' functionality via an optionally built lookup table of a configurable number of samples. Used in this way it is advisable to precompute your curves and store them for later use rather than generating from scratch each time.

    Installation

    Browserify/NPM

        $ npm install --save gm-bezier
      var bezier = require('gm-bezier');

    API

    var Bezier = require('bezier').Bezier;
    
    // create a default zeroed curve.
    var curve = new Bezier();
    

    Create a new Bezier Curve.

    // create a curve initialised with a config object
    var curve = new Bezier({ c1 : c1, c2 : c2, c3: c3, c4: c4 });
    

    .c1()

    curve.c1( coords )
    

    Set C1. C1 is the start point of the curve.

    coords can come in the form { top: number, left : number} or { x : number, y :number} or[number, number]`

    .c2()

    curve.c2( coords )
    

    Set C2. C2 is the first control point.

    coords can come in the form { top: number, left : number} or { x : number, y :number} or[number, number]`

    .c3()

    curve.c3( coords )
    

    Set C3. C3 is the second control point.

    coords can come in the form { top: number, left : number} or { x : number, y :number} or[number, number]`

    .c4()

    curve.c4( coords )
    

    Set C4. C4 is the end point of the curve.

    coords can come in the form { top: number, left : number} or { x : number, y :number} or[number, number]`

    .buildLookup( [Optional: samples] )

    curve.buildLookup() // builds a lookup table of 1000 samples
    curve.buildLookup(100) // builds a 100 sample lookup table
    

    Iterates through the curve recording the value of X and Y. This allows you to then attempt to get the approximate value of Y for any particular value of X.

    .findYAtX( x )

    curve
      .buildLookup()
      .findYAtX(0.5) // === 0.334453
    

    Find the approximate value of y = x(t). The more samples in the lookup table, the greater the accuracy and more CPU intensive it becomes to match.

    .point()

    curve.point( percent ) 
    

    percent being a floating point number between 0 and 1, representing the start and end of the curve. Returns an object: {x : val, y: val}.

    .pointArray()

    curve.pointArray( percent )
    

    percent being a floating point number between 0 and 1, representing the start and end of the curve. Returns an array: [x, y].

    .pointCss()

    curve.pointCss( percent )
    

    percent being a floating point number between 0 and 1, representing the start and end of the curve. Returns an object: { top: val, left: val}.

    .isCubic()

    curve
      .isCubic()
      .c1( c1 )
      .c2( c2 )
      .c3( c3 )
      .c4( c4 )
    

    Explicitly sets the curve back to Cubic. This is the default, though. Doesn't need calling.

    .isLinear()

    curve
      .isLinear()
      .c1([10,10])
      .c2([20,20])
    

    Linear 'curve' mode - a straight line from C1 to C2.

    .isQuadratic()

    curve
      .isQuadratic()
      .c1( c1 )
      .c2( c2 )
      .c3( c3 )
    

    Quadratic curve mode. Only three control points required.

    Test

    test/testrunner.html can be opened in a local browser assuming you have installed the npm deps.

        npm install
        grunt test

    License

    MIT

    Install

    npm i gm-bezier

    DownloadsWeekly Downloads

    0

    Version

    1.6.0

    License

    MIT

    Last publish

    Collaborators

    • charlottegore