Pinturas aleatorias con processing.js

Siguiendo con las entregas sobre la utilización de la librería processing.js, vamos a abordar la implementación de un programa sencillo en el que utilizamos la interacción con el ratón y la función random() para generar cuadros abstractos aleatorios. Además, introduciremos el concepto de semáforo que resulta importante para la gestión del flujo del programa y que tiene un uso similar al de un interruptor que permite o evita la ejecución de cierto código dentro del programa.

Vamos a inicializar nuestro semáforo repinta a valor 1 y definimos los valores iniciales en la función setup:

var repinta = 1;
void setup(){
  size(800,600);
  background(0,0,0);
  cursor(CROSS);  
};

Ahora definimos dentro de la función draw, nuestra función fundamental dibuixar_formes() condicionada por el valor del semáforo. De este modo, solamente se procesará el repintado de pantalla cuando la variable repinta esté a valor 1 (semáforo en verde) mientras que cuando su valor sea 0 no se procesará el código (semáforo en rojo).

draw = function(){
  if (repinta===1){ dibuixar_formes(); }
};

La función principal se encarga de generar un conjunto de formas en posiciones, tamaños y colores aleatorios mediante un bucle. La función random() resulta clave en la generación de valores aleatorios entre un rango inferior y uno superior. Además, usamos la función módulo % para cambiar de forma dibujada en función del resto de la división entre la variable de bucle i y el valor 3. Finalmente, una vez dibujada la pantalla y para evitar repintados sucesivos en las llamadas draw recurrentes, asignamos a la variable repinta el valor 0 colocando de facto el semáforo en rojo.

void dibuixar_formes(){
  background(0,0,0);
  //Crear cuadro
  for(var i=0; i<=100; i++){
    fill(floor(random(0,255)),floor(random(0,255)),floor(random(0,255)));
    noStroke();
    if (i % 3 == 0){ ellipse(random(0,800),random(0,600),random(10,200),random(10,200)); }
    if (i % 3 == 1){ rect(random(0,800),random(0,600),random(10,200),random(10,200)); }
    stroke(floor(random(0,255)),floor(random(0,255)),floor(random(0,255)));
    if (i % 3 == 2){ line(random(0,800),random(0,600),random(0,800),random(0,600)); }
  }
  //Prepara nova pantalla
  repinta=0;
};

Por último, vamos a utilizar la función especial mouseClicked() para controlar a través del ratón un evento que pueda ser desencadenado por el usuario y que permita activar de nuevo la variable repinta para poder generar una nueva pantalla de formas aleatorias.

void mouseClicked(){
  if (repinta === 0) { repinta = 1;}
};

En conclusión, hemos realizado una sencilla aplicación en la que interactuamos a través del clic del ratón, experimentamos con las funciones random() y %,  y vemos en acción el uso de una variable semáforo para regular la ejecución de código de programa. Como es habitual, en los enlaces dispones de la implementación y del código fuente necesario para replicar los ejemplos utilizados.