Fedezze fel az adatok megjelenítését p5.js-vel

A P5.js a híres asztali kreatív kódolási környezeti feldolgozás legutóbbi JavaScript megvalósítása. Sok hatással van a feldolgozásra és a könnyű használatra, és behelyezi a böngészőbe. Segít a vászonban, de integrálja a weboldalát is, lehetővé téve a "vázlatot", hogy válaszoljon és manipulálja a DOM-t.

p5.js elveszíti az animáció fejfájását és adatmegjelenítés az interneten, és szuper-egyszerűvé teszi, hogy felálljon és futjon az animációval két egyszerű funkcióval: beállít() és húz() .

De ne feltételezzük, hogy ez az egyszerűség korlátozza, mivel hosszú utat vállalhat a saját funkcióinak létrehozásával, és sok közösségi létrehozott könyvtárakkal bővítheti.

További webes tervezési eszközök és tanácsokért lásd a ragyogó listát web hosting és győződjön meg róla, hogy kiválasztja a tökéletes weboldal építője és felhő tároló .

• 6 módja a kreatív kódolásba

Miért használja az adatokat animációhoz?

A tervezési és animációs "rendszerek" létrehozása olyan szabályok, paraméterek és változó tartományok meghatározása, amelyekbe különböző adatokat táplálhat. A rendszer paramétereivel való lejátszás képessége és a különböző adatok bevitele azt jelenti, hogy korlátlan kimeneti változatokat hozhat létre a szisztematikus megközelítés következetességével.

A különböző adatok teljesen sokszínű vizuális kimeneteket hozhatnak létre, és nagyszerű forrás a gyors mozgást, a gazdagon texturált adatok audio. Pontosan ezt fogjuk használni az animációnkban.

Adatvezérelt vs adatmegjelenítés

Egy adatvezérelt animáció egy adat vizualizációt? Igen és nem. Az animáció az adatok vizuális ábrázolása lesz, mint egy vizualizáció, de a cél különböző a hagyományos vizualizációhoz. Az adatok megjelenítését arra használják, hogy a néző betekintést nyújtson be az adatokba, így a grafika az adatok kommunikációjának szolgáltatása.

Azonban az adatokat kreatív magként fogjuk használni, hogy érdekes és texturális grafikus változatokat hozzunk létre, ezért az adatok a grafika szolgálatában vannak. Természetesen egy fegyelem összekapcsolt és kereszt-pollinátumok a másikval, de az adatok használata során jó felismerni saját szándékát.

Mit fogunk tenni?

A P5.js gyors és egyszerű hozzáférést biztosít a hangfájl elemzéséből származó adatokhoz (mint egy MP3). Fogunk használni p5.fft A különböző frekvenciák (basszus és magasság) elemzése a hangon belül, ahogy játszik vissza, és vizualizálja az "energiát" vagy amplitúdóját.

Annak érdekében, hogy a hang "alakja" legyen, ahogy játszik, nem csak azt szeretnénk megmutatni a hang jelenlegi amplitúdóját, hanem az adatpontok "pufferét". Ez lehetővé teszi számunkra, hogy bemutassuk az értékek mozgó történeteit.

Adatpontjaink megjelenítéséhez számos koncentrikus íveket hozunk létre a középpontból a képernyő külső széléhez. Az ív hossza az adatok amplitúdóját képviseli. Más vizuális kódolásokat is használunk adatainkhoz, mint például a vonal súlya és színe.

Mit fogunk tanulni?

A kódon keresztül dolgozik, fedjük le:

• Új P5 vázlat létrehozása
• Hang betöltése és elemzése
• Az adatok értékeinek leképezése vizuális elemekhez, mint a méret, az alak és a szín
• Az osztályok felhasználására, az animáció és az adatok állapotának fenntartása, és a kódunk újrafelhasználható.

Hol vannak a fájlok?

Az animációra vonatkozó fájlok találhatóak Nyitvatartás , Nagyszerű platform a más emberek vázlatainak megosztására, felfedezésére és forolására. Ez egy nagyszerű hely a kódhoz is.

Mivel hangadatokat fogunk használni, szükséged lesz egy mp3 fájlra, hogy húzza a vázlatot. Új vázlatot állítunk fel az OpenProcessing-en; ez hogyan fog kinézni vázlat egyszer már betöltött hang kapták meg az adatokat, és húzott egy egyszerű „adat alakú”:

És így fog kinézni a kitöltött vázlatot:

