ambientes paramétricos

src/actividades/c3-ambientes-parametricos.md

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