球面上にN個の点を均等に配置したい。その7(正二十面体を細かく分割)

正二十面体を細かく分割して球体にしてみる


分割処理は正三角形を一度に4等分割するので、3回行うと 20 * 4^3 = 1280 個の三角形ができるのだが(頂点はダブっているぞ!)、5回の分割だと Core i7 でもぎりぎり。
プログラム的には命名がおかしいけど、後で見直すこと。


もしかして立方体からできるんじゃね?


その前に、三角形を4つに分割した時にできる3点は、必ずまた使われるのだから
バッファーに蓄えておくべきだよな。
その分割点が再度利用されるのは1回だけだろうか。
なにか良いアイディアはないものか。

<!DOCTYPE html>
<meta charset="UTF-8">
<title>N個の点を持つ球体を描画する</title>
<style>
</style>

<body>
<canvas width="600" height="600"></canvas>


<script>

//https://www.jstage.jst.go.jp/article/geoinformatics/12/1/12_1_3/_pdf

(function () {
  var pi = Math.PI;

  var acos = Math.acos;
  var atan2 = Math.atan2;
  var sqrt = Math.sqrt;
  var sin = Math.sin;
  var cos = Math.cos;

  function Point (x, y, z) {
    this.x = x || 0;
    this.y = y || 0;
    this.z = z || 0;
  }

  function Surface (/* p0, p1, p.., pn */) {
    this.vertex = Array.prototype.slice.call (arguments, 0);
  }

  //http://www.h6.dion.ne.jp/~ooya/Suugaku/Seitamentai.pdf
  var gr = (1 + sqrt (5)) / 2;

  var p = [
    new Point (0, -1, -gr),  new Point (0, 1, -gr),
    new Point (0, -1, gr),  new Point (0, 1, gr),
    new Point (-gr, 0, -1), new Point (-gr, 0, 1),
    new Point (gr, 0, -1),  new Point (gr, 0, 1),
    new Point (-1, -gr, 0), new Point (1, -gr, 0),
    new Point (-1, gr, 0),  new Point (1, gr, 0)
  ];

  var RegularIcosahedron = [
    new Surface (p[0], p[1], p[6]),  new Surface (p[1], p[0], p[4]),
    new Surface (p[2], p[3], p[5]),  new Surface (p[3], p[2], p[7]),
    new Surface (p[4], p[5], p[10]), new Surface (p[5], p[4], p[8]),
    new Surface (p[6], p[7], p[9]),  new Surface (p[7], p[6], p[11]),
    new Surface (p[8], p[9], p[2]),  new Surface (p[9], p[8], p[0]),
    new Surface (p[10],p[11],p[1]),  new Surface (p[11],p[10],p[3]),
    new Surface (p[0], p[6], p[9]),  new Surface (p[0], p[8], p[4]),
    new Surface (p[1], p[4], p[10]), new Surface (p[1], p[11],p[6]),
    new Surface (p[2], p[5], p[8]),  new Surface (p[2], p[9], p[7]),
    new Surface (p[3], p[7], p[11]), new Surface (p[3], p[10],p[5])
  ];


  function splitOfTriangle (s) {
    var ax = s.vertex[0].x, bx = s.vertex[1].x, cx = s.vertex[2].x,
        ay = s.vertex[0].y, by = s.vertex[1].y, cy = s.vertex[2].y,
        az = s.vertex[0].z, bz = s.vertex[1].z, cz = s.vertex[2].z;

    var abx = (ax + bx) / 2, bcx = (bx + cx) / 2, cax = (cx + ax) / 2,
        aby = (ay + by) / 2, bcy = (by + cy) / 2, cay = (cy + ay) / 2,
        abz = (az + bz) / 2, bcz = (bz + cz) / 2, caz = (cz + az) / 2;

    var p0 = new Point (abx, aby, abz),
        p1 = new Point (bcx, bcy, bcz),
        p2 = new Point (cax, cay, caz);

    return [
      new Surface (s.vertex[0], p0, p2),
      new Surface (p0, p1, p2),
      new Surface (p0, s.vertex[1], p1),
      new Surface (p2, p1, s.vertex[2])
    ];
  }

  function getVertex (s) {
    return s.vertex;
  }

  function getPoint (p) {
    var rr = this * this;
    var a = p.x * p.x + p.y * p.y + p.z * p.z, b = 0, c = -rr;
    var t = .5*Math.sqrt(-4*a*c)/a;

    return [p.x * t, p.y * t, p.z * t];
  }

  function calcLength (x, y, z, rr) {
    var a = x * x + y * y + z * z, b = 0, c = -rr;
    var t = .5*Math.sqrt(-4*a*c)/a;

    return [x * t, y * t, z * t];
  }


  function create (n, r) {
    var surface = RegularIcosahedron.slice (0); //copy
    var i, a = [ ], p = [ ], t = surface;

    for (i = 0; i < n; i += 1)
      t = Array.prototype.concat.apply ([], t.map (splitOfTriangle));

    p = Array.prototype.concat.apply ([], t.map (getVertex, p)).map (getPoint, r);

    return p;
  }




  this.create = create;

}) ();


