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