Repository: epistemex/cardinal-spline-js Branch: master Commit: dc3206805a13 Files: 14 Total size: 368.4 KB Directory structure: gitextract_f0v551o_/ ├── .github/ │ └── FUNDING.yml ├── CHANGE.log ├── MIT-LICENSE.md ├── README.md ├── demos/ │ └── demo.html ├── docs/ │ ├── global.html │ ├── index.html │ ├── scripts/ │ │ ├── docstrap.lib.js │ │ └── toc.js │ └── styles/ │ └── sunlight.default.css ├── package.json └── src/ ├── curve.js ├── curve_calc.js └── curve_draw.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .github/FUNDING.yml ================================================ # These are supported funding model platforms github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] patreon: # Replace with a single Patreon username open_collective: # Replace with a single Open Collective username ko_fi: # Replace with a single Ko-fi username tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry liberapay: # Replace with a single Liberapay username issuehunt: # Replace with a single IssueHunt username lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry polar: # Replace with a single Polar username buy_me_a_coffee: # Replace with a single Buy Me a Coffee username thanks_dev: # Replace with a single thanks.dev username custom: ['https://paypal.me/KenNil'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] ================================================ FILE: CHANGE.log ================================================ Change log for Cardinal Spline JS --------------------------------- 3.0.0 Changes from this version can be seen in the git log itself. 2.3.8 BMP: Bumping version for NPM to obtain correct readme. 2.3.7 BMP: Bumping version for bower. 2.3.6 ADD: Support empty point array as input (issue #5). Returns empty Float32Array. 2.3.5 ADD: Documentation only (# of points required). Patch touched for bower (new tag). 2.3.4 ADD: Node.js support for curve_func.js (added by @asmuelle) 2.3.3 ADD: Node.js support for curve_calc.js IMP: Minor speed improvement FIX: Docs stated default segments value was 20, corrected to 25. 2.3.1 FIX: Made the extension more "bullet-proof" in case other extensions should happen to have the same name. FIX: JSDoc return type fixed (Array -> Float32Array). FIX: Minor touch-ups/improvements ADD: Added two new file versions of the implementation - one pure function if you don't feel comfortable using extensions, as well as a pure mathematical function to return a point array for the spline without drawing anything (canvas not required with this version). 2.3 CHG: Using typed arrays also for resulting array (Float32) CHG: Default segment value is now 25 instead of 20 (dynamic approach is being considered). IMP: Speed improvements FIX: Fixed double point entries in result array 2.2 IMP: Using typed arrays internally for cached tension values for speed improvement REM: A left over and unnecessary console.log removed 2.1.1 FIX: When closed, length of close array was still reflecting total length internally resulting in empty entries as the closed section is calculated separately. 2.1 ADD: New option: closed loop FIX: End point wasn't properly considered 2.0 ADD: Optimized inner loop with a caching step CHG: Removed redundant code CHG: Cleaned up var declarations CHG: Removed internal moveTo() to conform better to context behavior in general (c) Epistemex 2013-2015 License: MIT ================================================ FILE: MIT-LICENSE.md ================================================ The MIT License (MIT) Copyright (c) 2013-2018, 2024 Epistemex Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ Cardinal spline =============== A Cardinal spline (basically a Catmull-Rom with a tension option) implementation for JavaScript which creates an interpolated smooth curve through each point pair in the given array. There is no need to specify control points. ![Demo snapshot](https://i.imgur.com/5e69T5C.png) Additional options are to provide a closed spline as well as segment resolution (between each point) and of course a tension value. _Help keep the project alive by supporting the developer:_ [![PayPalMe](https://github.com/epistemex/transformation-matrix-js/assets/70324091/04203267-58f0-402b-9589-e2dee6e7c510)](https://paypal.me/KenNil) 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_draw.js**
If you prefer not to use an extension then this version provides a clean 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://github.com/epistemex/cardinal-spline-js.git` - Git using SSH: `git clone git@github.com:epistemex/cardinal-spline-js.git` - NPM: `npm install /downloads/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_draw.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 Tip: This variant also 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: const getCurvePoints = require("cardinal-spline-js").getCurvePoints; const outPoints = getCurvePoints(inPoints); or using ES5 module: import { getCurvePoints } from './path/to/curve_calc.js' const 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](http://choosealicense.com/licenses/mit/). *© 2013-2018, 2024 Epistemex* ![Epistemex](https://i.imgur.com/wZSsyt8.png) ================================================ FILE: demos/demo.html ================================================ Canvas cardinal (smooth) curve extension - Epistemex

