Esplora la visualizzazione dei dati con p5.js

P5.js è l'implementazione JavaScript più recente della famosa elaborazione dell'ambiente di codifica creativo desktop. Ci vuole gran parte del potere e della facilità d'uso dell'elaborazione e lo mette nel tuo browser. Ti aiuta a disegnare in tela ma si integra anche con la tua pagina web, consentendo il tuo "schizzo" di rispondere e manipolare il DOM.

p5.js. porta via un sacco di mal di testa di animazione e Visualizzazione dei dati sul web e lo rende super-semplice alzarsi e in esecuzione con l'animazione utilizzando due semplici funzioni: impostare() e disegnare() .

Ma non supponiamo che questa semplicità sia limitante, poiché è possibile elaborare un lungo modo creando le proprie funzioni e lo prolunga con molte delle librerie create dalla Comunità.

Per ulteriori strumenti e consigli di web design, consulta la nostra lista di brillanti web hosting fornitori e assicurati di scegliere il perfetto Builder del sito web e deposito cloud. .

• 6 modi per entrare in codifica creativa

Perché utilizzare i dati per guidare l'animazione?

La creazione di progetti e animazione "Systems" significa definire un insieme di regole, parametri e variabili in cui è possibile alimentare diversi dati. La possibilità di giocare con i parametri di un sistema e indurre diversi dati significa che è possibile creare variazioni di produzione illimitate con la coerenza di un approccio sistematico.

I diversi dati possono creare uscite visive totalmente diverse e una grande fonte di dati in rapido movimento, riccamente strutturato è audio. Questo è esattamente ciò che useremo nella nostra animazione.

Visualizzazione dei dati VS guidata da dati

È un'animazione guidata da dati una visualizzazione dei dati? Sì e no. La tua animazione sarà una rappresentazione visiva dei dati proprio come una visualizzazione ma lo scopo è diverso da quello di una visualizzazione tradizionale. La visualizzazione dei dati viene utilizzata per conferire allo spettatore un intuizione dei dati, quindi la grafica è al servizio della comunicazione dei dati.

Tuttavia, utilizzeremo i dati come seme creativo per consentirci di generare variazioni grafiche interessanti e strutturali, quindi i dati sono al servizio del grafico. Naturalmente, una disciplina è interconnessa e incrociata con l'altra, ma è buona per riconoscere il proprio intento quando si utilizzano i dati.

Cosa faremo?

P5.js ci dà accesso rapido e facile ai dati che deriva dall'analizzare un file audio (come un MP3). Usereremo P5.FFT. Per analizzare frequenze diverse (bassi e treble) all'interno dell'audio man mano che riproduce e visualizza la "energia" o l'ampiezza di tale frequenza.

Per poterci essere in grado di vedere la "forma" del suono come funziona, non vogliamo solo mostrare l'attuale ampiezza del suono ma catturare un 'buffer' di punti dati. Questo ci consentirà di mostrare una cronologia mobile di valori.

Per mostrare i nostri punti dati, creeremo una serie di archi concentrici dal centro verso il bordo esterno dello schermo. La lunghezza dell'arco rappresenterà l'ampiezza dei dati. Utilizzeremo anche altre codifiche visive per i nostri dati, come il peso e il colore della linea.

Cosa impareremo?

Lavorando attraverso il codice, copriremo:

• Impostazione di un nuovo schizzo P5
• Caricamento e analisi del suono
• Mappatura dei valori dei dati su elementi visivi come dimensioni, forma e colore
• Usando le classi da disegnare, mantenere lo stato della nostra animazione e dati e rendere il nostro codice riutilizzabile.

Dove sono i file?

I file per l'animazione sono ospitati Openprocessing , una grande piattaforma per condividere, scoprire e biforcare gli schizzi di altre persone. È un ottimo posto per te da codice anche per te.

Come utilizzeremo i dati audio, avrai bisogno di un file MP3 da trascinare nello schizzo. Avremo un nuovo schizzo su OpenProcessing; Ecco come il tuo schizzo guarderà una volta che abbiamo caricato audio, ha ottenuto i dati e disegnato una semplice "forma dati":

Ed è così che lo schizzo completato sembrerà:

In alternativa, potresti anche usare il P5.JS Online Editor. o semplicemente includere la biblioteca nel tuo progetto via download o cdn .

