Udforsk datavisualisering med p5.js

P5.js er den nyeste JavaScript-implementering af den berømte desktop kreative kodende miljøforarbejdning. Det kræver meget af magten og brugervenligheden af ​​behandlingen og sætter den i din browser. Det hjælper dig med at trække i lærred, men integrerer også med din webside, så din 'skitse' for at reagere på og manipulere dommen.

p5.js. tager væk en masse af animations hovedpine og data visualisering på nettet og gør det super-nemt at stå op og køre med animation ved hjælp af to enkle funktioner: Opsætning() og tegne() .

Men antager ikke, at denne enkelhed er begrænsende, da du kan tage en lang vej ved at skabe dine egne funktioner og udvide den med mange af de fællesskabsoprettede biblioteker.

For flere webdesign værktøjer og råd, se vores liste over strålende Web Hosting. udbydere og være sikker på at vælge den perfekte Website Builder. og Sky lagring .

• 6 måder at komme ind i kreativ kodning

Hvorfor bruge data til at køre animation?

Oprettelse af design og animation 'Systems' betyder at definere et sæt regler, parametre og variable intervaller, som du kan fodre forskellige data. Evnen til at lege med parametrene for et system og input forskellige data betyder, at du kan skabe grænseløse udgangsvariationer med konsistensen af ​​en systematisk tilgang.

Forskellige data kan skabe helt forskellige visuelle udgange og en god kilde til hurtig bevægelse, rigt teksturerede data er lyd. Det er præcis det, vi skal bruge i vores animation.

Data-Driven vs Data Visualization

Er en data-drevet animation en datalisualisering? Ja og nej. Din animation vil være en visuel repræsentation af dataene ligesom en visualisering, men formålet er anderledes end en traditionel visualisering. Data visualisering bruges til at give seeren et indblik i dataene, så grafikken er til tjeneste for meddelelsen af ​​dataene.

Vi bruger dog data som et kreativt frø for at give os mulighed for at generere interessante og tekstmæssige grafiske variationer, derfor er dataene til tjeneste for grafikken. Selvfølgelig er en disciplin sammenkoblet og kryds-pollinater med den anden, men det er godt at genkende din egen hensigt, når du bruger data.

Hvad skal vi lave?

P5.js giver os hurtig og nem adgang til de data, der kommer fra at analysere en lydfil (som en MP3). Vi vil bruge p5.fft. at analysere forskellige frekvenser (bas og diskant) inden for lyden, da den afspiller og visualiserer "Energy" eller amplitude af denne frekvens.

For at vi kan kunne se lyden 'form' som den spiller, vil vi ikke bare vise lydens nuværende amplitude, men indfang en 'buffer' af datapunkter. Dette vil gøre det muligt for os at vise en bevægende historie af værdier.

For at vise vores datapunkter, opretter vi en række koncentriske buer fra midten til den ydre kant af skærmen. Længden af ​​buet vil repræsentere amplituden af ​​dataene. Vi bruger også andre visuelle kodninger til vores data, såsom linjevægt og farve.

Hvad vil vi lære?

Arbejder gennem koden, vi dækker:

• Opsætning af en ny P5-skitse
• Indlæsning og analyse af lyd
• Kortlægning af dataværdier til visuelle elementer som størrelse, form og farve
• Brug af klasser til at tegne, opretholde tilstanden af ​​vores animation og data og gøre vores kode genbrugelig.

Hvor er filerne?

Filerne til animationen er hostet på Openprocessing. , en stor platform til deling, opdagelse og forking af andre folks skitser. Det er også et godt sted for dig at kode.

Når vi bruger lyddata, skal du bruge en MP3-fil til at trække ind i skitsen. Vi opretter en ny skitse om oparbejdning; Sådan ser din skitse ud, når vi har læst lyd, fik dataene og trukket en simpel 'Data Form':

Og det er sådan, den færdige skitse vil se ud:

Alternativt kan du også bruge p5.js online editor. eller blot inkludere biblioteket i dit eget projekt via download eller cdn .

