Przeglądaj wizualizację danych z p5.js

P5.Js jest najnowszą implementacją javascript słynnego pulpitu kreatywnego środowiska kodowania środowiska. Potrzeba znaczną ilość mocy i łatwość wykorzystania przetwarzania i umieszcza go w przeglądarce. Pomaga wyciągnąć na płótnie, ale także integruje się ze stroną internetową, umożliwiając "szkicu", aby odpowiedzieć i manipulować domem.

p5.js. zabiera wiele bólu głowy animacji i Wizualizacja danych W sieci i sprawia, że ​​jest super proste, aby wstać i biegać z animacją przy użyciu dwóch prostych funkcji: Ustawiać() i remis() .

Ale nie zakładaj, że ta prostota jest ograniczona, ponieważ możesz wziąć przetwarzanie długiego sposobu, tworząc własne funkcje i przedłużyć go z wieloma bibliotekami stworzonych wspólnotowych.

Aby uzyskać więcej narzędzi i porady projektowania stron internetowych, zobacz naszą listę genialnych hosting dostawcy i pamiętaj, aby wybrać idealny Kreator strony internetowej i magazyn w chmurze .

• 6 sposobów, aby dostać się do kreatywnego kodowania

Po co używać danych do napędu animacji?

Tworzenie projektowania i animacji "Systems" oznacza określenie zestawu reguł, parametrów i zakresów zmiennych, do których można podawać różne dane. Możliwość gry z parametrami systemu i wprowadzania różnych danych oznacza, że ​​można tworzyć nieograniczone odmiany wyjściowe z konsystencją systematycznego podejścia.

Różne dane mogą tworzyć całkowicie różnorodne wyjścia wzrokowe i duże źródło szybkiego poruszającego się, bogato teksturowane dane są dźwięku. Właśnie właśnie będziemy korzystać z naszej animacji.

Wizualizacja danych napędzana przez dane vs

Czy animację napędzaną danymi jest wizualizacją danych? Tak i nie. Twoja animacja będzie wizualną reprezentacją danych, podobnie jak wizualizacja, ale cel różni się od tradycyjnej wizualizacji. Wizualizacja danych służy do podawania widza wgląd w dane, więc grafika jest w służbie komunikacji danych.

Będziemy jednak korzystać z danych jako kreatywnych nasion, aby umożliwić nam generowanie ciekawych i teksturalnych różnic graficznych, dlatego dane są w służbie grafiki. Oczywiście jedna dyscyplina jest połączona i przepylany krzyżowo z drugim, ale dobrze jest rozpoznać swój własny zamiar podczas korzystania z danych.

Co zamierzamy zrobić?

P5.JS daje nam szybki i łatwy dostęp do danych, które pochodzi z analizy pliku dźwiękowego (jak MP3). Będziemy używać p5.fft. Aby analizować różne częstotliwości (Bass and Treble) w ramach dźwięku, ponieważ odtwarza i wizualizuje "energię" lub amplitudę tej częstotliwości.

Abyśmy mogli zobaczyć "Kształt" dźwięku, gdy się gra, nie chcemy tylko pokazać aktualnej amplitudy dźwięku, ale przechwytuje "bufor" punktów danych. Umożliwi nam to pokazanie ruchomej historii wartości.

Aby pokazać nasze punkty danych, stworzymy serię koncentrycznych łuków od środka do zewnętrznej krawędzi ekranu. Długość łuku będzie reprezentować amplitudę danych. Użyjemy również innych zakodowaniach wizualnych dla naszych danych, takich jak waga linii i kolor.

Czego się nauczyliśmy?

Praca przez kod, przykrymy:

• Konfigurowanie nowego szkicu P5
• Ładowanie i analizowanie dźwięku
• Mapowanie wartości danych do elementów wizualnych, takich jak rozmiar, kształt i kolor
• Korzystanie z klas do rysowania, utrzymywanie stanu naszej animacji i danych oraz dokonać naszego kodu wielokrotnego użytku.

Gdzie są pliki?

Pliki dla animacji są hostowane OpenProcessing. , Świetna platforma do dzielenia się, odkrywaniem i rozwidlaniem szkiców innych ludzi. To świetne miejsce do Ciebie do Ciebie.

Jak będziemy korzystać z danych audio, potrzebujesz pliku MP3, aby przeciągnąć do szkicu. Założymy nowy szkic na OpenProcessing; W ten sposób twój szkic będzie wyglądał po załadowaniu dźwięku, dostaliśmy dane i wyciągnąć prosty "kształt danych":

I tak wygląda wypełniony szkic:

