Compare commits
2 Commits
2c5f6984ab
...
57d60edd0a
Author | SHA1 | Date |
---|---|---|
sejo | 57d60edd0a | |
sejo | 2bd5767071 |
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
|
@ -190,6 +190,16 @@ posiciones[2] = posiciones[2] + 5;
|
||||||
|
|
||||||
Cuando queremos utilizar un índice fuera del rango del arreglo, recibiremos un error `ArrayIndexOutOfBoundsException`.
|
Cuando queremos utilizar un índice fuera del rango del arreglo, recibiremos un error `ArrayIndexOutOfBoundsException`.
|
||||||
|
|
||||||
|
## Declaración, creación y asignación
|
||||||
|
|
||||||
|
Alternativamente, podemos declarar y crear un arreglo directamente con una lista de elementos:
|
||||||
|
|
||||||
|
```java
|
||||||
|
float[] posiciones = { 200, 100, 50, 20 }; // declara y crea arreglo
|
||||||
|
```
|
||||||
|
|
||||||
|
El arreglo tendrá el tamaño correspondiente a la cantidad de elementos dados.
|
||||||
|
|
||||||
## Ciclos `for`
|
## Ciclos `for`
|
||||||
|
|
||||||
Una de las principales ventajas de los arreglos es que como podemos acceder a sus elementos a través de un valor numérico (el *índice*), podemos hacer que ese sea una variable que se incrementa de uno en uno (un *contador*).
|
Una de las principales ventajas de los arreglos es que como podemos acceder a sus elementos a través de un valor numérico (el *índice*), podemos hacer que ese sea una variable que se incrementa de uno en uno (un *contador*).
|
||||||
|
|
Loading…
Reference in New Issue