Erkunden Sie die Datenvisualisierung mit P5.js

P5.js ist die jüngste JavaScript-Implementierung der berühmten Desktop-Creative Coding-Umgebungsumgebung. Es erfordert viel Kraft und Benutzerfreundlichkeit der Verarbeitung und setzt es in Ihren Browser. Es hilft Ihnen, in Canvas zu zeichnen, aber auch mit Ihrer Webseite integriert, sodass Ihre Skizze 'skizziert wird, um den DOM zu reagieren und zu manipulieren.

p5.js. nimmt viele die Kopfschmerzen der Animation ab und Datenvisualisierung. Im Internet und macht es super-einfach, mit zwei einfachen Funktionen mit Animation aufzustehen: installieren() und zeichnen() .

Nehmen Sie jedoch nicht davon aus, dass die Einfachheit einschränkt, da Sie einen langen Weg bearbeiten können, indem Sie Ihre eigenen Funktionen erstellen und mit vielen der von Community erstellten Bibliotheken erweitern.

Weitere Webdesign-Tools und -Tatoren finden Sie in der Liste der brillanten Liste Web-Hosting Anbieter und stellen Sie sicher, dass Sie das perfekte auswählen Webseitenersteller und Cloud-Speicherung. .

• 6 Wege, um in die kreative Codierung zu gelangen

Warum Daten verwenden, um die Animation zu treiben?

Erstellen von Design- und Animationssystemen 'bedeutet, dass Sie eine Reihe von Regeln, Parametern und variablen Bereichen definieren, in die Sie verschiedene Daten füttern können. Die Möglichkeit, mit den Parametern eines Systems zusammenzuspielen und verschiedene Daten einzugeben, können Sie unbegrenzte Ausgangsvariationen mit der Konsistenz eines systematischen Ansatzes erstellen.

Unterschiedliche Daten können völlig diversen visuelle Ausgänge erstellen, und eine großartige Quelle für schnelles bewegende, radly texturierte Daten sind Audio. Das ist genau das, was wir in unserer Animation verwenden werden.

Datengetriebene VS-Datenvisualisierung

Ist eine datengesteuerte Animation eine Datenvisualisierung? Ja und nein. Ihre Animation ist eine visuelle Darstellung der Daten wie eine Visualisierung, der Zweck unterscheidet sich jedoch von der traditionellen Visualisierung. Die Datenvisualisierung wird verwendet, um dem Betrachter einen Einblick in die Daten zu geben, sodass die Grafik der Dienst der Kommunikation der Daten ist.

Wir werden jedoch Daten als kreativer Saatgut verwenden, um es uns ermöglichen, interessante und strukturelle grafische Variationen zu erzeugen, daher ergibt sich die Daten zum Dienst der Grafik. Natürlich ist eine Disziplin miteinander verbunden und polliniert mit dem anderen, aber es ist gut, Ihre eigene Absicht bei der Verwendung von Daten zu erkennen.

Was werden wir machen?

P5.js gibt uns einen schnellen und einfachen Zugriff auf die Daten, die von der Analyse einer Sounddatei (wie ein MP3) gelangen. Wir werden benutzen p5.fft. Um verschiedene Frequenzen (Bass und Treble) innerhalb des Audios zu analysieren, spielt er zurück und visualisiert die 'Energie' oder der Amplitude dieser Frequenz.

Damit wir die "Form" des Sounds, wie er spielt, sehen kann, möchten wir nicht nur die aktuelle Amplitude des Sounds anzeigen, sondern einen 'Puffer' von Datenpunkten erfassen. Dadurch können wir eine bewegliche Werte der Werte zeigen.

Um unsere Datenpunkte anzuzeigen, erstellen wir eine Reihe konzentrischer Bögen aus der Mitte an der Außenkante des Bildschirms. Die Länge des Lichtbogens repräsentiert die Amplitude der Daten. Wir verwenden auch andere visuelle Kodierungen für unsere Daten, wie z. B. Liniengewicht und Farbe.

Was lernen wir?

Wir arbeiten durch den Code, werden wir abdecken:

• Einrichten einer neuen P5-Skizze
• Laden und Analysieren von Sound
• Mapping-Datenwerte an visuelle Elemente wie Größe, Form und Farbe
• Die Verwendung von Klassen zum Zeichnen, den Zustand unserer Animation und Daten pflegen und unseren Code wiederverwendbar machen.

Wo sind die Dateien?

Die Dateien für die Animation werden inhostiert OpenProcessing. Eine großartige Plattform zum Teilen, Entdecken und Gabel von anderen Menschen. Es ist auch ein großartiger Ort für Sie, um zu codieren.

Da wir Audiodaten verwenden, benötigen Sie eine MP3-Datei, um in die Skizze zu ziehen. Wir werden eine neue Skizze zum Openprozesssensing einrichten. So sieht Ihre Skizze aus, sobald wir Audio geladen haben, die Daten erhalten und eine einfache "Datenform" gezeichnet haben:

Und so sieht die vollständige Skizze aus:

