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倍.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)