Utforska data visualisering med p5.js

P5.JS är den senaste JavaScript-implementeringen av den kända skrivbordet Creative Coding Miljöbehandling. Det tar mycket av kraften och användarvänligheten att bearbeta och sätter den i din webbläsare. Det hjälper dig att rita i duk men integreras också med din webbsida, så att din "skiss" kan svara på och manipulera domen.

p5.js tar bort mycket av huvudvärk av animering och Data visualisering På webben och gör det super-enkelt att gå upp och springa med animering med hjälp av två enkla funktioner: uppstart() och dra() .

Men antar inte att denna enkelhet är begränsande, eftersom du kan ta reda på ett långt sätt genom att skapa egna funktioner och förlänga den med många av de community-skapade biblioteken.

För mer webbdesignverktyg och råd, se vår lista över lysande webbhotell leverantörer och var noga med att välja det perfekta Website Builder och molnlagring .

• 6 sätt att komma in i kreativ kodning

Varför använda data för att köra animering?

Skapa design- och animationssystem: att definiera en uppsättning regler, parametrar och variabla områden där du kan mata olika data. Möjligheten att spela med parametrarna för ett system och inmatning av olika data betyder att du kan skapa obegränsade produktionsvariationer med konsistensen av ett systematiskt tillvägagångssätt.

Olika data kan skapa helt varierade visuella utgångar och en bra källa till snabbflyttande, rikligt texturerad data är ljud. Det är precis vad vi ska använda i vår animering.

Data-driven vs data visualisering

Är en data-driven animering en datavisualisering? Ja och nej. Din animering kommer att vara en visuell representation av data som en visualisering, men syftet är annorlunda än den för en traditionell visualisering. Datavisualisering används för att ge tittaren en inblick i data, så grafiken är till tjänst för kommunikation av data.

Vi kommer dock att använda data som ett kreativt frö för att vi ska kunna skapa intressanta och texturella grafiska variationer, därför är uppgifterna till tjänst för grafiken. Naturligtvis är en disciplin sammankopplad och korsar med den andra men det är bra att känna igen din egen avsikt när du använder data.

Vad ska vi göra?

P5.JS ger oss snabb och enkel åtkomst till de data som kommer från att analysera en ljudfil (som en MP3). Vi ska använda p5.ppt Att analysera olika frekvenser (bas och diskant) i ljudet när den spelar upp och visualisera "energi" eller amplituden av den frekvensen.

För att vi ska kunna se "form" av ljudet som den spelar, vill vi inte bara visa den aktuella amplituden av ljudet men fånga en "buffert" av datapunkter. Detta gör det möjligt för oss att visa en rörlig historia av värden.

För att visa våra datapunkter skapar vi en serie koncentriska bågar från mitten till skärmens ytterkant. Längden på bågen representerar amplituden av data. Vi använder också andra visuella kodningar för våra data, till exempel linjevikt och färg.

Vad ska vi lära oss?

Arbetar genom koden, vi täcker:

• Ställa in en ny P5-skiss
• Laddar och analyserar ljud
• Kartläggning av datavärden till visuella element som storlek, form och färg
• Använda klasser för att rita, behåll tillståndet för vår animering och data och gör vår kod återanvändbar.

Var är filerna?

Filerna för animationen är värd på Openprocessing , en bra plattform för delning, upptäcka och förkasta andra människors skisser. Det är ett bra ställe för dig att koda också.

När vi ska använda ljuddata behöver du en MP3-fil för att dra in i skissen. Vi ställer in en ny skiss på OpenProcessing; Så här ser din skiss en gång när vi har laddat ljud, har data och dras en enkel "dataform":

Och så är den färdiga skissen att se:

Alternativt kan du också använda P5.JS Online Editor eller bara inkludera biblioteket i ditt eget projekt via nedladdning eller cdn .

01. Starta en ny skiss

Få ett gratis OpenProcessing-konto och, från din profilsida, klicka på Skapa en skiss. Detta kommer då att skapa de mest grundläggande skisserna som innehåller två av p5.js inbyggda funktioner:

1. uppstart() - Detta körs bara en gång, och används för att ställa in en ny duk
2. dra() - Här är där du lägger kod som du vill köra varje ram

Du märker det bakgrund() kallas bara en gång i uppställningen. Detta rensar skärmen, så om du vill rensa skärmen varje ram, inkludera detta i början av dra() fungera också.

Ha ett spel med lite kod här, med några av de exempel du kan hitta På P5.JS-webbplatsen .

02. Skapa första skiss med ljuddata

Gå till min Exempel Starter Sketch .

Tryck på spelknappen och du får se en text som ber dig att släppa en mp3-fil på duken. Vänta några sekunder för att avsluta uppladdningen och klicka sedan på duken för att starta uppspelningen. Du bör se en ellipsa, efter musen, som är skalar och byter färg tillsammans med basamplituden i den musik som du laddat upp.

Mycket av koden kommenteras men låt oss titta på några nyckelelement:

Rätt i början av skissen, före uppstart() , Vi har skapat några globala variabler.

Inom uppstart() Vi har ett par viktiga linjer:

colorMode(HSB,360,100,100);

färg läge() Gör det möjligt att ställa in p5.js för att fungera inom olika färgutrymmen som RGB och HSB, samt konfigurera den skala du använder för att navigera på kanalerna. Här har vi satt HSB-intervall till värden du kan vara mer bekant med från Photoshop istället för standardinställningen (0 till 255).

canvas.drop(gotFile);

Denna super hjälpsamma p5.js-funktion gör det möjligt för oss att lyssna på några filfallshändelser på vår duk. När vi får en File Drop-händelse, ringer vi GOTFILE () För att kontrollera om det är rätt typ och börja analysera ljudet.

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

