dis9034-2024-1
Preparación de examen
El proyecto, trabajado en la p5js, se trata de un reproductor de audio con interacción de mouse, en el que se puede reproducir, pausar, subir y bajar volumen e interactuar con los colores de la pantalla con clic, rueda de mouse y movimiento del mismo. Se trabajan en paralelo dos versiones de un mismo proyecto. En la primera versión se utiliza la canción Hips Don’t Lie se Shakira en versión Barcore/Medieval. En la segunda versión se utiliza el tema principal del anime Sailor Moon Densetsu Moonlight en versión music box.
Referentes
- Cargar y reproducir sonido
- Code an Audio Visualizer in p5js
Elementos a utilizar
- Versión 1 - Shakira
- Imagen de fondo
- Shakira - Hips Don’t Lie [Bardcore / Medieval Style Cover]
- Marco
- Paleta de colores
- Versión 2 - Densetsu Moonlight
- Imagen Fondo
- Moonlight Densetsu/DALI [Music Box] (Anime “Sailor Moon” OP)
- Marco
- Paleta de colores
Proceso versión 2 - densetsu
Se cargan elementos multimedia a utilizar, marco, audio e imagen de fondo.
let img;
let audio;
let bgd;
function preload() {
audio = loadSound("Densetsu.mp3");
img = loadImage("corazon.png");
bgd = loadImage("bgd.jpg");
}
Una vez creado el lienzo y cargado el fondo del proyecto, se crea el relleno del marco. Para que este no sea un color sólido, se integra una gradiente que cambia conforme se mueve el mouse en el lienzo siguiendo el eje X en la versión 1 y eje Y en la versión 2. Enlace de referencia.
push();
r = map(mouseY, 0, 800, 208, 255);
g = map(mouseY, 0, 800, 191, 248);
b = map(mouseY, 0, 800, 255, 201);
fill(r, g ,b);
noStroke();
ellipse(0, 0, 720);
pop();
//se carga la imagen del marco y se añade la función rotate siguiendo el eje Z.
push();
rotateZ(frameCount * 0.004);
image(img, -400, -400, 800, 800);
pop();
Vista Previa #1 Shakira Barcore
Vista Previa #2 Densetsu Sailor Moon
El audio se reproduce y se pausa cuando se hace un click en computadores y al tacto en dispositivos móviles (en tablet funciona, en celulares el sonido no carga :c) con la función touchStarted() . Se intenta hacer que el fondo también cambie al hacer click, pero al hacerlo el marco deja un camino sobre el fondo nuevo mientras rota ya que la función no está en draw, por lo que no se reinicia. Aún se está intentando. :c
function touchStarted() {
if (audio.isPlaying()) {
audio.pause();
background(198, 235, 197);
} else {
audio.play();
// background(188, 90, 148); cambia de color con clic, se está resolviendo
}
}
Una vez listo el audio, se configura la rueda del mouse para que esté a cargo del volumen desde 0, siendo lo mínimo, hasta el 1, siendo lo máximo.
function mouseWheel(rueda) {
let currentVolume = audio.getVolume();
if (rueda.delta > 0) {
currentVolume = max(0, currentVolume - 0.02);
} else {
currentVolume = min(1, currentVolume + 0.02);
}
audio.setVolume(currentVolume);
}
Resultados pt.I
Resultados cargados en nube online (en procesoooo)
Segunda Parte
Una vez lista la base a trabajar, se añaden algunos recursos y modificaciones. Para mayor interactividad, se agrega uso de camara web en vivo dentro de ambas composiciones. Se utiliza de manera que imita la rotación de un disco LP. Para integrar un poco más la identidad de cada proyecto, se utiliza un tinte en la imagen (rosado para el cover de sailor moon y amariilo/naranja para el cover medieval). En la versión #1 del proyecto, el fondo tambiés se le incluye rotación en sentido contrario al marco al igual que ambas cámaras.
//tinte y rotación
push();
tint(232, 117, 26, 170);
rotateZ(frameCount * -0.006);
texture(cam);
noStroke();
ellipse(0, 0, 350);
pop();
Vista Previa #1
Vista Previa #2
Resultados pt.II
https://github.com/cielqz/dis9034-2024-1/assets/163901464/d12cf5d5-449e-407b-bff1-f9a2ae3dd483
https://github.com/cielqz/dis9034-2024-1/assets/163901464/74191250-4a20-472a-a4ec-5003d6d24ac1
Comentarios de cierre
Finalmente, el proyecto fue pensado para incluir acciones de interactividad con el usuario y así captar su atención con los diferentes estímulos presentes, siendo el primero el uso de la imagen en vivo y la animación (rotación) de esta y sus elementos secundarios. Luego, el usar el ratón para reproducir y pausar la imagen con un clic, que el color del fondo cambie con el movimiento del mouse y, por último, controlar el volumen con la rueda del mouse. Se siguió el uso de una misma línea visual con dos estéticas diferentes con colores marrones y verdes en uno y, colores rosados y pasteles en el segundo, esto con la intención de que sean acorde al sonido que se reproduce.
También aprendí a poner los códigos en el readme en este formato, ya que antes no sabía y cargaba capturas de pantalla.
jeje