dis9034-2024-1
clase-09
Explicación del concepto e idea: La animación tiene el sentido de ser utilizada como visualización de una canción para pantallas como por ejemplo la de Spotify. En este caso la animación tiene inspiración principal en la onda que se produce con la musica que personalmente relacioné con la estética de la gráfica psicodélica por lo que decidí utilizar la canción “Lucy in the sky with diamonds” de The Beatles la cual es un icónico referente de la música psicodélica. En la animación se ve un personaje principal que es una mujer con cabello largo que genera la onda de sonido en sus manos, estrellas, un fondo que cambia de color con planetas y nubes y que el personaje abra su tercer ojo al presionar cualquier tecla, además de que el cursor es una flor, todas estas imagenes ilustradas por mi fueron hechas con la referencia de la gráfica psicodélica.
Proyecto: https://editor.p5js.org/MacaParrao/sketches/xYmDkVLFS
Cargué la canción “Lucy in the sky with diamonds” de The Beatles” usando la referencia de p5js Sound https://p5js.org/es/reference/#/p5.SoundFile
Hice un canvas de 560 x 680 pixeles y que la amplitud de la onda sea de 0.8, aquí usé la referencia de p5js https://p5js.org/es/reference/#/p5.FFT
También puse un pequeño texto en la esquina inferior derecha que indica que hay que hacer click en el canvas para reproducir la animación use la referencia de p5js https://p5js.org/es/reference/#/p5.FFT. Además usé las condicionales if y else para que al hacer click en el canvas la animación se reproduzca y se pause
Aquí empecé a hacer la visualización de onda con la referencia de p5js de FFT //https://p5js.org/es/reference/#/p5.FFT y el video que encontré en youtube //https://www.youtube.com/watch?v=uk96O7N1Yo0. Aquí puse que el color de la onda fuera amarillo y el grosor sea 4
Aquí hice la primera mitad de la onda, que es una semicircunferencia en el centro del lienzo
Después copié y pegué el codigo pero cambie los datos de let (x, y) para hacer la onda al lado opuesto y así crear la circunferencia de onda completa
Después usé un rectangulo del tamaño del lienzo para fondo, con colores planos, pero que cambiaran de forma random dentro de una paleta de colores elegida por mi, además use frameRate para que los colores cambiaran de 6 cuadros por segundo. Puse los códigos RGB de los colores para que el fondo vaya cambiando. Usé referencias de p5js https://p5js.org/es/reference/#/p5/random y un ejercicio hecho en p5js https://editor.p5js.org/hosken/sketches/I_4VSTotf
Aquí esta el código de los colores random en la function draw donde el rectangulo se ubica al medio y mide el tamaño del lienzo
Después de ver que la onda y el fondo funcionaran, comencé a hacer las ilustraciones inspiradas en la gráfica psicodélica, aquí hay algunas referencias de las cuales me inspiré
https://www.pinterest.cl/pin/352195633371494413/
https://www.pinterest.cl/pin/28358672647590582/
https://www.pinterest.cl/pin/5911043255357565/
https://www.pinterest.cl/pin/3448137207552134/
Cargué todas las ilustraciones que formaban la composición, como la del personaje principal, el tercer ojo, una estrella, planetas para el fondo y la flor
Y puse las ilustraciones en el orden que las necesitaba
-Puse la imagen de la mujer con el cabello largo en el centro del lienzo.
-Use dos veces la misma ilustración de la estrella e hice que apareciera de forma random en el lienzo.
-Puse la ilustración de los planetas y la nube para el fondo del lienzo.
-Puse la ilustración de la flor e hice que siguiera el cursor del mouse, le puse -40 para que la imagen quedara justo en el centro del cursor.
-Puse la ilustracion del tercer ojo y usé la condicional if para que al presionar cualquier tecla aparezca y tenga este efecto como que el ojo se abra