Instructables universum i Three.js (2 / 13 steg)
Steg 2: Kinetic.js: klustring stjärnorna
Om inte är uppenbar, arrangeras galaxen inte slumpmässigt.
Klicka på en av de översta nivån kategorierna, till exempel, och du ser en ring:
Zooma in på en enskild kanal, och du ser ett tight kluster av projekt:
Projekten är grupperade efter Instructables' kategorier och kanaler. De sex översta kategorin ringarna komma utåt från centrum av universum, och varje kanal i varje kategori får en lika cirkelsektor i ringen. Detta resulterar i en "klustrade" fördelning av stjärnorna, eftersom vissa kategorier är fylligare än andra och vissa kanaler inom kategorierna är fylligare än andra. Dessa kluster är både reflekterande av resterande del av projekt i Instructables' kategorier och kanaler och ge några några estetiskt tilltalande.
Den kod som gör detta hända skrevs i KineticJS, men kunde ha skrivits i vanlig JavaScript, bearbetning eller något annat. Det tilldelar en ring till var och en av de sex kategorierna och en slumpmässig punkt (noll till 2 * pi) längs den ring som fungerar som centerpoint för varje kanal. Detta sker med grundläggande trigonometriska funktioner: x = r*cos(theta) och y = r * sin(theta) där är (radius) härleds från ringen som varje projekt är bosatt och theta härstammar från "center vinkeln" på varje kanal. Som projekt bearbetas, Kinetic skapar ett nytt lager för kanalen (om behöver vara) och lägger till projektet till lagret. Lagret läggs till den kategorin lager och alla lager läggs på scenen. Kinetic gör det enkelt att kollapsa alla dessa siffror ner till världen XY-koordinater, varför koden skrevs aldrig om när projektet flyttas till Three.js. Varje projekt får en random z, inom ett snävt intervall.
Kanske den mest intressanta delen är att skapa en Gaussisk fördelning, snarare än slumpmässiga scatter runt dessa centrala punkter:
rnd_snd: function() {
avkastning (Math.random()*2-1)+(Math.random()*2-1)+(Math.random()*2-1);
}
Random: funktion (menar, STDAV) {
retur rnd_snd () * STDAV + menar;
}
Detta användbara trick som tillhandahålls av proton fisk. Om du har ett mål medelvärde och standardavvikelse för någon sorts normalfördelning du försöker generera, är en händig nära-approximation att lägga tre enhetliga randoms tillsammans.