JSFiddle - React, Tailwind, and code Playground
HTML
<div id="test">
</div>
CSS
canvas#network {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 80%, rgba(0,0,0,0.3) 100%);
}
#test{
width:100px;
height:100px;
border:1px solid black;
}
}
JavaScript
window.addEventListener("load", function() {
var n = new Network(15, 7);
}, false);
function Network(nPoints, nGroups) {
this.nPoints = nPoints || 100;
this.nGroups = nGroups || 100;
this.animate = this.animate.bind(this);
this.init();
}
Network.prototype = {
init: function() {
this.zoomFactor = 1;
this.points = [];
this.projections = [];
for (var i = 0; i < this.nPoints; i++)
this.points.push(this.randomPoint());
this.connections = [];
// grouping is a little broken. They are usually all connected
var indices = [];
for (var i=0; i<this.nGroups-1; i++) {
indices.push(Math.floor(Math.random()*this.nPoints));
}
indices.sort(function(a,b){return a-b})
indices = [0].concat(indices).concat([this.nPoints-1]);
for (var i=0; i<indices.length-1; i++) {
for (var o=indices[i]; o<indices[i+1]-1; o++) {
for (var p=o; p<=indices[i+1]; p++) {
this.connections.push([o, p]);
}
}
}
this.alpha = Math.random()*Math.PI*2;
this.beta = Math.random()*Math.PI*2;
this.canvas = document.createElement("canvas");
this.canvas.id = "network"
document.getElementById('test').appendChild(this.canvas);
this.ctx = this.canvas.getContext("2d");
this.resize();
window.addEventListener("resize", this.resize.bind(this), false);
window.requestAnimationFrame(this.animate);
},
map2d: function(p) {
var ca = Math.cos(this.alpha), sa = Math.sin(this.alpha);
var cb = Math.cos(this.beta), sb = Math.sin(this.beta);
var xx = (p.x*ca+p.y*sa)*cb + p.z*sb;
var yy = p.y*ca-p.x*sa;
var zz = p.z*cb - (p.x*ca+p.y*sa)*sb;
return {
xs: this.width/2 + this.zoomFactor*this.width*xx/(3+zz),
ys: this.height/2 + this.zoomFactor*this.height*yy/(3+zz),
zs: zz,
r: Math.min(this.width, this.height) * (5 + zz) / 100,
color: "rgba(55, 135, 252, "+(1.5+zz)/3+")"
};
},
randomPoint: function() {
var x = Math.random() - 0.5, y = Math.random() - 0.5, z = Math.random() - 0.5;
var k =...