Innhold
- Hvorfor bruke data til å drive animasjon?
- Datadrevet vs datavisualisering
- Hva skal vi lage?
- Hva vil vi lære?
- Hvor er filene?
- 01. Start en ny skisse
- 02. Lag første skisse ved hjelp av lyddata
- 03. Bruk lyddata som en pensel
- 05. Fullfør skissen
- RadialArc {} -klassen:
- RadialArcs {} -klassen:
- 06. Ta det videre
p5.js er den nyeste JavaScript-implementeringen av det berømte skrivebordskreative kodemiljøet Processing. Det tar mye av kraften og brukervennligheten i behandlingen og legger den inn i nettleseren din. Det hjelper deg å tegne på lerret, men kan også integreres med websiden din, slik at skissen din kan svare på og manipulere DOM.
p5.js tar bort mye hodepine med animasjon og datavisualisering på nettet og gjør det superenkelt å komme i gang med animasjon ved hjelp av to enkle funksjoner: oppsett () og tegne().
Men ikke anta at denne enkelheten er begrensende, da du kan ta behandling langt ved å lage dine egne funksjoner og utvide den med mange av de fellesskap-skapte bibliotekene.
For mer verktøy og råd til webdesign, se vår liste over glimrende leverandører av webhotell og sørg for å velge den perfekte nettstedsbyggeren og skylagring.
- 6 måter å komme inn på kreativ koding
Hvorfor bruke data til å drive animasjon?
Å lage design- og animasjonssystemer betyr å definere et sett med regler, parametere og variable områder der du kan mate forskjellige data. Evnen til å leke med parametrene til et system og legge inn forskjellige data betyr at du kan lage ubegrensede utgangsvariasjoner med konsistensen av en systematisk tilnærming.
Ulike data kan skape helt forskjellige visuelle utganger, og lyd er en flott kilde til raskt bevegelige, rikt teksturerte data. Det er akkurat det vi skal bruke i animasjonen vår.
Datadrevet vs datavisualisering
Er en datadrevet animasjon en datavisualisering? Ja og nei. Animasjonen din vil være en visuell fremstilling av dataene akkurat som en visualisering, men formålet er forskjellig fra en tradisjonell visualisering. Datavisualisering brukes til å gi betrakteren et innblikk i dataene, så grafikken står til tjeneste for kommunikasjonen av dataene.
Imidlertid vil vi bruke data som et kreativt frø for å gjøre det mulig for oss å generere interessante og strukturelle grafiske variasjoner, og derfor står dataene til tjeneste for grafikken. Selvfølgelig er den ene disiplinen sammenkoblet og kryssbestøver med den andre, men det er godt å gjenkjenne din egen hensikt når du bruker data.
Hva skal vi lage?
p5.js gir oss rask og enkel tilgang til dataene som kommer fra å analysere en lydfil (som en MP3). Vi bruker p5.fft til å analysere forskjellige frekvenser (bass og diskant) i lyden mens den spiller av og visualisere energien eller amplituden til den frekvensen.
For at vi skal kunne se 'formen' på lyden mens den spiller, vil vi ikke bare vise lydens nåværende amplitude, men fange en 'buffer' av datapunkter. Dette vil gjøre det mulig for oss å vise en bevegelig historie med verdier.
For å vise datapunktene våre, lager vi en serie med konsentriske buer fra sentrum til ytterkanten av skjermen. Lengden på buen vil representere amplituden til dataene. Vi bruker også andre visuelle kodinger for dataene våre, for eksempel linjevekt og farge.
Hva vil vi lære?
Når vi arbeider gjennom koden, dekker vi:
- Sette opp en ny p5-skisse
- Laster og analyserer lyd
- Kartlegge dataverdier til visuelle elementer som størrelse, form og farge
- Bruke klasser til å tegne, opprettholde tilstanden til animasjonen og dataene våre og gjøre koden vår gjenbrukbar.
Hvor er filene?
Filene for animasjonen er vert på OpenProcessing, en flott plattform for deling, oppdagelse og forking av andres skisser. Det er også et flott sted å kode.
Når vi bruker lyddata, trenger du en MP3-fil for å dra inn i skissen. Vi setter opp en ny skisse på OpenProcessing; slik vil skissen din se ut når vi har lastet inn lyd, fått dataene og tegnet en enkel 'dataform':
Og slik vil den ferdige skissen se ut:
Alternativt kan du også bruke p5.js online editor eller bare inkludere biblioteket i ditt eget prosjekt via nedlasting eller CDN.
01. Start en ny skisse
Få en gratis OpenProcessing-konto, og klikk på Opprett en skisse fra profilsiden din. Dette vil da skape de mest grunnleggende skissene som inneholder to av p5.js innebygde funksjoner:
- oppsett () - Denne kjører bare en gang, og brukes til å sette opp et nytt lerret
- tegne() - Her setter du kode som du vil kjøre hver ramme
Du merker det bakgrunn() kalles bare en gang i oppsettet. Dette tømmer skjermen, så hvis du vil tømme skjermen hver ramme, må du ta med dette i begynnelsen av skjermen tegne() funksjon også.
Ta en lek med litt kode her, ved hjelp av noen av eksemplene du kan finne på siden p5.js.
02. Lag første skisse ved hjelp av lyddata
Gå til starteksemplet mitt.
Trykk på avspillingsknappen, og du vil se litt tekst som ber deg om å slippe en MP3-fil på lerretet. Vent noen sekunder til den er ferdig med opplastingen, og klikk deretter på lerretet for å starte avspillingen. Du bør se en ellipse som følger musen din, som skalerer og endrer farge sammen med bassamplituden i musikken du lastet opp.
Mye av koden er kommentert, men la oss se på noen viktige elementer:
Rett i begynnelsen av skissen, foran oppsett (), har vi laget noen globale variabler.
Innenfor oppsett () vi har et par viktige linjer:
colorMode (HSB, 360,100,100);
colorMode () lar deg sette p5.js til å fungere i forskjellige fargerom som RGB og HSB, samt konfigurere skalaen du bruker til å navigere i kanalene. Her har vi satt HSB-områder til verdier du kanskje er mer kjent med fra Photoshop i stedet for standardinnstillingen (0 til 255).
canvas.drop (gotFile);
Denne super nyttige p5.js-funksjonen gjør det mulig for oss å lytte etter eventuelle filhendelser på lerretet vårt. Når vi får en filhendelseshendelse, ringer vi gotFile () for å sjekke om det er riktig type og begynne å analysere lyden.
soundFile = ny p5.SoundFile (fildata);
Her gjør vi om de slippede fildataene våre til en SoundFile. Når vi har lydfilen, bruker vi følgende kode:
- initSound () å sette opp en ny FFT-forekomst (for å analysere lyden)
- analyseSound () å analysere gjeldende lydblokk hver ramme
- getNewSoundDataValue () å bruke fft.getEnergy () hver ramme for å gi oss lydens nåværende amplitude. Dette konverteres fra standardområdet fra 0 til 255 til 0 til 1.
Tips: Det er nyttig å konvertere dataene dine til et område fra 0 til 1 fordi du kan bruke dem lettere når du kartlegger dataene til visuelle parametere som skala, hastighet og farge.
La oss se i tegnefunksjonen (). Denne linjen ber om gjeldende amplitude (mellom 0 og 1) av bassfrekvensen og tildeler den variabelen myDataVal.
var myDataVal = getNewSoundDataValue (“bass”)
Vi kaller vår skikk getDataHSBColor () funksjon som kartlegger dataverdien vår separat til fargetone, metning og lysstyrke og gir oss en farge. Jo høyere data, jo lenger beveger fargen seg over fargetone og jo lysere og mer mettet fargen.
var myDataColor = getDataHSBColor (myDataVal);
Før vi kan tegne ellipsen vår, må vi gi den en størrelse ved å multiplisere 200 (px) med dataverdien vår. Så jo høyere verdi, jo større ellips.
var myEllipseSize = 200 * myDataVal;
03. Bruk lyddata som en pensel
For litt moro, kommenter ut bakgrunn() ring inn tegne() funksjon og du kan bruke din lydreaktive ellips til å male med!
05. Fullfør skissen
Å tegne en dataellips for en frekvens er flott, men nå lager vi en serie databuer for både bass og diskant. Vi tegner også en buffer med tidligere verdier som hjelper oss å bedre se formen på lyden.
Besøk denne ferdige versjonen av skissen, kjør den og slipp deretter en MP3 på den.
Du ser nå en serie med buer som dukker opp fra midten av skjermen. De horisontale buene er visualiseringer av bassen, og de vertikale velger ut diskanten på MP3.
Når du ser på koden, vil du se mye av oppsettet, lasting, analyse og henting av data er det samme som forrige skisse, så vi kan ignorere det. Det er ganske mye kode her, så som før, la oss bare velge noen viktige punkter.
I stedet for å trekke buene direkte inn tegne(), vi lager faktisk noen tilpassede klasser:
- klasse RadialArc {} holder den enkelte buens dataverdi og tegner buen
- klasse RadialArcs {} administrerer samlingen vår av 'RadialArc' -forekomster
Hver klassedefinisjon har en konstruktør der vi setter noen nøkkelverdier og også sender inn parametere som gjør at vi kan endre klassens atferd. La oss se nærmere på dem nå.
RadialArc {} -klassen:
Dette er klassen som har en enkelt dataverdi og tegner et par symmetriske buer.
setValue () og getValue () gjør oss i stand til å få dataene inn og ut av en lysbue og skyve dataene gjennom lysbuen vår når dataene oppdateres. redrawFromData () kalles for å beregne og tegne lysbuen på nytt.
drawArc () er der vi kaller den praktiske p5.js-funksjonen bue(). Bue() er raskere enn å gjøre trigonometri selv, men vi trenger å gi det noen verdier som posisjon, størrelse og, avgjørende, en start- og sluttvinkel for buen vår.
Den vinkelen måles i 'radianer' i stedet for grader. Radianer er som grader, men på en annen skala: 360 ° er det samme som 2 x pi radianer. P5.js har nyttige innebygde konstanter for PI, HALF_PI og QUARTER_PI etc.
RadialArcs {} -klassen:
Dette er en ledelsesklasse som skaper en rekke av våre RadialArc {} klasser og holder dem oppdatert ved å flytte dataene inn og ut av hver og ringe lysbuen redrawFromData () funksjon.
Å initialisere RadialArcs () klasser for diskant og bass, ta en titt oppsett (). Du kan se at vi lager to RadialArcs () tilfeller og også sende inn våre tilpassede parametere.
Disse parametrene er: antall buer, størrelser på de indre og ytterste buene, startvinkelen, maks linjevekt og fargenyanse. Ved å lage disse egendefinerte klassene, gjør det oss i stand til å gjenbruke koden vår, men også gjøre hver forekomst individuell ved å sende dem disse parametrene.
Når lysbueobjektene er initialisert, vil hver ramme ringe updateRadialArcs () og drawRadialArcs () innenfor hovedp5 tegne() funksjon, som er hvordan animasjonen oppdateres og beveger seg.
06. Ta det videre
Vi har dekket mye kode her, men i utgangspunktet håper jeg du kan se hvordan vi tar data og bruker dem på visuelle elementer som størrelse, posisjon, lengde, vekt og farge.
For å gå lenger, lek med antall buer, grupper og vinkler. Endre fargeområdet og opprett nye klasser for å tegne forskjellige former.
I dette eksemplet brukte vi data som stadig flyter, og kombinert med en rask bildefrekvens, skaper det en illusjon av animasjon. Imidlertid er ikke alle data slik og kan oppdateres saktere. For tregere data kan du fremdeles lage jevn animasjon ved å 'tweening' animasjonen av figurene dine mellom deres nåværende og måldimensjonen.
Lykke til med din neste datadrevne animasjon!
Denne artikkelen ble opprinnelig publisert i nummer 320 av nett, verdens mest solgte magasin for webdesignere og utviklere. Kjøp nummer 320 her eller abonner her.
