Geek Answers Handbook

Uniform arrangement of points on a sphere using a Fibonacci lattice

I am trying to arrange the points more or less evenly along the surface of a unit sphere.

I was told that although this problem is complex, the Fibonacci lattices give a very good solution.

I have been trying for several days to follow the very simple method presented in the linked document, but I just can't make it look right.

I use javascript and I have an array of e objects, each of which sets the lat and lon parameter. Here is the function that I use to arrange points on a sphere: (suppose the number of points is always odd)

 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; } }

from

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

Unlike the document, my lat and lon are in radians, not degrees. Therefore, I can build them later using the X / Y / Z coordinates, which I get using the javascript functions Math.sin and Math.cos , which accept radians not in degrees.

The first line for lat pretty simple. I omit the 180 / Pi coefficient in the document because I want to save the result in radians.

The second line for lon takes the index modulus using the golden ratio, and instead of multiplying by 360 / Phi, to give the answer in degrees, multiply by (360 / Phi) * (Pi / 180) to give the answer in radians.

Since trigger functions don't care about which range radians accept, I don't need to make sure that lat and lon are in the range (-pi, pi].

To display points:

 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(); } }

To give the illusion of depth until I turn on the rotation, I multiply the radius of the points by the z coordinate, which I linearly scale to [0,1,1,0].

Here is the JSFiddle link with all the code: https://jsfiddle.net/wexpwngc/ If you increase the number of points from 101 to something larger than 1001, then you will see that there are a lot of clusters around the poles, and there are places sparse in points .

I got stuck on this for a while. Can anyone see where I made a mistake?

+7
javascript algorithm html5-canvas fibonacci
source share
1 answer

Your e [i + N] .lon is disabled 0.5 times.

0
source share

More articles:


All Articles