Perlin Støy er oppkalt etter Ken Perlin, som utviklet denne støyen mønster for bruk i datagrafikkprogrammer . For bedre å forstå det, la oss først ta en titt på vanlig støy.

Støy i datagrafikk er i utgangspunktet bare en helt tilfeldig bilde. Hvis du åpner opp Photoshop, opprette et nytt bilde, og fylle lerretet med hvit, kan du se effekten av vanlig støy ved å velge Filter > Noise > Legg Noise ... meny. Angi mengden til 100%, og eventuelt slå på monokromatisk alternativet. Effekten vil se ut statisk:

Dette kan produseres rett og slett ved å bare sette hver piksel i et bilde til en tilfeldig gråtoner mengde (det er litt av en forenkling, men la oss holde det enkelt)
<. p> Perlin støy, derimot, har en mer organisk føler for det, noe som er grunnen til at det ble utviklet. Du kan få en følelse for det, i Photoshop, ved å opprette et nytt dokument og deretter velge Filter > Gjengi > Skyer. Du vil umiddelbart se forskjellen:

Du kan se at hver piksel har en innflytelse over sine naboer; mørke områder er gruppert sammen, noe som gir den et glattere utseende.

På grunn av "kontrollert tilfeldig" av Perlin støy, det har tonnevis av applikasjoner i datagrafikk, fra teksturer i 3D-simuleringer til å simulere røyk og ild. Vi vil dra nytte av "luminans gruppering" av Perlin støy å kartlegge hullene i vår maske.

Wikipedia har en kort artikkel om Perlin Noise. Denne artikkelen kommer inn ganske mye detalj på støy generelt og Perlin støy spesielt hvis du ønsker å vite mer om mekanikken i prosessen

Start med bare å lage en ny mappe på harddisken kalt Perlin Mask til å huse alle prosjektrelaterte filer

Åpne Flash Professional (CS4 ble brukt til å skrive denne opplæringen, men i trinn 15 du 'll trenger å bruke en Vector, som bare er tilgjengelig i Flash Pro CS4 +, jeg har gitt et alternativ på slutten av dette trinnet) og opprette en ny Actionscript 3.0 fil (gå til Fil > Ny meny og velg "Action 3,0 "fra listen).

Lagre denne filen som PerlinMask.fla i prosjektmappen.

Kopier com mappen fra den opprinnelige testprosjekt til den nye lysbilde prosjekt, slik at vi har . tilgang til PerlinMask klassen

I Slideshow klasse, legg denne koden.
pakke {import flash.display *; import flash.events. *; import flash.utils. *; import com.activetuts.effects.PerlinMask; importere com.greensock. *; importere com.greensock.easing. *; public class Show strekker Sprite {private Var _images: Array; private Var _masks: Array; private Var _timer: Timer; private Var _index: UINT; offentlig funksjon Slideshow () {_images = [saturn_mc, spiral_mc, mars_mc, hyperion_mc, galacticCenter_mc]; _masks = []; for hver (var img: Sprite i _images) {_masks.push (ny PerlinMask (img, 1)); } _timer = New Timer (5000); _timer.addEventListener (TimerEvent.TIMER, onTimer); _timer.start (); _index = 0; onTimer (null); } Private funksjon onTimer (e: Timerevent): void {var maske: PerlinMask = _masks [_index]; Var bilde: Sprite = _images [_index]; setChildIndex (bilde, this.numChildren-1); mask.reseed (); mask.percent = 1; TweenLite.to (maske, 2, {prosent: 0, lette: Quad.easeOut}); _index ++; if (_index > = _masks.length) {_index = 0; }}}}

Etter import og eiendoms erklæringer, vi sette ting opp i konstruktøren. Først stash vi en rekke bilder (bildene er Sprite objekter, hver med et bilde som finnes), og vi har også initialisere en tom array å holde masker stedene. Så vi sløyfe over Array av bilder, og for hvert bilde skaper vi en tilhørende maske. Den PerlinMask refererer gitt bilde, og også opptar samme sporet i _masks matrise som bildet gjør i _images array.

Det neste trinnet er å sette opp en timer, som branner hvert 5. sekund. Vi utløse timerens lytteren manuelt i starten, slik som å få det første bildet til overgangen i med en gang, i motsetning til å måtte vente 5 sekunder for tidtakeren til brann. Også er det en _index eiendom som vi initial til 0. Dette sporer posisjonen til i dag viser bildet i rekken.

Neste, i TIMER hendelseshåndterer, den første vi gjør er grip referanser til gjeldende bilde og maske objekter, bruker _index. Vi så pop bildet til toppen av skjermen stabelen, slik at den blekner i på toppen av det forrige bildet. Så spør vi masken til reseed slik at vi får en ny overgang, sørge for at det prosent er en slik at bildet starter helt usynlig, og deretter endelig starte en tween til en prosent fra 0, og bringer bildet til eksistens. Anmeldelser

Den siste delen av hendelseshåndterer inkrementerer _index eiendom, kontrollerer at det er i et juridisk område for array, pakke det tilbake til 0 om nødvendig. Dette holder vår lysbildefremvisning går på ubestemt tid, looping tilbake rundt til begynnelsen.

Det er sikkert niceties vi kunne legge til PerlinMask klassen. For eksempel vil det være relativt enkelt å legge til noen settere og getters for uskarphet beløp. Den setter ville bare sette den eksisterende _blur eiendommens blurX og Blury til ønsket verdi. Dette kan også være tweened i tillegg til prosent for en ekstra-trippy effekt.

Dessuten ville det være hensiktsmessig å legge til minst en getter for _target, slik at du alltid kan referere den maskerte objekt fra en gitt maske. Likeledes kan det være nyttig å selv legge til en setter for _target, slik at du kan gjenbruke en maske blant en rekke DisplayObjects. Vi kunne for eksempel ikke opprette fem maske objekter i fremvisningen prosjektet; bare lage en og overføre den til tiden overgangen bildet etter behov.

Det kan også være andre parametre utsatt, for å finjustere resultatet av Perlin støy. Oktaver, offset, eller enda frøverdien potensielt kan tilpasses for spesifikke effekter. Muligens du er ute etter en bestemt støy mønster, og du vet et frø av 420 får du dette mønsteret.

Dette er alle nyttige ideer, men får utenfor omfanget av denne opplæringen. Jeg la det til deg som en øvelse for å implementere disse funksjonene hvis du ønsker å ha dem.

Alle bildene som er gitt i nedlastingspakken og presentert i bilder og SWF på denne siden er gitt tillatelse fra NASA. De ble hentet fra de siste innleggene fra Astronomy Picture of the Day hjemmeside, som du finner her. De har en RSS-feed, som er sterkt anbefalt.

NASA gir sine bilder i det offentlige rom, som forklart her. For fullstendighets skyld, ble bildene funnet på følgende nettadresser (hvor du også kan gå å lese om emnet)

Galactic Center:. Http://apod.nasa.gov/apod/ap090614.html

Hyperion: http://apod.nasa.gov/apod/ap110227.html

Saturn & Titan: http://apod.nasa.gov/apod/ap110308.html

Mars: http://apod.nasa.gov/apod/ap110313.html

Spiral Galaxy: http : //apod.nasa.gov/apod/ap110322.html

Vi har klart å skape en ganske kul måte å overgang kunstverk fra å være synlig for det, eller den andre veien rundt. Underveis har vi undersøkt noen av de mer avansert metoder som er involvert med BitmapData. Jeg håper at du har ikke bare utvidet dine kunnskaper om Actionscript, men endte opp med en fancy effekt for verktøykassen. Takk for at du kom ut for å leke! Anmeldelser