Tutki tietojen visualisointia P5.JS: n kanssa

P5.JS on kuuluisa Desktop Creative Coodingympäristön käsittelyn viimeisin JavaScript-toteutus. Se vie paljon tehoa ja helppokäyttöisyyden käsittelyn ja asettaa sen selaimeen. Se auttaa sinua vetämään kankaalle, mutta myös integroivat web-sivusi, jolloin sinun "luonnos" vastata ja manipuloida dom.

p5.js vie paljon animaation päänsärkyä ja Tietojen visualisointi Verkossa ja tekee siitä erittäin yksinkertaisen nousun ja käynnissä animaatiolla kahden yksinkertaisen toiminnon avulla: perustaa() ja Piirrä () .

Mutta älä oleta, että tämä yksinkertaisuus rajoittuu, sillä voit käsitellä pitkän matkan luomalla omat toiminnot ja laajentamalla sitä monilla yhteisön luomilla kirjastoilla.

Lisää web-suunnittelutyökaluja ja neuvoja, katso luettelo loistavista sivujen ylläpito palveluntarjoajia ja muista valita täydellinen Verkkosivuston rakentaja ja pilvivarasto .

• 6 tapaa päästä luovaan koodaukseen

Miksi käyttää tietoja animaation ajaa?

Suunnittelun ja animaation järjestelmien luominen tarkoittaa sääntöjä, parametreja ja vaihtelevia alueita, joihin voit syöttää eri tietoja. Kyky pelata järjestelmän parametreilla ja syöttää eri data tarkoittaa, että voit luoda rajoittamattomia lähtövaiheita systemaattisen lähestymistavan johdonmukaisuuden kanssa.

Eri tiedot voivat luoda täysin erilaisia ​​visuaalisia lähtöjä ja suuri nopean liikkumisen lähde, runsaasti kuvioituja tietoja on ääni. Juuri juuri sitä, mitä aiomme käyttää animaatiossamme.

Datakäyttöinen vs. tietojen visualisointi

Onko datavetoinen animaatio tietojen visualisointi? Kyllä ja ei. Animaatio on visuaalinen esitys dataa aivan kuin visualisointi, mutta tarkoitus on erilainen kuin perinteinen visualisointi. Tiedon visualisointia käytetään antamaan katsojalle tietoa datasta, joten grafiikka on tietojen viestinnän palveluksessa.

Käytämme kuitenkin tietoja luovaksi siemeniksi, jotta voimme luoda mielenkiintoisia ja tekstuuritarvikkeita graafisia vaihteluita, joten tiedot ovat graafisen palvelun palveluksessa. Tietenkin yksi kurinalaisuus on toisiinsa liitetty ja ristipölyä muiden kanssa, mutta on hyvä tunnistaa oma aikomuksesi käytettäessä tietoja.

Mitä me aiomme tehdä?

P5.JS antaa meille nopeasti ja helposti pääsyn äänitiedoston analysoimiseen (kuten MP3). Käytämme p5.fft Analysoida erilaisia ​​taajuuksia (basso ja diskantti) äänen sisällä, kun se pelaa ja visualisoida "energian" tai taajuuden amplitudi.

Jotta voimme nähdä äänen "muodon", emme vain halua näyttää äänen nykyistä amplitudia vaan kaapata tietopisteiden "puskuri". Tämä antaa meille mahdollisuuden näyttää arvot arvosta.

Voit näyttää datapisteemme luomaan sarjan samankeskisiä kaaria keskeltä näytön ulkoreunaan. ARC: n pituus edustaa tietojen amplitudia. Käytämme myös muita visuaalisia koodauksia datamme, kuten linjan paino ja väri.

Mitä me opimme?

Työskentely koodin kautta, kattavat:

• Uuden P5-luonnoksen asettaminen
• Äänen lataaminen ja analysointi
• Tietojen arvojen kartoittaminen visuaalisiin elementteihin, kuten koko, muoto ja väri
• Luokkien käyttö piirtää, ylläpitää animaation ja tietojen tilaa ja tehdä koodi uudelleenkäytettäviksi.

Missä tiedostot ovat?

Animaation tiedostot järjestetään Avomyyttäminen , suuri foorumi jakamiseen, löytämiseen ja haastamaan muiden ihmisten luonnoksia. Se on hyvä paikka myös koodia.

Kun käytämme äänitietoja, tarvitset MP3-tiedoston vetämään luonnos. Määritämme uuden luonnoksen avomyydässä; Näin luonnos näkyy kerran, kun olemme ladanneet äänen, saivat tiedot ja piirrä yksinkertainen tietomuoto:

Ja näin valmistunut luonnos näyttää:

Vaihtoehtoisesti voit myös käyttää P5.JS Online Editor tai vain sisällyttää kirjasto omalle projektisi latauksen tai cdn: n kautta .

