JSPM

  • Created
  • Published
  • Downloads 1200
  • Score
    100M100P100Q116535F
  • License MIT

Interpolate values on a Cardinal/Catmull-Rom spline curve

Package Exports

  • curve-interpolator

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (curve-interpolator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Curve Interpolator

A lib for interpolating values over a cubic Cardinal/Catmull-Rom spline curve.

Installation

npm install --save curve-interpolator

Usage

Reference the CurveInterpolator class:

// commonjs
const CurveInterpolator = require('curve-interpolator');

// es6
import CurveInterpolator from 'curve-interpolator';

Define controlpoints you want the curve to pass through and pass it to the constructor of the CurveInterpolator to create an instance:

const points = [
    { x: 0, y: 4 },
    { x: 1, y: 2 },
    { x: 3, y: 6.5 },
    { x: 4, y: 8 },
    { x: 5.5, y: 4 },
    { x: 7, y: 3 },
    { x: 8, y: 0 },
];

const interp = new CurveInterpolator(points);

You can now interpolate points by x, y or t:

// x
const y = interp.getYfromX(6);

// y
const x = interp.getXfromY(3.5);

// t - a value between 0 and 1, where  
//     t=0 is at the beginning of the curve and
//     t=1 is at the end of the curve
const point = interp.getPointAt(0.75);

// get a number of equally spaced points along the curve
const pointsOnCurve = interp.getPoints(500);

Graph

This is a simple graph showing a linear line drawn in blue between the control points and interpolated values as colored dots using the various interpolation functions.

Methods

Method Parameters Description
constructor() Create an instance of the curve interpolator class, i.e. const interp = new CurveInterpolator(points, tension);
points Array of objects containing x and y values
[tension=0] Number [0,1] to control tension of the curve. 0 = Catmull-Rom curve, 1=no curvage. Default is 0.
getYfromX() alias: x() Find the first value of Y that matches a given value of X on the curve.
y Number
[isNormalized=false] Set to true if you want to pass y as a value between 0 and 1, where y=0 represents the beginning of the curve on the y-scale and y=1 represents the end of the curve on the y-scale.
getXfromY() alias: y() Find the first value of X that matches a given value of Y on the curve.
x Number
[isNormalized=false] Set to true if you want to pass x as a value between 0 and 1, where x=0 represents the beginning of the curve on the x-scale and x=1 represents the end of the curve on the x-scale.
getPointAt() Returns a point object with values for x and y at a specific point t on the curve.
t A value between 0 and 1, where 0 is at the start point of the curve and 1 is at the end point, according to the length of the curve.
getPoints() Returns an array of points equally spaced along the curve.
divisions The number of segments to divide the curve into, where the number of points returned equals to divisions + 1 (start and end point of each segment).
getLength() Returns the length of the curve.

Note

This is still work in progress.

Credits

Parts of this lib is based on the spline curve implementation in Three.js. A big thanks to the author and contributors for a really awesome library!

License

MIT