例えば、物を移動する時に、自由に加速度を変えることができるための、B-Spline発生器

JavaScript

要素に動きをつける場合、最初はゆっくりで、後半は高速にしたい時などに使える

aryPoint = [[0,0], [50,10], [100,100]];

のようにして、3点を配列にする。B-Splineの特性のため、始点と終点以外の制御点は通らない。

var line = B_Spline_Generator (aryPoint);

のようにすると、関数が返される

その関数 line (n) の引数 n に、0から100までの値を入れてコールすると曲線の座標を返す

きっと利用価値があるようで、ないようで・・・・

<!DOCTYPE html>
<style type="text/css">
div {
  width :500px;
  height:500px;
}
div div {
  position: absolute;
  width:3px;
  height:3px;
  background-color:red;
}
</style>

<body>

<div id="view">&nbsp;</div>

<script>
function B_Spline_Generator (aryPoint /*Array[[x,y],[x1,y1]]*/) {
  var len = aryPoint.length;
  var max = len - 1;
  var lct = len + 2;
  var span = (len + 1) / 100;
  
  return function (percent/*Number*/) {
    percent = (percent < 0) ? 0: (100 < percent) ? 100: percent;
    
    var t = span * percent -1;
    var position = { x: 0, y: 0 };
    var i;
    var index;
    var cn;
    var t1;
    var t2;
    
    for (i = -2; i < lct; i++) {
      t1 = t - i;
      cn = ((t1 = Math.abs (t1)) < 1)
         ? (t2 = t1 * t1 * 3,(t1 * t2 - 2 * t2 + 4) / 6)
         : (t1 < 2)
           ? (t2 = t1 - 2, t2 * t2 * t2 / -6)
           : 0;
      index = (i < 0) ? 0: (max < i) ? max: i;
      position.x += aryPoint[index][0] * cn;
      position.y += aryPoint[index][1] * cn;
    }
    
    return position;
  }
}

//__________________________


  
(function () {
  var pointer = B_Spline_Generator ([[0, 0], [50,10], [100, 100]]);

  var e = document.getElementById ('view');
  var p = document.createElement ('div');
  var div;
  var position;
  p.appendChild (document.createTextNode (''));
  
  for (var i = 0; i <= 100; i += 1) {
    position = pointer (i);
    e.appendChild (div = p.cloneNode (true));
    div.style.top  = position.y * 4 + 'px';
    div.style.left = position.x * 4 + 'px';
  }
})();

</script>

圧縮すると
http://closure-compiler.appspot.com/home

function B_Spline_Generator(e){var f=e.length,i=f-1,j=f+2,k=(f+1)/100;return function(b){b=b<0?0:100<b?100:b;b=k*b-1;var g={x:0,y:0},c,a,h,d;for(c=-2;c<j;c++){a=b-c;h=(a=Math.abs(a))<1?(d=a*a*3,(a*d-2*d+4)/6):a<2?(d=a-2,d*d*d/-6):0;a=c<0?0:i<c?i:c;g.x+=e[a][0]*h;g.y+=e[a][1]*h}return g}};