Verken de gegevensvisualisatie met P5.JS

P5.JS is de meest recente JavaScript-implementatie van de beroemde desktop Creative Codering Milieuverwerking. Het kost veel van de macht en het gebruiksgemak van het verwerken en plaatst deze in uw browser. Het helpt je te tekenen in canvas, maar integreert ook met je webpagina, waardoor je 'schets' kan reageren op en de Dom manipuleren.

p5.js neemt veel van de hoofdpijn van animatie weg en Gegevensvisualisatie Op het web en maakt het super-simpel om op te staan ​​en met animatie te werken met behulp van twee eenvoudige functies: opstelling() en trek() ​

Maar neem niet aan dat deze eenvoud beperkt is, omdat u een lange weg kunt verwerken door uw eigen functies te maken en deze uit te breiden met veel van de gemaakte bibliotheken.

Zie onze lijst met briljant voor meer webdesignhulpmiddelen en advies web hosting providers en zorg ervoor dat u het perfecte kiest website bouwer en cloud opslag ​

• 6 manieren om in creatieve codering te komen

Waarom gegevens gebruiken om animatie te stimuleren?

Het maken van ontwerp- en animatie 'systemen' betekent het definiëren van een reeks regels, parameters en variabele bereiken waarin u verschillende gegevens kunt voeden. De mogelijkheid om met de parameters van een systeem te spelen en verschillende data in te voeren, betekent dat u onbegrensde uitgangsvariaties kunt maken met de consistentie van een systematische aanpak.

Verschillende gegevens kunnen volledig diverse visuele uitgangen creëren en een grote bron van snel bewegende, rijkelijk gestructureerde gegevens zijn audio. Dat is precies wat we gaan gebruiken in onze animatie.

Gegevensgestuurde VS-visualisatie

Is een gegevensgestuurde animatie een gegevensvisualisatie? Ja en nee. Uw animatie is een visuele weergave van de gegevens, net als een visualisatie, maar het doel is anders dan die van een traditionele visualisatie. Gegevensvisualisatie wordt gebruikt om de kijker inzicht in de gegevens te geven, dus de afbeelding bevindt zich ten dienste van de communicatie van de gegevens.

We zullen echter gegevens gebruiken als een creatief zaad om ons in staat te stellen interessante en textuur grafische variaties te genereren, daarom staan ​​de gegevens ter dienst van de afbeelding. Natuurlijk is één discipline met elkaar verbonden en bestugt met de andere, maar het is goed om uw eigen intentie te herkennen bij het gebruik van gegevens.

Wat gaan we maken?

P5.JS geeft ons snel en eenvoudig toegang tot de gegevens die afkomstig zijn van het analyseren van een geluidsbestand (zoals een MP3). We gebruiken P5.FFT Om verschillende frequenties (Bass en Treble) in de audio te analyseren, terwijl het terugspeelt en de 'energie' of amplitude van die frequentie wordt visualiseerd.

Om ervoor te zorgen dat we de 'vorm' van het geluid kunnen zien als het speelt, willen we niet alleen de huidige amplitude van het geluid laten zien, maar een 'buffer' van gegevenspunten vastleggen. Dit zal ons in staat stellen om een ​​bewegende geschiedenis van waarden te tonen.

Om onze gegevenspunten te tonen, maken we een reeks concentrische bogen uit het midden naar de buitenrand van het scherm. De lengte van de ARC vertegenwoordigt de amplitude van de gegevens. We gebruiken ook andere visuele coderingen voor onze gegevens, zoals lijngewicht en kleur.

Wat zullen we leren?

WERKEN DOOR DE CODE, DOEN WIJ Dekken:

• Een nieuwe P5-schets instellen
• Geluid laden en analyseren
• Gegevenswaarden in kaart brengen naar visuele elementen zoals grootte, vorm en kleur
• Het gebruik van klassen om te tekenen, de staat van onze animatie en gegevens te onderhouden en onze code herbruikbaar te maken.

Waar zijn de bestanden?

De bestanden voor de animatie worden gehost op OpenProcessing , een geweldig platform voor het delen, ontdekken en vult van de schetsen van andere mensen. Het is ook een geweldige plek voor jou om te coderen.

Zoals we audiogegevens gebruiken, hebt u een MP3-bestand nodig om in de schets te slepen. We stellen een nieuwe schets op openprocessing op; Dit is hoe uw schets eruit zal zien zodra we audio hebben geladen, de gegevens hebben gekregen en een eenvoudige 'gegevensvorm' getekend:

