#StayHappening
Tue Nov 03 2026 at 10:00 am to 12:30 pm UTC+01:00

p5.js. Visuals Reactive to Music

  • EASD | Escola d'Art i Superior de Disseny de València · Valencia
  • From EUR 27.95
Nectar Publisher / Host Nectar
Share
p5.js. Visuals Reactive to Music
Advertisement
Taller práctico con p5.js para crear gráficos web que reaccionan al sonido.
About this Event

Taller práctico para crear gráficos web que reaccionan al sonido con p5.js, una herramienta gratuita de código creativo que funciona en el navegador. Partiremos de una plantilla que ya funciona y la transformaremos en un visual propio. No hace falta saber programar ni tener conocimientos de audio o diseño.



EXPERIENCIA PREVIA

No es necesaria. No hace falta saber programar ni tener conocimientos de audio o diseño.



¿QUÉ VAMOS A HACER?

Descubrir cómo se convierte la música en datos: volumen, graves, medios y agudos.

Entender lo básico de p5.js (formas, color y movimiento).

Hacer que círculos, barras y formas crezcan, se muevan y cambien de color al ritmo del sonido.

Remezclar una plantilla para crear nuestro propio visual.

Mostrar los resultados en el proyector y verlos reaccionar juntos a la música.

Extra: si da tiempo, controlar los visuales en directo con un controlador MIDI.



¿QUÉ SE APRENDERÁ?

Cómo funciona un sketch en p5.js y cómo editarlo.

Cómo analizar audio (volumen y frecuencias) y usarlo para controlar elementos visuales.

Cómo usar el micrófono o una canción como fuente de sonido.

Una base para seguir creando visuales reactivos por tu cuenta.

Hacia dónde seguir: el salto a Processing para llevar tus visuales a la performance en vivo o conectarlos con otros programas.



MATERIAL / EQUIPO

Ordenador portátil propio (necesario) / Navegador Google Chrome actualizado / Auriculares.

Opcional: controlador MIDI (teclado, pads, knobs…) para probarlo. No es necesario para seguir el taller.



RESULTADO

Cada participante terminará con su propio visual audio-reactivo funcionando en el navegador, personalizado a su gusto y guardado para seguir trabajando en él desde casa.



OTROS REQUISITOS

El taller se centra en creación para web: los visuales se crean y se ven en el navegador.

El paso a Processing es sencillo: comparte la misma lógica y lenguaje de dibujo, así que lo aprendido aquí te sirve directamente.

Es necesaria conexión a internet y que el navegador permita el uso del micrófono.

Se facilitará la plantilla de partida a todos los participantes.

Pensado para quien se acerca por primera vez al código creativo; también válido para quien ya programa y quiere explorar cómo usar audio.

Advertisement

Event venue & nearby stays

EASD | Escola d'Art i Superior de Disseny de València, Plaza Viriato s/n, Valencia, Spain

Tickets EUR 27.95
Concerts, fests, parties, meetups — all the happenings, one place.

Ask AI if this event suits you

Keep the plans coming

More events in Valencia

Valencia is happening.

See everything else that’s on — concerts, markets, comedy and more.