01. Start en ny skitse

Få en gratis openprocessing-konto, og klik på Opret en skitse på din profilside. Dette vil så skabe de mest grundlæggende af skitser, der indeholder to af P5.js indbyggede funktioner:

1. Opsætning() - Dette kører kun én gang, og bruges til at oprette et nyt lærred
2. tegne() - Her er hvor du sætter kode, som du vil køre hver ramme

Du vil bemærke det baggrund() kaldes kun en gang i opsætningen. Dette rydder skærmen, så hvis du vil rydde skærmen hver ramme, inkludere dette i starten af tegne() fungere også.

Har et spil med nogle kode her, ved hjælp af et par af de eksempler, du kan finde på p5.js site .

02. Opret første skitse ved hjælp af lyddata

Gå til min Eksempel Starter Sketch. .

Tryk på Play-knappen, og du vil se noget tekst, der beder dig om at slippe en MP3-fil på lærredet. Vent et par sekunder for at afslutte uploaden, og klik derefter på lærredet for at starte afspilningen. Du bør se en ellipse, efter musen, som skalering og skifte farve sammen med basamplituden i den musik, du uploadede.

Meget af koden er kommenteret, men lad os se på et par nøgleelementer:

Lige i begyndelsen af ​​skitsen, foran Opsætning() , Vi har skabt nogle globale variabler.

Inden for Opsætning() Vi har et par vigtige linjer:

colorMode(HSB,360,100,100);

COLORMODE () Gør det muligt at indstille p5.js til at arbejde inden for forskellige farvepladser som RGB og HSB, samt konfigurere den skala, du bruger til at navigere i kanalerne. Her har vi indstillet HSB-rækker til værdier, du kan være mere bekendt med fra Photoshop snarere end standardindstillingen (0 til 255).

canvas.drop(gotFile);

Denne super hjælpsomme P5.js-funktion gør det muligt for os at lytte til eventuelle fildrophændelser på vores lærred. Når vi får en fil drop event, kalder vi gotfile () For at kontrollere, om det er den rigtige type og begynder at analysere lyden.

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

Her vender vi vores droppede fildata til en Soundfile. . Når vi har lydfilen, bruger vi følgende kode:

1. Initsound () At oprette en ny FFT-instans (for at analysere lyden)
2. Analysesound () at analysere den aktuelle blok af lyd hver ramme
3. getnewsoundDatavalue () at bruge fft.geteenergy () hver ramme for at give os lydens nuværende amplitude. Dette konverteres fra standardintervallet på 0 til 255 til 0 til 1.

Tip: Det er nyttigt at konvertere dine data til et område på 0 til 1, fordi du kan bruge det lettere, når du kortlægger dataene til visuelle parametre som skala, hastighed og farve.

Lad os se i tegningen () funktionen. Denne linje anmoder den aktuelle amplitude (mellem 0 og 1) af basfrekvensen og tildeler den variabel myDataval. .

var myDataVal = getNewSoundDataValue(“bass”)

Vi kalder vores brugerdefinerede getdatahsbcolor () Funktion, der kortlægger vores dataværdi separat til nuance, mætning og lysstyrke og returnerer os en farve. Jo højere dataene, jo længere farven bevæger sig over Hue Spectrum og de lysere og mere mættede farven.

var myDataColor = getDataHSBColor(myDataVal);

Før vi kan tegne vores ellipse, skal vi give det en størrelse ved at multiplicere 200 (PX) ved vores dataværdi. Så jo højere værdien er, jo større ellipse.

var myEllipseSize = 200 * myDataVal;

03. Brug lyddata som en pensel

For lidt sjov, kommentere baggrund() ring til tegne() Funktion, og du kan bruge din lydreaktive ellipse til at male med!

05. Udfyld din skitse

Tegning en data ellipse for en frekvens er stor, men nu opretter vi en række data buer til både bas og diskant. Vi tegner også en buffer af tidligere værdier for at hjælpe os bedre med at se lydens form.