Cardinal spline for canvas

Draw a smooth curve (cardinal spline, or Catmull-Rom with tension option) through a point set with open or closed end, variable tension and number of segments. The implementation is highly optimized for performance still preserving quality.

0.5 25
© by Epistemex. Cardinal spline is licensed with a MIT license.
================================================ FILE: docs/global.html ================================================ cardinal-spline-js Global

Global

Methods

curve(ctx, points, tension, numOfSeg, close) → {Float32Array}

Draws a cardinal spline through given point array. Points must be arranged
as: [x1, y1, x2, y2, ..., xn, yn]. It adds the points to the current path.

There must be a minimum of two points in the input array but the function
is only useful where there are three points or more.

The method continues previous path of the context. If you don't want that
then you need to use moveTo() with the first point from the input array.

The points for the cardinal spline are returned as a new array.

Parameters:
Name Type Argument Default Description
ctx CanvasRenderingContext2D

context to use

points Array

point array

tension Number <optional>
0.5

tension. Typically between [0.0, 1.0] but can be exceeded

numOfSeg Number <optional>
25

number of segments between two points (line resolution)

close Boolean <optional>
false

Close the ends making the line continuous

Returns:

New array with the calculated points that was added to the path

Type
Float32Array

getCurvePoints(points, tension, numOfSeg, close) → {Float32Array}

Calculates an array containing points representing a cardinal spline through given point array.
Points must be arranged as: [x1, y1, x2, y2, ..., xn, yn].

There must be a minimum of two points in the input array but the function
is only useful where there are three points or more.

The points for the cardinal spline are returned as a new array.

Parameters:
Name Type Argument Default Description
points Array

point array

tension Number <optional>
0.5

tension. Typically between [0.0, 1.0] but can be exceeded

numOfSeg Number <optional>
25

number of segments between two points (line resolution)

close Boolean <optional>
false

Close the ends making the line continuous

Returns:

New array with the calculated points that was added to the path

Type
Float32Array

================================================ FILE: docs/index.html ================================================ cardinal-spline-js Index
Index

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.

Demo snapshot

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 git@gitlab.com:epistemex/cardinal-spline-js.git
  • Bower: bower install cardinal-spline-js
  • 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. You can use this class in both commercial and non-commercial projects provided that full header (minified and developer versions) is included.

© 2013-2018 Epistemex

Epistemex


