audio visualizer

src/actividades/c3-visualizer.md

@@ -0,0 +1,211 @@
+---
+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
+
+## 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
+
+# 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);
+}
+```
+
+
+
+## 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);
+    }
+}
+
+```