La aplicación tiene dos componentes principales:

1. Un reproductor de audio con controles avanzados.
2. Un visualizador que alterna entre la webcam y un video pregrabado, con varios efectos visuales aplicables en tiempo real.

El reproductor de audio tiene los siguientes controles:

• El botón de Play/Stop inicia y detiene la reproducción de nuestra pista de audio, que en este caso es una pieza instrumental electrónica desarrollada en la PR2.
• Hay tres controles deslizantes:
  • Volumen: ajusta la intensidad del sonido.
  • Velocidad: modifica la velocidad de reproducción, permitiendo efectos interesantes.
  • Panorámica: distribuye el sonido entre los canales izquierdo y derecho.

Los efectos visuales se activan usando diferentes teclas:

• La tecla ‘1’ aplica un efecto negativo, invirtiendo los colores de la imagen.
• ‘2’ binariza la imagen, creando un contraste alto en blanco y negro.
• ‘3’ simula una erosión básica, que puede crear efectos interesantes en los bordes.
• ‘4’ posteriza los colores, reduciendo la paleta para un efecto más gráfico.
• ‘D’ detecta contornos, resaltando los bordes de los objetos en la imagen.
• ‘A’ y ‘S’ rotan la imagen en sentido horario y antihorario respectivamente.
• ‘V’ alterna entre la webcam y un video pregrabado de Barcelona creado con IA.

Estos efectos se pueden combinar para crear visuales únicos y dinámicos.

La aplicación está construida con p5.js y su biblioteca de sonido. Los efectos visuales se implementan manipulando los píxeles de la imagen en tiempo real, mientras que las transformaciones geométricas usan las funciones de transformación de p5.js. Un reto interesante ha sido sincronizar los efectos visuales con la amplitud del sonido, lo que ha permitido que la imagen respondiese dinámicamente a la música.