Instructables universum i Three.js (1 / 13 steg)

Steg 1: Bearbetning: generera bakgrundsbilder

Först, jag tillbringade några tid att titta på utrymme. Efter nästan dikning tanken just då och där när jag märkte att mac standard skrivbordsunderlägg var påfallande nära där jag var på väg, jag fortsatte med att märka några detaljer om bilder av rymden och stjärnhopar sig:

-Enskilda stjärnor varierar i storlek, ljusstyrka, färg (rött till blått) och de omgivande moln av gas
-Kluster visas både på grund av ackumulationer av stjärnor och sättet de lätta gaser mer i deras närhet
-Skönheten kommer till stor del från blandade färger
-"Haze" är kritisk
-Ljusstyrka kluster i grupper som känner koncentriska, men inte är ens
-Många bilder har mörkare områden runt kanterna; vinjett effekt
-Star färger måste "blanda" med deras bakgrundsfärg. Det fanns mycket få blå stjärnor som förekommer i annars röda utrymme.

Bearbetning skissen för bakgrundsbilden försök att vända dessa regler i koden:

PVector center;
float diagonal;

void setup()
{
int bredd = 960, höjd = 440;
size(width,height);

Center = nya PVector(width/2,height/2);
Diagonal = dist(0,0,center.x,center.y);

noiseDetail(5,.5);
colorMode (HSB, 1);

för (int jag = 1; jag 0,4 (omslag)
mättnad = 0,75 - v.
lätthet = v * lightnessMultiplier; ljusare mot mitten
alpha = maxOpacity - avstånd * 0,6 / diagonal;
Fill(Hue,saturation,Lightness,alpha);
rect(x,y,1,1);
}
}
}

void setGradient (int x, int y, float w, float h, färg c1, färg c2) {
noFill();
för (int jag = y; i
Det finns inget fancy här:
makeNew väljer två färger (en en randomiserad nyans, den andra en mörkare nyans av det). Sedan anropar moln tre gånger med olika parametrar att generera flera överlagrade varianter av haze. Sedan sparar bilden.
moln slingor över varje pixel, blanda perlin noise med en distansbaserade dropoff för alpha och ljusstyrka av molnet. Detta innebär att en splotchy + vinjett effekt för varje bild, oavsett av molnet kant, "hårdhet" storleken på molnet i x eller y, eller färgerna inblandade. Många magiska siffrorna ingår i denna funktion är resultatet av trial and error, inte någon form av stringens.
setGradient gäller en mörkare nyans för den nedre delen av skärmen än toppen.
installationen går denna slinga 100 gånger, så det finns några bakgrundsbilder att välja mellan.
Dessa bilder är senare vignetted i JavaScript är canvas att dölja kanter. Det är förvisso sant att detta kunde ha gjorts på många andra platser (bearbetning, photoshop/gimp, threejs), men gör det i Javascript har två fördelar:
1) bilderna behöver inte vara vignetted förväg. om jag ändrar mig på den vinjett kvalitet, jag kan göra det när jag ser alla bitar tillsammans och
2) med bilden på duken, har jag möjlighet att prova dess pixlar för att välja en bakgrundsfärg för three.js som förenas med särskilda bakgrundsbilden.

Koden som gör detta i huvudsak bara laddas en bakgrundsbild (ett slumpmässigt urval från bearbetning utdata) och en förinställd insyn bild (dras in Gimp). Den använder öppenheten JPEG för alfakanal, och tilldelar och RGBA pixel baserade på bakgrundsbilden och öppenhet bilden. Den kombinerade produktionen läses in som en struktur för three.js. Inspirationen till vinjettering tekniken kommer från denna kod, full tutorial här.