cardinal-spline-3d
Version:
Smooth curve through points with tension and resolution options.
226 lines (151 loc) • 8.55 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>cardinal-spline-js Index</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/sunlight.dark.css">
<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
</head>
<body>
<div class="container-fluid">
<div class="navbar navbar-fixed-top ">
<div class="navbar-inner">
<a class="brand" href="index.html">cardinal-spline-js</a>
<ul class="nav">
<li class="dropdown">
<a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Global<b
class="caret"></b></a>
<ul class="dropdown-menu ">
<li>
<a href="global.html#curve">curve</a>
</li>
<li>
<a href="global.html#getCurvePoints">getCurvePoints</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row-fluid">
<div class="span8">
<div id="main">
<span class="page-title">Index</span>
<section class="readme-section">
<article><h1>Cardinal spline / Catmull-Rom</h1><p>A Cardinal spline (Catmull-Rom with a tension option) implementation for<br>JavaScript/HTML5 which creates an interpolated smooth curve through each<br>point pair in the given array. There is no need to specify control points.</p>
<p><img src="http://i.imgur.com/5e69T5C.png" alt="Demo snapshot"></p>
<p>Additional options are to provide a closed spline as well as segment<br>resolution (between each point) and of course a tension value.</p>
<p>The archive comes with three separate versions for the sake of convenience:</p>
<p><strong>curve.js</strong><br><br>Canvas 2D context extension. Call curve() on the context (ctx.curve(...))</p>
<p><strong>curve_func.js</strong><br><br>If you prefer not to use an extension then this version provide a pure<br>function that takes the context as an argument instead.</p>
<p><strong>curve_calc.js</strong><br><br>Just the internal function that calculates the points. Does not draw<br>anything.</p>
<p>As well as their minified equivalent. There are no dependencies between<br>these implementations.</p>
<p><strong><a href="https://epistemex.github.io/cardinal-spline-js/">→ Live demo can be found here</a></strong></p>
<h1>Install</h1><ul>
<li>Bower: <code>bower install cardinal-spline-js</code></li>
<li>Git using HTTPS: <code>git clone https://github.com/epistemex/cardinal-spline-js.git</code></li>
<li>Git using SSH: <code>git clone git@github.com:epistemex/cardinal-spline-js.git</code></li>
<li>NPM: <code>npm install -g cardinal-spline-js</code> (curve_calc.js / curve_func.js)</li>
<li>Download <a href="https://github.com/epistemex/cardinal-spline-js/archive/master.zip">zip archive</a> and extract.</li>
</ul>
<h1>Usage</h1><h2>curve.js</h2><p>Make sure the script is loaded before a 2D context is obtained from the canvas element.</p>
<p>Then use <code>curve()</code> as any other method/function on the context -</p>
<p><strong>Examples</strong></p>
<pre class="prettyprint source"><code>ctx.moveTo(points[0], points[1]); // optionally move to first point
ctx.curve(points); // add cardinal spline to path
ctx.stroke(); // stroke path</code></pre><p>will draw the points in the array which are arranged in the following manner:</p>
<pre class="prettyprint source"><code>var points = [x1, y1, x2, y2, ... xn, yn];</code></pre><p>An optional tension value can be given <em>(default: 0.5)</em>:</p>
<pre class="prettyprint source"><code>ctx.curve(points, 0.5); // sets tension [0.0, 1.0] +/-</code></pre><p>a segment resolution value <em>(default: 25)</em>:</p>
<pre class="prettyprint source"><code>ctx.curve(points, 0.5, 25); // points in each segment</code></pre><p>The curve can be drawn closed. All arguments must be given in this<br>case <em>(default: false (open))</em>:</p>
<pre class="prettyprint source"><code>ctx.curve(points, 0.5, 25, true); // make a closed loop</code></pre><p>The function returns a new (typed) array with the spline points which can be used for<br>tracking, calculate length and so forth. The values are in floating points:</p>
<pre class="prettyprint source"><code>var splinePoints = ctx.curve(points);</code></pre><h2>curve_func.js</h2><p>If you use the function file instead the arguments will be the same as<br>above except that the context is passed in as the first argument and<br>then the function is instead called as:</p>
<pre class="prettyprint source"><code>ctx.moveTo(points[0], points[1]); // optionally move to first point
curve(ctx, points); // add cardinal spline to path
ctx.stroke(); // stroke path</code></pre><p>Also this variant returns a spline point array.</p>
<h2>curve_calc.js</h2><p>If you just want to calculate the spline points without drawing anything,<br>you can use the <code>curve_calc.js</code> file and call (please observe that the<br>name has been changed to better reflect its purpose):</p>
<pre class="prettyprint source"><code>var splinePoints = getCurvePoints(points, ...);</code></pre><p>Context is not required with this function.</p>
<h2>In Node.js</h2><p>Require the package after installing it using npm, then:</p>
<pre class="prettyprint source"><code>var getCurvePoints = require("cardinal-spline-js").getCurvePoints;
var outPoints = getCurvePoints(inPoints);</code></pre><h1>Requirements</h1><p>A modern HTML5 compliant browser with support for Typed Arrays and<br>JavaScript enabled. Except from <code>curve_calc.js</code> the canvas element and<br>a 2D context is required as well.</p>
<h1>Contributors</h1><p>See contributors <a href="https://github.com/epistemex/cardinal-spline-js/graphs/contributors">here</a>.</p>
<h1>License</h1><p>Released under <a href="http://choosealicense.com/licenses/mit/">MIT license</a>. You can use this class in both commercial and non-commercial projects provided that full header (minified and developer versions) is included.</p>
<p><em>© 2013-2016 Epistemex</em></p>
<p><img src="http://i.imgur.com/wZSsyt8.png" alt="Epistemex"></p></article>
</section>
</div>
<div class="clearfix"></div>
<footer>
<p><b><a href='https://github.com/epistemex/'>Epistemex at GitHub</a></b></p>
<br />
<span class="copyright">
Copyright © 2013-2016 Epistemex
</span>
<br />
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a>
on Fri Jul 15th 2016 using the <a
href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
</span>
</footer>
</div>
<div class="span3">
<div id="toc"></div>
</div>
<br clear="both">
</div>
</div>
<!--<script src="scripts/sunlight.js"></script>-->
<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/bootstrap-dropdown.js"></script>
<script src="scripts/toc.js"></script>
<script>
$( function () {
$( "[id*='$']" ).each( function () {
var $this = $( this );
$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
} );
$( "#toc" ).toc( {
anchorName : function ( i, heading, prefix ) {
return $( heading ).attr( "id" ) || ( prefix + i );
},
selectors : "h1,h2,h3,h4",
showAndHide : false,
scrollTo : "100px"
} );
$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
$( '.dropdown-toggle' ).dropdown();
// $( ".tutorial-section pre, .readme-section pre" ).addClass( "sunlight-highlight-javascript" ).addClass( "linenums" );
$( ".tutorial-section pre, .readme-section pre" ).each( function () {
var $this = $( this );
var example = $this.find( "code" );
exampleText = example.html();
var lang = /{@lang (.*?)}/.exec( exampleText );
if ( lang && lang[1] ) {
exampleText = exampleText.replace( lang[0], "" );
example.html( exampleText );
lang = lang[1];
} else {
lang = "javascript";
}
if ( lang ) {
$this
.addClass( "sunlight-highlight-" + lang )
.addClass( "linenums" )
.html( example.html() );
}
} );
Sunlight.highlightAll( {
lineNumbers : false,
showMenu : true,
enableDoclinks : true
} );
} );
</script>
<!--Navigation and Symbol Display-->
<!--Google Analytics-->
</body>
</html>