Alternatywnie można również użyć Edytor online p5.js. lub po prostu zawierać bibliotekę we własnym projekcie Za pomocą pobierania lub CDN .

01. Rozpocznij nowy szkic

Uzyskaj bezpłatne konto OpenProcessing, a ze strony profilu kliknij opcję Utwórz szkic. Następnie utworzy to najbardziej podstawowe szkiców zawierające dwa wbudowane funkcje P5.js:

1. Ustawiać() - To działa tylko raz i jest używany do ustawiania nowego płótna
2. remis() - Oto miejsce, w którym umieścisz kod, który chcesz uruchomić każdą ramkę

Zauważysz to tło() jest nazywany tylko raz w konfiguracji. To czyści ekran, więc jeśli chcesz wyczyścić ekran każdą ramkę, włącz to na początku remis() działa też.

Mieć grę z kodem tutaj, używając kilku przykładów, które możesz znaleźć Na stronie p5.js .

02. Utwórz pierwszy szkic za pomocą danych audio

Idź do mojego Przykładowy szkic rozrusznika. .

Naciśnij przycisk Odtwórz, a zobaczysz jakiś tekst z prośbą o upuszczenie pliku MP3 na płótno. Poczekaj kilka sekund, aby zakończyć przesyłanie, a następnie kliknij na płótno, aby rozpocząć odtwarzanie. Powinieneś zobaczyć elipsy, podążając za myszką, która jest skalowaniem i zmieniając kolor wraz z amplitudą basową w muzyce, którą przesłałeś.

Duża część kodu jest komentowana, ale spójrzmy na kilka kluczowych elementów:

Na początku szkicu przed Ustawiać() , stworzyliśmy kilka zmiennych globalnych.

W ciągu Ustawiać() Mamy kilka ważnych linii:

colorMode(HSB,360,100,100);

colormode () Umożliwia ustawienie P5.js do pracy w różnych przestrzeniach kolorowych, takich jak RGB i HSB, a także skonfigurować skalę, której używasz do poruszania się po kanałach. Tutaj ustawiliśmy zakresy HSB do wartości, które możesz być bardziej zaznajomiony z Photoshopem, a nie domyślnym ustawieniem (0 do 255).

canvas.drop(gotFile);

Ta super przydatna funkcja p5.js pozwala nam słuchać dla wszystkich zdarzeń plików na naszym płótnie. Kiedy otrzymamy wydarzenie Drop File, zadzwonamy GotFile () Aby sprawdzić, czy jest to poprawny typ i rozpocznij analizę dźwięku.

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

Tutaj obracamy nasze upuszczone dane do pliku Soundfile. . Gdy mamy plik dźwiękowy, używamy następującego kodu:

1. () Aby skonfigurować nową instancję FFT (aby przeanalizować dźwięk)
2. Analysesound () Aby przeanalizować bieżący blok dźwięku każdą ramkę
3. getNewsounddatavalue () używać fft.getenergy () każda ramka, aby dać nam aktualną amplitudę dźwięku. Jest to konwertowane z zakresu domyślnego od 0 do 255 do 0 do 1.

Wskazówka: Pomocne jest przekonwertowanie danych do zakresu od 0 do 1, ponieważ można go łatwiej korzystać podczas mapowania danych do parametrów wizualnych, takich jak skala, prędkość i kolor.

Spójrzmy na funkcję Draw (). Ta linia żąda obecnej amplitudy (między 0 a 1) częstotliwości basowej i przypisuje go zmienną mydataval. .

var myDataVal = getNewSoundDataValue(“bass”)

Nazywamy naszym zwyczelnym getdatahsbcolor () Funkcja, która mapuje naszą wartość danych oddzielnie do odcienia, nasycenia i jasności i zwraca nam kolor. Im wyższe dane, dalsze, kolor przesuwa się przez widmo odcienia i jaśniejsze i bardziej nasycony kolor.

var myDataColor = getDataHSBColor(myDataVal);

Zanim będziemy mogli narysować elipsy, musimy dać mu rozmiar, mnożąc 200 (px) przez naszą wartość danych przez naszą wartość danych. Więc wyższa wartość, tym większa elipsa.

var myEllipseSize = 200 * myDataVal;

03. Użyj danych audio jako pędzel

Za trochę zabawy, skomentuj tło() zadzwoń do remis() Funkcja i możesz użyć dźwięku elipsy reaktywnej do malowania!

05. Ukończ szkic

Rysowanie jednej elipsy danych dla jednej częstotliwości jest świetna, ale teraz utworzymy serię łuków danych zarówno dla basu, jak i wysokości. Narysujemy również bufor poprzedniej wartości, aby pomóc nam lepiej zobaczyć kształt dźwięku.

