javascript - 使用斐波那契格子在球体上均匀排列点

Question

我正在尝试沿单位球体的表面或多或少均匀地排列点。

I'm told虽然这个问题很困难，Fibonacci Lattices给出一个很好的解决方案。

几天来我一直在尝试遵循链接文档中提供的非常简单的方法，但我就是无法让它看起来正确。

我正在使用 javascript，我有一个对象数组 e，每个对象都有一个 lat 和 lon 参数。这是我用来在球体上排列点的函数:(现在假设点数总是奇数)

function arrangeEntries(e)
{
    var p = e.length;
    var N = (p - 1) / 2;

    for (var i = -N; i <= N; i++)
    {
        e[i + N].lat = Math.asin((2 * i) / (2 * N + 1));
        e[i + N].lon = mod(i, 1.618034) * 3.883222;
    }
}

与

function mod(a, b)
{
    return a - Math.floor(a / b) * b;
}

与文档中不同，我的 lat 和 lon 以弧度表示，而不是度数。这样我就可以稍后使用我使用 javascript Math.sin 和 Math.cos 函数获得的 X/Y/Z 坐标绘制它们，它们不接受弧度学位。

lat 的第一行相当简单。我在文档中省略了 180/Pi 的因数，因为我想以弧度表示结果。

lon 的第二行使用黄金比例取指数的模数，而不是乘以 360/Phi 的系数来给出以度为单位的答案，我乘以 (360/Phi) * (Pi/180) 给出以弧度为单位的答案。

由于三 Angular 函数不关心弧度的范围，我不需要确保 lat 和 lon 在范围内(-pi， pi].

渲染点:

function render(e)
{
    var offsetX = Math.floor(canvas.width  / 2);
    var offsetY = Math.floor(canvas.height / 2);

    var r = Math.min(canvas.width, canvas.height) * 0.4;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < e.length; i++)
    {
        var x = Math.cos(e[i].lat) * Math.sin(e[i].lon);
        var y = Math.sin(e[i].lat) * Math.sin(e[i].lon);
        var z = Math.cos(e[i].lon);

        // Make z go from 0.1 to 1 for scaling:
        z += 1;
        z /= 2;
        z *= 0.9;
        z += 0.1;

        ctx.beginPath();
        ctx.arc(r * x + offsetX, r * y + offsetY, z*5, 0, 2 * Math.PI, false);
        ctx.fillStyle = "#990000";
        ctx.fill();
        ctx.lineWidth = 2;
        ctx.strokeStyle = "#FF0000";
        ctx.stroke();
        ctx.closePath();
    }
}

为了在旋转之前产生深度错觉，我将点的半径乘以 z 坐标，我将其线性缩放到 [0.1,1.0]。

这是包含所有代码的 JSFiddle 链接:https://jsfiddle.net/wexpwngc/如果将点数从 101 增加到更大的值(例如 1001)，那么您会看到极点周围有很多团 block ，并且有些地方点稀疏。

我已经坚持了一段时间了。任何人都可以看到我在哪里犯了错误吗？

Answer 1

你的 e[i + N].lon 偏离了 0.5 倍。