Code Jam: (Prototipando) Ambientes Paramétricos

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

Utiliza el mouse o el teclado para modificar o alternar entre los estados de la composición. Puedes pensar en estos estados como parte de una secuencia (inicio, desarrollo, fin), o como parte de un ciclo (por ejemplo día, tarde, noche). Debajo en esta página hay algunas plantillas de interacciones que puedes utilizar.

En tu composición, aprovecha las estrategias de repetición y/o las funciones trigonométricas (oscilación) para generar y explorar comportamientos complejos basados en parámetros numéricos.

Considera y comparte en qué contexto visualizas tu creación. Algunas posibilidades:

1 Entrega

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

Reservaremos los √ļltimos 20 minutos de la sesi√≥n para que compartas en el foro de Ambientes Param√©tricos lo siguiente:

2 Plantillas de código

2.1 Dibuja algo distinto seg√ļn el estado

Este c√≥digo dibuja una figura distinta seg√ļn la √ļltima tecla que fue presionada:

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

}

2.1.1 Con funciones

Este código es similar pero las acciones a realizar en cada estado se encuentran en sus propias funciones:

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

2.2 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: tendrías que agregar otras variables y otros condicionales para modificarlas.

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; // incrementa la separación
    }
} 

2.3 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. Recuerda que puedes utilizar a mouseX y/o a mouseY como cualquier parámetro numérico que exista en tu código.

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

2.4 M√°s ejemplos