Sadržaj
- Zašto koristiti podatke za pogon animacije?
- Podaci usmjereni naspram vizualizacije podataka
- Što ćemo napraviti?
- Što ćemo naučiti?
- Gdje su datoteke?
- 01. Započnite novu skicu
- 02. Stvorite prvu skicu pomoću audio podataka
- 03. Koristite zvučne podatke kao kist
- 05. Ispunite svoju skicu
- Klasa RadialArc {}:
- Klasa RadialArcs {}:
- 06. Krenite dalje
p5.js je najnovija JavaScript implementacija poznatog Obrada radnog okruženja za kreativno kodiranje. Potrebna je velika snaga i jednostavnost upotrebe Obrade i stavlja je u vaš preglednik. Pomaže vam u crtanju platna, ali se također integrira s vašom web stranicom, omogućujući vašoj 'skici' da reagira i manipulira DOM-om.
p5.js uklanja mnoge glavobolje animacije i vizualizacije podataka na webu te olakšava pokretanje i pokretanje s animacijom pomoću dvije jednostavne funkcije: postaviti() i crtati().
Ali nemojte pretpostavljati da je ova jednostavnost ograničavajući, jer obradu možete učiniti dugim putem stvaranjem vlastitih funkcija i proširiti ga s mnogim bibliotekama koje su stvorile zajednice.
Za više alata i savjeta za web dizajn pogledajte naš popis briljantnih pružatelja web hostinga i svakako odaberite savršeni graditelj web stranica i pohranu u oblaku.
- 6 načina za ulazak u kreativno kodiranje
Zašto koristiti podatke za pogon animacije?
Stvaranje sustava dizajna i animacije znači definiranje skupa pravila, parametara i raspona varijabli u koje možete unositi različite podatke. Sposobnost igranja s parametrima sustava i unosa različitih podataka znači da možete stvoriti neograničene varijacije izlaza dosljednošću sustavnog pristupa.
Različiti podaci mogu stvoriti potpuno raznolike vizualne izlaze, a sjajan izvor brzo pokretnih, bogato teksturiranih podataka je zvuk. Upravo to ćemo koristiti u našoj animaciji.
Podaci usmjereni naspram vizualizacije podataka
Je li animacija vođena podacima vizualizacija podataka? Da i ne. Vaša će animacija biti vizualni prikaz podataka poput vizualizacije, ali svrha je drugačija od one tradicionalne vizualizacije. Vizualizacija podataka koristi se kako bi se gledatelju dao uvid u podatke, tako da je grafika u službi komunikacije podataka.
Međutim, koristit ćemo podatke kao kreativno sjeme kako bismo mogli generirati zanimljive i teksturne grafičke varijacije, stoga su podaci na usluzi grafici. Naravno, jedna je disciplina međusobno povezana i unakrsno se oprašuje s drugom, ali dobro je prepoznati vlastitu namjeru kada koristite podatke.
Što ćemo napraviti?
p5.js omogućuje nam brz i jednostavan pristup podacima koji proizlaze iz analize zvučne datoteke (poput MP3-a). Upotrijebit ćemo p5.fft za analizu različitih frekvencija (basova i visokih tonova) unutar zvuka dok se reproducira i vizualizirati 'energiju' ili amplitudu te frekvencije.
Da bismo mogli vidjeti 'oblik' zvuka dok se reproducira, ne želimo samo prikazati trenutnu amplitudu zvuka, već uhvatiti 'međuspremnik' podatkovnih točaka. To će nam omogućiti da prikažemo pokretnu povijest vrijednosti.
Da bismo prikazali svoje podatkovne točke, stvorit ćemo niz koncentričnih lukova od središta do vanjskog ruba zaslona. Duljina luka predstavljat će amplitudu podataka. Za svoje ćemo podatke upotrijebiti i druga vizualna kodiranja, poput težine linije i boje.
Što ćemo naučiti?
Obrađujući kôd, pokriti ćemo:
- Postavljanje nove skice p5
- Učitavanje i analiza zvuka
- Mapiranje vrijednosti podataka na vizualne elemente poput veličine, oblika i boje
- Korištenje klasa za crtanje, održavanje stanja naše animacije i podataka i omogućavanje ponovne upotrebe našeg koda.
Gdje su datoteke?
Datoteke za animaciju hostirane su na OpenProcessing, izvrsnoj platformi za dijeljenje, otkrivanje i račvanje skica drugih ljudi. To je izvrsno mjesto i za vas.
Kako ćemo koristiti audio podatke, trebat će vam MP3 datoteka za povlačenje u skicu. Postavit ćemo novu skicu o OpenProcessing; ovako će izgledati vaša skica nakon što učitamo zvuk, dobijemo podatke i nacrtamo jednostavan 'oblik podataka':
A ovako će izgledati dovršena skica:
Možete koristiti i mrežni uređivač p5.js ili jednostavno uključiti knjižnicu u vlastiti projekt putem preuzimanja ili CDN-a.
01. Započnite novu skicu
Nabavite besplatni račun OpenProcessing i na stranici profila kliknite Stvori skicu. Tada će se stvoriti najosnovnije skice koje sadrže dvije ugrađene funkcije p5.js:
- postaviti() - Ovo se izvodi samo jednom i koristi se za postavljanje novog platna
- crtati() - Ovdje stavljate kod koji želite pokrenuti svaki kadar
Primijetit ćete to pozadina () poziva se samo jednom u postavljanju. Ovo briše zaslon, pa ako želite očistiti zaslon svakog okvira, uključite to na početku crtati() također funkcionirati.
Ovdje se poigrajte s nekim kodom, koristeći nekoliko primjera koje možete pronaći na web mjestu p5.js.
02. Stvorite prvu skicu pomoću audio podataka
Idite na moj primjer početne skice.
Pritisnite gumb za reprodukciju i vidjet ćete tekst koji traži da spustite MP3 datoteku na platno. Pričekajte nekoliko sekundi da završi prijenos, a zatim kliknite platno za početak reprodukcije. Trebali biste vidjeti elipsu koja slijedi miša koja skalira i mijenja boju zajedno s amplitudom basa u glazbi koju ste prenijeli.
Komentira se velik dio koda, ali pogledajmo nekoliko ključnih elemenata:
Odmah na početku skice, ispred postaviti(), stvorili smo neke globalne varijable.
Unutar postaviti() imamo nekoliko važnih linija:
colorMode (HSB, 360.100.100);
colorMode () omogućuje vam podešavanje p5.js za rad u različitim prostorima boja poput RGB-a i HSB-a, kao i konfiguriranje ljestvice kojom se krećete po kanalima. Ovdje smo postavili HSB raspone na vrijednosti koje su vam možda poznatije iz Photoshopa, a ne na zadanu postavku (0 do 255).
canvas.drop (gotFile);
Ova super korisna funkcija p5.js omogućuje nam preslušavanje svih događaja ispuštanja datoteka na našem platnu. Kada dobijemo događaj ispuštanja datoteke, zovemo gotFile () kako biste provjerili je li to ispravna vrsta i započeli analizirati zvuk.
soundFile = novi p5.SoundFile (file.data);
Ovdje pretvaramo svoje ispuštene podatke o datotekama u SoundFile. Kad imamo zvučnu datoteku, koristimo sljedeći kod:
- initSound () za postavljanje nove instance FFT-a (za analizu zvuka)
- analyseSound () za analizu trenutnog bloka zvuka u svakom kadru
- getNewSoundDataValue () koristiti fft.getEnergy () svaki kadar koji će nam dati trenutnu amplitudu zvuka. To se pretvara iz zadanog raspona od 0 do 255 do 0 do 1.
Savjet: Korisno je podatke pretvoriti u raspon od 0 do 1, jer ga možete lakše koristiti prilikom mapiranja podataka u vizualne parametre kao što su mjerilo, brzina i boja.
Pogledajmo funkciju draw (). Ova linija zahtijeva trenutnu amplitudu (između 0 i 1) bas frekvencije i dodjeljuje joj varijablu myDataVal.
var myDataVal = getNewSoundDataValue (“bas”)
Mi nazivamo svoj običaj getDataHSBColor () funkcija koja zasebno preslikava vrijednost podataka u nijansu, zasićenost i svjetlinu i vraća nam boju. Što su podaci veći, to se boja dalje kreće kroz spektar nijansi i boja je svjetlija i zasićenija.
var myDataColor = getDataHSBColor (myDataVal);
Prije nego što uspijemo nacrtati elipsu, moramo joj dati veličinu množenjem 200 (px) s vrijednošću podataka. Dakle, što je veća vrijednost, veća je elipsa.
var myEllipseSize = 200 * myDataVal;
03. Koristite zvučne podatke kao kist
Za malo zabave komentirajte pozadina () nazvati u crtati() možete koristiti svoju zvučno reaktivnu elipsu za bojanje!
05. Ispunite svoju skicu
Crtanje jedne podatkovne elipse za jednu frekvenciju je sjajno, ali sada ćemo stvoriti niz podatkovnih luka za bas i visoke tonove. Također ćemo nacrtati međuspremnik prethodnih vrijednosti kako bismo bolje vidjeli oblik zvuka.
Posjetite ovu gotovu verziju skice, pokrenite je, a zatim na nju spustite MP3.
Sada ćete vidjeti niz lukova koji izlaze iz središta zaslona. Horizontalni lukovi su vizualizacija basa, a vertikalni izdvajaju visoke tonove MP3-a.
Gledajući kôd, vidjet ćete da je veći dio postavljanja, učitavanja, analiziranja i dobivanja podataka isti kao i posljednja skica, pa to možemo zanemariti. Ovdje ima prilično malo koda, pa kao i prije, samo ćemo odabrati nekoliko ključnih točaka.
Umjesto da izravno crtate lukove crtati(), mi zapravo stvaramo neke prilagođene klase:
- klasa RadialArc {} drži vrijednost podataka pojedinačnog luka i crta luk
- klasa RadialArcs {} upravlja našom zbirkom instanci ‘RadialArc’
Svaka definicija klase ima konstruktor u kojem postavljamo neke ključne vrijednosti i također prosljeđujemo parametre koji nam omogućuju promjenu ponašanja klase. Pogledajmo ih sada izbliza.
Klasa RadialArc {}:
Ovo je klasa koja sadrži jednu vrijednost podataka i crta par simetričnih luka.
setValue () i getValue () omogućiti nam da unosimo podatke u luk i iz njega i guramo podatke kroz niz našeg luka dok se podaci ažuriraju. redrawFromData () je pozvan da preračuna i precrta luk.
drawArc () je mjesto gdje nazivamo praktičnu funkciju p5.js luk(). Luk() je brži od samog izvođenja trigonometrije, ali trebamo mu proslijediti nekoliko vrijednosti poput položaja, veličine i, što je presudno, početnog i završnog kuta za naš luk.
Taj se kut mjeri u 'radijanima', a ne u stupnjevima. Radijani su poput stupnjeva, ali u različitim razmjerima: 360 ° je isto kao i 2 x pi radiana. P5.js ima korisne ugrađene konstante za PI, POLA_PI i QUARTER_PI itd.
Klasa RadialArcs {}:
Ovo je klasa upravljanja koja stvara niz naših RadialArc {} klase i održava ih ažurnim premještanjem podataka u i iz svake i pozivanjem luka redrawFromData () funkcija.
Inicirati RadialArcs () klase za visoke i niske tonove, pogledajte u postaviti(). Možete vidjeti da stvaramo dvije RadialArcs () instance i također prosljeđivanje naših prilagođenih parametara.
Ti su parametri: broj lukova, veličine unutarnjeg i krajnjeg luka, početni kut, maksimalna težina crte i raspon nijansi boje. Stvaranjem ovih prilagođenih klasa, omogućuje nam ponovnu upotrebu našeg koda, ali i učiniti svaku instancu individualnom dodavanjem tih parametara.
Jednom kad se lučni objekti inicijaliziraju, svaki okvir će pozvati updateRadialArcs () i drawRadialArcs () unutar glavnog p5 crtati() funkcija, što je način na koji se animacija ažurira i kreće.
06. Krenite dalje
Ovdje smo pokrili puno koda, ali u osnovi se nadam da možete vidjeti kako uzimamo podatke i primjenjujemo ih na vizualne elemente poput veličine, položaja, duljine, težine i boje.
Da biste prošli dalje, poigrajte se brojem lukova, skupina i kutova. Promijenite raspon boja i stvorite nove klase za crtanje različitih oblika.
U ovom smo primjeru koristili podatke koji neprestano teku i, zajedno s brzom brzinom kadrova, stvaraju iluziju animacije. Međutim, nisu svi podaci takvi i mogu se sporije ažurirati. Za sporije podatke i dalje možete stvoriti glatku animaciju tako što ćete "ujednačiti" animaciju svojih oblika između trenutne i ciljne dimenzije.
Sretno sa sljedećom animacijom na temelju podataka!
Ovaj je članak izvorno objavljen u broju 320 od neto, najprodavaniji svjetski časopis za web dizajnere i programere. Kupi izdanje 320 ovdje ili pretplatite se ovdje.
