---
title: "Code Jam: (Prototipando) Ambientes Paramétricos"
---

Utiliza Processing y las herramientas del semestre de Código Creativo para **prototipar un ambiente digital animado e interactivo** que consista en al menos **tres estados distintos**.

Aprovecha las **estrategias de repetición** y las **funciones trigonométricas** para generar y explorar comportamientos complejos basados en parámetros.

Considera y comparte el contexto de tu creación. Algunas posibilidades:

* **Fondo de pantalla animado** (¿tal vez inspirado en el trabajo diario de [Saskia Freeke](https://sasj.tumblr.com/)?)
* **Visuales para acompañar pieza(s) sonora(s)** (referencia *oldschool* interesante: [Calculated Movements (1985)](https://www.youtube.com/watch?v=OkyqP-g_LrY)
* **Proyección a gran escala** (e.g. [teamLab Borderless](https://borderless.teamlab.art/) )

# Entrega

Esta actividad es un ejercicio integrador para realizarse durante la sesión de clase en vivo.

Al finalizar la sesión, comparte en el foro de Ambientes Paramétricos lo siguiente:

* Título y descripción de tu prototipo, ¿en qué contexto lo visualizas?
* Video demostrando el ambiente en acción
* Código fuente
* Conclusión: Hallazgos, obstáculos y/o otros aprendizajes que quieras compartir con lxs demás


# Plantillas de código

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

```