Alternatívaként is használhatod a p5.js online szerkesztő Vagy csak a könyvtárat tartalmazza a saját projektedben letöltés vagy cdn .

01. Indítsa el az új vázlatot

Kap egy ingyenes OpenProcessing fiókot, és a profiloldalon kattintson a Vázlat létrehozása gombra. Ezután létrehozza a legfeljebb két P5.js beépített funkcióját tartalmazó vázlatokat:

1. beállít() - Ez csak egyszer működik, és új vászon létrehozására szolgál
2. húz() - Itt van, ahol kódolsz olyan kódot, amelyet minden keret futtatni szeretne

Ezt észre fogja venni háttér() csak egyszer hívják a felállított. Ez törli a képernyőt, ezért ha törölni szeretné a képernyőt minden keretben, akkor ezt a húz() funkció is.

Játsszon néhány kóddal itt, néhány példát használva A P5.js oldalon .

02. Hozzon létre első vázlatot audioadatok használatával

Menj az én Példaindító vázlat .

Nyomja meg a PLAY gombot, és látni fogsz néhány szöveget, amely megkéri, hogy dobjon egy mp3 fájlt a vászonra. Várjon néhány másodpercet, hogy befejezze a feltöltést, majd kattintson a vászonra a lejátszás megkezdéséhez. Látnia kell egy ellipszis követően az egér, amely méretezés és változó színű együtt a basszus amplitúdó a zene, amit feltöltött.

A kód nagy részét megjegyzünk, de nézzük meg néhány kulcselemet:

A vázlat elején, előre beállít() , létrehoztunk néhány globális változókat.

Belül beállít() Van néhány fontos vonalunk:

colorMode(HSB,360,100,100);

Colormode () Lehetővé teszi, hogy a p5.js-t különböző színtereknél dolgozzon, mint az RGB és a HSB, valamint a csatornák navigálásához használt skála konfigurálása. Itt állított HSB tartományok értékeit lehet, hogy jobban ismerik a Photoshop helyett az alapértelmezett beállítás (0-255).

canvas.drop(gotFile);

Ez szuper hasznos p5.js funkció lehetővé teszi számunkra, hogy hallgatni bármilyen fájl csepp események a vásznon. Amikor kapunk egy fájlcsepp eseményt, hívjuk gotfile () Ellenőrizze, hogy ez a helyes típus, és kezdje el elemezni a hangot.

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

Itt fordítjuk a leesett fájladatainkat a Hangfájl . Ha van a hangfájl, a következő kódot használjuk:

1. initsound () Új FFT példány létrehozása (a hang elemzéséhez)
2. analisseound () Az aktuális hang blokkjának elemzése minden keretben
3. getnewsounddatavalue () használni fft.getenergy () Minden keret, hogy megadja nekünk a hang jelenlegi amplitúdóját. Ez az alapértelmezett tartományból 0 és 255 és 0 között 1-ig alakul át.

Tipp: Hasznos, hogy az adatokat 0-tól 1 tartományba konvertálja, mert könnyebben használhatja az adatokat vizuális paraméterekre, mint például a skála, a sebesség és a szín.

Nézzük meg a rajz () funkciót. Ez a sor a basszus frekvencia aktuális amplitúdóját (0 és 1 között) kéri, és hozzárendeli a változót mydataval .

var myDataVal = getNewSoundDataValue(“bass”)

Hívjuk a szokásunkat getdatahsbcolor () Funkció, amely az adatértéket külön térképezi a színárnyalat, a telítettség és a fényerő, és visszaad minket egy színt. Minél magasabb az adatok, annál magasabb színe mozog a színárnyalat spektrumán, és a világosabb és telített színnel.

var myDataColor = getDataHSBColor(myDataVal);

Mielőtt el tudnánk rajzolni az ellipszisünket, meg kell adnunk egy méretet, a 200 (px) többszörözésével az adatértékkel. Tehát minél magasabb az érték, annál nagyobb az ellipszis.

var myEllipseSize = 200 * myDataVal;

03. Használja az audioadatokat ecsetként

Egy kicsit szórakoztató, megjegyzést háttér() hívjon a húz() Funkció, és használhatja a hang reaktív ellipszisét, hogy festjen!

05. Töltse ki a vázlatot

Az egyik adat ellipsze egy frekvenciához nagy, de most létrehozunk egy sor adat íveket mind a basszus, mind a magassághoz. A korábbi értékek pufferét is felhívjuk, hogy segítsünk jobban látni a hang alakját.

