「ウロチョロ」を考えてみた。B-Spline曲線とからなどうだろう？

JavaScript 
<!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>

var b_spline = function ( ) {
  var e = document.getElementById('view');
  var px = [ 10.0, 77.0, 21.0, 171.0, 153.0 ];
  var py = [ 30.0, 49.0, 165.0, 43.0, 164.0 ];

  var M = px.length;
  var n = M - 1;
  var t;
  var step = M * 0.01;
  
  for (t = -1.0; t <= M; t+= step) {
    var obj = spline (t);

    var d = document.createElement('div');
    d.appendChild(document.createTextNode(''));
    d.style.top = obj.y + 'px';
    d.style.left = obj.x + 'px';
    e.appendChild(d);
  }

  function coefficent (t) {
    var r, d;

    if (t < 0) t = -t;
    if (t < 1) {
      r = (3 * t * t * t -6 * t * t + 4) / 6;
    }
    else if (t < 2) {
      d = t - 2;
      r = -d * d * d / 6;
    }
    else r = 0;

    return r;
  }

  function spline (t) {
    var cn, x = 0, y = 0;
    var j, k;
    var ix, iy;

    for (j = -2 ; j <= n + 2 ; j++) {
      k = j;
      if(j < 0) k = 0;
      if(j > n) k = n;
      cn = coefficent (t - j);
      x += px[k] * cn;
      y += py[k] * cn;
    }
    return { 'x': x, 'y': y };
  }

};
b_spline();
</script>

書いてから気づく。
「３点を通る曲線」のほうが良くない？

「３点を通る曲線」を書いてみた。

<!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>
var ax = [0,250,450];
var ay = [400,50,450];

// a,p   b,q   c,r

var a = ax[0], b = ax[1], c = ax[2];
var p = ay[0], q = ay[1], r = ay[2];
var e = document.getElementById('view');
var x, y, d;

for (x = a, s = (b - a) / 10; x < b; x += s) {
  y = (p*(x-b)*(x-c)) / ((a-b)*(a-c)) + (q*(x-a)*(x-c)) / ((b-a)*(b-c)) + (r*(x-a)*(x-b)) / ((c-a)*(c-b));

  d = document.createElement ('div');
  d.appendChild (document.createTextNode (''));
  d.style.top  = (y|0) + 'px';
  d.style.left = (x|0) + 'px';
  e.appendChild(d);
}

</script>

しかし、各点が等間隔でないのが、気になる。
そもそもウロチョロとは、「等加速度運動」なのか？！

「うろちょろ」を調べてみた

http://dictionary.goo.ne.jp/leaf/jn2/21268/m0u/%E3%81%86%E3%82%8D%E3%81%A1%E3%82%87%E3%82%8D/
「目ざわりになるほど、あちこち動き回るさま。」だそうだ。
目障りになるほどと、書いてあるのだから、

    1. 動きは速くないとダメそうだ。
    2. そして、小さい図形では、ダメそうだ。
    3. 等加速度運動より加速度運動のほうが、より「目障り」だと思う。
    4. 「あっち」を奥とすると、「こっち」は手前となる。右なら左、速いと遅い、というように３つの条件のうち最低でも１つを対照的な動きとして加えるべきだな。

ちょっと予定していた動きと違うなぁ〜（書きかけ）

<!DOCTYPE html>
<body>

<script>
//________
var getInnerViewSize = function (doc) {
  doc = doc || this.document;
  var C = doc /*@if (@_jscript) [document.compatMode == 'CSS1Compat' ?
    'documentElement': 'body'] /*@else@*/ .defaultView /*@end@*/;
  return {
    'width' : /*@if (@_jscript) C.clientWidth  @else@*/ C.innerWidth  /*@end@*/,
    'height': /*@if (@_jscript) C.clientHeight @else@*/ C.innerHeight /*@end@*/
  };
};


//________
var createRandomIntPoint = function (view) {
  var w = view.width;
  var h = view.height;
  var random = Math.random;
  
  return function () {
    return {
      'x': (random () * w) |0,
      'y': (random () * h) |0
    };
  };
};


//________
var createStar = function ( target ) {
  var doc = target.ownerDocument;
  var style = target.style;
  var d = doc.createElement ('div'); // remove
  var ds = d.style;

  style.position = 'relative';
  style.overflow = 'hidden';

  ds.position = 'absolute';
  ds.fontSize = '50px';
  d.appendChild (doc.createTextNode ('☆'));
  target.appendChild (d);

  return function (obj) {

    ds.top = (obj.y|0) + 'px';
    ds.left = (obj.x|0) + 'px';

    if (obj.color)
      ds.color = obj.color;

  }
};

//________
var createUrotyoro = function (nextPointer, step) {
  var point0;
  var point1 = nextPointer ();
  var point2 = nextPointer ();
  var cnt = 0;
  var s;
  var x, y;

  step = step || 10;
  
  return function () {
    var result = { };
    
    if (0 === cnt) {
      point0 = point1;
      point1 = point2;
      point2 = nextPointer ();
      x = point0.x;
      s = (point1.x - point0.x) / step;
    }
    
    result.y = (point0.y * (x - point1.x) * (x - point2.x)) / ((point0.x - point1.x) * (point0.x - point2.x)) +
               (point1.y * (x - point0.x) * (x - point2.x)) / ((point1.x - point0.x) * (point1.x - point2.x)) +
               (point2.y * (x - point0.x) * (x - point1.x)) / ((point2.x - point0.x) * (point2.x - point1.x));
    result.x = x;
    x += s;

    if (++cnt == step)
      cnt = 0;

    return result;
  };
};

var pointer  = createRandomIntPoint (getInnerViewSize ());
var urotyoro = createUrotyoro (pointer, 50);
var star     = createStar (document.body);

(function () {
  star (urotyoro ());
  setTimeout (arguments.callee, 50);
})();
</script>