01. Aloita uusi luonnos

Hanki ilmainen OpenProcessing-tili ja valitse profiilisivulta Luo luonnos. Tämä luo sitten parhaiten luonnoksia, jotka sisältävät kaksi P5.JS: n sisäänrakennetuista toiminnoista:

1. perustaa() - Tämä toimii vain kerran, ja sitä käytetään uuden kankaan perustamiseen
2. Piirrä () - Tässä on, missä laitat koodin, jonka haluat suorittaa jokaisen kehyksen

Huomaat sen tausta() kutsutaan vain kerran perustetussa. Tämä tyhjentää näytön, joten jos haluat tyhjentää näytön jokaisen kehyksen, sisällytä tämä alkuun Piirrä () Toiminto myös.

Pyydä jotain koodia täällä, käyttämällä muutamia esimerkkejä, joita löydät P5.JS-sivustossa .

02. Luo ensimmäinen luonnos äänidatan avulla

Mene Esimerkki Starter Sketch .

Osoita Play-painiketta ja näet jonkin tekstin, jossa pyydetään pudottamaan MP3-tiedoston kankaalle. Odota muutaman sekunnin ajan, jotta voit lopettaa latauksen ja napsauta sitten kankaalla aloittaaksesi toiston. Sinun pitäisi nähdä ellipsi hiiren seurauksena, joka on skaalaus ja vaihda väriä yhdessä ladatun musiikin bassoamplitudin kanssa.

Suuri osa koodista kommentoi, mutta katsotaan muutamia keskeisiä elementtejä:

Oikealla alussa luonnoksen, ennen perustaa() , Olemme luoneet joitain maailmanlaajuisia muuttujia.

Sisällä perustaa() Meillä on pari tärkeää riviä:

colorMode(HSB,360,100,100);

Colormode () Voit asettaa P5.JS: n toimimaan eri väritystiloissa, kuten RGB: n ja HSB: n, samoin kuin konfiguroida kanavien navigoinnin mittakaavan. Täällä olemme asettaneet HSB: n arvot arvoihin, joita saatat paremmin perehtyä Photoshopista eikä oletusasetuksista (0 - 255).

canvas.drop(gotFile);

Tämä erittäin hyödyllinen P5.JS-toiminto mahdollistaa kaikkien tiedostojen pudotustapahtumien kuuntelemisen kankaallamme. Kun saamme tiedoston pudotustapahtuman, me kutsumme Gotfile () Tarkista, onko se oikea tyyppi ja aloittaa äänen analysointi.

soundFile = new p5.SoundFile(file.data);

Täällä käännymme pudotetut tiedostotiedot a Äänifile . Kun meillä on äänitiedosto, käytämme seuraavaa koodia:

1. instituund () Uuden FFT-esimerkin määrittäminen (äänen analysointi)
2. Analysound () Analysoida nykyinen äänenlohko jokaisen kehyksen
3. GetnewsoundDatavalue () käyttää fft.getenergy () Jokainen kehys antaa meille äänen nykyinen amplitudi. Tämä muunnetaan oletusarvoisesti 0 - 255 - 0 - 1.

Vihje: On hyödyllistä muuntaa tiedot alueelle 0 - 1, koska voit käyttää sitä helpommin, kun kartoitetaan tietoja visuaalisiin parametreihin, kuten asteikko, nopeus ja väri.

Katsotaanpa vedon () -toiminnossa. Tämä rivi pyytää bassotaajuuden nykyistä amplitudia (välillä 0 ja 1) ja määrittää sen muuttujan mydataval .

var myDataVal = getNewSoundDataValue(“bass”)

Me kutsumme custom getdatahsbcolor () Toiminto, joka kartoittaa dataarvomme erikseen sävy, kyllästyminen ja kirkkaus ja palauttaa meidät värin. Mitä suurempi tieto, lisäksi väri liikkuu sävypektrin yli ja kirkkaampi ja tyydyttynyt väri.

var myDataColor = getDataHSBColor(myDataVal);

Ennen kuin voimme vetää ellipsimme, meidän on annettava sille koko, kertomalla 200 (px) dataarvon mukaan. Joten sitä korkeampi arvo, suurempi ellipsi.

var myEllipseSize = 200 * myDataVal;

03. Käytä äänidataa maalarjana

Hieman hauskaa, kommentoi sitä tausta() kutsua Piirrä () Toiminto ja voit käyttää ääni reaktiivista ellipsiä maalata!

05. Täytä luonnos

Yksi data Ellipse yhdelle taajuudelle on suuri, mutta nyt luodaan useita datakaareja sekä bassolle että diskantille. Piirrämme myös aikaisempien arvojen puskurin, jotta voimme paremmin nähdä äänen muodon.