01. Avvia un nuovo schizzo

Ottieni un account OpenProcessing gratuito e, dalla pagina del tuo profilo, fai clic su Crea uno schizzo. Questo creerà quindi il più basico degli schizzi contenenti due delle funzioni integrate di P5.js:

1. impostare() - Questo funziona solo una volta, ed è usato per impostare una nuova tela
2. disegnare() - Ecco dove metti il ​​codice che vuoi eseguire ogni cornice

Noterai questo sfondo() è chiamato solo una volta nel set up. Questo cancella lo schermo, quindi se vuoi cancellare lo schermo ogni fotogramma, includi questo all'inizio del disegnare() Funzione anche.

Avere un gioco con qualche codice qui, usando alcuni degli esempi che puoi trovare Sul sito P5.JS .

02. Creare il primo schizzo utilizzando i dati audio

Vai al mio Esempio di spot di avviamento .

Premi il pulsante PLAY e vedrai del testo chiedendoti di abbandonare un file MP3 sulla tela. Attendere alcuni secondi per finire il caricamento e quindi fare clic sulla tela per iniziare la riproduzione. Dovresti vedere un'ellisse, seguendo il mouse, che è ridimensionamento e cambiare colore insieme all'ampiezza dei bassi nella musica che hai caricato.

Gran parte del codice è commentato ma guardiamo alcuni elementi chiave:

Proprio all'inizio dello schizzo, davanti a impostare() , abbiamo creato alcune variabili globali.

Entro impostare() Abbiamo un paio di linee importanti:

colorMode(HSB,360,100,100);

Colormore () Consente di impostare P5.js per funzionare in diversi spazi di colore come RGB e HSB, oltre a configurare la scala che usi per navigare i canali. Qui abbiamo impostato gli intervalli HSB ai valori che potresti essere più familiarità con Photoshop piuttosto che l'impostazione predefinita (da 0 a 255).

canvas.drop(gotFile);

Questa funzione P5.js super utile ci consente di ascoltare qualsiasi errore di eventuali eventi sulla nostra tela. Quando otteniamo un evento di caduta di file, chiamiamo Gotfile () Per verificare se è il tipo corretto e inizia a analizzare il suono.

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

Qui stiamo trasformando i nostri dati del file abbandonato in a Soundfile. . Quando abbiamo il file audio, utilizziamo il seguente codice:

1. initsound () Per impostare una nuova istanza FFT (per analizzare il suono)
2. Analysesound () Per analizzare il blocco corrente del suono ogni fotogramma
3. GetNewSoundDataValue () usare fft.getenergy () Ogni cornice per darci l'attuale ampiezza del suono. Questo viene convertito dal suo intervallo predefinito da 0 a 255 a 0 a 1.

Suggerimento: è utile convertire i tuoi dati in un intervallo da 0 a 1 perché è possibile utilizzarlo più facilmente quando si mappano i dati su parametri visivi come scala, velocità e colore.

Guardiamo nella funzione Disegna (). Questa linea richiede l'ampiezza corrente (tra 0 e 1) della frequenza dei bassi e l'assegna la variabile mydatavale .

var myDataVal = getNewSoundDataValue(“bass”)

Chiamiamo la nostra usanza GetDatahsbColor () Funzione che mappa il nostro valore dati separatamente alla tonalità, alla saturazione e alla luminosità e restituisce un colore. Più alto è il dato, più il colore si muove attraverso lo spettro di tonalità e il colore più luminoso e più saturo.

var myDataColor = getDataHSBColor(myDataVal);

Prima di poter disegnare il nostro ellisse, dobbiamo dargli una dimensione, moltiplicando 200 (PX) dal nostro valore dati. Quindi maggiore è il valore, più grande è l'ellisse.

var myEllipseSize = 200 * myDataVal;

03. Utilizzare i dati audio come pennello

Per un po 'di divertimento, commenta il sfondo() Chiamata in. disegnare() Funzione e puoi usare il tuo suono reattivo ellisse per dipingere!

05. Completa il tuo schizzo

Disegnare un ellisse di dati per una frequenza è fantastico, ma ora creeremo una serie di archi dati per basso e treble. Disegneremo anche un buffer dei valori precedenti per aiutarci a vedere meglio la forma del suono.

