5. Condicionales

5.7. Bucles y condicionales

Pasemos ahora a combinar las dos estructuras de control que hemos aprendido en este tema y en el anterior: la iteración y las estructuras condicionales.

Igual que hicimos en el tema pasado con el uso de la aleatoriedad para hacer que nuestros patrones fuesen más orgánicos, con el uso de las estructuras condicionales abrimos un mundo de nuevas posibilidades que pueden hacer nuestros diseños mucho más interesantes.

Partamos de un ejemplo sencillo y vayamos implementando los nuevos conocimientos que hemos adquirido:

En este ejemplo estamos creando un patrón de círculos mediante bucles for anidados. La novedad la tenemos en que dentro del bucle hemos incluido una estructura condicional que solo dibuja el círculo que toca cuando se cumple que random() (recordemos que si no le pasamos ningún parámetro, devuelve valores decimales entre 0 y 1) sea mayor que la variable prob, a la que en el principio del sketch le hemos asignado el valor 0,5. Es como si cada vez que tocase dibujar un círculo tirásemos una moneda al aire: si sale cara dibujamos el círculo, si sale cruz no lo dibujamos.

Podríamos cambiar el valor de la variable prob para que la probabilidad de dibujar o no el círculo cambie; veamos cómo queda el dibujo con distintos valores:

Ahora mismo tenemos puesto un noLoop() que impide que el patrón se redibuje en cada frame, pero podríamos poner un temporizador para que el patrón se redibuje cuando transcurra un segundo:

Hemos encapsulado todo el código que dibuja el patrón en la función drawPattern() y estamos invocándola únicamente cuando frameCount % 60 == 0, es decir, cada vez que pase un segundo. Ya podemos eliminar el noLoop() y nuestro patrón se redibujará cada vez que transcurra un segundo.

Podríamos también hacer que la probabilidad cambiase cada vez que el patrón se dibuje. Para ello, podemos pasarle un valor aleatorio entre 0 y 1 a la función drawPattern() y utilizar este parámetro dentro de la función:

Vemos ahora que, como a la definición de la función drawPattern() le hemos añadido el parámetro prob, que dentro de la función utilizamos en el condicional para compararlo con el valor de coin, cuando invocamos la función cada segundo le pasamos a prob un valor aleatorio entre 0 y 1. De esta manera, cada segundo la probabilidad de dibujar los círculos cambia y tenemos patrones de distinta densidad.

El siguiente paso que podemos llevar a cabo es dibujar una figura distinta cuando no se dibuje un círculo. De esta manera, podemos darle mayor riqueza a nuestro patrón. Para ello, podemos añadir un else a nuestro if para que cuando no entre en el if dibuje la nueva figura. Al cambiar la probabilidad cada segundo, tendremos mayor o menor prevalencia de una u otra figura.

Se ha añadido a continuación del if, en el else, el dibujo de una línea en diagonal cruzando el punto (i, j). Para conservar la apariencia de los círculos, también hemos movido el noStroke() con el fin de que afecte únicamente al dibujo de los círculos.

Ahora ya tenemos un sistema generativo que nos crea patrones aleatorios con combinaciones prácticamente infinitas (con un patrón de 20 × 20 figuras son un total de 2⁴⁰⁰ combinaciones, o lo que es lo mismo:

255822500000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 combinaciones posibles).

Por último, podría resultarnos útil tener una manera de ir guardando estas distintas combinaciones. Podrían ser, por ejemplo, variaciones de un diseño para distintas aplicaciones: cartel impreso, flyer, publicación en redes sociales, banner web, etc.

Para poder guardar el resultado de nuestros sketches de P5 podemos usar el método save(), que nos permite almacenar nuestro canvas como una imagen PNG o JPG de la siguiente manera:

if (frameCount % 60 == 0){
    drawPattern(random());
    save(“myPattern.png”);
}

De este modo, cada vez que dibujemos el patrón estaremos guardándolo en nuestro disco duro. Es probable que el navegador web muestre una advertencia diciendo que el sitio web está intentando guardar muchos archivos. En este caso, al estar guardándolas cada segundo no debería resultar un problema, pero debemos tener cuidado cuando usemos el método save(), ya que si lo ponemos directamente en el draw(), estaremos intentando guardar 60 imágenes por segundo desde el navegador y es muy probable que se bloquee.