Stap 2: Kinetic.js: Clustering van de sterren
Hoewel niet meteen zichtbaar, is de Melkweg niet willekeurig gerangschikt.
Klik op een van de categorieën op het hoogste niveau, bijvoorbeeld, en je ziet een ring:
Inzoomen op een afzonderlijk kanaal, en je ziet een strakke cluster van projecten:
De projecten zijn geclusterd door Instructables categorieën en kanalen. De zes ringen toprubriek uitstralen naar buiten van het centrum van het universum, en elk kanaal binnen elke categorie krijgt een gelijke cirkelsegment van de ring. Dit resulteert in een "geclusterde" distributie van de sterren, aangezien sommige categorieën voller dan anderen zijn, en sommige zenders binnen categorieën voller dan anderen zijn. Deze clusters zijn beide weerspiegelend van het saldo van de projecten in de categorieën en de kanalen Instructables en bieden sommige sommige esthetische aantrekkingskracht.
De code die maakt dit gebeuren werd geschreven in KineticJS, maar kon zijn geschreven in de vlakte JavaScript, verwerking of iets anders. Een ring wordt toegewezen aan elk van de zes categorieën, en een willekeurig punt (nul tot 2 * pi) langs die ring die als de centerpoint voor elk kanaal fungeert. Dit gebeurt allemaal met trig basisfuncties: x = r*cos(theta) en y = r * sin(theta) waar zijn (radius) is afgeleid van de ring waarop elk project zich bevindt en theta is afgeleid van de "midden-hoek" voor elk kanaal. Zoals projecten worden verwerkt, kinetische creëert een nieuwe laag voor het kanaal (indien nodig) en voegt het project toe aan die laag. De laag is toegevoegd aan de categorie laag en alle lagen worden toegevoegd aan het werkgebied. Kinetische maakt het eenvoudig om het samenvouwen van alle deze getallen naar beneden af wereld XY-coördinaten, dat is waarom de code nooit herschreven was wanneer het project naar Three.js verplaatst. Elk project krijgt een willekeurige z, binnen een smalle bandbreedte.
Het interessantste deel is misschien het creëren van een Gaussiaanse distributie, in plaats van willekeurige spreiding rond deze middelpunten:
rnd_snd : function() { return (Math.random()*2-1)+(Math.random()*2-1)+(Math.random()*2-1); }
random : function(mean, stdev) { return rnd_snd()*stdev+mean; }
Dit handige truc geboden door proton vis. Hebt u een target gemiddelde en de standaarddeviatie voor enigerlei normaalverdeling die je probeert te genereren, is een handig in de buurt van-benadering het toevoegen van drie uniforme randoms samen.