JSFiddle - React, Tailwind, and code Playground

by Troy Alford

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/regl/1.3.13/regl.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>

CSS

body { margin: 0; }
canvas { width: 100%; height: 100% }

JavaScript

var numberOfPoints = 5000;
var radiusOfSphere = 30;
var fibonacciSpherePoints = generate(numberOfPoints, radiusOfSphere);

function generate(samples, radius, randomize) {
  // Translated from Python from https://stackoverflow.com/a/26127012
  samples = samples || 1;
  radius = radius || 1;
  randomize = randomize || true;
  var random = 1;
  if (randomize === true) {
    random = Math.random() * samples;
  }

  var points = []
  var offset = 2 / samples
  var increment = Math.PI * (3 - Math.sqrt(5));

  for (var i = 0; i < samples; i++) {
    var y = ((i * offset) - 1) + (offset / 2);
    var distance = Math.sqrt(1 - Math.pow(y, 2));
    var phi = ((i + random) % samples) * increment;
    var x = Math.cos(phi) * distance;
    var z = Math.sin(phi) * distance;
    x = x * radius;
    y = y * radius;
    z = z * radius;
    var point = new THREE.Vector3(x, y, z)

		points.push(point);
  }
  return points;
}


init();