Explore la visualización de datos con p5.js

Sep 11, 2025

Cómo

[dieciséis] (Crédito de la imagen: Revista NET)

P5.js es la implementación de JavaScript más reciente del famoso procesamiento de entorno de codificación creativa de escritorio. Se necesita gran parte del poder y la facilidad de uso del procesamiento y lo pone en su navegador. Le ayuda a dibujar en lienzo, pero también se integra con su página web, lo que permite que su "boceto" responda y manipule el DOM.

p5.js Quita muchos de los dolores de cabeza de la animación y Visualización de datos En la web y lo hace super-sencillo de levantarse y correr con animación usando dos funciones simples: configuración() y dibujar() .

Pero no asuma que esta simplicidad es limitante, ya que puede tomar el procesamiento de una manera larga al crear sus propias funciones y extenderlo con muchas de las bibliotecas creadas por la comunidad.

Para obtener más herramientas y consejos de diseño web, consulte nuestra lista de Brilliant Alojamiento web Proveedores y asegúrese de elegir el perfecto. Creador de sitios web y almacenamiento en la nube .

6 maneras de entrar en la codificación creativa

¿Por qué usar datos para conducir la animación?

Creación de diseño y animación 'sistemas' significa definir un conjunto de reglas, parámetros y rangos variables en los que puede alimentar diferentes datos. La capacidad de jugar con los parámetros de un sistema e ingrese diferentes datos diferentes, puede crear variaciones de salida ilimitadas con la consistencia de un enfoque sistemático.

Diferentes datos pueden crear salidas visuales totalmente diversas y una gran fuente de datos rápidos, los datos ricamente texturados son audio. Eso es exactamente lo que vamos a usar en nuestra animación.

Visualización de datos VS impulsada por datos

Explore data visualisation with p5.js: Example

¿Es una animación impulsada por datos una visualización de datos? Si y no. Su animación será una representación visual de los datos como una visualización, pero el propósito es diferente al de una visualización tradicional. La visualización de datos se utiliza para darle una idea del espectador a los datos, por lo que el gráfico está al servicio de la comunicación de los datos.

Sin embargo, utilizaremos datos como semilla creativa para permitirnos generar variaciones gráficas interesantes y texturales, por lo tanto, los datos están al servicio del gráfico. Por supuesto, una disciplina está interconectada y la poliniza cruzada con la otra, pero es bueno reconocer su propia intención cuando se usan datos.

¿Qué vamos a hacer?

Explore data visualisation with p5.js: Concentric arcs

P5.js nos da acceso rápido y fácil a los datos que vienen de analizar un archivo de sonido (como un MP3). Estaremos usando p5.fft Para analizar diferentes frecuencias (bajo y agudos) dentro del audio, a medida que se reproduce y visualice la "energía" o la amplitud de esa frecuencia.

Para que podamos ver la "forma" del sonido a medida que juega, no solo queremos mostrar la amplitud actual del sonido, sino que capture un 'búfer' de puntos de datos. Esto nos permitirá mostrar un historial de valores en movimiento.

Para mostrar nuestros puntos de datos, crearemos una serie de arcos concéntricos desde el centro hasta el borde exterior de la pantalla. La longitud del arco representará la amplitud de los datos. También utilizaremos otras codificaciones visuales para nuestros datos, como el peso y el color de la línea.

¿Qué aprenderemos?

Trabajando a través del código, cubriremos:

Configuración de un nuevo boceto P5
Cargando y analizando el sonido.
Mapeo de valores de datos a elementos visuales como tamaño, forma y color
Uso de clases para dibujar, mantenga el estado de nuestra animación y datos y haga que nuestro código sea reutilizable.

¿Dónde están los archivos?

Los archivos para la animación están alojados en Proporamiento abierto , una gran plataforma para compartir, descubrir y bifurcar los bocetos de otras personas. Es un gran lugar para que lo codifiques, también.

Como utilizaremos datos de audio, necesitará un archivo MP3 para arrastrar en el boceto. Estableceremos un nuevo boceto en OpenProcessing; Así es como se verá su boceto una vez que hemos cargado audio, obtuve los datos y dibujamos una simple 'forma de datos':

Y así es como se verá el boceto terminado:

Alternativamente, también puedes usar el Editor en línea p5.js O simplemente incluir la biblioteca en su propio proyecto. a través de la descarga o cdn .

01. Inicia un nuevo boceto.

Explore data visualisation with p5.js: OpenProcessing

