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.
* ¿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:
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
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.
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.