Visitare Questa versione finita dello schizzo , eseguilo e poi rilascia un mp3 su di esso.

Ora vedrai una serie di archi emergenti dal centro dello schermo. Gli archi orizzontali sono visualizzazioni del basso e quelli verticali scelgono il treble dell'MP3.

Guardando il codice, vedrai gran parte del set up, caricamento, analizzando e ottenere i dati è uguale all'ultimo schizzo, quindi possiamo ignorarlo. C'è un bel po 'di codice qui così, come prima, scegliemo alcuni punti chiave.

Invece di disegnare gli archi direttamente in disegnare() , stiamo effettivamente creando alcune classi personalizzate:

1. classe radiacarc {} Tiene il valore dei dati dell'arco individuale e disegna l'arco
2. classe radiarcs {} Gestisce la nostra collezione di istanze "Radiac"

Ogni definizione di classe ha un costruttore in cui sta pianificando alcuni valori chiave e passiamo anche sui parametri che ci permettono di modificare il comportamento della classe. Diamo un'occhiata più da vicino a loro ora.

La classe RADIALARC {}:

Questa è la classe che detiene un singolo valore dati e disegna un paio di archi simmetrici.

valore impostato() e GetValue () Abilitaci di ottenere i dati dentro e fuori da un ARC e spingere i dati tramite l'array dell'arco come gli aggiornamenti dei dati. RedrawfromData () è chiamato a ricalcolare e ridisegnare l'arco.

Drawarc () è dove chiamiamo la pratica funzione p5.js arco() . Arco() è più veloce di fare la trigonometria noi stessi, ma dobbiamo passarlo alcuni valori come posizione, dimensioni e, crucialmente, un angolo di partenza e fine per il nostro arco.

Quell'angolo è misurato in "radianti" piuttosto che in gradi. I radiati sono come gradi ma su una scala diversa: 360 ° è lo stesso dei 2 radiali PI. P5.js ha costanti incorporati utili per PI , Half_pi. e Quarter_pi. eccetera.

La classe Radiacs {}:

Questa è una classe di gestione che crea una serie del nostro Radiacarc {} lezioni e li tiene aggiornati spostando i dati dentro e fuori da ciascuno e chiamando gli arco RedrawfromData () funzione.

Per inizializzare il RadiarArArcs () Classi per Treble and Bass, Dai un'occhiata impostare() . Puoi vedere che stiamo creando due RadiarArArcs () istanze e anche passando nei nostri parametri personalizzati.

Questi parametri sono: numero di archi, dimensioni degli archi interni e più esterni, l'angolo di partenza, il peso della linea max e la gamma di tonalità del colore. Creando queste classi personalizzate, ci consente di riutilizzare il nostro codice, ma rendere ogni istanza individuale passandole questi parametri.

Una volta inizializzati gli oggetti ARC, ogni frame chiamerà updateratadiarArcs () e DrawradialArcs () All'interno del P5 principale disegnare() Funzione, che è il modo in cui l'animazione si aggiorna e si muove.

06. Prendilo ulteriormente

Abbiamo coperto un sacco di codice qui, ma fondamentalmente spero che tu possa vedere come stiamo prendendo dati e applicandolo a elementi visivi come dimensioni, posizione, lunghezza, peso e colore.

Per andare oltre, giocare con il numero di archi, gruppi e angoli. Cambia le gamme di colore e crea nuove classi per disegnare forme diverse.

In questo esempio abbiamo usato i dati che fluiscono costantemente e, accoppiati con un frame rate veloce, crea l'illusione dell'animazione. Tuttavia, non tutti i dati sono così e possono aggiornare più lentamente. Per i dati più lenti, è comunque possibile creare un'animazione fluida da 'superando' l'animazione delle tue forme tra la loro attuale e le loro dimensioni del target.

Buona fortuna con la tua prossima animazione guidata da dati!

Questo articolo è stato originariamente pubblicato in emissione 320 di netto , la rivista best-seller del mondo per web designer e sviluppatori. Comprare il problema 320. qui o Iscriviti qui .

Articoli Correlati:

• Come aggiungere animazione a svg con css
• La tendenza dei dati impostata per rivoluzionare la progettazione dell'app
• 12 Great CSS Animation Risorse