Stap 1: Verwerking: de achtergrondafbeeldingen genereren
Eerst, bracht ik wat tijd kijken naar ruimte. Na bijna graven het idee recht toen en daar toen ik merkte dat de standaardbureaubladachtergrond van mac was opvallend dicht bij waar ik werd geleid, ik bleef op merk sommige details over de beelden van de ruimte en sterrenclusters zelf:
-Individuele sterren variëren in grootte, helderheid, kleur (rood op blauw) en de omliggende wolken van gas
-Clusters zowel vanwege de opeenhoping van sterren verschijnen en vanwege de manier waarop ze licht gassen meer in hun nabijheid
-De schoonheid komt grotendeels van gemengde kleuren
-"Haze" is van cruciaal belang
-Helderheid clusters in groepen die voelen concentrische, maar zijn nog niet
-Vele beelden hebben donkere gebieden rond de randen; vignet effect
-Star kleuren moeten "mengsel" met hun achtergrondkleur. Er waren weinig blauwe sterren verschijnen in anders rode ruimte.
De schets van de verwerking voor de achtergrondafbeelding probeert te veranderen deze regels in de code:
PVector center; float diagonal; void setup() { int width = 960, height = 440; size(width,height); center = new PVector(width/2,height/2); diagonal = dist(0,0,center.x,center.y); noiseDetail(5,.5); colorMode(HSB, 1); for (int i = 1; i 0.4 (wrapping) saturation = 0.75 - v; lightness = v*lightnessMultiplier; // brighter towards middle alpha = maxOpacity - distance*0.6/diagonal; fill(hue,saturation,lightness,alpha); rect(x,y,1,1); } } } void setGradient(int x, int y, float w, float h, color c1, color c2) { noFill(); for (int i = y; i There's nothing fancy here:makeNew chooses two colors (one a randomized hue, the other a darker shade of it). It then calls clouds three times with different parameters to generate several superimposed variations of haze. Then it saves the image. clouds loops over each pixel, mixing perlin noise with a distance-based dropoff for alpha and brightness of the cloud. This adds up to a splotchy + vignette effect for each image, regardless of the "hardness" of the cloud's edge, the size of the cloud in x or y, or the colors involved. The many magic numbers included in this function are the result of trial and-error, not any sort of rigor.setGradient applies a darker hue to the bottom part of the screen than the top.setup runs this loop 100 times, so there are some background images to choose from.These images are later vignetted in JavaScript's canvas to hide the edges. It's certainly true that this could have been done in many other places (processing, photoshop/gimp, threejs), but doing it in Javascript has two advantages:1) The Images don't need to be vignetted beforehand; if I change my mind on the vignette qualities, I can do so after I see all the pieces together and2) With the image loaded on the canvas, I have the opportunity to sample its pixels to choose a background color for three.js that blends well with the particular background image. The code that does this essentially just loads a background image (a random selection from the processing output) and a pre-set transparency image (drawn in Gimp). It uses the transparency JPEG for the alpha channel, and assigns and RGBA pixel based on the background image and the transparency image. The combined output is loaded as a texture for three.js. Inspiration for the vignetting technique comes from this code, full tutorial here.