================================================ FILE: docs/scripts/docstrap.lib.js ================================================ !function(a,b){function c(a){var b=a.length,c=fb.type(a);return fb.isWindow(a)?!1:1===a.nodeType&&b?!0:"array"===c||"function"!==c&&(0===b||"number"==typeof b&&b>0&&b-1 in a)}function d(a){var b=ob[a]={};return fb.each(a.match(hb)||[],function(a,c){b[c]=!0}),b}function e(){Object.defineProperty(this.cache={},0,{get:function(){return{}}}),this.expando=fb.expando+Math.random()}function f(a,c,d){var e;if(d===b&&1===a.nodeType)if(e="data-"+c.replace(sb,"-$1").toLowerCase(),d=a.getAttribute(e),"string"==typeof d){try{d="true"===d?!0:"false"===d?!1:"null"===d?null:+d+""===d?+d:rb.test(d)?JSON.parse(d):d}catch(f){}pb.set(a,c,d)}else d=b;return d}function g(){return!0}function h(){return!1}function i(){try{return T.activeElement}catch(a){}}function j(a,b){for(;(a=a[b])&&1!==a.nodeType;);return a}function k(a,b,c){if(fb.isFunction(b))return fb.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return fb.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(Cb.test(b))return fb.filter(b,a,c);b=fb.filter(b,a)}return fb.grep(a,function(a){return bb.call(b,a)>=0!==c})}function l(a,b){return fb.nodeName(a,"table")&&fb.nodeName(1===b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function m(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function n(a){var b=Nb.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function o(a,b){for(var c=a.length,d=0;c>d;d++)qb.set(a[d],"globalEval",!b||qb.get(b[d],"globalEval"))}function p(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(qb.hasData(a)&&(f=qb.access(a),g=qb.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;d>c;c++)fb.event.add(b,e,j[e][c])}pb.hasData(a)&&(h=pb.access(a),i=fb.extend({},h),pb.set(b,i))}}function q(a,c){var d=a.getElementsByTagName?a.getElementsByTagName(c||"*"):a.querySelectorAll?a.querySelectorAll(c||"*"):[];return c===b||c&&fb.nodeName(a,c)?fb.merge([a],d):d}function r(a,b){var c=b.nodeName.toLowerCase();"input"===c&&Kb.test(a.type)?b.checked=a.checked:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}function s(a,b){if(b in a)return b;for(var c=b.charAt(0).toUpperCase()+b.slice(1),d=b,e=_b.length;e--;)if(b=_b[e]+c,b in a)return b;return d}function t(a,b){return a=b||a,"none"===fb.css(a,"display")||!fb.contains(a.ownerDocument,a)}function u(b){return a.getComputedStyle(b,null)}function v(a,b){for(var c,d,e,f=[],g=0,h=a.length;h>g;g++)d=a[g],d.style&&(f[g]=qb.get(d,"olddisplay"),c=d.style.display,b?(f[g]||"none"!==c||(d.style.display=""),""===d.style.display&&t(d)&&(f[g]=qb.access(d,"olddisplay",z(d.nodeName)))):f[g]||(e=t(d),(c&&"none"!==c||!e)&&qb.set(d,"olddisplay",e?c:fb.css(d,"display"))));for(g=0;h>g;g++)d=a[g],d.style&&(b&&"none"!==d.style.display&&""!==d.style.display||(d.style.display=b?f[g]||"":"none"));return a}function w(a,b,c){var d=Ub.exec(b);return d?Math.max(0,d[1]-(c||0))+(d[2]||"px"):b}function x(a,b,c,d,e){for(var f=c===(d?"border":"content")?4:"width"===b?1:0,g=0;4>f;f+=2)"margin"===c&&(g+=fb.css(a,c+$b[f],!0,e)),d?("content"===c&&(g-=fb.css(a,"padding"+$b[f],!0,e)),"margin"!==c&&(g-=fb.css(a,"border"+$b[f]+"Width",!0,e))):(g+=fb.css(a,"padding"+$b[f],!0,e),"padding"!==c&&(g+=fb.css(a,"border"+$b[f]+"Width",!0,e)));return g}function y(a,b,c){var d=!0,e="width"===b?a.offsetWidth:a.offsetHeight,f=u(a),g=fb.support.boxSizing&&"border-box"===fb.css(a,"boxSizing",!1,f);if(0>=e||null==e){if(e=Qb(a,b,f),(0>e||null==e)&&(e=a.style[b]),Vb.test(e))return e;d=g&&(fb.support.boxSizingReliable||e===a.style[b]),e=parseFloat(e)||0}return e+x(a,b,c||(g?"border":"content"),d,f)+"px"}function z(a){var b=T,c=Xb[a];return c||(c=A(a,b),"none"!==c&&c||(Rb=(Rb||fb("