Här vänder vi våra tappade fildata till en Ljudfil . När vi har ljudfilen använder vi följande kod:

1. InitSound () att ställa in en ny FFT-instans (för att analysera ljudet)
2. Analysesound () För att analysera det aktuella blocket av ljud varje ram
3. GetNewsoundDatavalue () att använda fft.getEnergy () Varje ram för att ge oss den aktuella amplituden av ljudet. Detta omvandlas från standardintervallet 0 till 255 till 0 till 1.

Tips: Det är användbart att konvertera dina data till ett intervall på 0 till 1 eftersom du lättare kan använda det när du kartlägger data till visuella parametrar som skala, hastighet och färg.

Låt oss titta i Draw () -funktionen. Denna linje begär den aktuella amplituden (mellan 0 och 1) av basfrekvensen och tilldelar den variabeln mydataval .

var myDataVal = getNewSoundDataValue(“bass”)

Vi kallar vår anpassning GetDatahsbolor () Funktion som kartlägger vårt datavärde separat till nyans, mättnad och ljusstyrka och returnerar oss en färg. Ju högre data desto vidare rör sig färgen över Hue-spektret och den ljusare och mer mättade färgen.

var myDataColor = getDataHSBColor(myDataVal);

Innan vi kan dra vår ellips måste vi ge den en storlek, genom att multiplicera 200 (px) med vårt datavärde. Så ju högre värdet desto större är ellipsen.

var myEllipseSize = 200 * myDataVal;

03. Använd ljuddata som pensel

För lite roligt, kommentera bakgrund() ringa i dra() funktion och du kan använda ditt ljudreaktiva ellips för att måla med!

05. Fyll i din skiss

Att skriva en data ellips för en frekvens är bra men nu ska vi skapa en serie datalager för både bas och diskant. Vi ritar också en buffert av tidigare värden för att hjälpa oss att bättre se ljudets form.

Besök den här färdiga versionen av skissen , Kör den och släpp sedan en mp3 på den.

Du kommer nu att se en serie bågar som kommer ut från mitten av skärmen. De horisontella bågarna är visualiseringar av basen och de vertikala plockar ut disken på MP3.

Titta på koden kommer du att se mycket av uppställningen, ladda, analysera och få data är densamma som den sista skissen, så vi kan ignorera det. Det finns en hel del kod här så, som tidigare, låt oss bara välja några viktiga punkter.

Istället för att dra bågarna direkt i dra() , vi skapar faktiskt några anpassade klasser:

1. klassradialarc {} Håller den enskilda bågens datavärde och drar bågen
2. klassradialarcs {} hanterar vår samling av "radialarc" instanser

Varje klassdefinition har en konstruktör där vi ställer in några nyckelvärden och passerar också i parametrar som gör det möjligt för oss att ändra klassens beteende. Låt oss titta närmare på dem nu.

Radialarc {} klassen:

Detta är den klass som innehåller ett enda datavärde och drar ett par symmetriska bågar.

satt värde() och GetValue () Gör det möjligt för oss att få data in och ut ur en båge och tryck på data via vår Arcs array som datauppdateringar. Redrawfromdata () kallas för att beräkna och återuppta bågen.

Drawarc () är där vi kallar den praktiska p5.js-funktionen båge() . Båge() Är snabbare än att göra trigonometrien själva men vi behöver vidarebefordra det några värden som position, storlek och, avgörande, en start- och slutvinkel för vår båge.

Den vinkeln mäts i "radianer" i stället för grader. Radianer är som grader men på en annan skala: 360 ° är densamma som 2 x pi radianer. P5.js har användbara inbyggda konstanter för PI , Half_pi och Quarter_pi etc.

Radialarcs {} klass:

Det här är en ledningsklass som skapar en rad av vår Radialarc {} klasser och håller dem uppdaterade genom att flytta data in och ut ur varje och ringa bågens Redrawfromdata () fungera.

Att initiera Radialarcs () Klasser för diskant och bas, ta en titt på uppstart() . Du kan se att vi skapar två Radialarcs () instanser och passerar också i våra anpassade parametrar.

Dessa parametrar är: antal bågar, storlekar av de inre och yttersta bågarna, utgångsvinkeln, MAX-linjens vikt och färgområdet. Genom att skapa dessa anpassade klasser gör det möjligt för oss att återanvända vår kod men också göra varje instans individ genom att passera dem dessa parametrar.

När ARC-objekten är initialiserade, kommer varje ram att ringa UpdateAdialArcs () och DrawradialArcs () Inom huvud P5 dra() Funktion, vilket är hur animationsuppdateringarna och rör sig.

06. Ta det vidare

Vi har täckt mycket kod här men i grunden hoppas jag att du kan se hur vi tar data och applicerar det på visuella element som storlek, position, längd, vikt och färg.

Att gå vidare, leka med antalet bågar, grupper och vinklar. Ändra färgområdena och skapa nya klasser för att rita olika former.

I det här exemplet använde vi data som ständigt strömmar och kopplas med en snabb bildhastighet, skapar den illusionen av animering. Men inte alla data är så och kan uppdatera långsammare. För långsammare data kan du fortfarande skapa smidig animering genom att "tweening" animationen av dina former mellan deras nuvarande och deras måldimensioner.

Lycka till med din nästa datadrivna animering!

Denna artikel publicerades ursprungligen i utgåva 320 av netto , världens bästsäljande tidning för webbdesigners och utvecklare. Köp nummer 320 här eller prenumerera här .

Relaterade artiklar:

• Hur man lägger till animering till SVG med CSS
• Datautvecklingen är att revolutionera appdesign
• 12 Great CSS Animation Resources