Alternativ können Sie auch das verwenden p5.js Online-Editor. Oder nur die Bibliothek in Ihrem eigenen Projekt einschließen Via Download oder CDN .

01. Starten Sie eine neue Skizze

Erhalten Sie ein kostenloses OpenProcessing-Konto und klicken Sie auf Ihrer Profilseite auf eine Skizze erstellen. Dies erstellt dann die grundlegendsten Skizzen mit zwei der integrierten Funktionen von P5.Js:

1. installieren() - Dies läuft nur einmal und wird verwendet, um eine neue Leinwand einzurichten
2. zeichnen() - Hier gibt es Code, den Sie jeden Rahmen ausführen möchten

Sie werden das bemerken Hintergrund() wird nur einmal in der Einrichtung angerufen. Dies löscht den Bildschirm, wenn Sie also den Bildschirm alle Frame löschen möchten, diese zu Beginn der zeichnen() Funktion auch.

Ich habe hier ein Spiel mit einigen Code, mit ein paar der Beispiele, die Sie finden können Auf dem Standort P5.js .

02. Erstellen Sie die erste Skizze mithilfe von Audiodaten

Gehe zu meinem Beispielstarterskizze .

Drücken Sie die Wiedergabetaste und Sie sehen, dass einiger Text aufgefordert wird, eine MP3-Datei auf die Leinwand zu legen. Warten Sie ein paar Sekunden, bis das Upload fertiggestellt ist, und klicken Sie dann auf die Leinwand, um die Wiedergabe zu starten. Sie sollten eine Ellipse sehen, die Ihrer Maus folgt, die die Farbe zusammen mit der Bassamplitude in der von Ihnen hochgeladenen Musik skaliert und ändert.

Ein Großteil des Codes wird kommentiert, aber wir sehen uns ein paar wichtige Elemente an:

Direkt am Anfang der Skizze vor installieren() Wir haben einige globale Variablen erstellt.

Innerhalb installieren() Wir haben ein paar wichtige Linien:

colorMode(HSB,360,100,100);

Farbmodus() Ermöglicht das Setzen von P5.js, um in verschiedenen Farbräumen wie RGB und HSB zu arbeiten, sowie die Konfiguration der Skala, die Sie zum Navigieren der Kanäle verwenden. Hier haben wir HSB-Bereiche auf Werte festgelegt, mit denen Sie von Photoshop eher mit der Standardeinstellung (0 bis 255) mit dem Photoshop vertraut sind.

canvas.drop(gotFile);

Mit dieser super helflichen P5.js-Funktion können wir auf unsere Leinwand für Angaben von Dateien anhören. Wenn wir ein Datei-Drop-Ereignis erhalten, rufen wir an gotfile () Um zu überprüfen, ob es der richtige Typ ist, und analysieren Sie den Sound.

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

Hier verwandeln wir unsere abgefallenen Dateidaten in a Audiodatei . Wenn wir über die Sounddatei verfügen, verwenden wir den folgenden Code:

1. InitSound () So richten Sie eine neue FFT-Instanz ein (analysieren Sie den Sound)
2. Analyseound () Um den aktuellen Klangblock in jedem Rahmen zu analysieren
3. getnewsounddatavalue () benutzen FFT.GEntEnergy () Jeder Rahmen, um uns die aktuelle Amplitude des Sounds zu geben. Dies wird aus seinem Standardbereich von 0 bis 255 bis 0 bis 1 umgewandelt.

Tipp: Es ist hilfreich, Ihre Daten in einen Bereich von 0 bis 1 umzuwandeln, da Sie es leichter verwenden können, wenn Sie die Daten auf visuelle Parameter wie Skala, Geschwindigkeit und Farbe abgeben.

Schauen wir uns in die FUNKTION (). Diese Linie fordert die aktuelle Amplitude (zwischen 0 und 1) der Bassfrequenz an und weist ihm die Variable zu mydataval. .

var myDataVal = getNewSoundDataValue(“bass”)

Wir nennen unseren Brauch GETDATAHSBCOLOR () Funktion, die unseren Datenwert separat auf den Farbton, Sättigung und Helligkeit kennt, und gibt uns eine Farbe zurück. Je höher die Daten, desto weiter bewegt sich die Farbe über das Farbtonspektrum und desto heller und mehr gesättigte Farbe.

var myDataColor = getDataHSBColor(myDataVal);

Bevor wir unsere Ellipse zeichnen können, müssen wir ihm eine Größe geben, indem wir 200 (PX) mit unserem Datenwert multiplizieren. Je höher der Wert, desto größer ist die Ellipse.

var myEllipseSize = 200 * myDataVal;

03. Verwenden Sie Audiodaten als Pinsel

Kommentieren Sie für ein bisschen Spaß heraus Hintergrund() Anruf in The. zeichnen() Funktion und Sie können Ihre solide reaktive Ellipse verwenden, um mit zu malen!

05. Füllen Sie Ihre Skizze ab

Zeichnen einer Daten-Ellipse für eine Frequenz ist großartig, aber jetzt erstellen wir eine Reihe von Datenbögen für Bass und Treble. Wir zeichnen auch einen Puffer mit vorherigen Werten, um uns dabei zu unterstützen, die Form des Sounds besser zu sehen.