Obtenga una cuenta gratuita de PropProcessing y, desde su página de perfil, haga clic en Crear un boceto. Esto creará el más básico de bocetos que contengan dos de las funciones incorporadas de P5.JS:

configuración() - Esto se ejecuta solo una vez, y se usa para configurar un nuevo lienzo.
dibujar() - Aquí está donde pones el código que desea ejecutar cada cuadro.

Notará que antecedentes() Solo se llama una vez en la configuración. Esto borra la pantalla, por lo que si desea borrar la pantalla cada cuadro, include esto al inicio de la dibujar() función también.

Tener un juego con algún código aquí, usando algunos de los ejemplos que puedes encontrar en el sitio p5.js .

Book your tickets to Generate CSS now to save £50

02. Crear primer boceto con datos de audio

Explore data visualisation with p5.js: First sketch

Ve a mi Ejemplo de boceto de inicio .

Pulse el botón de reproducción y verá que un texto le pedirá que dejes caer un archivo MP3 en el lienzo. Espere unos segundos para que termine la carga y luego haga clic en el lienzo para comenzar la reproducción. Debería ver una elipse, siguiendo el mouse, que está escalando y cambiando el color junto con la amplitud de bajo en la música que subió.

Gran parte del código se comenta, pero veamos algunos elementos clave:

Justo al comienzo del boceto, por delante de configuración() , hemos creado algunas variables globales.

Dentro de configuración() Tenemos un par de líneas importantes:

colorMode(HSB,360,100,100);

Modo de color() Le permite configurar P5.JS para trabajar dentro de diferentes espacios de color como RGB y HSB, así como configurar la escala que usa para navegar por los canales. Aquí, hemos establecido rangos de HSB a los valores en los que puede estar más familiarizado con Photoshop en lugar de la configuración predeterminada (0 a 255).

canvas.drop(gotFile);

Esta función p5.js super útil nos permite escuchar cualquier evento de caída de archivos en nuestro lienzo. Cuando obtenemos un evento de caída de archivos, llamamos gotfile () Para comprobar si es el tipo correcto y comienza a analizar el sonido.

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

Aquí estamos convirtiendo nuestros datos de archivo caídos en un Archivo de sonido . Cuando tenemos el archivo de sonido, usamos el siguiente código:

Initedound () Para configurar una nueva instancia de FFT (para analizar el sonido)
Analysesound () Para analizar el bloque actual de sonido cada cuadro.
getNewsoundDatavalue () usar fft.getEnergy () Cada cuadro para darnos la amplitud actual del sonido. Esto se convierte en su rango predeterminado de 0 a 255 a 0 a 1.

Sugerencia: es útil convertir sus datos a un rango de 0 a 1 porque puede usarlo más fácilmente al asignar los datos a los parámetros visuales, como escala, velocidad y color.

Veamos en la función Draw (). Esta línea solicita la amplitud actual (entre 0 y 1) de la frecuencia de los bajos y le asigna la variable mydataval .

var myDataVal = getNewSoundDataValue(“bass”)

Explore data visualisation with p5.js: Audio reactive ellipse

Llamamos a nuestra costumbre getdatahsbcolor () Función que asigna nuestro valor de datos por separado al tono, la saturación y el brillo y nos devuelve un color. Cuanto más altos sean los datos, cuanto más se mueve el color a través del espectro del tono y el color más brillante y más saturado.

var myDataColor = getDataHSBColor(myDataVal);

Antes de que podamos dibujar nuestra Elipse, debemos darle un tamaño, multiplicando 200 (PX) por nuestro valor de datos. Así que cuanto mayor sea el valor, más grande la elipse.

var myEllipseSize = 200 * myDataVal;

03. Use datos de audio como pincel

Explore data visualisation with p5.js: Paint with audio data

Por un poco de diversión, comenta el antecedentes() llamarse en el dibujar() ¡Función y puedes usar su elipse reactiva de sonido para pintar!

05. Completa tu boceto

Explore data visualisation with p5.js: Final sketch

Dibujar un onelipse de datos para una frecuencia es genial, pero ahora crearemos una serie de arcos de datos para bajo y agudos. También dibujaremos un búfer de valores anteriores para ayudarnos a ver mejor la forma del sonido.

Visita Esta versión terminada del boceto. , ejecutelo y luego suelte un MP3 en él.

Ahora verás una serie de arcos que emergen desde el centro de la pantalla. Los arcos horizontales son visualizaciones del bajo y las verticales seleccionan los agujeros del MP3.

Mirando el código, verá gran parte de la configuración, la carga, el análisis y obteniendo los datos es lo mismo que el último boceto, para que podamos ignorarlo. Hay un poco de código aquí, por lo que, como antes, seleccionemos algunos puntos clave.

