5.1 void setup y void draw

Nuestro código puede responder a inputs desde el mouse, teclado y otros dispositivos que estén corriendo continuamente. Para que nuestro código sea interactivo y tenga movimiento vamos a presentar dos importantes funciones.

void setup(){
}

void draw(){
}

Normalmente, todos nuestros códigos van a contener estas dos funciones.

void setup() se configura y se lee una sola vez. Suele servir para introducir funciones y parámetros con los que iniciaremos nuestro programa y código que no varía. Por ejemplo, en void setup() es donde coloca la función de tamaño size(widht, height) para nuestra aplicación. Dado que sus parámetros no serán modificados mientras reproducimos nuestro programa.

void draw() es leído continuamente, a 60 frames por segundos, si no le decimos lo contrario a Processing y nuestro equipo tiene la suficiente potencia. Aquí es donde processing crea las animaciones y la interacción. Todo lo que metamos entre los dos corchetes ({}) de void draw() será leído repetidamente hasta que detengamos nuestro programa.

Al llegar al final del código de void draw() vuelve de nuevo al principio y repite el proceso indefinidamente hasta que pulsamos STOP.

Los corchetes ({...}) delimitan cada parte, son conocidos como bloques de código. Es algo así como los párrafos cuando escribimos en un lenguaje hablado. Sirven para organizar mejor nuestro código, separarlo visualmente y también nos permiten introducir otro concepto importante en programación: El alcance de las variables, que explicamos en la siguiente tema.

