Prozkoumejte vizualizaci dat s p5.js

Jan 19, 2026

jak

(Image Credit: Čistý časopis)

p5.js je nejnovější implementace JavaScriptu slavné zpracování prostředků pro tvorbu desktopu. To trvá hodně z moci a snadného použití zpracování a vloží ji do prohlížeče. Pomáhá vám kreslit v plátně, ale také se integruje s webovou stránkou, což umožňuje, aby vaše "skica" reagovat a manipulovat s DOM.

p5.js. odnáší hodně bolesti hlavy animace a vizualizace dat Na webu a dělá to super-jednoduché vstávat a běží s animací pomocí dvou jednoduchých funkcí: založit() a kreslit() .

Ale nepředpokládejte, že tato jednoduchost je omezena, protože můžete přijímat dlouhou cestu vytvořením vlastních funkcí a rozšířit ji s mnoha knihovnami vytvořenými komunitami.

Pro více nástrojů a poradenství na návrh webu naleznete v našem seznamu skvělých web hosting poskytovatelé a jisti si vybrat perfektní Webové stránky Builder. a cloudové úložiště .

6 způsobů, jak se dostat do kreativního kódování

Proč používat data řídit animaci?

Vytváření designu a animace 'systémy' znamená definování souboru pravidel, parametrů a variabilních rozsahů, do kterých můžete podávat různá data. Schopnost hrát s parametry systému a vstupními daty znamená, že můžete vytvořit neomezené výstupní varianty s konzistentností systematického přístupu.

Různá data mohou vytvářet zcela různorodé vizuální výstupy a velký zdroj rychlého pohybu, bohatě texturovaných dat je zvuk. To je přesně to, co budeme používat v naší animaci.

Data-řízená vizualizace dat vs

Explore data visualisation with p5.js: Example — Jako příklad toho, co může p5.js udělat; Zde jsou logo důvody zkreslené zvukovými údaji do nádherně Dotty uspořádání (Image Credit: Čistý časopis)

Je animace řízená datová vizualizace? Ano i ne. Vaše animace bude vizuální reprezentací dat stejně jako vizualizace, ale účel je odlišný od tradiční vizualizace. Vizualizace dat se používá k doručení diváka vhled do dat, takže grafika je ve službě komunikace dat.

Budeme však používat data jako kreativní semeno, abychom nám umožnili vytvářet zajímavé a texturní grafické variace, proto jsou data ve službě grafiky. Samozřejmě, jedna disciplína je propojená a křížová opyanci s ostatními, ale je dobré rozpoznat svůj vlastní záměr při použití dat.

Co budeme dělat?

Explore data visualisation with p5.js: Concentric arcs — Soustředné oblouky, vznikající ze středu obrazovky, měřítko audio amplitudou (Image Credit: Čistý časopis)

p5.js nám dává rychlý a snadný přístup k datům, které pocházejí z analýzy zvukového souboru (jako MP3). Budeme používat p5.fft. Pro analýzu různých frekvencí (basů a výšek) v rámci zvuku, jak se přehraje a vizualizuje "energie" nebo amplitudu této frekvence.

Abychom mohli být schopni vidět "tvar" zvuku, jak to hraje, nechceme jen ukázat aktuální amplitudu zvuku, ale zachytit "buffer" datových bodů. To nám umožní ukázat pohyblivou historii hodnot.

Chcete-li zobrazit naše datové body, vytvoříme řadu soustředných oblouků ze středu na vnější okraj obrazovky. Délka oblouku představuje amplitudu dat. Pro naše data také používáme jiné vizuální kódování, jako je například hmotnost a barva linie.

Co se učíte?

Práce prostřednictvím kódu, budeme pokrývat:

Nastavení nového skica P5
Načítání a analýza zvuku
Mapování datových hodnot na vizuální prvky jako velikost, tvar a barva
Použití tříd pro kreslení, udržovat stav naší animace a dat a učinit náš kód opakovaně použitelný.

Kde jsou soubory?

Soubory pro animaci jsou hostovány OpenProcessing. , skvělá platforma pro sdílení, objevování a vidlice náčrtků jiných lidí. Je to skvělé místo pro vás kódu.

Jak budeme používat zvuková data, budete potřebovat soubor MP3 pro přetažení do skica. Na OpenProcessing zřídíme nový skica; Takhle bude váš skica vypadat, jakmile jsme načtili zvuk, dostali data a nakreslili jednoduchý tvar dat ':

A tak bude dokončená skica vypadat:

Alternativně můžete také použít p5.js online editor nebo jen obsahovat knihovnu ve svém vlastním projektu přes stahování nebo cdn .

01. Začněte nový skica

Explore data visualisation with p5.js: OpenProcessing — Nastavte si bezplatný účet OpenProcessing, abyste mohli začít (Image Credit: Mike Brondbjerg)

Získejte bezplatný účet OpenProcessing a ze stránky profilu klepněte na tlačítko Vytvořit náčrtek. To pak vytvoří nejzákladnější skici obsahující dva vestavěné funkce P5.JS:

