球面上にN個の点を均等に配置したい。その３

JavaScript

理論は未だ不明なのだが、ryamada22 さんからの助言を頂いた方法で試してみた。
こちらの方が均等な感じがする
もちろんコードはやっつけで書いたので、後で清書する。

<!DOCTYPE html>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
body,
canvas { background : black; }

  </style>
<body>
<h1>Test </h1>
<canvas width="1024" height="1024"></canvas>
<script>
var canvas = document.querySelector ('canvas');
var ctx = canvas.getContext('2d');
var x = 512;
var y = 512;
var n = 100;
var r = 300;
var w = +canvas.width;
var h = +canvas.height;

var DEG = Math.PI / 180;
var K = 0;
var L = 0;
var z = 2;
var s = 200;

function fib (n) {
  var a = 0,
      b = 1,
      c = 2,
      r = [a, b],
      s;
  
  while (--n) {
    s = r[c++] = a + b;
    a = b;
    b = s;
  }
  
  return r;
}



function B (n, FN) {
  var fn = FN[n] / 2;
  var f1 = (Math.sqrt (5) + 1) / 2;
  var k = 1;
  var f2 = f1 - 1;
  var P = 2 * n + 1;
  var i, T, phi;
  var rst = [];
  var x, y, z;
  
  for (i = -n; i <= n; i += k) {
    T = Math.asin (2 * i / (2 * n + 1));
    z = Math.sin (T);
    phi = 2 * Math.PI * i * f2;
    x = Math.cos (T) * Math.cos (phi);
    y = Math.cos (T) * Math.sin (phi);
    rst.push ([x, y, z]);
  }
  return rst;
}


function draw () {
  ctx.fillStyle = 'RGBA(0,0,0,.25)';
  ctx.fillRect (0,0, w,h);
  for (var i = 0; i < a.length; i++) {
    var px = a[i][0];
    var py = a[i][1];
    var pz = a[i][2];
    
    var deg0 = K * DEG;
    var deg1 = L * DEG;
    var sin = Math.sin (deg0);
    var cos = Math.cos (deg0);
    var sin2 = Math.sin (deg1);
    var cos2 = Math.cos (deg1);
    
    var tx = px * cos + pz * sin;
    var ty = py;
    var tz = px * sin - pz * cos;
    
    px = tx * cos2 + ty * sin2;
    py = tx * sin2 - ty * cos2;
    pz = tz;
    
    pz = z + pz;
    var zz = pz / z;
    px = px * zz
    py = py * zz;
    
    ctx.fillStyle = '#c40';
    ctx.fillRect (x + px * s, y - py * s, 5 * zz, 5 * zz);

  }
  K += 1.5;
  L += 0.1;

}

var FN = fib (n);
var a = B (n, FN);

setInterval (draw, 33);

</script>