Explorați vizualizarea datelor cu p5.js

P5.js este cea mai recentă implementare JavaScript a faimosului proces de procesare a mediului înconjurător de codare. Este nevoie de o mare parte din puterea și ușurința utilizării procesării și o pune în browserul dvs. Vă ajută să trageți în panza, dar se integrează și cu pagina dvs. web, permițând "schița" dvs. pentru a răspunde și manipula DOM.

P5.JS. ia o mulțime de dureri de cap de animație și Vizualizarea datelor Pe web și o face super-simplă să se ridice și să alerge cu animație folosind două funcții simple: înființat() și a desena() .

Dar nu presupuneți că această simplitate este limitarea, deoarece puteți prelua o cale lungă prin crearea propriilor funcții și extinderea acesteia cu multe dintre bibliotecile create de comunitate.

Pentru mai multe instrumente și sfaturi de design web, consultați lista noastră de strălucire web hosting Furnizori și asigurați-vă că alegeți perfect Builder de site-uri web și Stocare in cloud .

• 6 moduri de a intra în codarea creativă

De ce să utilizați datele pentru a conduce animația?

Crearea sistemelor de proiectare și animație înseamnă definirea unui set de reguli, parametri și intervale variabile în care puteți alimenta date diferite. Abilitatea de a juca cu parametrii unui sistem și de introducere a datelor diferite înseamnă că puteți crea variații de ieșire nelimitate cu consistența unei abordări sistematice.

Datele diferite pot crea rezultate vizuale complet diverse și o sursă excelentă de date rapide, bogate texturate sunt audio. Acesta este exact ceea ce vom folosi în animația noastră.

Vizualizarea datelor acționate de date

Este o animație bazată pe date o vizualizare a datelor? Da și nu. Animația dvs. va fi o reprezentare vizuală a datelor la fel ca o vizualizare, dar scopul este diferit de cel al unei vizualizări tradiționale. Vizualizarea datelor este utilizată pentru a oferi spectatorului o perspectivă asupra datelor, astfel încât graficul este în serviciul comunicării datelor.

Cu toate acestea, vom folosi date ca semințe creative pentru a ne permite să generăm variații grafice interesante și texturale, prin urmare datele sunt în serviciul graficului. Desigur, o disciplină este interconectată și încrucișată cu cealaltă, dar este bine să vă recunoașteți intenția proprie atunci când utilizați date.

Ce vom face?

P5.js ne oferă acces rapid și ușor la datele care provin de la analizarea unui fișier de sunet (ca un MP3). Vom folosi p5.fft. Pentru a analiza diferitele frecvențe (bas și tremură) în cadrul sunetului, deoarece redă și vizualizează "energia" sau amplitudinea acelei frecvențe.

Pentru ca noi să putem vedea "forma" sunetului așa cum joacă, nu vrem doar să arătăm amplitudinea actuală a sunetului, dar captarea unui "tampon" de puncte de date. Acest lucru ne va permite să arătăm o istorie în mișcare a valorilor.

Pentru a afișa punctele de date, vom crea o serie de arce concentrice de la centru la marginea exterioară a ecranului. Lungimea arcului va reprezenta amplitudinea datelor. De asemenea, vom folosi alte codificări vizuale pentru datele noastre, cum ar fi greutatea și culoarea liniei.

Ce vom învăța?

Lucrul prin cod, vom acoperi:

• Configurarea unei noi schițe P5
• Încărcarea și analizarea sunetului
• Maparea valorilor datelor la elementele vizuale cum ar fi dimensiunea, forma și culoarea
• Folosind clase pentru a atrage, menține starea animației și a datelor și a face ca codul nostru să fie reutilizabil.

Unde sunt fișierele?

Fișierele pentru animație sunt găzduite pe OpenProcesing. , o platformă excelentă pentru împărtășirea, descoperirea și forțarea schițelor altor persoane. Este un loc minunat pentru tine de cod.

Așa cum vom folosi date audio, veți avea nevoie de un fișier MP3 pentru a trage în schiță. Vom înființa o nouă schiță la OpenProcessing; Acesta este modul în care schița dvs. va arăta odată ce am încărcat audio, am primit datele și am tras o simplă "formă de date":

Și așa va arăta schița completă:

Alternativ, ați putea folosi, de asemenea, P5.JS Editor online sau includ doar biblioteca în propriul proiect prin descărcare sau CDN .

