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:

• Visuales para acompañar pieza(s) sonora(s) (referencia oldschool interesante: Calculated Movements (1985)
• Proyección a gran escala (e.g. teamLab Borderless )
• Fondo de pantalla animado (¿tal vez inspirado en el trabajo diario de Saskia Freeke?)

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:

• Título y descripción de tu prototipo, incluyendo en qué contexto lo visualizas
• Video demostrando el ambiente en acción. Recomendación: súbelo a tu cuenta de YouTube de Centro, como video unlisted, y comparte el enlace
• Código fuente
• Conclusión: Hallazgos, obstáculos y/o otros aprendizajes que quieras compartir con lxs demás
• Opcional: Imágenes estáticas que correspondan a capturas de la composición

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

• [Interactividad con mouse y teclado]