Besøg Denne færdige version af skitsen , Kør det og slip derefter en MP3 på den.

Du vil nu se en række buer, der kommer ud fra midten af ​​skærmen. De vandrette buer er visualiseringer af basen og de lodrette vælger diskanten af ​​MP3.

Kigger på koden, vil du se meget af opsætningen, indlæsning, analysere og få dataene er den samme som den sidste skitse, så vi kan ignorere det. Der er en hel del kode her, så som før, lad os bare vælge et par nøglepunkter.

I stedet for at tegne buerne direkte i tegne() , Vi skaber faktisk nogle brugerdefinerede klasser:

1. klasse radialarc {} Indeholder den enkelte ARCs dataværdi og trækker buen
2. Klasse radialarcs {} styrer vores samling af 'Radialarc' tilfælde

Hver klasse definition har en konstruktør, hvor vi sætter nogle nøgleværdier og også passerer i parametre, der gør det muligt for os at ændre klassens adfærd. Lad os se nærmere på dem nu.

RADIALARC {} klasse:

Dette er den klasse, der indeholder en enkelt dataværdi og trækker et par symmetriske buer.

SETVALUE () og GetValue () Gør det muligt for os at få dataene ind og ud af en bue og skubbe dataene gennem vores ARC's array som dataopdateringerne. redrawfromdata () kaldes for at genberegne og redraw buen.

Drawarc () er hvor vi kalder den praktiske p5.js funktion bue() . Bue() Er hurtigere end at gøre trigonometrien selv, men vi har brug for at videregive et par værdier som position, størrelse og afgørende, en start- og slutvinkel for vores bue.

Denne vinkel måles i 'radians' snarere end grader. Radianere er som grader, men på en anden skala: 360 ° er det samme som 2 x pi radiere. P5.js har nyttige indbyggede konstanter til Pi. Vi Half_pi. og Quarter_pi. etc.

RADIALARCS {} klasse:

Dette er en ledelsesklasse, der skaber en række af vores Radialarc {} klasser og holder dem opdateret ved at flytte dataene ind og ud af hver og ringe til ARC's redrawfromdata () fungere.

At initialisere Radialarcs () Klasser til Treble og Bass, kig ind Opsætning() . Du kan se, at vi skaber to Radialarcs () forekomster og også passerer i vores brugerdefinerede parametre.

Disse parametre er: Antal buer, størrelser af de indre og yderste buer, startvinklen, den maksimale linjevægt og farvefarven. Ved at oprette disse brugerdefinerede klasser gør det muligt for os at genbruge vores kode, men også gøre hver instans individuel ved at bestå dem disse parametre.

Når ARC-objekterne initialiseres, vil hver ramme ringe Updateradialarcs () og Drawradialarcs () Inden for hovedpolen tegne() Funktion, hvilket er, hvordan animationsopdateringerne og flytter.

06. Tag det videre

Vi har dækket en masse kode her, men grundlæggende håber jeg, at du kan se, hvordan vi tager data og påfører det på visuelle elementer som størrelse, position, længde, vægt og farve.

For at gå videre skal du spille rundt med antallet af buer, grupper og vinkler. Skift farveområderne og lav nye klasser for at tegne forskellige former.

I dette eksempel brugte vi data, der konstant strømmer og kombineres med en hurtig billedhastighed, det skaber illusionen af ​​animation. Men ikke alle data er sådanne og kan opdatere langsommere. For langsommere data kan du stadig skabe glat animation ved at 'tweening' animationen af ​​dine former mellem deres nuværende og deres måldimensioner.

Held og lykke med din næste data-drevne animation!

Denne artikel blev oprindeligt offentliggjort i udstedelse 320 af net , verdens bedst sælgende magasin til webdesignere og udviklere. Køb problem 320. her Or. Abonner her .

Relaterede artikler:

• Sådan tilføjes animation til SVG med CSS
• Datatrendet indstillet til at revolutionere app design
• 12 Great CSS animation ressourcer