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.
