This package has been deprecated

Author message:

Package no longer supported. Contact [e-mail] for more info.

cardinal-spline-js

IMPORTANT message to users of Cardinal spline: this is the last update of Cardinal spline - ever. My apologies to those who are using it, but I cannot spend (waste) time developing it (or any other "open source") anymore, for personal reasons.

In part it's also because I can't pretend there isn't a [cultural] war going on, not just for our minds. I can no longer support companies and organizations, by using their services and products, that embrace and are working hand in hand trying to form a so-called "one world government" (their words; or "communist hell v5.0 in rosy wrapping and utopian "happiness"." - my words) enforcing policies and agenda upon everyone through "political correctness", divide and conquer, censorship, labeling, harassment, doxxing, secrecy, lies, deception, abuse and even violence - through means such as mainstream media, social tech platforms, "education" or other.

This is therefor also, albeit a small in this context, protest against this long ongoing agenda and its "useful idiots" (here used as an historical expression), and particularly in this case the Silicon Valley tech et al. I encourage anyone with more than two brain cells to take a long moment to think it through, check history, research, educate yourself, turn off the circus noise and start do your own thinking.

Although these groups like to pretend their cause is very popular; it's not - they are a minority with big horns, money and misled followers. If you are aware of what goes on I encourage you also to speak out or take some form of [non-violent] action (while we still can...).

---

Cardinal spline

A Cardinal spline (basically a Catmull-Rom with a tension option) implementation for JavaScript/HTML5 which creates an interpolated smooth curve through each point pair in the given array. There is no need to specify control points.

Additional options are to provide a closed spline as well as segment resolution (between each point) and of course a tension value.

The archive comes with three separate versions for the sake of convenience:

curve.js
Canvas 2D context extension. Call curve() on the context (ctx.curve(...))

curve_func.js
If you prefer not to use an extension then this version provide a pure function that takes the context as an argument instead.

curve_calc.js
Just the internal function that calculates the points. Does not draw anything.

As well as their minified equivalent. There are no dependencies between these implementations.

Install

• Git using HTTPS: git clone https://gitlab.com/epistemex/cardinal-spline-js.git
• Git using SSH: git clone [e-mail]:epistemex/cardinal-spline-js.git
• NPM: npm install cardinal-spline-js (curve_calc.js / curve_func.js)

Usage

curve.js

Make sure the script is loaded before a 2D context is obtained from the canvas element.

Then use curve() as any other method/function on the context -

Examples

ctx.moveTo(points[0], points[1]);  // optionally move to first point
ctx.curve(points);                 // add cardinal spline to path
ctx.stroke();                      // stroke path

will draw the points in the array which are arranged in the following manner:

var points = [x1, y1,  x2, y2, ... xn, yn];

An optional tension value can be given (default: 0.5):

ctx.curve(points, 0.5);            // sets tension [0.0, 1.0] +/-

a segment resolution value (default: 25):

ctx.curve(points, 0.5, 25);        // points in each segment

The curve can be drawn closed. All arguments must be given in this case (default: false (open)):

ctx.curve(points, 0.5, 25, true);  // make a closed loop

The function returns a new (typed) array with the spline points which can be used for tracking, calculate length and so forth. The values are in floating points:

var splinePoints = ctx.curve(points);

curve_func.js

If you use the function file instead the arguments will be the same as above except that the context is passed in as the first argument and then the function is instead called as:

ctx.moveTo(points[0], points[1]);  // optionally move to first point
curve(ctx, points);                // add cardinal spline to path
ctx.stroke();                      // stroke path

Also this variant returns a spline point array.

curve_calc.js

If you just want to calculate the spline points without drawing anything, you can use the curve_calc.js file and call (please observe that the name has been changed to better reflect its purpose):

var splinePoints = getCurvePoints(points, ...);

Context is not required with this function.

In Node.js

Require the package after installing it using npm, then:

var getCurvePoints = require("cardinal-spline-js").getCurvePoints;
var outPoints = getCurvePoints(inPoints);

Requirements

A modern HTML5 compliant browser with support for Typed Arrays and JavaScript enabled. Except from curve_calc.js the canvas element and a 2D context is required as well.

License

Released under MIT license.

© 2013-2018 Epistemex