javascript – 使用Fibonacci格子在球体上统一排列点

前端之家收集整理的这篇文章主要介绍了javascript – 使用Fibonacci格子在球体上统一排列点前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在单位球体的表面上或多或少均匀地排列点.

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是弧度,而不是度.这样我以后可以使用X / Y / Z坐标来绘制它们,我使用javascript Math.sin和Math.cos函数获得它们,它们接受弧度而不是度数.

lat的第一行非常简单.我在文档中省略了180 / Pi的因子,因为我希望将结果保持为弧度.

lon的第二行使用黄金比率获取指数的模数,而不是乘以因子360 / Phi得到以度为单位的答案,我乘以(360 / Phi)*(Pi / 180)到用弧度给出答案.

由于trig函数不关心弧度范围,我不需要确保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,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,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那样大得多的东西,那么你会发现极点附近有很多聚集,并且有些地方稀疏点.

我已经坚持了一段时间了.任何人都可以看到我犯了哪些错误吗?

解决方法

你的e [i N] .lon关闭了0.5倍.
原文链接:https://www.f2er.com/js/157329.html

猜你在找的JavaScript相关文章