Instructables Universe in Three.js (1 / 13 stap)

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. 

Gerelateerde Artikelen

The Instructables University Game

The Instructables University Game

Ik had niet gepland op het invoeren van de "How to play wedstrijd" want ik niet echt een gameconsole ben. Na het nadenken, kwam ik met The Instructables Universiteit Game. Ik heb geprobeerd om mijn volwassen zoon aan bij de pret hier, maar zijn
Verleden projecten/Pre Instructables...

Verleden projecten/Pre Instructables...

I wish I would have found Instructables two or three years ago. Ik kon een deurklink van een veel meer hebben bijgedragen. Met mijn recente verplaatsen onvermijdelijk dat heb ik besloten om enkele foto's van eerdere projecten in mijn huidige huis ver
Jus te gaan met een gebraden

Jus te gaan met een gebraden

hoewel dit dom eenvoudig is, ik ben voortdurend verbaasd over het aantal mensen die geïntimideerd, zijn wanneer het gaat om het maken van een simpele jus te gaan met een gebraden. Deze jus werkt ruim aardappelen, besprenkeld over het vlees of de volg
Gedetailleerde geweven Duct Tape portefeuilles Instructable

Gedetailleerde geweven Duct Tape portefeuilles Instructable

Ja, ja, het is een ander Duct Tape wallet instructable.Hoe saai, juiste?De reden dat ik dit doe is dat ik proberen zal te doen samenballen van kennis over het bouwen van allerlei soorten Duct Tape portefeuilles en ingaan op veel aspecten zodat u zal
Steven Universe jurk

Steven Universe jurk

Een goede vriend van mij houdt Steven Universe, dus ik haar deze jurk als een gift van de verjaardag maakte. Ik denk dat dit is een echt mooie jurk, en zou een geweldig cosplay of Halloween kostuum!Ik maakte haar ook een volledige set van kat vinger
TestrBot: De $300 Universal testmachine

TestrBot: De $300 Universal testmachine

UPDATE 9-2-15: ik vrijgegeven een batch van testresultaten die aantonen dat mijn beweegredenen voor terwijl "infill"-ontwerp is de beste!* Wat is TestrBot?TestrBot is een $300 Universal Test Machine (UTM) en kan worden gebruikt voor het uitvoere
Steven Universe lumi inkodye ondergoed met crystal gem Garnet

Steven Universe lumi inkodye ondergoed met crystal gem Garnet

Een van de dingen die mijn geld kan niet kopen is prima super held/favoriet karakter ondergoed (of elke merch echt) voor dames. Elke vorm van boksers schijnt beschikbaar te zijn, en soms heb ik geprobeerd kopen sommige "jongens" grootte ondergoe
SUMO :  Slimme /* * Smart Pulse Monitor * Author : Geeve George * Instructables : */ #include const int analo

SUMO&nbsp;:&nbsp;<youtube&nbsp;id="lDKM7UKUL5A"></youtube>&nbsp;Slimme&nbsp;/*&nbsp;*&nbsp;Smart&nbsp;Pulse&nbsp;Monitor&nbsp;*&nbsp;Author&nbsp;:&nbsp;Geeve&nbsp;George&nbsp;*&nbsp;Instructables&nbsp;:&nbsp;*/&nbsp;#include&nbsp;const&nbsp;int&nbsp;analo

src = "HalloIedereen,Ik benGeeveGeorgeeen15jaaroudeMaker/elektronicaHobbyist.IliefdeComputerVisie,AndroïdeOntwikkelingenAlgoritmeDesign.Iamop dit momentin11eRangComputerWetenschapStudentbijWeinigRockIndischeSchool.:)Zoekenmeerovermebij:href = "h
DIY zelf geactiveerd PRIVATE UNIVERSE

DIY zelf geactiveerd PRIVATE UNIVERSE

dit is mijn allereerste ooit Instructables uploaden dus, wees voorzichtig met mij.Ik maakte dit voor een kleine galerie ruimte in een ARI genoemd Constance in Hobart, Tasmanië, Australië, en is speciaal ontworpen om te worden geactiveerd wanneer mens
Knex verstek zagen instructies

Knex verstek zagen instructies

het is teruggekeerd! Ja, na 3 jaar, heb ik eindelijk besloten om te posten van instructies van mijn verstek zaag. Deze zaag is net als de oude is, behalve een paar kleine kleurwijzigingen te geven een meer consistent kleurenschema. Voor degenen onder
Pimp mijn PSP hoofdstuk 1 uw one-stop Instructable voor al uw PSP behoeften!

Pimp mijn PSP hoofdstuk 1 uw one-stop Instructable voor al uw PSP behoeften!

Dit instructable leert u sommige unieke dingen die uw PSP in een Multi-Media beest transformeren zal.Dit instructable zal u tonen hoe te:1. update uw PSP (officiële Firmware, niet Custom Firmware)2. video's toevoegen aan uw PSP (hoofdstuk 2)3. foto's
Met de Switch()-instructie als Sequencing Control

Met de Switch()-instructie als Sequencing Control

In dit Instructable, zal wij gaan over de "switch()"-instructie en het gebruik in de programmering. De instructie switch is een krachtig hulpmiddel voor het organiseren van uw programma, gemakkelijk kunt u complexe stroomdiagrammen doorlopen.In
Overleven in het wild-het meest unieke instructable tot nu toe

Overleven in het wild-het meest unieke instructable tot nu toe

u hebben net wakker om jezelf te vinden op de grond in het wild.  Vóór het opstaan vanuit je liggende positie realiseert je je dat, naast het feit dat niet in uw eigen warme comfortabele bed, u hebben gewekt in het kreupelhout onder het bladerdak van
Stalen Python Knex achtbaan - instructies

Stalen Python Knex achtbaan - instructies

is terug iedereen-staal Python!Dit model is de recreatie van mijn oudere ontwerp, met een paar kleine wijzigingen, aangezien ik nooit had specifieke foto's van het origineel. Dit ontwerp heeft natuurlijk zijn gebreken, zodat u wellicht om te knoeien