my-spline.js

function toVector(a,p,r) {
    return [p[0] + Math.cos(a)*r,p[1] + Math.sin(a)*r];
}

function opposite(a) {
    return a>0?a-Math.PI:a+Math.PI;
}

function connectTwo(a1,r1,p1,a2,r2,p2) {
    var a2o = opposite(a2);
    var p1h = toVector(a1,p1,r1);
    var p2h = toVector(a2o,p2,r2);
    //console.log([a2o,p1h,p2h]);
    return [p1h,p2h];
}

function getAngle(p1,p2,p3) {
    return Math.atan2(p3[1]-p1[1],p3[0]-p1[0]);
}

function genData(n) {
  var data = [];
  for (var i=0;i<n;i++) {
    data.push([Math.floor(Math.random()*20+1)*20,Math.floor(Math.random()*20+1)*20]);
  }
  console.log(JSON.stringify(data));
}

genData(10);

function dist(p1,p2) {
  return Math.sqrt(Math.pow(p2[0]-p1[0],2)+Math.pow(p2[1]-p1[1],2));
}

function pointsToPath(ps) {
  var result = [];
  result.push('M' + Math.round(ps[0][0]) + ' ' + Math.round(ps[0][1]) + 'C');
  for (var i=0;i<ps.length;i++) {
    result.push(Math.round(ps[i][0]) + ' ' + Math.round(ps[i][1]) + ' ');
  }
  return result.join('');
}

function arrayInsert(a,i,v) {
  a.splice(i,0,v);
}

function arrayRemoveAt(a,i) {
  var es = a.splice(i,1);
  return es[0];
}

function orderByDist(data) {
  var minIndex = 0;
  for (var i=1;i<data.length;i++) {
    if(dist([0,0],data[i]) < dist([0,0],data[minIndex])) {
      minIndex = i;
    }
  }
  if (minIndex > 0) {
    var e = arrayRemoveAt(data,minIndex);
    arrayInsert(data,0,e);
  }
  for (var i=1;i<data.length-1;i++) {
    var minDist = dist(data[i-1],data[i]);
    var minIndex = i;
    for (var j=i+1;j<data.length;j++) {
      if (dist(data[i-1],data[j]) < minDist) {
        minIndex = j;
        minDist = dist(data[i-1],data[j]);
      }
    }
    if (minIndex != i) {
      var e = arrayRemoveAt(data,minIndex);
      arrayInsert(data,i,e);
    }
  }
}

function pathMoveTo(p) {
  return 'M' + Math.round(p[0]) + ' ' + Math.round(p[1]);
}

function pathCurveTo(p1,p2,p) {
  return 'C' + Math.round(p1[0]) + ' ' + Math.round(p1[1]) + ' ' + Math.round(p2[0]) + ' ' + Math.round(p2[1]) + ' ' + Math.round(p[0]) + ' ' + Math.round(p[1]);
}

$(document).ready(function(){
    var data = [[40,340],[60,200],[140,200],[20,80],[120,360],[280,200],[60,80],[180,40],[40,280],[200,240]];
    console.log(JSON.stringify(data));
    orderByDist(data);
    console.log(JSON.stringify(data));
    var paper = Raphael('canvas', 400, 400);
    var c = paper.path();
    for (var i=0;i<data.length;i++) {
      paper.circle(data[i][0],data[i][1],(i+2)*2);
    }
    var angles = [];
    angles.push(-Math.PI/2+0.7);
    for (var i=1;i<data.length-1;i++) {
      angles.push(getAngle(data[i-1],data[i],data[i+1]));
    }
    angles.push(Math.PI/2+0.2);
    /*var angles_ = [];
    angles.forEach(function(e){
      angles_.push(Math.floor(e/Math.PI*180));
      });
    console.log(angles_);*/

    var dists = [];
    for (var i=0;i<data.length;i++) {
      if (i<data.length-1) {
        dists.push(dist(data[i],data[i+1]));
      } else {
        dists.push(dists[dists.length-1]);
      }
    }
    dists.push(dists[dists.length-1]);

    var path = [pathMoveTo(data[0])];
    for (var i=0;i<data.length-1;i++) {
      var k = 0.5;

      var p1p2 = connectTwo(angles[i],dists[i]*k,data[i],angles[i+1],dists[i+1]*k,data[i+1]);
      var p1 = p1p2[0];
      var p2 = p1p2[1];
      c = paper.rect(p1[0],p1[1],3,3);
      c.attr('stroke',"#ff0000");
      c = paper.rect(p2[0],p2[1],3,3);
      c.attr('stroke',"#00ff00");
     // path.push(p1,p2,data[i+1]);
     path.push(pathCurveTo(p1,p2,data[i+1]));
    }
    //console.log(pointsToPath(path));
    //c = paper.path('M180 90C180 90 199 67 207 53 180 30 153 7 132 26 110 30 88 34 98 -5 70 50');
    path = path.join('');
    c = paper.path(path);
    c.attr('stroke-width',3);
    c.attr('stroke',"#0000ff");
    //console.log(path);
});