En dit is hoe de voltooide schets eruit zal zien:

Als alternatief kunt u ook de P5.JS Online-editor of neem de bibliotheek in uw eigen project op via download of CDN ​

01. Start een nieuwe schets

Krijg een gratis openprocessing-account en klik op een schets op je profielpagina. Dit maakt dan de meest elementaire schetsen die twee van de ingebouwde functies van P5.JS bevatten:

1. opstelling() - Dit loopt slechts één keer en wordt gebruikt om een ​​nieuw canvas op te zetten
2. trek() - Hier voert u code aan die u elk frame wilt uitvoeren

Je zult merken dat achtergrond() wordt slechts eenmaal in de opzet gebeld. Dit wist het scherm, dus als u het scherm elk frame wilt wissen, neemt u dit op aan het begin van de trek() functie ook.

Heb hier een toneelstuk met een code, met een paar van de voorbeelden die je kunt vinden op de p5.js-site ​

02. Maak eerste schets met behulp van audiogegevens

Ga naar mijn Voorbeeld Starter Sketch ​

Druk op de knop PLAY en je ziet een tekst waarin je vraagt ​​om een ​​MP3-bestand op het canvas te laten vallen. Wacht een paar seconden ervoor om het uploaden te voltooien en klik vervolgens op het canvas om het afspelen te beginnen. Je zou een ellips moeten zien, na je muis, die schalen en kleur veranderen samen met de basamplitude in de muziek die je hebt geüpload.

Veel van de code wordt becommentarieerd, maar laten we eens kijken naar een paar belangrijke elementen:

Recht aan het begin van de schets, voor opstelling() , we hebben een aantal globale variabelen gemaakt.

Binnen opstelling() We hebben een aantal belangrijke lijnen:

colorMode(HSB,360,100,100);

kleur mode() Hiermee kunt u P5.Js instellen om te werken binnen verschillende kleurruimten zoals RGB en HSB, en de schaal configureren die u gebruikt om door de kanalen te navigeren. Hier hebben we HSB-reeksen ingesteld op waarden waarmee u meer vertrouwd bent met Photoshop in plaats van de standaardinstelling (0 tot 255).

canvas.drop(gotFile);

Deze super nuttige P5.JS-functie stelt ons in staat om te luisteren naar eventuele bestandsdruppelevenementen op ons canvas. Wanneer we een druppelevenement krijgen, bellen we gotfile () Controleer of het het juiste type is en het geluid kan analyseren.

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

Hier draaien we onze gevallen bestandsgegevens in een Geluidsbestand ​Wanneer we het geluidsbestand hebben, gebruiken we de volgende code:

1. Initound () Om een ​​nieuwe FFT-instantie in te stellen (om het geluid te analyseren)
2. Analysesound () om het huidige blok van geluid elk frame te analyseren
3. GetNewSoundDatavalue () gebruiken fft.Getenergie () Elk frame om ons de huidige amplitude van het geluid te geven. Dit wordt geconverteerd van het standaardbereik van 0 tot 255 tot 0 tot 1.

TIP: het is handig om uw gegevens naar een bereik van 0 tot 1 te converteren, omdat u het gemakkelijker kunt gebruiken bij het in kaart brengen van de gegevens naar visuele parameters, zoals schaal, snelheid en kleur.

Laten we kijken in de functie Draw (). Deze regel vraagt ​​de huidige amplitude (tussen 0 en 1) van de basfrequentie en wijst het de variabele toe MyDataval ​

var myDataVal = getNewSoundDataValue(“bass”)

We noemen onze gewoonte GETDATAHSBCOLOR () Functie die onze gegevenswaarde afzonderlijk in kaart brengen aan de tint, verzadiging en helderheid en retourneert ons een kleur. Hoe hoger de gegevens, hoe verder de kleur wordt verplaatst over het HUE-spectrum en de helderder en meer verzadigd de kleur.

var myDataColor = getDataHSBColor(myDataVal);

Voordat we onze ellipse kunnen tekenen, moeten we het een maat geven, door 200 (PX) te vermenigvuldigen met onze gegevenswaarde. Dus hoe hoger de waarde, hoe groter de ellips.

var myEllipseSize = 200 * myDataVal;

03. Gebruik audiogegevens als een penseel

Voor een beetje plezier, commenteer dan de achtergrond() bel de trek() Functie en u kunt uw geluidsreactieve ellips gebruiken om mee te schilderen!

05. Voltooi je schets