Odwiedzić ta gotowa wersja szkicu , uruchom go, a następnie upuść mp3 na nim.

Teraz zobaczysz serię łuków wyłaniających się z środka ekranu. Poziome łuki są wizualizacjami basu, a pionowe wybierają wysokość MP3.

Patrząc na kod, zobaczysz wiele konfiguracji, załadunku, analizowania i uzyskania danych jest taki sam jak ostatni szkic, więc możemy to zignorować. Jest tu dość kodu, co wcześniej, wybierzmy kilka kluczowych punktów.

Zamiast rysować łuki bezpośrednio w remis() , w rzeczywistości tworzymy niektóre niestandardowe zajęcia:

1. klasa radialarc {} Posiada indywidualną wartość danych ARC i rysuje łuk
2. klasa radialarcs {} zarządza naszą kolekcją instancji "radialarc"

Każda definicja klasy ma konstruktor, w którym ustawiamy pewne kluczowe wartości, a także przekazywanie parametrów, które umożliwiają nam zmienić zachowanie klasy. Przyjrzyjmy się na nich bliżej na nich.

Klasa radialarca {}:

Jest to klasa, która zawiera pojedynczą wartość danych i rysuje parę symetrycznych łuków.

ustalić wartość() i getValue () Włącz nam, aby uzyskać dane i poza łukiem i nacisnąć dane za pomocą tablicy naszej łuku jako aktualizacje danych. RedrawFromData () jest wywoływany, aby ponownie obliczyć i przecenić łuk.

drawarc () jest miejsce, w którym nazywamy poręczną funkcję p5.js łuk() . Łuk() Jest szybszy niż sami robiąc trygonometry, ale musimy przekazać ją kilka wartości, takich jak pozycja, rozmiar i, najważniejszy, start i kąt początkowy dla naszego łuku.

Kąt ten mierzy się w "radianach", a nie stopni. Radiany są jak stopnie, ale w innej skali: 360 ° jest taka sama jak 2 x Pi Radians. P5.js ma przydatne wbudowane stałych Liczba Pi , Half_pi. i Ćwierć_pi. itp.

Klasa Radialarcs {}:

Jest to klasa zarządzania, która tworzy szereg naszych Radialarc {} zajęcia i utrzymuje je na bieżąco, przesuwając dane i z każdego z nich i dzwoniące do łuku RedrawFromData () funkcjonować.

Zainicjować Radialarki () Klasy dla Treble i Bass, spójrz Ustawiać() . Możesz zobaczyć, że tworzymy dwa Radialarki () Instancje, a także przekazują w naszych parametrach niestandardowych.

Parametry te są: liczba łuków, rozmiary wewnętrznych i najbardziej zewnętrznych łuków, kąt wyjścia, maksymalna masa linii i zakres barwy koloru. Tworząc te niestandardowe klasy, pozwala nam ponownie wykorzystać nasz kod, ale także uczynić każdą instancję, przekazując je te parametry.

Po zainicjowaniu obiektów łuków, każda ramka zadzwoni Updateradiallas () i Drawradialarki () W głównym p5 remis() Funkcja, w jaki sposób aktualizacje animacji i ruchy.

06. Weź to dalej

Objęliśmy tu wiele kodu tutaj, ale zasadniczo mam nadzieję, że zobaczysz, jak przyjmujemy dane i stosując go do elementów wizualnych, takich jak rozmiar, pozycja, długość, wagę i kolor.

Iść dalej, bawić się liczbą łuków, grup i kątów. Zmień zakresy kolorów i utwórz nowe klasy, aby narysować różne kształty.

W tym przykładzie wykorzystaliśmy dane stale płynące i, w połączeniu z szybką szybkością klatki, tworzy iluzję animacji. Jednak nie wszystkie dane są w ten sposób i mogą aktualizować wolniej. W przypadku wolniejszych danych możesz nadal tworzyć płynną animację przez "tweening" animacji kształtów między ich prądem a ich docelowymi wymiarami.

Powodzenia w następnej animacji napędzanej przez dane!

Ten artykuł został pierwotnie opublikowany w wydaniu 320 netto , Najlepiej sprzedający się magazyn na świecie dla projektantów stron internetowych i programistów. Kup problem 320. tutaj lub. Subskrybuj tutaj .

Powiązane artykuły:

• Jak dodać animację do SVG z CSS
• Trend Data ustawiony na rewolucjonizuj projektowanie aplikacji
• 12 Świetne zasoby animacji CSS