//___________________________________

(function () {

  var INIT_QUATERNION = [1, 0, 0, 0];

  function RotationController (element) {
    this.target = element;
    this.mouseX = null;//マウス座標の基点
    this.mouseY = null;//マウス座標の基点
    this.touchF = false; //ドラッグ中か?
    this.Qnow = INIT_QUATERNION; //今回のマウスのドラッグ中のクォータニオン
    this.Qbef = INIT_QUATERNION; //前回のクォータニオン
    this.rots = INIT_QUATERNION; //今回と前回のクォータニオンの積(これが重要)
    this.gain = 1 / element.offsetWidth ; // mouse移動の感度
    this.dx = 0;//マウスの慣性移動量
    this.dy = 0;//マウスの慣性移動量
    this.timerId = null;//慣性移動中のタイマーID
    this.miniInertia = 1e-7;//慣性移動量の最小値
  }


  //画面の2次元移動量から3次元の回転量を求める
  function rotation (dx, dy) {
    var a, b, a0, a1, a2, a3, b0, b1, b2, b3, r, t, as;

    if (t = dx * dx + dy * dy) {
      r = Math.sqrt (t);
      as = Math.sin (r) / r;
      a = this.Qnow;
      a0 = a[0]; a1 = a[1]; a2 = a[2]; a3 = a[3];
      b0 = dy * as; b1 = dx * as; b3 = Math.cos (r);

      // クオータニオンによる回転
      a = this.Qbef;
      b = this.Qnow = [
        a0 * b3 - a3 * b0           - a2 * b1,
        a1 * b3 + a3 * b1 - a2 * b0,
        a2 * b3           + a0 * b1 + a1 * b0,
        a3 * b3 + a0 * b0 - a1 * b1
      ];

      //前回(a)と今回(b)のクォータニオンの積
      a0 = a[0]; a1 = a[1]; a2 = a[2]; a3 = a[3];
      b0 = b[0]; b1 = b[1]; b2 = b[2]; b3 = b[3];

      this.rots = [
        a0 * b0 - a1 * b1 - a2 * b2 - a3 * b3,
        a0 * b1 + a1 * b0 + a2 * b3 - a3 * b2,
        a0 * b2 - a1 * b3 + a2 * b0 + a3 * b1,
        a0 * b3 + a1 * b2 - a2 * b1 + a3 * b0
      ];
      this.dx = dx;
      this.dy = dy;
    }
    return t;
  }


  //慣性
  function inertia () {
    var distance = rotation.call (
      this,
      this.dx - this.dx / 40,
      this.dy - this.dy / 40
    );

    if (this.miniInertia < distance)
      this.timerId = setTimeout (inertia.bind (this), 33);
  }


  //クォータニオンによる座標群の回転
  function quaternionRotation (point) {

    var i, j, x, y, z;
    var p, vertex;
    var q = this.rots;
    var q0 = q[0], q1 = q[1], q2 = q[2], q3 = q[3];
    var a0, a1, a2, a3;
    var s = [], rst = [];

    for (i = 0; p = point[i]; i++) {
        x = p[0], y = p[1], z = p[2];
        a0 =  q3 * x + q1 * z - q2 * y;
        a1 =  q3 * y + q2 * x - q0 * z;
        a2 =  q3 * z + q0 * y - q1 * x;
        a3 = -q0 * x - q1 * y - q2 * z;
        s = [
          a0 * q3 - a3 * q0 - a1 * q2 + a2 * q1,
          a1 * q3 - a3 * q1 - a2 * q0 + a0 * q2,
          a2 * q3 - a3 * q2 - a0 * q1 + a1 * q0
        ];
      rst[i] = s;
    }
    return rst;
  }


  //各イベント処理
  function handleEvent (event) {
    var e, x, y, dx, dy, a, b, c, e, r, t;
    var a0, a1, a2, a3, b0, b1, b2, b3, as;

    switch (event.type) {

    // 制御終了
    case 'mouseup' :
    case 'mouseout' :
    case 'touchend' :
      this.touchF = false;
      inertia.call (this);//制御を慣性にする
      break;

    // 制御開始
    case 'mousedown' :
    case 'touchstart' :
      if (this.timerId) {//慣性を解除
        clearTimeout (this.timerId);
        this.timerId = null;
      }
      this.touchF = true;
      this.Qnow = INIT_QUATERNION;
      this.Qbef = this.rots;
      e = event.target.getBoundingClientRect ();
      this.mouseX = event.pageX - e.left;
      this.mouseY = event.pageY - e.top;
      break;

    // 回転制御中
    case 'mousemove' :
    case 'touchmove' :
      event.preventDefault ();//ipadなどでスクロールさせないため
      e = event.target.getBoundingClientRect ();
      x = event.pageX - e.left;
      y = event.pageY - e.top;

      if (this.touchF){
        dx = (x - this.mouseX) * this.gain;
        dy = (y - this.mouseY) * this.gain;
        rotation.call (this, dx, dy);
      }

      this.mouseX = x;
      this.mouseY = y;
      break;
    }

  }


  // 要素にイベントを追加する
  function addEvent (event_type) {
    this.target.addEventListener (event_type, this, false);
  }


  // オブジェクトの生成
  function create (target) {
    if (1 > arguments.length)
      throw new Error ('引数がない');

    var obj = new RotationController (target);
    var event_list = window.TouchEvent //touchイベントがあるなら優先
      ? ['touchstart', 'touchend', 'touchmove']
      : ['mousedown', 'mouseup', 'mousemove', 'mouseout'];

    canvas = null;// メモリーリークパターンを断ち切る
    event_list.forEach (addEvent, obj);

    return obj;
  }

  //__

  RotationController.prototype.handleEvent = handleEvent;
  RotationController.prototype.quaternionRotation = quaternionRotation;
  //__
  RotationController.create = create;

  this.RotationController = RotationController;

}) ();


function canvasDrawCreate (canvas) {
  var ctx = canvas.getContext ('2d');
  var w = canvas.width;
  var h = canvas.height;
  var cx = w / 2;
  var cy = h / 2;
  var z = 1000;
  var opmax = 255;

  return function (ary) {
    ctx.fillStyle = 'RGBA(255,255,255,1)';
    ctx.fillRect (0,0, w, h);

    for (var i = 0; i < ary.length; i++) {
      var px = ary[i][0];
      var py = ary[i][1];
      var pz = ary[i][2];
      var zz = (z - pz) / z;
      var op = -(pz - 300) / z;
      var alpha = Math.min (Math.max (0, op), 1);
      ctx.fillStyle = 'rgba(0,0,255,' + alpha + ')';
      ctx.fillRect (cx + px * zz, cy - py * zz, 2.5, 2.5);
    }
  };
}


  var loop = (function () {
    var target = document.querySelector ('canvas');
    var ctl = RotationController.create (target);
    var ps = create (3, 200); //球面の点の数と半径
    var draw = canvasDrawCreate (target);

    return function () {
      var ps_ = ctl.quaternionRotation (ps);
      draw (ps_);
    };
  })();

  setInterval (loop, 1000/30); //タイマーで呼び出す

</script>