Drawing One Data-ellips voor één frequentie is geweldig, maar nu maken we een reeks gegevensboeren voor zowel Bass als Treble. We trekken ook een buffer van eerdere waarden om ons te helpen de vorm van het geluid beter te zien.

Bezoek Deze voltooide versie van de schets , voer het uit en laat een mp3 erop vallen.

U ziet nu een reeks bogen uit het midden van het scherm. De horizontale bogen zijn visualisaties van de bas en de verticale kiezen de tonen van de MP3.

Kijkend naar de code, ziet u veel van de opstelling, het laden, het analyseren en het krijgen van de gegevens is hetzelfde als de laatste schets, zodat we dat kunnen negeren. Er is nogal wat code hier, zoals voorheen, laten we gewoon een paar belangrijke punten uitkiezen.

In plaats van de bogen rechtstreeks in te trekken trek() , we maken eigenlijk een aantal aangepaste klassen:

1. Klasse Radialarc {} Houdt de gegevenswaarde van de individuele boog vast en trekt de boog
2. Klasse Radialarcs {} beheert onze verzameling 'Radialarc' -instanties

Elke Class Definitie heeft een constructor waarin we een aantal belangrijke waarden instellen en parameters ook passeren waarmee we het gedrag van de klas kunnen veranderen. Laten we ze nu dichterbij bekijken.

De Radialarc {} Klasse:

Dit is de klasse die een enkele gegevenswaarde bevat en een paar symmetrische bogen trekt.

SetValue () en getwaarue () Schakel ons in staat om de gegevens in en uit een boog te krijgen en de gegevens te duwen via de array van onze ARC als de gegevensupdates. redrawfromdata () wordt geroepen om de boog opnieuw te berekenen en opnieuw te berekenen.

Drawarc () is waar we de handige P5.JS-functie noemen boog() ​ Boog() Is sneller dan zelf de trigonometrie te doen, maar we moeten het een paar waarden als positie, grootte en, cruciaal, een start- en eindhoek voor onze boog doorgeven.

Die hoek wordt gemeten in 'radialen' in plaats van graden. Radianen zijn als graden, maar op een andere schaal: 360 ° is hetzelfde als 2 x PI-radialen. P5.JS heeft nuttige ingebouwde constanten voor PI ​ Half_pi en Kwartaal_pi enz.

De Radialarcs {} Klasse:

Dit is een managementklasse die een array van onze creëert Radialarc {} klassen en houdt ze op de hoogte door de gegevens in en uit elkaar te bewegen en de boog te bellen redrawfromdata () functie.

Om de Radialarcs () Klassen voor TREBLE en BAS, hebben een kijkje in opstelling() ​Je kunt zien dat we er twee creëren Radialarcs () instanties en ook passeren in onze aangepaste parameters.

Die parameters zijn: aantal bogen, formaten van de binnen- en buitenste bogen, de starthoek, het maximale lijngewicht en het tintraject van de kleur. Door deze aangepaste klassen te maken, stelt het ons in staat om onze code opnieuw te gebruiken, maar ook elke exemplaar-persoon maken door deze parameters door te geven.

Zodra de boogobjecten worden geïnitialiseerd, belt elk frame Upateradialarcs () en Drawradialarcs () Binnen de hoofdp5 trek() functie, wat is hoe de animatie-updates en bewegingen.

06. Neem het verder

We hebben hier veel code behandeld, maar fundamenteel hoop ik dat je kunt zien hoe we gegevens nemen en het toepassen op visuele elementen zoals grootte, positie, lengte, gewicht en kleur.

Om verder te gaan, speel rond met het aantal bogen, groepen en hoeken. Verander de kleurbereiken en maak nieuwe klassen om verschillende vormen te tekenen.

In dit voorbeeld gebruikten we gegevens die voortdurend stromen en, in combinatie met een snelle framesnelheid, het creëert de illusie van animatie. Niet alle gegevens zijn echter zo en kunnen langzamer bijwerken. Voor langzamere gegevens kunt u nog steeds een soepele animatie creëren door de animatie van uw vormen tussen hun huidige en hun doelafmetingen te maken.

Veel succes met je volgende data-gedreven animatie!

Dit artikel is oorspronkelijk gepubliceerd in kwestie 320 van netto- , 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Koop nummer 320 hier of Abonneer hier ​

Gerelateerde artikelen:

• Hoe animatie toe te voegen aan SVG met CSS
• De data-trend ingesteld op revolutionize app-ontwerp
• 12 Geweldige CSS-animatiebronnen