01. Începeți o nouă schiță

Obțineți un cont gratuit OpenProcessing și, din pagina dvs. de profil, faceți clic pe Creare o schiță. Acest lucru va crea apoi cele mai de bază ale schițelor care conțin două funcții încorporate ale P5.js:

1. înființat() - Acest lucru rulează o singură dată și este folosit pentru a înființa o nouă panza
2. a desena() - Iată unde ați pus codul pe care doriți să executați fiecare cadru

Veți observa că fundal() se numește doar o dată în setat. Acest lucru șterge ecranul, deci dacă doriți să ștergeți ecranul fiecare cadru, includeți acest lucru la începutul a desena() și funcția.

Aveți o piesă cu un cod aici, folosind câteva din exemplele pe care le puteți găsi pe site-ul p5.js .

02. Creați prima schiță utilizând datele audio

Du-te la mine Exemplu Sketch Starter .

Apăsați butonul de redare și veți vedea un text care vă cere să renunțați la un fișier MP3 pe panza. Așteptați câteva secunde pentru a termina încărcarea și apoi faceți clic pe Canvas pentru a începe redarea. Ar trebui să vedeți o elipsă, urmând mouse-ul, care este scalarea și schimbarea culorii împreună cu amplitudinea basului din muzica pe care ați încărcat-o.

O mare parte a codului este comentat, dar să ne uităm la câteva elemente cheie:

Chiar la începutul schiței, înainte de înființat() , am creat câteva variabile globale.

În înființat() Avem câteva linii importante:

colorMode(HSB,360,100,100);

modul color() Vă permite să setați p5.js să lucrați în diferite spații de culori, cum ar fi RGB și HSB, precum și configurarea scalei pe care o utilizați pentru a naviga pe canale. Aici am setat intervalele HSB la valorile pe care le puteți fi mai familiarizat de la Photoshop, mai degrabă decât setarea implicită (0 la 255).

canvas.drop(gotFile);

Această funcție super-utile P5.JS ne permite să ascultăm evenimente de dosare de fișiere pe panza noastră. Când primim un eveniment drop de dosar, numim Gotfile () Pentru a verifica dacă este tipul corect și începeți să analizați sunetul.

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

Aici ne întoarcem datele de fișier abandonate într-o Soundfile. . Când avem fișierul de sunet, folosim următorul cod:

1. Initsund () Pentru a configura o nouă instanță FFT (pentru a analiza sunetul)
2. Analizeaza () Pentru a analiza blocul curent de sunet fiecare cadru
3. GetNewsoundDataValue () a folosi FFT.GETENERGY () Fiecare cadru care să ne dea amplitudinea actuală a sunetului. Acest lucru este convertit din intervalul său prestabilit de 0 la 255 la 0 la 1.

Sfat: Este util să vă convertiți datele într-o gamă de 0 la 1 deoarece puteți să o utilizați mai ușor atunci când cartografiați datele la parametrii vizuali, cum ar fi scala, viteza și culoarea.

Să ne uităm în funcția de tragere (). Această linie solicită amplitudinea curentă (între 0 și 1) a frecvenței basului și o atribuie variabila MyDataval. .

var myDataVal = getNewSoundDataValue(“bass”)

Noi numim obiceiul nostru getdatahsbcolor () Funcție care hărți valoarea noastră de date separat la nuanță, saturație și luminozitate și ne întoarce o culoare. Cu cât sunt mai mari datele, cu atât mai mult culoarea se deplasează peste spectrul de nuanțe și cu cea mai strălucitoare și mai saturată de culoare.

var myDataColor = getDataHSBColor(myDataVal);

Înainte de a ne putea atrage elipsa, trebuie să o oferim o dimensiune, înmulțind 200 (Px) de valoarea noastră de date. Deci, cu atât este mai mare valoarea, cu atât mai mare este elipsa.

var myEllipseSize = 200 * myDataVal;

03. Utilizați datele audio ca o pensulă

Pentru un pic de distracție, comentează fundal() apelați la. a desena() Funcție și puteți utiliza elipsa reactivă a sunetului pentru a picta cu!

05. Completați schița dvs.

Desenarea unei elipse de date pentru o frecvență este minunată, dar acum vom crea o serie de arcuri de date atât pentru bas, cât și pentru înălțime. De asemenea, vom atrage un tampon de valori anterioare pentru a ne ajuta să vedem mai bine forma sunetului.

