---
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);
    }
}

```