Besuch Diese fertige Version der Skizze , Führen Sie es aus und fassen Sie dann einen MP3 darauf.

Sie sehen jetzt eine Reihe von Bögen, die aus der Mitte des Bildschirms austreten. Die horizontalen Bögen sind Visualisierungen des Basses und die vertikalen Auswahl des Höhen des MP3.

Wenn Sie den Code ansehen, sehen Sie einen Großteil des Einrichtens, das Laden, Analysieren und Ermitteln der Daten sind dieselbe wie die letzte Skizze, sodass wir das ignorieren können. Es gibt hier ziemlich ein bisschen Code, also wie zuvor, lass uns einfach ein paar wichtige Punkte ausgehen.

Anstatt die Bögen direkt in zu zeichnen zeichnen() Wir erstellen tatsächlich einige benutzerdefinierte Klassen:

1. Klasse radialarc {} Hält den Datenwert des einzelnen Arcs und zieht den Bogen an
2. Klasse Radialarccs {} verwaltet unsere Sammlung von "radialarc" -Stellen-Instanzen

Jede Klassendefinition hat einen Konstruktor, in dem wir einige Schlüsselwerte einstellen und auch Parameter übergeben, mit denen die USA das Verhalten der Klasse ändern können. Lass uns jetzt näher ansehen.

Die radialarc {}-Klasse:

Dies ist die Klasse, die einen einzelnen Datenwert enthält und ein Paar symmetrischer Bögen zieht.

SetValue () und Wert erhalten() Aktivieren Sie uns, um die Daten ein- und aus einem ARC zu erhalten, und drücken Sie die Daten über das Array des Arrays des ARC als Datenaktualisierungen. redrawfromdata () wird aufgerufen, um den Lichtbogen neu zu berechnen und neu zu neu zu gestalten.

drawarc () Dort nennen wir die praktische P5.JS-Funktion Bogen() . Bogen() ist schneller als die Trigonometrie selbst, aber wir müssen es ein paar Werte wie Position, Größe und, entscheidend, einen Start- und Endwinkel für unseren Bogen bestehen.

Dieser Winkel wird in 'Radians' anstelle von Grad gemessen. Radians sind wie Grad, aber auf einer anderen Skala: 360 ° ist der gleiche wie 2 x PI-Radierungen. P5.js hat nützliche eingebaute Konstanten für PI , Halb_pi. und Quart_pi. usw.

Die radialarccs {}-Klasse:

Dies ist eine Verwaltungsklasse, die ein Array erstellt Radialarc {} Klassen und hält sie auf dem neuesten Stand, indem Sie die Daten in und aus dem Gerät verschieben und den ARCs anrufen redrawfromdata () Funktion.

Um das zu initialisieren Radialarccs () Klassen für Höhen und Bass, haben einen Blick in installieren() . Sie können sehen, dass wir zwei erstellen Radialarccs () Instanzen und auch in unseren benutzerdefinierten Parametern weitergeben.

Diese Parameter sind: Anzahl der Bögen, Größen der inneren und äußersten Bögen, des Startwinkels, des Max-Leitungsgewichts und des Farbtonbereichs der Farbe. Durch das Erstellen dieser benutzerdefinierten Klassen können wir unseren Code wiederverwenden, sondern auch jede Instanz, indem sie diese Parameter angeben.

Sobald die ARC-Objekte initialisiert sind, wird jeder Frame anrufen UpdaterAdialAccs () und drawradialarccs () Innerhalb des Haupt-P5 zeichnen() Funktion, wodurch die Animation aktualisiert und sich bewegt.

06. Nehmen Sie es weiter

Wir haben hier viel Code abgedeckt, aber grundsätzlich hoffe ich, dass Sie sehen können, wie wir Daten einnehmen und es an visuelle Elemente wie Größe, Position, Länge, Gewicht und Farbe anwenden.

Um weiter zu gehen, spielen Sie mit der Anzahl der Bögen, Gruppen und Winkel um. Ändern Sie die Farbbereiche und erstellen Sie neue Klassen, um verschiedene Formen zu ziehen.

In diesem Beispiel haben wir Daten verwendet, die ständig fließend und mit einer schnellen Bildrate gekoppelt, erzeugt die Illusion der Animation. Nicht alle Daten sind jedoch so und können langsamer aktualisieren. Bei langsameren Daten können Sie dennoch eine reibungslose Animation erstellen, indem Sie die Animation Ihrer Formen zwischen ihren Strom und deren Zielabmessungen durch "Tweening" erstellen.

Viel Glück mit Ihrer nächsten datengesteuerten Animation!

Dieser Artikel wurde ursprünglich in Ausgabe 320 von veröffentlicht Netz Das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Ausgabe 320 kaufen. hier oder Abonnieren Sie hier .

Zum Thema passende Artikel:

• So fügen Sie SVG mit CSS-Animation hinzu
• Der Datenentwicklung setzte sich ein, um das App-Design zu revolutionieren
• 12 große CSS-Animationsressourcen