Vizita Această versiune finalizată a schiței , executați-l și apoi plasați un mp3 pe el.

Veți vedea acum o serie de arcuri care ies din centrul ecranului. Arcurile orizontale sunt vizualizări ale basului, iar cele verticale aleg trepurarea MP3.

Privind la cod, veți vedea o mare parte din configurarea, încărcarea, analizarea și obținerea datelor este aceeași cu ultima schiță, astfel încât să putem ignora acest lucru. Există destul de puțin cod aici, ca și înainte, să alegem câteva puncte cheie.

În loc să trageți direct arcele a desena() , de fapt, creăm câteva clase personalizate:

1. clasa radialarc {} deține valoarea de date a arcului individual și trasează arcul
2. Radialarcs de clasă {} Gestionează colecția noastră de instanțe "radialarc"

Fiecare clasă de definiție are un constructor în care stabilim câteva valori-cheie și, de asemenea, trecând în parametri care ne permit să schimbăm comportamentul clasei. Să ne uităm mai atent la ei acum.

Clasa Radialarc {}:

Aceasta este clasa care deține o singură valoare a datelor și atrage o pereche de arcuri simetrice.

SetValue () și GetValue () Activați-ne să obțineți datele în și să ieșim dintr-un arc și să împingeți datele prin intermediul matricei Arcului ca actualizări de date. redrawfromdata () este chemat să recalculeze și să redeschidesc arcul.

draperc () este locul în care numim funcția Handy P5.js arc() . Arc() Este mai rapid decât să faci trigonometria noastră, dar trebuie să-i transmitem câteva valori cum ar fi poziția, dimensiunea și, crucial, un unghi de început și de sfârșit pentru arcul nostru.

Acest unghi este măsurat în "radiani" mai degrabă decât în ​​grade. Radienii sunt la fel de grade, dar pe o scară diferită: 360 ° este aceeași ca și cei doi radiani ai pi. P5.js are constante utile încorporate pentru Pi. , Half_pi. și Trimestru_pi. etc.

Clasa Radialarcs {}:

Aceasta este o clasă de management care creează o serie de noi Radialarc {} clase și le ține la curent prin mutarea datelor în și în afara fiecăruia și apelând la arc redrawfromdata () funcţie.

Pentru a inițializa Radialarcs () clase pentru triple și bas, aruncați o privire înființat() . Puteți vedea că creăm două Radialarcs () instanțe și, de asemenea, trecând în parametrii noștri personalizați.

Acești parametri sunt: ​​Numărul de arcuri, dimensiuni ale arcelor interioare și cele mai îndepărtate, unghiul de pornire, greutatea Max Line și gama de nuanță a culorii. Prin crearea acestor clase personalizate, ne permite să ne reutilizați codul, dar de asemenea, să facem fiecare individ individual prin transmiterea acestor parametri.

Odată ce obiectele arc sunt inițializate, fiecare cadru va apela UpdatedAdialarcs () și DrawdradiaLcs () În principalul P5 a desena() Funcție, care este modul în care actualizările și mișcările de animație.

06. Ia-o mai departe

Am acoperit o mulțime de cod aici, dar fundamental sper că puteți vedea cum luăm date și aplicându-l la elemente vizuale cum ar fi dimensiunea, poziția, lungimea, greutatea și culoarea.

Pentru a merge mai departe, jucați în jur cu numărul de arce, grupuri și unghiuri. Modificați intervalele de culori și creați cursuri noi pentru a desena diferite forme.

În acest exemplu am folosit date care curg în mod constant și, împreună cu o rată rapidă a cadrelor, creează iluzia de animație. Cu toate acestea, nu toate datele sunt așa și pot actualiza mai încet. Pentru date mai lente, puteți crea încă o animație netedă prin "Tweening" animația formelor dvs. între curentele lor și dimensiunile țintă ale acestora.

Mult noroc cu animația următoare de date!

Acest articol a fost publicat inițial în numărul 320 de net , cea mai bună revistă din lume pentru designeri și dezvoltatori web. Cumpăra problema 320. aici sau Abonați-vă aici .

Articole similare:

• Cum se adaugă animație la SVG cu CSS
• Tendința de date setată pentru a revoluționa designul aplicațiilor
• 12 mari resurse de animație CSS