Es importante que utilices bien los espacios y la tabulación cuando escribas tus programas con el fin de poder visualizar claramente los bloques y las partes de tu código. Intenta ser organizado y limpio cuando escribas tus programas, no te olvides de utilizar comentarios aclaratorios con la doble barra (//) o con barra asterisco, comentario, asterisco barra (/* ... */) para comentarios de varias líneas.

Otro aspecto que tienes que tener en cuenta es que Processing es Case sensitive. Esto significa que diferencia entre mayúsculas y minúsculas. Así que escribe los códigos tal y como se muestran en el blog o tus programas no funcionarán.

5.2 mouseX y mouseY

Como ya hemos comentado en el capítulo 4, Processing genera una serie de variables automáticamente cuando un programa está corriendo. Dos de estas variables son mouseX y mouseY y determinan la posición del ratón en el display window.

mouseX = posición del ratón en X
mouseY = posición del ratón en Y

Estas devuelven un valor en pixeles que puede ser leído y utilizado para modificar otros valores o para interactuar con los elementos de la ventana.

Además de mouseX y mouseY, Processing nos proporciona otras dos variables para el ratón, que son pmouseX y pmouseY, que indica la posición del ratón en el frame anterior.

Ya hemos comentado, que esto sucede muy rápido, a 60 frames por segundo, significa que estas variables cambiarán su valor 60 veces en un solo segundo, lo que dará una sensación de continuidad y movimiento.

Al tener dos valores diferentes, podemos utilizarlos para calcular la velocidad a la que se mueve el ratón por el display window, y estos valores se estarán calculando constantemente en tiempo real.
Ahora veremos un ejemplo.

Observando la imagen superior, por ejemplo, si nos encontramos en el frame 99, vemos que el valor pmouseX y pmouseY es igual a 20, lo que significa que el ratón esta en la posición 20, 20. En el frame actual, el número 100 el ratón se encuentra en la posición 50, 50. Y cuando  nos encontremos en el 101 las variables mouseX y mouseY ya serán otras nuevas y pmouseX y pmouseY tendrán un valor de 50, 50.

Esto sucede tan rápido, que es difícil intentar explicarlo y detenerlo en el tiempo. Lo mejor es que veamos un ejemplo práctico para demostrar cómo funcionan estas dos variables.

void setup(){
size(580, 580);
strokeWeight(4);
stroke(0, 102);
}

void draw(){
line(mouseX, mouseY, pmouseX, pmouseY);
}

5.3 Estructuras condicionales

5.4 mousePressed y mouseButton

5.5 La función constrain()

5.6 La función dist()

Processing nos proporciona la función  dist() para poder calcular la distancia entre dos puntos. La función precisa de cuatro parámetros para poder funcionar. El valor que devuelve en un número decimal (float) que debemos asignar a una nueva variable, vamos a ver como funciona en el siguiente ejemplo.

El código 5_5 que muestra la imagen hace lo siguiente:

Creamos una ventana de 580 por 580 pixeles dentro del bloque void setup() y lo cerramos. Abrimos void draw() y le decimos a nuestro programa que queremos que el fondo sea de color negro con la función background(0);


Creamos una nueva variable dentro de draw(), ya que queremos que los datos sean leídos cada frame. La variable es float d, ya que como ya hemos dicho, dist() devuelve decimales. dentro de dist(), le marcamos el centro de nuestra ventana, que lo calculamos con width/2. Es decir, la mitad del ancho, y height/2, la mitad de la altura. Ese es el primer punto desde el cual calcularemos la distancia.

Los dos siguientes parámetros son, mouseX, la posición del ratón en el eje X, y mouseY,  la posición del ratón en el eje Y. Datos que se actualizarán a 60 frames por segundo.

El último paso es asignar el valor del cálculo de la distancia que hemos guardado en la variable d  como diámetro de una elipse. Se posiciona el centro de nuestra elipse en el centro de la ventana con width/2 y height/2 de nuevo y multiplicamos el valor de d*2  para obtener el diámetro de nuestra elipse, que en este caso, variará dependiendo de donde esté posicionado el ratón.

El código 5_6 utiliza la función dist() del  siguiente modo:

Abrimos void setup() y asignamos un tamaño de pantalla de 580 por 580 pixeles y establecemos el color de los trazos en negro con una transparencia de 102. Cerramos void setup().

Abrimos draw() y creamos una variable para guardar números decimales (float) y la llamamos grosor. Utilizamos la función dist, para que nos calcule la distancia, entre la posición el ratón en el frame actual y la posición del ratón en el frame anterior. Lo que nos ofrece datos sobre la velocidad a la que se mueve el ratón por la pantalla.

Asignamos el valor guardado en grosor al grosor de los trazos con strokeWeight(). Y para finalizar, usamos line() con mouseX, mouseY y pmouseX y pmouseY, para dibujar una línea en nuestra ventana.

Dependiendo de la velocidad a la que movamos el ratón, mayor será el grosor de nuestra línea.

La función dist() es muy útil y la utilizaremos constantemente en nuestros programas. Recuerda que los valores devueltos los podemos usar para modificar el color, las dimensiones, el volumen de un archivo mp3 o determinar si nuestro ratón está situado encima de un botón o no. Volveremos a ver esta función integrada en nuestros programas durante este capítulo y los siguientes.

5.7 La función map()

5.8 La técnica Easing

Easing es una técnica que se utiliza para suavizar los movimientos de los objetos que siguen al ratón y que sea más fluidos. Se necesitan dos valores, el valor actual y el valor hacia el cual avanzar.

float x;
float easing = 0.1;

void setup(){
  size(580, 580);
}

void draw(){
  float targetX = mouseX;
  x += (targetX - x) * easing;
  
  ellipse(x, height/2, 25, 25);
  println(targetX + " :" + x);
} 

El código de arriba, consigue que una elipse siga los movimientos del ratón en horizontal, modificando el valor de la variable easing conseguiremos que ese seguimiento sea más o menos rápido.

Todo el secreto de esta técnica se encuentra en la línea:

 x += (targetX - x) * easing;

Lo que le decimos a Processing es que la variable global x es igual a x + targetX (la posición actual del ratón) - x por easing (0.1 en este caso). Como la variable x cambia su valor cada frame, este se re-calcula y actualiza constantemente creando este efecto de movimiento suavizado.

Recuerda que += es una manera de ahorrar código, en lugar de escribir x = x + y, puedes escribir x += y, que hace lo mismo, pero escribimos menos código. De la misma manera sirve para una resta. x = x - y, es igual que x -= y.

Easing siempre debe tener un valor entre 0 y 1, donde 0 no existe movimiento y 1 no tiene ningún retraso. Prueba a modificar el valor de la variable easing para que compruebes su efecto.

En la derecha de la imagen superior tienes un ejemplo con los cálculos de lo que está sucediendo en la variable x a medida que avanzamos frame a frame.

Esta técnica es muy utilizada para suavizar los movimientos de los programas de muy diferentes maneras, vamos a ver otro ejemplo.

En este caso, para que el efecto pueda ser horizontal y vertical, necesitamos cuatro variables más la variable easing para hacer que nuestro programa funcione. En este caso una línea seguirá los movimientos del ratón. También estamos utilizando la función dist para calcular la distancia y darle un grosor diferente a la línea, dependiendo de la velocidad a la que muevas el ratón por la pantalla.

float x;
float y;
float px;
float py;
float easing = 0.05;

void setup(){
  size(580, 580);
  stroke(0, 102);
}

void draw(){
  float targetX = mouseX;
  x +=(targetX -x)* easing;
  float targetY = mouseY;
  y +=(targetY -y) * easing;
  float grosor = dist(x, y, px, py);
  strokeWeight(grosor);
  line(x, y, px, py);
  px = x;
  py = y;
}

5.9 Operadores lógicos

5.10 GUI Botón circular y Botón rectangular

5.11 Types

5.12 Arrow keys