založit() - to běží pouze jednou a slouží k nastavení nového plátna
kreslit() - Zde je místo, kde dáte kód, který chcete spustit každý snímek

Všimnete si to Pozadí() je povolán pouze jednou v nastavení. To vymaže obrazovku, takže pokud chcete vymazat obrazovku každý snímek, zahrnout to na začátku kreslit() funkce také.

Hrát s nějakým kódem zde, pomocí několika příkladů, které najdete na stránkách p5.js .

Book your tickets to Generate CSS now to save £50 — Rezervujte si vstupenky na generování CSS nyní ušetřit £ 50 (Image Credit: Getty / Future)

02. Vytvořte první skicu pomocí zvukových dat

Explore data visualisation with p5.js: First sketch — Vytvořit základní nastavení () a Draw () Funkce ve vašem prvním openprocessing skica (Image Credit: Mike Brondbjerg)

Jít do mého Příklad startéru skica .

Stiskněte tlačítko PLAY a uvidíte nějaký text, který vás požádá o propustit soubor MP3 na plátno. Počkejte několik sekund pro dokončení nahrávání a klepnutím na plátno začněte přehrávání. Měli byste vidět elipsu, následovat myš, která je měřítka a změna barvy spolu s basovou amplitudou v hudbě, kterou jste nahráli.

Hodně z kódu je komentováno, ale podívejme se na několik klíčových prvků:

Přímo na začátku skica, před založit() , vytvořili jsme nějaké globální proměnné.

V rámci založit() Máme pár důležitých řádků:

colorMode(HSB,360,100,100);

ColorMode () Umožňuje nastavit P5.JS pro práci v různých barevných prostorách, jako je RGB a HSB, stejně jako konfigurovat měřítko, kterou používáte pro navigaci kanálů. Zde jsme nastavili HSB rozsahy na hodnoty, které můžete být více obeznámeni s photoshopem spíše než výchozí nastavení (0 až 255).

canvas.drop(gotFile);

Tato funkce Super užitečná p5.js nám umožňuje poslouchat všechny události kapky souborů na našem plátně. Když dostaneme událost pro kapku souborů, zavoláme gotefile () Chcete-li zkontrolovat, zda je to správný typ a začněte analyzovat zvuk.

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

Zde otočíme naše upuštěná data do A Soundfile . Když máme zvukový soubor, používáme následující kód:

obžalé () Nastavení nové instance FFT (analyzovat zvuk)
Analysesound () Analyzovat aktuální blok zvuku každý snímek
getnewsounddatavale () použít fft.getenergy () Každý snímek nám poskytne aktuální amplitudu zvuku. To je převedeno z výchozího rozsahu 0 až 255 až 0 až 1.

Tip: Je užitečné převést data do rozsahu 0 až 1, protože jej můžete snadno použít při mapování dat do vizuálních parametrů, jako je měřítko, rychlost a barva.

Podívejme se do funkce Draw (). Tento řádek požaduje aktuální amplitudu (mezi 0 a 1) basové frekvence a přiřadí ji proměnnou mydataval. .

var myDataVal = getNewSoundDataValue(“bass”)

Explore data visualisation with p5.js: Audio reactive ellipse — V několika krocích můžete vytvořit zvukovou reaktivní elipsu, s měřítkem a barvou poháněným zvukovými daty (Image Credit: Mike Brondbjerg)

Zavoláme naše zvyk getdatahsbolor () Funkce, která mapuje svou datovou hodnotu odděleně na odstín, sytost a jas a vrátí nás barvu. Čím vyšší je data, tím další se barva pohybuje přes spektrum odstínu a jasnější a nasycenější barvu.

var myDataColor = getDataHSBColor(myDataVal);

Než můžeme kreslit naši elipsa, musíme mu dát velikost, vynásobením 200 (px) naší datovou hodnotou. Takže čím vyšší hodnota, tím větší je elipsa.

var myEllipseSize = 200 * myDataVal;

03. Použijte audio data jako štětec

Explore data visualisation with p5.js: Paint with audio data — Změnit pouze jeden řádek kódu - Vyjmutí volání pozadí () - a můžete malovat a zvuková data (Image Credit: Mike Brondbjerg)

Pro trochu zábavy, komentovat Pozadí() zavolat kreslit() Funkce a můžete použít svůj zvuk reaktivní elipsy, aby maloval s!

05. Vyplňte náčrtek

Explore data visualisation with p5.js: Final sketch — Toto je dokončená skica, kterou budeme stavět (Image Credit: Mike Brondbjerg)

Kreslení jedné datové elipsy pro jednu frekvenci je skvělá, ale nyní vytvoříme řadu datových oblouků pro oba basové a treby. Budeme také nakreslit vyrovnávací paměť předchozích hodnot, které nám pomohou lépe vidět tvar zvuku.

Návštěva Tato hotová verze skica , Spusťte jej a pak na něj vypněte MP3.

Nyní uvidíte řadu oblouků, které se vynořují ze středu obrazovky. Horizontální oblouky jsou vizualizace basů a vertikální vybírají výšek mp3.