En lugar de dibujar los arcos directamente en dibujar() , en realidad estamos creando algunas clases personalizadas:

clase radialarc {} Sostiene el valor de datos del arco individual y dibuja el arco.
clase radialarcs {} gestiona nuestra colección de instancias 'radialarc'

Cada definición de clase tiene un constructor en el que estamos estableciendo algunos valores clave y también pasando parámetros que nos permiten cambiar el comportamiento de la clase. Vamos a echarle un vistazo más de cerca ahora.

La clase Radialarc {}:

Esta es la clase que tiene un solo valor de datos y dibuja un par de arcos simétricos.

valor ajustado() y GetValue () Permite obtener los datos dentro y fuera de un ARC y presione los datos a través de la matriz de ARC como las actualizaciones de los datos. redrawfromdata () Se llama a recalcular y volver a dibujar el arco.

DAPARC () es donde llamamos la función p5.js handy arco() . Arco() Es más rápido que hacer la trigonometría, pero necesitamos pasarle algunos valores como la posición, el tamaño y, de manera crucial, un ángulo de inicio y extremo para nuestro arco.

Ese ángulo se mide en 'radianes' en lugar de grados. Los radianos son como grados, pero en una escala diferente: 360 ° es el mismo que 2 x radianes pi. P5.js tiene constantes incorporados útiles para Pi De Mitad_pi y Cuartos_pi etc.

La clase Radialarcs {}:

Esta es una clase de gestión que crea una matriz de nuestra Radialarc {} Clases y los mantiene actualizados moviendo los datos dentro y fuera de cada uno y llamando al arco. redrawfromdata () función.

Para inicializar el Radialarcs () Clases para Treble y Bass, eche un vistazo en configuración() . Puedes ver que estamos creando dos. Radialarcs () Instancias y también pasando en nuestros parámetros personalizados.

Esos parámetros son: Número de arcos, tamaños de arcos internos y externos, el ángulo de partida, el peso máximo de la línea y la gama Hue del color. Al crear estas clases personalizadas, nos permite reutilizar nuestro código, pero también hacer que cada caso sea individual al pasarlos estos parámetros.

Una vez que se inicien los objetos de arco, cada cuadro llamará updateradialarcs () y Drawradialarcs () Dentro de la p5 principal dibujar() Función, que es la forma en que la animación se actualiza y se mueve.

06. Tómalo más lejos

Explore data visualisation with p5.js: Completed sketch

Hemos cubierto mucho código aquí, pero fundamentalmente, espero que pueda ver cómo estamos tomando datos y aplicándolo a elementos visuales como el tamaño, la posición, la longitud, el peso y el color.

Para ir más lejos, juegue con el número de arcos, grupos y ángulos. Cambie los rangos de color y cree nuevas clases para dibujar diferentes formas.

En este ejemplo, utilizamos datos que están constantemente fluyendo y, junto con una velocidad de fotogramas rápida, crea la ilusión de la animación. Sin embargo, no todos los datos son así y pueden actualizarse más lentamente. Para obtener datos más lentos, aún puede crear una animación suave al "intiminar" la animación de sus formas entre sus dimensiones actuales y de su objetivo.

¡Buena suerte con su próxima animación impulsada por los datos!

Este artículo fue publicado originalmente en el número 320 de neto , la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar problema 320 aquí o Suscríbete aquí .

Artículos relacionados:

Cómo agregar animación a SVG con CSS
La tendencia de datos establecida para revolucionar el diseño de la aplicación.
12 grandes recursos de animación CSS

Explore la visualización de datos con p5.js

¿Por qué usar datos para conducir la animación?

Visualización de datos VS impulsada por datos

¿Qué vamos a hacer?

¿Qué aprenderemos?

¿Dónde están los archivos?

01. Inicia un nuevo boceto.

02. Crear primer boceto con datos de audio

03. Use datos de audio como pincel

05. Completa tu boceto

La clase Radialarc {}:

La clase Radialarcs {}:

06. Tómalo más lejos

Cómo - Artículos más populares

Cómo Photoshop a alguien en una imagen

Construye un portal cliente con WordPress

10 consejos para dominar la aplicación de fotos de Apple

Tres pasos para un cielo nocturno brillante en acuarela

Crea imágenes 3D interactivas con tres.js

Crea un autorretrato con solo 4 colores

Top consejos para pintar manos expresivas

Cómo hacer que su sitio web de WordPress sea multilingüe

Categorías