¡Hola a tod@s!

Adjunto el vídeo de la PR2 para la asignatura de Proyecto 2 del grado de Interacción Digital y Multimedia de la UOC.

En el video explico que he desarrollado una aplicación con varios procesamientos multimedia, con la intención de ofrecer una experiencia visual e interactiva tanto en ejecuciones aplicadas por el usuario como el contenido de audio y video que se reproduce. La aplicación se compone de los siguientes elementos:

• La carga de recursos almacenados de manera local como la canción y el video generados con la IA en las prácticas anteriores y también la ejecución la webcam.
• La aplicación de filtros como pasos bajos, distorsión y compresión al audio, así como el control de estos mediante sliders.
• La aplicación de filtros como negativo, binarización, erosión, posterización y detección de bordes en los videos que se reproduzcan.
• Efectos visuales como el confeti que se muestra mientras la música está sonando o el zoom dinámico aplicado al video.
• Controles como la rotación aplicada a la imagen al pulsar determinadas teclas y un botón de play/stop para inicializar o para el audio.

Espero les guste.

Saludos,

Ehedei Benjamin Marrero Trujillo

Hola a todos,

Soy Eva María Seoane Martínez y quiero compartir con vosotros el resultado de mi proyecto final para la asignatura Proyecto 2. A lo largo de varias PECs, he desarrollado una aplicación interactiva que combina audio, vídeo y efectos visuales en tiempo real.

En el primer paso del proyecto, diseñé un reproductor de audio con p5.js y su biblioteca p5.sound. Este incluye un botón Play/Stop, junto con controles deslizantes para ajustar el volumen, la velocidad de reproducción, la panorámica, la frecuencia de corte y la resonancia de un filtro pasa-bajos, además de un efecto de distorsión.

En la siguiente fase, integré la cámara web en la aplicación, permitiendo que su tamaño variara en función de la amplitud del sonido. Esto añade un efecto dinámico muy interesante.

El tercer paso consistió en aplicar transformaciones visuales a la imagen capturada por la cámara. Implementé efectos como negativo, binarización, erosión, posterización, detección de contornos y rotaciones, todo ello controlado mediante teclas.

Finalmente, añadí la opción de alternar entre la webcam y un vídeo pregrabado pulsando una tecla específica. Además, los efectos visuales son aplicables tanto al vídeo como a la webcam.

Os invito a ver el videotutorial que he preparado, donde explico cada paso con más detalle. ¡Espero que lo disfrutéis tanto como yo creando esta aplicación!

¡Un saludo!

En este video, presento un breve tutorial de cinco minutos sobre mi aplicación VJ, desarrollada como parte de una práctica para [nombre de la asignatura]. Durante el tutorial, exploro las funcionalidades clave de la aplicación y explico cómo aprovecharla al máximo. Además, inicio con una breve introducción que detalla el contexto del proyecto, incluyendo el nombre de la asignatura y mi participación.

Para simplificar la integración de la cámara web, he implementado una funcionalidad especial que permite mostrar únicamente la webcam y las escenas de OBS de manera eficiente. La aplicación VJ ya incluye una captura de la cámara web en su interfaz, por lo que decidí no añadir una miniatura adicional para evitar sobrecargar el diseño.

Este proyecto combina creatividad y ofrece una herramienta curiosa para entornos audiovisuales. Espero que disfruten del recorrido y la explicación.

En este videotutorial en directo, enseño la aplicación interactiva de videjockey que hemos desarrollado a lo largo del curso utilizando p5.js y su biblioteca p5.sound. Se trata de una herramienta de interfaz bastante sencilla compuesta por música y vídeo con los que se puede interactuar ofreciendo una experiencia personalizable para cualquier usuario.
Cuenta con unos controles muy intuitivos con los que se podrá ajustar el volumen, la velocidad y la panorámica de la canción que se esté reproduciendo en la aplicación. Otras funciones con las que nos podemos encontrar son la aplicación de efectos de sonido tales como filtros de frecuencia, resonancia y delay.
Además, de los efectos de sonido mencionados, también se pueden aplicar algunos efectos al vídeo reproducido como la inversión de colores, la binarización, la erosión o la posterización. También es posible alternar entre la captura de pantalla de nuestra webcam y un vídeo precargado de nuestro ordenador, así como girar la imagen hacia un lado u otro, sin olvidarnos de mencionar que la imagen del vídeo se ampliará o reducirá en función de la amplitud del sonido de la música.
Desarrollar esta aplicación de videojockey me ha permitido investigar los principios del diseño multimedia, aplicando de este modo tanto conocimientos técnicos como creativos para poder ofrecer un producto funcional y divertido.
Os invito a que veáis el siguiente videotutorial para que os hagáis una idea más clara de en qué consiste la aplicación de VJ.
¡Espero que os guste!

A continuación muestro un video tutorial de una aplicación de videojockey desarrollada en un navegador web utilizando p5.js y su biblioteca p5.sound. La aplicación permite alternar entre la webcam y un vídeo generado por IA presionando la tecla «W». Además, se pueden aplicar transformaciones visuales al vídeo pulsando algunas teclas, como negativo (tecla «1»), binarización (tecla «2»), erosión (tecla «3»), posterización (tecla «4»), detección de contornos (tecla «D») y rotación (teclas «A» y «S»).

La interfaz incluye botones para controlar una canción generada con IA y saltar a posiciones aleatorias en la reproducción. El tamaño del vídeo varía dinámicamente en función de la amplitud del audio, y en un rectángulo inferior se visualiza el espectro de frecuencias del sonido. Varios sliders permiten modificar parámetros como volumen, velocidad y panorámica.

El programa cambia automáticamente los colores de fondo, espectro y un rectángulo inferior cada 15 segundos. En el código, se destacan las funciones preload (carga de recursos), setup (configuración inicial), y draw (bucle principal). Los filtros y transformaciones se aplican en tiempo real, incluyendo detección de contornos mediante una convolución de píxeles.

Comparto con vosotros mi práctica de creación de una aplicación VJ (videojockey) en javascript mediante la biblioteca P5.js.

La aplicación combina la inserción de un audio, generado por inteligencia artificial, al que podemos aplicar filtros y manejar los parámetros mediante distintos sliders, con dos videos que pueden conmutarse: la captura de la webcam y un vídeo también generado por una plataforma de IA que hemos almacenado en nuestro disco duro.

Los sliders de control permiten modificar en el audio los valores de volumen, velocidad, la panorámica, de la frecuencia de corte y resonancia del filtro de paso bajo, de la distorsión y de la reverberación.

Con respecto al vídeo, su tamaño se modifica tomando como referencia la amplitud del audio y podemos variar su ángulo de rotación, en sentido horario y contrahorario, mediante las teclas «a» y «s», respectivamente . Por otra parte, es posible conmutar los vídeos mencionados pulsando la tecla «5». Además, permite la aplicación de filtros de imagen que se aplican mientras se mantienen pulsadas algunas teclas: desde la tecla «1» hasta la «4» aplica los filtros de inversión, binarización, erosión, y posterización. Mientras se mantiene pulsada la tecla «d» se detectarán los bordes del vídeo,

Videotutorial de la aplicación de Proyecto 2. Media.