JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<body onLoad="init()">
    <canvas id="canvas"></canvas>
</body>

CSS

*
{
    margin:  0;
    padding: 0;
}
canvas
{
    display: block;
    background-color: #000000;
}

JavaScript

var data = new Data();

var canvas;
var ctx;

function Data()
{
	this.entries = new Array();

	this.addEntry = function(e)
	{
		this.entries.push(e);
	}
}

function Entry()
{
	this.lat = 0;
	this.lon = 0;
}

function genRandEntries(n)
{
	for (var i = 0; i < n; i++)
	{
		var e = new Entry();
		data.addEntry(e);
	}
}

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.6180339887498948482045868343656) * 3.8832220774509331546937312599254;
	}
}

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

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

		z += 1;
		z /= 2;
		z *= 0.9;
		z += 0.1;

		console.log("[" + e[i].lat + "," + e[i].lon + "] ==> [" + x + "," + y + "," + z + "]");

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

function init()
{
	canvas = document.getElementById("canvas");
	ctx = canvas.getContext('2d');

	canvas.width  = window.innerWidth;
	canvas.height = window.innerHeight;

	genRandEntries(1501);
	arrangeEntries(data.entries);
	render(data.entries);
}