6. Interacción

6.6. Patrón interactivo

Pongamos ahora en práctica todo lo que hemos aprendido hasta el momento e integremos el uso de variables, funciones, bucles for, aleatoriedad, estructuras condicionales e interacción en un mismo sketch. Veamos algunos de los posibles resultados de nuestro código:

Nuestros programas empiezan a tener un nivel de complejidad que hacen aconsejable que a la hora de plantearlos dividamos el objetivo al que queremos llegar en partes más pequeñas que seamos capaces de controlar sin problema para luego integrar esas partes en un todo. Para la creación de un patrón como el de la anterior figura necesitaremos lo siguiente:

• Creación de un patrón de figuras mediante bucles anidados.
• Cálculo del tamaño de cada figura mediante la distancia de la figura al ratón.
• Cambio entre círculos o cuadrados mediante interacción con el teclado.
• Cambio de color aleatorio de fondo mediante interacción con el teclado.

En principio, nada a lo que no nos hayamos enfrentado anteriormente, pero haremos bien en ir paso a paso asegurándonos de que el código se ejecuta sin errores y de que realiza lo que queremos en lugar de tratar de escribir de una sola vez todo el código para luego encontrarnos con errores que nos costará identificar.

En el código a continuación se ha destacado con distintos colores los bloques principales que configuran el patrón interactivo:

En color rojo tenemos el código que mediante bucles for anidados crea la estructura del patrón. Creamos un bucle para las columnas y otro para las filas, ambas desplazándose por el canvas a razón de una separación de 50 px que hemos definido con la variable set.

En color naranja, el cálculo que se hace del tamaño de las figuras dependiendo de su distancia al ratón. Para ello, primero utilizamos el método dist() para calcular la distancia entre las coordenadas x e y del ratón (mouseX y mouseY) y cada punto de nuestro patrón (i y j). A continuación, utilizamos el método map() para acotar esta distancia a un rango (entre 0 y maxSize) más útil a la hora de dibujar las figuras.

En verde tenemos el código responsable de cambiar el dibujo de círculos por cuadrados. Se utiliza una variable booleana drawCircle, que invierte su valor al pulsar una tecla (cuando keyPressed() se invoca) y mediante una estructura condicional dentro de los bucles anidados se comprueba si dibujamos círculos o cuadrados.

Por último, en color morado tenemos el código que cambia el color de fondo de manera aleatoria. Para ello, en lugar de utilizar tres variables distintas para cambiar aleatoriamente los valores RGB del color, hemos utilizado un tipo de variable especial que almacena información de color y que es propia de P5: color. La declaramos al principio del código como bgColor, en el setup() le damos un valor inicial y cada vez que pulsemos una tecla cambiamos su valor aleatoriamente utilizando random().