C4

Ejercicio para la próxima semana: Subir al blog un sketch realizado con todos o algunos de los contenidos que se verán a continuación. Se pueden combinar con lo visto anteriormente.

Algo de interactividad con Mouse y Teclado en Processing
(Libro de referencia: Getting Started with Processing, O’reilly, Fry, Reas)

En esta sesión veremos algunos ejemplos de interacción con Processing, pero antes recordemos para qué están las funciones void setup() y void draw ().

Recordemos que estos dos bloques están ahí, porque cada uno tiene un funcionamiento diferente. Todo lo que está dentro de void setup() se ejecutará una vez. En cambio, el bloque que esté dentro de void draw() se irá repitiendo en un loop hasta que el programa indique detenerse o se cierre el programa.

Ejecuta el siguiente código para hacerte una idea:

Recuerda también que en sesiones anteriores aprendimos a usar variables que pueden ser “globales” o “locales”.
Acá puedes ver un ejemplo con variables globales. Estas variables que se inicializan fuera de void setup o de void draw pueden ser llamadas desde cualquier parte del programa.

 

Conociendo estas características podemos comenzar a pensar en comportamientos interactivos con Processing.

 

Prueba agregar la función “background()” dentro de void draw(); Recuerda que al escribirla dentro de void draw(), esta se estará ejecutando repetidamente por lo que se dejará de ver como si el mouse estuviera dibujando. En cambio, se verá como si un círculo estuviera siguiendo al mouse.

Para dibujar con el mouse, se puede usar también las variables “pmouseX” y “pmouseY”. Estas variables tienen la característica de “recordar” la posición anterior del mouse (la “p” es por la palabra previous) y unirla con la posición actual, por lo que las líneas de dibujo se ven contínuas a diferencia del ejemplo anterior en donde se veían círculos separados.

 

Otro parámetro interesante con el que se puede experimentar al interactuar con el mouse, es la aceleración o desaceleración (easing).
En el siguiente ejemplo, se puede ver cómo la elipse va desacelerando al acercarse al puntero del mouse y acelerando cuando está a mayor distancia.

 

En el código anterior aparece una nueva estructura que no hemos visto antes:

x += 1

Esta estructura es una simplificación para decir:

x = x+1

… de esta manera se repite la variable “x” menos veces. Cuando se programa siempre hay que tratar de acortar el código lo más posible, evitando repetir números o variables innecesariamente.

En el caso del código anterior, es en esa línea (13) en donde el programa calcula la diferencia entre el objetivo (target) y el valor actual para luego multiplicar ese valor por la variable “easing” y luego sumarlo a la variable “x” para llevar la elipse más cerca del mouse (target).

Mira este código. Trata de prever lo que va a pasar al ejecutarlo:

Ahora, además de seguir los movimientos del mouse, también es posible en Processing saber si el botón del mouse está presionado o no. Para esto se usa la variable especial mousePressed:

 

Operador Lógico Booleano
En el código anterior, en la línea 17 aparece escrito;

if (mousePressed == true)

esto nos lleva a un nuevo tipo de dato llamado Booleano (por el señor Boole) que sirve para saber si algo es verdadero (true) o falso (false). No tiene más posiblidades que estas dos situaciones. Prueba cambiar en el código el booleano “true” por “false”. Ve lo que pasa al ejecutar el código.

En el ejemplo a continuación, se extienden las posiblidades del bloque “if” agregando otro bloque: “else”

 

Prueba seguir esta referencia de Processing para detectar distintos clicks del mouse.

Otro ejemplo de interacción con el mouse:

 

y otro:

En el ejemplo anterior aparece el operador lógico AND representado en el código con “&&”. Con este se pueden comprobar varios estados y sólo cuando todos se cumplen entonces se ejecuta lo que está dentro del bloque “if”.

Detectando el teclado
En el próximo ejemplo, en el código aparece la variable “keyPressed”, con ésta Processing detecta si alguna tecla está siendo presionada. En el siguiente ejemplo, aparece el “keyPressed” dentro del bloque “if”, por loque se está comprobando constantemente si cualquier tecla está presionada y si esto es efectivo, se dibujan elipses de diferentes tamaños en la ventana.

Por último, también podemos detectar si alguna tecla en particular está siendo presionada. En el siguiente ejemplo, se comprueba si la tecla H está siendo presionada: