Videotutorial de mi aplicación VJ.

En este videotutorial, presento mi aplicación VJ, desarrollada con la biblioteca p5.js, una herramienta pensada para mezclar música, video y efectos visuales de forma interactiva. Este proyecto combina controles de audio dinámicos y efectos visuales en tiempo real, permitiendo al usuario personalizar su experiencia de manera sencilla.

La aplicación incluye varias funcionalidades clave: desde ajustes básicos como el volumen, la velocidad de reproducción y la panorámica del sonido, hasta efectos avanzados como un filtro pasabajos con control de frecuencia y resonancia. Además, incorpora reverberación configurable y un efecto de distorsión para añadir capas creativas al audio. Todo esto se complementa con un sistema visual que interactúa con el sonido, alternando entre la captura de una webcam y un video pregrabado, cuyo tamaño cambia según la intensidad del audio.

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.

Muy buenas!

Soy Paula López Perez, estudiante de la UOC y os vengo a presentar mi práctica 2 para la asignatura Proyecto 2 Media. En el cual mediante un directo de YouTube realizo un videotutorial para enseñar la aplicación VJ que hemos estado programando durante todo el curso. Ha ido evolucionando y ha ido de menos a más.

Os enseño un reproductor de música que empieza como un simple reproductor y acabamos añadiendo la inclusión de nuestra webcam para aplicar efectos con una biblioteca p5.js y una música y vídeo que, previamente hemos creado con una IA.

Este reproductor no solo reproduce la música que hemos importado, si no que, hemos agregado unos comandos con los que podemos modificar varias características de la música y aplicar varios efectos.

Junto con la webcam, con la cual también podemos aplicar diversos efectos como negativo, posterización…etc Y finalmente poder aplicarlo todo a la vez.

A continuación os dejo el enlace al directo de YouTube:

He intentado ponerlo incrustado con HTML pero al actualizar la entrada se borra y no se ve, dejo solo el enlace.

Buenas a todos, bienvenidos a mi canal de Youtube. Aquí os dejo mi primera incursión como Youtuber (creo que será la última), en la que explico brevemente el funcionamiento de la aplicación de VideoJockey que hemos desarrollado durante el curso. Espero que os guste tanto la aplicación como el videotutorial.

Para su realización he tenido que aprender cómo conectar OBS y Youtube Studio, aunque ha sido bastante intuitivo, y mi mayor guerra ha sido gestionar bien las escenas y las fuentes asociadas a cada una de ellas.

La primera escena ha estado compuesta de una imagen de cortinilla con mis datos y la canción creada con IA para la PEC anterior, y tras esa breve introducción he seleccionado la segunda escena, que comprendía la captura de la pagina web donde se encontraba la aplicación VJ y la captura de la entrada de audio para que pudieseis oir mi explicación.

Un saludo.

A todos vosotros… ¡Lo hemos conseguido!

Hemos llegado al final del semestre, y me gustaría felicitarnos por nuestro esfuerzo en esta asignatura. Estoy convencida de que todo este trabajo ha valido la pena.

A continuación, me gustaría compartir con vosotros el videotutorial que acompaña a mi proyecto presentado en el curso de Proyecto 2. Media.

Durante la grabación del vídeo en directo surgió un pequeño problema: si la webcam del OBS estaba activada, el vídeo del código no se reproducía. A pesar de este inconveniente técnico, las instrucciones necesarias para que los comandos funcionen se pueden ver. Aun así, encontrarán a mi persona explicando las instrucciones mientras intento, en vano, hacerlo funcionar.

¿Qué podéis esperar en el directo? Una introducción con una cortinilla holográfica acompañada de la canción «Bling-Bang-Bang-Born» de Creepy Nuts, seguida de mi explicación sobre cómo implementar comandos para un Vídeo DJ donde se combina audio, vídeo, filtros visuales y efectos interactivos.

Espero que, al menos, hayáis disfrutado del vídeo y de  mi trabajo como youtuber.

¡A por todas!

Elena Alcaide.

Os comparto mi videotutorial, que ha sido creado en directo usando OBS. En el muestro cómo funciona el proyecto de la PEC pasada, explicando cada paso. Para crear la portada del video, primero he insertado una imagen que he diseñado utilizando Canva. Posteriormente, he agregado la cortinilla del propio OBS para darle un toque más profesional a la presentación.

En la escena principal del tutorial, he colocado la imagen de mi pantalla secundaria, mientras la cámara me graba. En la otra pantalla utilizando OBS, asi muestro tanto mi explicación en vivo como las acciones que realizo en mi computadora en tiempo real sin ver lo que edito del directo. El video explico temas con el audio y la edición de video, como el control del volumen, el paneado, la reverb, la distorsión, entre otros efectos y ajustes técnicos.

Este videotutorial es una herramienta útil para aquellos que desean comprender mejor Como funciona mi vj, además de aprender algunos conceptos básicos sobre el manejo del audio.

Este video

presenta una explicación detallada del VJ programado para la asignatura. Los usuarios podrán manipular diversos aspectos del sonido y la imagen. En el ámbito del audio, se proporcionan múltiples controladores que permiten ajustar el volumen, la velocidad de reproducción y la panorámica. Además, se incluyen efectos como la modulación de la frecuencia de cortes, la resonancia, la distorsión y la reverberación. En cuanto al aspecto visual, se permite capturar imágenes en tiempo real a través de la webcam, así como la opción de incorporar videos pregrabados. Una característica destacada es la posibilidad de alternar entre estas dos fuentes de video con solo presionar la tecla ‘t’. Así mismo se han implementado diversas transformaciones geométricas aplicables tanto a la captura de la webcam como al video pregrabado:

• Tecla 1: Negativo
• Tecla 2: Binarización (con valor 0.4 en una escala de 0 a 1)
• Tecla 3: Erosión de la imagen
• Tecla 4: Posterización (con nivel 4)
• Tecla d: Detectar los contornos
• Tecla a: Rotación en el sentido de las agujas del reloj
• Tecla s: Rotación en el sentido contrario a las agujas del reloj
• Tecla t: Alternar entre captura webcam o vídeo generador con AI