Látogatás A vázlat befejező verziója , Futtassa, majd dobjon ki egy mp3-t.

Most már látsz egy sor íveket, amelyek a képernyő közepétől származnak. A vízszintes ívek a basszus vizualizációi, a függőlegesek pedig kihasználják az MP3 hangját.

A kódot nézve a beállított, betöltés, elemzés, elemzés és az adatok megszerzése ugyanaz, mint az utolsó vázlat, így figyelmen kívül hagyhatjuk ezt. Itt van egy kis kód itt, mint korábban, vegyünk ki néhány kulcsfontosságú pontot.

Az ívek közvetlenül beillesztése helyett húz() , Valójában néhány egyedi osztályt hozunk létre:

1. Radialarc osztály {} megtartja az egyes ARC adatértékét, és felhívja az ívet
2. osztály radialarcs {} Kezeli a "Radialarc" példányokat

Minden osztály definíciója van konstruktora, amely hozunk néhány kulcsfontosságú értékek és halad paramétereket, amelyek lehetővé teszik számunkra változtatni az osztály viselkedését. Nézzük meg közelebbről rájuk.

A Radialarc {} osztály:

Ez az az osztály, amely egyetlen adatértéket tart, és szimmetrikus íveket rajzol.

érték beállítása() és GetValue () lehetővé teszi számunkra, hogy az adatokat, és ki az ívet, és nyomja az adatokat a mi ív tömb az adatok frissítéséről. redrawfromdata () az ARC újraszámítására és újratervezésére hívják.

DrawArc () hol hívjuk a praktikus p5.js funkciót ív() . Ív() gyorsabb, mint a trigonometria magunkat, de meg kell adnunk néhány olyan értéket, mint a pozíció, a méret és a döntőszög, az ívünknek.

Ezt a szöget a "radianokon", nem pedig a fokozatok mérésére mérik. A radianok olyanok, mint a fok, de más skálán: 360 ° ugyanaz, mint a 2 x pi radian. A P5.js hasznos beépített konstansokkal rendelkezik Pi , Half_pi és Quarter_pi stb.

A Radialarcs {} osztály:

Ez egy olyan vezetői osztály, amely létrehoz egy tömbünket Radialarc {} osztályokat, és naprakészen tartja őket az adatok áthelyezésével és ki, és hívja az ARC-t redrawfromdata () funkció.

Inicializálni Radialarcs () Treble és Bass osztályok, nézd meg beállít() . Láthatjuk, hogy kettőt hozunk létre Radialarcs () az egyéni paraméterekben is.

Ezek a paraméterek: az ívek száma, a belső és legkülső ívek méretei, a kiindulási szög, a maximális vonal súlya és a szín hue tartománya. Ezen egyedi osztályok létrehozásával lehetővé teszi számunkra, hogy újra felhasználjuk a kódot, hanem minden egyes példányt azáltal, hogy átadja ezeket a paramétereket.

Miután az ív objektumok inicializálódtak, minden keret fog hívni UpdateradiarCS () és DrawRadialarcs () A fő P5-ben húz() Funkció, amely az animáció frissítése és mozog.

06. Vegye tovább

Itt sok kódot fedeztünk fel, de alapvetően remélem, hogy láthatjuk, hogyan szedjük az adatokat, és alkalmazzuk a vizuális elemekre, mint a méret, a helyzet, a hossz, a súly és a szín.

Továbbá, játsszon az ívek, csoportok és szögek számával. Változtassa meg a színtartományokat, és új osztályokat hozzon létre a különböző formák rajzolásához.

Ebben a példában olyan adatokat használtunk, amelyek folyamatosan áramlanak, és gyors képkockázattal párosulunk, létrehozza az animáció illúzióját. Azonban nem minden adat, és lassabban frissíthet. A lassabb adatokhoz még mindig sima animációt hozhat létre a "Tweening" a formáinak animációjával a jelenlegi és a célméretük között.

Sok szerencsét a következő adatvezérelt animációval!

Ezt a cikket eredetileg a 320. \ t háló , A világ legjobban értékesítő magazinja webes tervezőknek és fejlesztőknek. Vásároljon kibocsátást 320 itt vagy Iratkozzon fel itt .

Kapcsolódó cikkek:

• Hogyan lehet hozzáadni animációt az SVG-hez CSS-vel
• Az adatok trendje az App Design forradalmasítása
• 12 nagy CSS animációs erőforrások