Commit 630544b

<title>Spline Interpolation</title>

<meta content="Scaled Innovation, the personal site of Robin W. Spencer">

<meta content="javascript, design, analytics, canvas, algorithms, data mining">

<meta name="author" content="Robin W. Spencer" />

<meta name="date" content="2010-07-22" />

<style type="text/css">

body{

margin:24px;

font:100% sans-serif;

color:#999;

background:#eee;

position:relative;

}

#canvasFrame{

position:relative;

margin:12px 0 0 0;

padding:12px;

background:#fff;

-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);

-moz-box-shadow:2px 2px 8px rgba(0, 0, 0, 0.5);

-webkit-border-radius: 16px;

-moz-border-radius: 16px;

}

h1{

text-shadow:1px 1px 1px #000;

}

a:link,a:visited,a:active{

text-decoration:none;

color:#aa3;

}

a:hover{

text-decoration:none;

color:#ff5;

}

input.text{

width:36px;

margin:0 2em 0 0;

text-align:center;

background:#fff;

border:1px solid #ccc;

}

.button{

margin:0 0 0 1em;

}

<script type="text/javascript">

function HSVtoRGB(h,s,v,opacity){

// inputs h=hue=0-360, s=saturation=0-1, v=value=0-1

// algorithm from Wikipedia on HSV conversion

var toHex=function(decimalValue,places){

if(places == undefined || isNaN(places)) places = 2;

var hex = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");

var next = 0;

var hexidecimal = "";

decimalValue=Math.floor(decimalValue);

while(decimalValue > 0){

next = decimalValue % 16;

decimalValue = Math.floor((decimalValue - next)/16);

hexidecimal = hex[next] + hexidecimal;

}

while (hexidecimal.length<places){

hexidecimal = "0"+hexidecimal;

}

return hexidecimal;

}

var hi=Math.floor(h/60)%6;

var f=h/60-Math.floor(h/60);

var p=v*(1-s);

var q=v*(1-f*s);

var t=v*(1-(1-f)*s);

var r=v; // case hi==0 below

var g=t;

var b=p;

switch(hi){

case 1:r=q;g=v;b=p;break;

case 2:r=p;g=v;b=t;break;

case 3:r=p;g=q;b=v;break;

case 4:r=t;g=p;b=v;break;

case 5:r=v;g=p;b=q;break;

}

// At this point r,g,b are in 0...1 range. Now convert into rgba or #FFFFFF notation

if(opacity){

return "rgba("+Math.round(255*r)+","+Math.round(255*g)+","+Math.round(255*b)+","+opacity+")";

}else{

return "#"+toHex(r*255)+toHex(g*255)+toHex(b*255);

}

function hexToCanvasColor(hexColor,opacity){

// Convert #AA77CC to rbga() format for Firefox

opacity=opacity || "1.0";

hexColor=hexColor.replace("#","");

var r=parseInt(hexColor.substring(0,2),16);

var g=parseInt(hexColor.substring(2,4),16);

var b=parseInt(hexColor.substring(4,6),16);

return "rgba("+r+","+g+","+b+","+opacity+")";

function drawPoint(ctx,x,y,r,color){

ctx.save();

ctx.beginPath();

ctx.lineWidth=1;

ctx.fillStyle=hexToCanvasColor(color,1);

ctx.arc(x,y,r,0.0,2*Math.PI,false);

ctx.closePath();

ctx.stroke();

ctx.fill();

ctx.restore();

function getControlPoints(x0,y0,x1,y1,x2,y2,t){

// x0,y0,x1,y1 are the coordinates of the end (knot) pts of this segment

// x2,y2 is the next knot -- not connected here but needed to calculate p2

// p1 is the control point calculated here, from x1 back toward x0.

// p2 is the next control point, calculated here and returned to become the

// next segment's p1.

// t is the 'tension' which controls how far the control points spread.

// Scaling factors: distances from this knot to the previous and following knots.

var d01=Math.sqrt(Math.pow(x1-x0,2)+Math.pow(y1-y0,2));

var d12=Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2));

var fa=t*d01/(d01+d12);

var fb=t-fa;

var p1x=x1+fa*(x0-x2);

var p1y=y1+fa*(y0-y2);

var p2x=x1-fb*(x0-x2);

var p2y=y1-fb*(y0-y2);

return [p1x,p1y,p2x,p2y]

function drawControlLine(ctx,x,y,px,py){

// Only for demo purposes: show the control line and control points.

ctx.save();

ctx.beginPath();

ctx.lineWidth=1;

ctx.strokeStyle="rgba(0,0,0,0.3)";

ctx.moveTo(x,y);

ctx.lineTo(px,py);

ctx.closePath();

ctx.stroke();

drawPoint(ctx,px,py,1.5,"#000000");

ctx.restore();

function drawSpline(ctx,pts,t,closed){

showDetails=document.getElementById('details').checked;

ctx.lineWidth=4;

ctx.save();

var cp=[]; // array of control points, as x0,y0,x1,y1,...

var n=pts.length;

if(closed){

// Append and prepend knots and control points to close the curve

pts.push(pts[0],pts[1],pts[2],pts[3]);

pts.unshift(pts[n-1]);

pts.unshift(pts[n-1]);

for(var i=0;i<n;i+=2){

cp=cp.concat(getControlPoints(pts[i],pts[i+1],pts[i+2],pts[i+3],pts[i+4],pts[i+5],t));

}

cp=cp.concat(cp[0],cp[1]);

for(var i=2;i<n+2;i+=2){

var color=HSVtoRGB(Math.floor(240*(i-2)/(n-2)),0.8,0.8);

if(!showDetails){color="#555555"}

ctx.strokeStyle=hexToCanvasColor(color,0.75);

ctx.beginPath();

ctx.moveTo(pts[i],pts[i+1]);

ctx.bezierCurveTo(cp[2*i-2],cp[2*i-1],cp[2*i],cp[2*i+1],pts[i+2],pts[i+3]);

ctx.stroke();

ctx.closePath();

if(showDetails){

drawControlLine(ctx,pts[i],pts[i+1],cp[2*i-2],cp[2*i-1]);

drawControlLine(ctx,pts[i+2],pts[i+3],cp[2*i],cp[2*i+1]);

}

}

}else{

// Draw an open curve, not connected at the ends

for(var i=0;i<n-4;i+=2){

cp=cp.concat(getControlPoints(pts[i],pts[i+1],pts[i+2],pts[i+3],pts[i+4],pts[i+5],t));

}

for(var i=2;i<pts.length-5;i+=2){

var color=HSVtoRGB(Math.floor(240*(i-2)/(n-2)),0.8,0.8);

if(!showDetails){color="#555555"}

ctx.strokeStyle=hexToCanvasColor(color,0.75);

ctx.beginPath();

ctx.moveTo(pts[i],pts[i+1]);

ctx.bezierCurveTo(cp[2*i-2],cp[2*i-1],cp[2*i],cp[2*i+1],pts[i+2],pts[i+3]);

ctx.stroke();

ctx.closePath();

if(showDetails){

drawControlLine(ctx,pts[i],pts[i+1],cp[2*i-2],cp[2*i-1]);

drawControlLine(ctx,pts[i+2],pts[i+3],cp[2*i],cp[2*i+1]);

}

}

// For open curves the first and last arcs are simple quadratics.

var color=HSVtoRGB(40,0.4,0.4); // brown

if(!showDetails){color="#555555"}

ctx.strokeStyle=hexToCanvasColor(color,0.75);

ctx.beginPath();

ctx.moveTo(pts[0],pts[1]);

ctx.quadraticCurveTo(cp[0],cp[1],pts[2],pts[3]);

ctx.stroke();

ctx.closePath();

var color=HSVtoRGB(240,0.8,0.8); // indigo

if(!showDetails){color="#555555"}

ctx.strokeStyle=hexToCanvasColor(color,0.75);

ctx.beginPath();

ctx.moveTo(pts[n-2],pts[n-1]);

ctx.quadraticCurveTo(cp[2*n-10],cp[2*n-9],pts[n-4],pts[n-3]);

ctx.stroke();

ctx.closePath();

if(showDetails){

drawControlLine(ctx,pts[2],pts[3],cp[0],cp[1]);

drawControlLine(ctx,pts[n-4],pts[n-3],cp[2*n-10],cp[2*n-9]);

}

}

ctx.restore();

if(showDetails){ // Draw the knot points.

for(var i=0;i<n;i+=2){

drawPoint(ctx,pts[i],pts[i+1],2.5,"#ffff00");

}

}

function main(t){

var e=document.getElementById("canvas1");

e.width=600;

e.height=550;

e.parentNode.style.width=e.width+"px"; // The div around the canvas element should fit snugly.

var ctx=e.getContext('2d');

if(!ctx){return}

ctx.clearRect(0,0,e.width,e.height);

ctx.scale(1.5,1.5);

// Drawing a spline takes one call. The points are an array [x0,y0,x1,y1,...],

// the tension is t (typically 0.33 to 0.5), and true/false tells whether to

// connect the endpoints of the data to make a closed curve.

drawSpline(ctx,[20,50,100,100,150,50,200,150,250,50,300,70,310,130,380,30],t,false);

drawSpline(ctx,[50,200,150,200,150,300,50,300],t,true);

drawSpline(ctx,[260,240,360,240,310,340],t,true);

// Update the passive display of tension t.

document.getElementById("t").value=Math.round(1000*t)/1000;

<body onload="main(0.5);">

<div style="position:absolute;top:0px;right:12px;text-align:right;">

back to <a href='http://scaledinnovation.com'>Scaled Innovation</a><br/><br/>

<a href="aboutSplines.html">about the geometry</a>

<h1>Spline Interpolation</h1>

<div id='gFrame'>

tension t <input disabled="disabled" class="text" id='t' type='text' value='0.5'/></td>

<input id='details' type='checkbox' checked='checked' value='true'/>show details

<input class="button" id='animate' style='margin:0 0 0 2em' type='button' onclick='multiAnimate()' value='animate'/>

<input class="button" type='button' onclick='main(0)' value='t = 0'/>

<input class="button" type='button' onclick='main(1/5)' value='t = 1/5'/>

<input class="button" type='button' onclick='main(1/2)' value='t = 1/2'/>

<input class="button" type='button' onclick='main(1)' value='t = 1'/>

<input class="button" type='button' onclick='main(2)' value='t = 2'/>

<input class="button" type='button' onclick='main(-1)' value='t = -1'/>

<div id="canvasFrame">

<canvas id='canvas1'>

<div style="padding:72px;text-align:center;font:18pt bold serif">

This page requires a modern HTML5-compliant browser, such as Safari, Firefox, Chrome, or Opera.<br/>

<img src="splineDefault.png" width="300" height="225" border="0">