Vierailla Tämä valmistettu versio luonnoksesta , Suorita se ja pudota sitten MP3.

Näet nyt sarjan kaaret, jotka nousevat näytön keskustasta. Vaakasuorat kaaret ovat bassojen visualisointeja ja pystysuorat poimia diskantin MP3: n.

Koodin katseleminen näet suurimman osan perustamisesta, lastauksesta, analysoinnista ja tietojen saamisesta on sama kuin viimeinen luonnos, jotta voimme sivuuttaa sen. Täällä on melko vähän koodia, kuten ennen, vain poimia muutamia keskeisiä kohtia.

Sen sijaan, että piirtät kaaret suoraan Piirrä () , Olemme itse asiassa luoneet joitain mukautettuja luokkia:

1. Luokka Radialarc {} Pitää yksittäisen ARC: n datan arvon ja piirtää kaaren
2. Luokan Radialarcs {} Hallinnoi kokoelmamme "Radialarc" -tapahtumia

Jokaisella luokan määritelmällä on rakentaja, jossa asetamme joitain keskeisiä arvoja ja myös parametreissa, jotka mahdollistavat luokan käyttäytymisen. Katsotaanpa tarkemmin heitä nyt.

Radialarc {} -luokka:

Tämä on luokka, jolla on yksi datan arvo ja piirtää symmetrisen kaaren parin.

aseta arvo() ja getvalue () Ota meille mahdollisuus saada tiedot sisään ja ulos kaaresta ja työntää tietoja ARC: n taulukon kautta datapäivityksiksi. Redrawfromdata () kutsutaan laskemiseksi ja uudelleenarvioida kaaria.

Drawarc () on paikka, jossa kutsumme kätevä p5.js-toiminto Arc () . Arc () on nopeampi kuin trigonometria itsemme, mutta meidän on läpäistävä se muutamia arvoja, kuten sijainti, koko ja ratkaiseva, aloitus- ja pääkulma kaarelle.

Tämä kulma mitataan "radialaisilla" eikä asteina. Radialaiset ovat kuin astetta, mutta eri mittakaavassa: 360 ° on sama kuin 2 x pidian. P5.JS: llä on käyttökelpoiset sisäänrakennetut vakiot PI , Half_Pi ja Neljännes_PI jne.

Radialarcs {} -luokka:

Tämä on johtamisluokka, joka luo joukon meidän Radialarc {} luokat ja pitää ne ajan tasalla siirtämällä tietoja jokaisesta ja soittamalla arc: n Redrawfromdata () Toiminto.

Alustaa Radialarcs () Treblen ja basson luokat katsovat perustaa() . Näet, että luomme kaksi Radialarcs () tapauksissa ja kulkee myös mukautetuissa parametreissä.

Nämä parametrit ovat: arkkien lukumäärä, sisä- ja syrjäisimmät kaaret, lähtökulma, max-rivin paino ja värisävy. Luomalla nämä mukautetut luokat, jotta voimme käyttää koodiamme uudelleen, mutta myös jokaisen tapauksen yksilön suorittamalla ne nämä parametrit.

Kun kaari-objektit alustetaan, jokainen kehys soittaa UpdaterAdialarcs () ja Drawradialarcs () P5: n sisällä Piirrä () Toiminto, mikä on animaatiopäivitys ja liikkuu.

06. Ota se edelleen

Olemme kattaneet paljon koodia täällä, mutta pohjimmiltaan toivon, että voitte ottaa tietoja ja käytämme sitä visuaalisiin elementteihin, kuten koko, sijainti, pituus, paino ja väri.

Jos haluat mennä pidemmälle, leikkiä kaarien, ryhmien ja kulmien lukumäärän kanssa. Muuta värivaihtoehtoja ja luo uusia luokkia erilaisten muotojen piirtämiseksi.

Tässä esimerkissä käytimme tietoja, jotka ovat jatkuvasti virtaavat ja kytketyt nopean kehysnopeuden, se luo animaation illuusion. Kaikki tiedot eivät kuitenkaan ole sellaisia, ja ne voivat päivittää hitaammin. Hitaammin dataa voit silti luoda sileää animaatiota "Tweening" muodosteesi animaation nykyisten ja niiden kohdemittausten välillä.

Onnea seuraavan datavetoisen animaation kanssa!

Tämä artikkeli julkaistiin alun perin lausunnossa 320 netto , maailman myydyin aikakauslehti web-suunnittelijoille ja kehittäjille. Osta numero 320 täällä tai Tilaa täältä .

Aiheeseen liittyvät artikkelit:

• Kuinka lisätä Animaatio SVG: lle CSS: llä
• Tietojen trendi asetetaan vallankumoukseen sovelluksen suunnitteluun
• 12 Suuri CSS-animaatioresurssit