Při pohledu na kód, uvidíte hodně z nastavení, načítání, analýzu a získání dat je stejný jako poslední skica, takže to můžeme ignorovat. Zde je docela trochu kódu, jako dříve, pojďme si vybrat několik klíčových bodů.

Namísto kreslení oblouků přímo v kreslit() Ve skutečnosti vytváříme některé vlastní třídy:

třída radiarc {} Drží individuální datovou hodnotu oblouku a kreslí oblouk
třída radialarcs {} Řídí naši sbírku instancí "Radialarc"

Každá definice třídy má konstruktor, ve kterém nastavujeme některé hodnoty klíčů a také procházíme parametrům, které nám umožňují změnit chování třídy. Podívejme se na ně blíže.

Třída RadialArc {}:

Jedná se o třídu, která obsahuje jednu hodnotu dat a nakreslí pár symetrických oblouků.

setvalue () a getValue () Umožní nám získat data dovnitř a ven z oblouku a zatlačte data prostřednictvím pole oblouku jako aktualizace dat. RedrawFromdata () je vyzván k přepočítávání a překreslení oblouku.

Doštění () je místo, kde nazýváme Handy p5.js funkce oblouk() . Oblouk() Je rychlejší než dělat trigonometrii sami, ale musíme to projít několik hodnot, jako je pozice, velikost a zásadní, start a konec úhel pro náš oblouk.

Tento úhel se měří spíše v "radiánech" než stupňů. Radiáni jsou jako stupňů, ale v jiném měřítku: 360 ° je stejné jako 2 x pi radiány. P5.js má užitečné vestavěné konstanty Pi. , Half_pi. a Quarter_Pi. atd.

Třída radialucs {}:

Jedná se o třídu managementu, která vytváří řadu našeho Radialarc {} Třídy a udržuje je aktuální přesun dat dovnitř a ven z každého a volání oblouku RedrawFromdata () funkce.

Inicializovat Radialucs () Třídy pro výšek a basy se podívejte založit() . Můžete vidět, že vytváříme dva Radialucs () instancí a také procházející v našich vlastních parametrech.

Tyto parametry jsou: Počet oblouků, velikostí vnitřních a nejvzdálenějších oblouků, počáteční úhel, hmotnost maximální linie a rozsah odstínu barvy. Vytvořením těchto zakázkových tříd nám umožňuje znovu použít náš kód, ale také každý jednotlivec instancí tím, že předáváním těchto parametrů.

Jakmile jsou objekty oblouku inicializovány, každý snímek zavolá UpdateradArcs () a drawradialArcs () v hlavní p5 kreslit() Funkce, která je, jak aktualizace animace a přesune.

06. Dále to vezměte

Explore data visualisation with p5.js: Completed sketch — Dokončená skica, vizualizace basy a výšku ve vašem zvukovém souboru (Image Credit: Mike Brondbjerg)

Zde jsme pokryli spoustu kódu, ale zásadně doufám, že uvidíte, jak užíváme data a aplikujeme na vizuální prvky, jako je velikost, poloha, délka, hmotnost, hmotnost a barvu.

Jít dál, hrát s počtem oblouků, skupin a úhlů. Změňte rozsahy barev a vytvoříte nové třídy pro kreslení různých tvarů.

V tomto příkladu jsme použili data, která je neustále tekoucí a spojená s rychlým kmitočtem, vytváří iluzi animace. Ne všechna data jsou však taková a mohou aktualizovat pomaleji. Pro pomalejší data můžete stále vytvářet hladkou animaci "Tweening" animace vašich tvarů mezi jejich současným a jejich cílovými rozměry.

Hodně štěstí s dalšími animacemi řízenými daty!

Tento článek byl původně zveřejněn v čísle 320 síť Časopis nejprodávanějšího světa pro webové designéry a vývojáře. Prodám vydání 320. tady OR. Přihlásit se zde .

Související články:

Jak přidat animaci na SVG s CSS
Datový trend nastavený na revolucionizaci aplikace Design
12 skvělých zdrojů animace CSS

Prozkoumejte vizualizaci dat s p5.js

Proč používat data řídit animaci?

Data-řízená vizualizace dat vs

Co budeme dělat?

Co se učíte?

Kde jsou soubory?

01. Začněte nový skica

02. Vytvořte první skicu pomocí zvukových dat

03. Použijte audio data jako štětec

05. Vyplňte náčrtek

Třída RadialArc {}:

Třída radialucs {}:

06. Dále to vezměte

jak - Nejoblíbenější články

Kino 4D Výukové programy: 13 z nejlepších

Jak udělat meme v aplikaci Photoshop

Stavba AI-Powered Chatbot

Vytvořit perspektivu v aplikaci Adobe Illustrator

Vytvoření efektů koláže v prohlížeči s CSS

Jak simulovat výbuchy v Maya

Jak vytvořit 3D nápisy v Illustrator

Top tipy pro zpřesnění ručně tažené ilustrační techniky

Kategorie