355 lines
10 KiB
Markdown
355 lines
10 KiB
Markdown
---
|
|
title: "Proyecto Final: Audio Visualizer"
|
|
---
|
|
|
|
Utiliza Processing y las herramientas del semestre de Código Creativo para **crear una visualización de audio animada** que consista en al menos **tres estados distintos**.
|
|
|
|
Aprovecha las **estrategias de repetición** y de **diseño paramétrico**, y las herramientas de **transformación multimedia** (texto, imagen, y/o sonido) para generar y explorar comportamientos complejos en diálogo con el sonido.
|
|
|
|
Algunas preguntas para tu consideración:
|
|
|
|
* ¿Es visualizador es para una pieza sonora/musical en específico?
|
|
* ¿Qué clase de diálogo entre visuales y sonido quieres construir?
|
|
* ¿El cambio entre estados es automático, o tú lo controlas al momento?
|
|
* De ser un visualizador interactivo, ¿qué tipo de interacciones te parecería interesante implementar?
|
|
* ¿En qué contexto imaginas que puede existir tu creación? ¿La idea es que se repita constantemente o solo suceda una vez?
|
|
|
|
Realiza el proyecto **individualmente** o **en parejas**.
|
|
|
|
# Requerimientos técnicos
|
|
|
|
**Duración mínima** de la visualización en su totalidad: **1 minuto**.
|
|
|
|
Desde el punto de vista del código, considera cómo los temas del semestre pueden ayudar en tu composición:
|
|
|
|
* La composición ha de tener **tres estados significativamente distintos**: utiliza enunciados **condicionales** (`if` `else`) para elegir entre ellos, **interactiva o automáticamente**.
|
|
* Utiliza estrategias de **dibujo con repetición** (ciclos `for`) en al menos uno de los estados de la composición.
|
|
* Utiliza al menos una de las herramientas de **transformación de texto o de imágenes**
|
|
* Utiliza al menos una herramienta de visualización de audio: **amplitud** o **frecuencias**
|
|
|
|
Importante: **no utilices/copies códigos que no hayas escrito tú o que no estén basados en los materiales de clase, en especial cuando contengan conceptos computacionales y/o geométricos que no puedas explicar al resto del grupo**.
|
|
|
|
## Opcional, pero recomendable
|
|
|
|
* Utiliza **funciones de dibujo** para organizar tu código.
|
|
* Incorpora alguna forma interactiva de **iniciar y reanudar** la visualización
|
|
* Experimenta con controles interactivos de parámetros de la composición
|
|
|
|
# Entrega
|
|
|
|
La entrega del proyecto consistirá en tres partes:
|
|
|
|
* Avances del proceso
|
|
* Presentación en vivo
|
|
* Dossier en PDF + Video
|
|
|
|
## Avances del proceso
|
|
|
|
Publica en el foro del Proyecto Final tus referencias, avances, bocetos, código, resultados, dudas, comentarios, etc. al final de cada sesión de trabajo.
|
|
|
|
**Es indispensable que tengas un post por cada sesión de workshop del proyecto**
|
|
|
|
## Presentación en vivo
|
|
|
|
Presentarás tu proyecto al grupo en la última sesión del curso, el **lunes 6 de diciembre de 2021**.
|
|
|
|
En primer lugar presentarás la visualización en acción, corriendo desde Processing.
|
|
|
|
Después, utiliza unos 5 minutos para compartirnos:
|
|
|
|
* Descripción general de tu proyecto: título, descripción, contexto
|
|
* Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
|
|
* Conclusiones: lecciones, posible trabajo a futuro
|
|
|
|
## Dossier en PDF + Video
|
|
|
|
Complementa tu presentación con un dossier en PDF a entregar a más tardar en la última sesión del curso, en la sección correspondiente de Actividades.
|
|
|
|
Adjunta además un video de la visualización en funcionamiento.
|
|
|
|
Incluye en el dossier:
|
|
|
|
* Descripción general de tu proyecto: título, descripción, contexto
|
|
* Demostración del proyecto: imágenes resultantes, enlaces a videos resultantes
|
|
* Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
|
|
* Conclusiones: lecciones, posible trabajo a futuro
|
|
* Código fuente completo y documentado con comentarios
|
|
|
|
*Puedes utilizar este dossier como apoyo visual para tu presentación en vivo*
|
|
|
|
# Workshop
|
|
|
|
Durante las sesiones de workshop tendremos tiempo para trabajar en el proyecto, resolver dudas individuales o grupales, asesorar posibles soluciones, repasar temas de ser necesario, y documentar los avances en el notebook correspondiente.
|
|
|
|
Para cualquier duda fuera del horario de clase, entre semana, escríbeme a jvegac arroba centro.edu.mx
|
|
|
|
# Posibles referencias
|
|
|
|
* [\@sasj\_nl](https://www.instagram.com/sasj_nl/) - [Daily Art - Saskia Freeke](https://sasj.tumblr.com/)
|
|
* [\@\_cyber.ia](https://instagram.com/_cyber.ia)
|
|
* [\@flordefuega](https://www.instagram.com/flordefuega/)
|
|
* [\@cndsd](https://www.instagram.com/cndsd/)
|
|
* [\@o\_jack](https://www.instagram.com/o_jack/)
|
|
* [\@piranhalab](https://www.instagram.com/piranhalab/)
|
|
* [\@livecodenyc](https://www.instagram.com/livecodenyc/)
|
|
* [\@zach.lieberman](https://www.instagram.com/zach.lieberman/)
|
|
* [Calculated Movements (1985)](https://www.youtube.com/watch?v=OkyqP-g_LrY)
|
|
|
|
* [\@processingorg](https://www.instagram.com/processingorg/)
|
|
* [\@p5xjs](https://www.instagram.com/p5xjs/)
|
|
* [CreativeApplications: Processing](https://www.creativeapplications.net/category/processing/)
|
|
* [processing on vimeo](https://vimeo.com/groups/processing)
|
|
* Proyecciones a gran escala: [teamLab Borderless](https://borderless.teamlab.art/)
|
|
* Inspiración arquitectónica: [sosolimited](https://www.sosolimited.com/work/)
|
|
* [fathominfo](https://medium.com/fathominfo)
|
|
|
|
# Plantillas de código interactivo
|
|
|
|
## Dibuja algo distinto según el estado
|
|
|
|
Este código dibuja una figura distinta según la última tecla que fue presionada:
|
|
|
|
```java
|
|
void setup(){
|
|
size(800, 600);
|
|
}
|
|
|
|
void draw(){
|
|
background(0);
|
|
|
|
if( key == '1' ){
|
|
noStroke();
|
|
square( 350, 250, 100);
|
|
}
|
|
else if( key == '2' ){
|
|
noStroke();
|
|
circle( 400, 300, 100);
|
|
}
|
|
else if( key == '3') {
|
|
stroke(255);
|
|
strokeWeight(5);
|
|
line(0,300, 800, 300);
|
|
}
|
|
|
|
}
|
|
```
|
|
|
|
### Con funciones
|
|
|
|
Este código es similar pero las acciones a realizar en cada estado se encuentran en sus **propias funciones**:
|
|
|
|
```java
|
|
void setup(){
|
|
size(800, 600);
|
|
}
|
|
|
|
void draw(){
|
|
background(0);
|
|
|
|
if( key == '1' ){
|
|
uno();
|
|
}
|
|
else if( key == '2' ){
|
|
dos();
|
|
}
|
|
else if( key == '3') {
|
|
tres();
|
|
}
|
|
|
|
}
|
|
|
|
void uno(){
|
|
noStroke();
|
|
square( 350, 250, 100);
|
|
}
|
|
|
|
void dos(){
|
|
noStroke();
|
|
circle( 400, 300, 100);
|
|
}
|
|
|
|
void tres(){
|
|
stroke(255);
|
|
strokeWeight(5);
|
|
line(0,300, 800, 300);
|
|
}
|
|
```
|
|
|
|
## Cambio de estado con eventos
|
|
|
|
Estos ejemplos se parecen a los de arriba, pero el cambio de estado sucede dentro de los eventos `keyPressed()` o `mousePressed()`.
|
|
|
|
Esta plantilla ayuda para cuando queremos que algo suceda justo al *cambiar* de estado, y no *durante* el estado.
|
|
|
|
### Teclado
|
|
|
|
Usa los condicionales dentro de `keyPressed()` para realizar las acciones que quieres que sucedan al iniciar dicho estado. Por ejemplo, puedes usar la plantilla para iniciar la reproducción del sonido al presionar alguna tecla.
|
|
|
|
```java
|
|
int estado = 1; // estado inicial
|
|
|
|
void setup() {
|
|
size( 800, 600 );
|
|
}
|
|
|
|
void draw() {
|
|
background(0);
|
|
if ( estado == 1 ) {
|
|
noStroke();
|
|
square(350, 250, 100);
|
|
} else if ( estado == 2 ) {
|
|
noStroke();
|
|
circle(400, 300, 100);
|
|
} else if ( estado == 3 ) {
|
|
stroke(255);
|
|
strokeWeight(5);
|
|
line(0, 300, 800, 300);
|
|
}
|
|
} // cierra draw()
|
|
|
|
void keyPressed() {
|
|
if ( key == '1' ) {
|
|
// inicia estado 1
|
|
estado = 1;
|
|
} else if ( key == '2' ) {
|
|
// inicia estado 2
|
|
estado = 2;
|
|
} else if ( key == '3' ) {
|
|
// inicia estado 3
|
|
estado = 3;
|
|
}
|
|
} // cierra keyPressed
|
|
```
|
|
|
|
### Mouse
|
|
|
|
Este ejemplo es muy parecido al de arriba, pero aquí se usa el evento `mousePressed()` para cambiar al *siguiente* estado.
|
|
|
|
Nota el uso del condicional para regresar al estado inicial.
|
|
|
|
Lo que sucede dentro de `mousePressed()` podrías agruparlo en otro condicional que haga que las acciones sucedan solo cuando las coordenadas del mouse (`mouseX` y `mouseY`) se encuentren dentro de cierto rango.
|
|
|
|
```java
|
|
int estado = 1; // estado inicial
|
|
|
|
void setup() {
|
|
size( 800, 600 );
|
|
}
|
|
|
|
void draw() {
|
|
background(0);
|
|
if ( estado == 1 ) {
|
|
noStroke();
|
|
square(350, 250, 100);
|
|
} else if ( estado == 2 ) {
|
|
noStroke();
|
|
circle(400, 300, 100);
|
|
} else if ( estado == 3 ) {
|
|
stroke(255);
|
|
strokeWeight(5);
|
|
line(0, 300, 800, 300);
|
|
}
|
|
} // cierra draw()
|
|
|
|
void mousePressed(){
|
|
estado = estado + 1; // siguiente estado
|
|
if( estado > 3 ){
|
|
estado = 1;
|
|
}
|
|
} // cierra mousePressed
|
|
```
|
|
|
|
## Cambio de estado con el tiempo
|
|
|
|
Esta plantilla utiliza el método `.position()` de `SoundFile` para cambiar de estado de acuerdo a la posición de la *playhead* del archivo de sonido.
|
|
|
|
* [[Visualización de audio]](/notas/sound.html)
|
|
|
|
```java
|
|
import processing.sound.*;
|
|
SoundFile sonido;
|
|
|
|
void setup() {
|
|
size(640, 480);
|
|
|
|
sonido = new SoundFile( this, "audio.mp3");
|
|
sonido.play();
|
|
//sonido.loop(); // equivalente a play() pero repitiendo la reproducción
|
|
//sonido.jump(60); // "salta" al segundo 60
|
|
}
|
|
|
|
void draw() {
|
|
background(0);
|
|
|
|
// si tiempo es menor a 3
|
|
if ( sonido.position() < 3 ) {
|
|
// sucede entre 0 y 2.9999
|
|
square( 320, 240, 100);
|
|
}
|
|
else if ( sonido.position() < 6 ) {
|
|
// sucede entre 3 y 5.9999
|
|
circle( 320, 240, 100);
|
|
}
|
|
else if ( sonido.position() < 9 ) {
|
|
// sucede entre 6 y 8.999
|
|
stroke(255);
|
|
strokeWeight(5);
|
|
line( 0, 240, width, 240);
|
|
}
|
|
}
|
|
```
|
|
|
|
## Modifica un parámetro con el teclado
|
|
|
|
Este código utiliza una variable global que corresponde a la separación entre elementos repetidos. Esa variable es decrementada o incrementada con las teclas 'j' y 'k' respectivamente.
|
|
|
|
Esta plantilla te puede servir de base para modificar otros parámetros de una manera similar.
|
|
|
|
```java
|
|
float separacion = 80; // separación entre círculos
|
|
|
|
void setup(){
|
|
size(800, 600);
|
|
}
|
|
void draw(){
|
|
background( 0 );
|
|
stroke(255);
|
|
strokeWeight(10);
|
|
noFill();
|
|
|
|
for( float x=0; x<=width; x+= separacion ){
|
|
circle( x, 300, 50);
|
|
}
|
|
}
|
|
|
|
void keyPressed(){ // se realiza cuando una tecla se presiona
|
|
if( key == 'j' ){
|
|
separacion -= 10; // decrementa la separación
|
|
}
|
|
else if( key == 'k' ){
|
|
separacion += 10;
|
|
}
|
|
}
|
|
```
|
|
|
|
## Modifica un parámetro con el mouse
|
|
|
|
Este código utiliza a la variable `mouseX` como parámetro del ciclo `for` correspondiente al límite de las repeticiones.
|
|
|
|
```java
|
|
void setup(){
|
|
size(800, 600);
|
|
}
|
|
void draw(){
|
|
background( 0 );
|
|
stroke(255);
|
|
strokeWeight(10);
|
|
noFill();
|
|
|
|
for( float x=0; x<= mouseX; x+= 50 ){
|
|
circle( x, 300, 50);
|
|
}
|
|
}
|
|
|
|
```
|