Los dise\u00f1os que hasta ahora somos capaces de crear con nuestro c\u00f3digo son algo est\u00e1ticos, est\u00e1n muy constre\u00f1idos por los valores que definimos. Sin embargo, podemos dotar a nuestros dise\u00f1os de algo m\u00e1s de \u00abvida\u00bb introduci\u00e9ndoles cierta aleatoriedad. El uso de la aleatoriedad es constante en proyectos de computaci\u00f3n creativa para dotar de mayor \u00abnaturalidad\u00bb y hacer m\u00e1s org\u00e1nicos nuestros dise\u00f1os. La naturaleza es un gran ejemplo de aleatoriedad: si tomamos por ejemplo las nubes, aunque todas comparten caracter\u00edsticas similares, nunca veremos dos nubes id\u00e9nticas. Esta organicidad seremos capaces de simularla utilizando algunos m\u00e9todos de P5.<\/p>\n
En P5.js disponemos del m\u00e9todo random()<\/span> para generar valores aleatorios que podremos utilizar en nuestros sketches<\/em>. Veamos c\u00f3mo lo podemos utilizar:<\/p>\n
function setup(){\r\n createCanvas(400, 400);\r\n}\r\n\r\nfunction draw() {\r\n let randomValue = random(0, 255);\r\n background(randomValue);\r\n}<\/pre>\n
Si ejecutamos el c\u00f3digo anterior, podremos ver c\u00f3mo el color de fondo de nuestro sketch<\/em> var\u00eda r\u00e1pidamente tomando diferentes valores dentro de una escala de grises. Analicemos el c\u00f3digo para ver qu\u00e9 es lo que est\u00e1 ocurriendo exactamente. En el setup()<\/span> creamos nuestro canvas<\/em> con unas dimensiones de 400 \u00d7 400 px; hasta aqu\u00ed nada nuevo. Dentro del draw()<\/span> estamos creando una variable llamada randomValue<\/span> a la que le asignamos un valor que viene definido por el m\u00e9todo random<\/span>, al que le estamos pasando dos par\u00e1metros. Estos dos par\u00e1metros definen el rango de valores entre los que el m\u00e9todo random<\/span> \u00abelige\u00bb. En nuestro caso, hemos definido los valores 0 y 255, por lo que random<\/span> cada vez que se ejecute devolver\u00e1 (como cuando cre\u00e1bamos una funci\u00f3n con return<\/span>) un valor entre 0 y 255. Posteriormente, utilizamos este valor que random<\/span> ha devuelto y que hemos almacenado en la variable randomValue<\/span> para establecer el color de nuestro fondo. Al ser valores entre 0 y 255, nuestro fondo cambiar\u00e1 entre distintos valores de gris.<\/p>\n
Ahora bien, \u00bfpor qu\u00e9 cambia constantemente el valor del color? Si recordamos de temas anteriores, el draw()<\/span> se ejecuta constantemente en bucle a una velocidad de 60 fotogramas (frames<\/em>) por segundo. Por ello, el m\u00e9todo random<\/span> se estar\u00e1 ejecutando continuamente y devolviendo un valor distinto cada vez. Normalmente, querremos que nuestro sketch<\/em> se ejecute a 60 frames<\/em> por segundo, pero en algunos casos podemos ralentizar e incluso parar por completo la velocidad de refresco, lo que nos puede resultar \u00fatil a la hora de crear sketches<\/em> \u00abest\u00e1ticos\u00bb o para poder apreciar detalles de lo que realiza nuestro c\u00f3digo que a 60 FPS se nos escapen.<\/p>\n
Para alterar la velocidad de refresco de nuestros sketches<\/em>, podemos usar el m\u00e9todo frameRate()<\/span>:<\/p>\n
function setup(){\r\n createCanvas(400, 400);\r\n frameRate(2);\r\n}\r\n\r\nfunction draw() {\r\n let randomValue = random(0, 255);\r\n background(randomValue);\r\n}<\/pre>\n
Como par\u00e1metro a frameRate()<\/span> le pasamos el n\u00famero de fotogramas por segundo al que queremos que se ejecute nuestro sketch<\/em>. En el ejemplo anterior le hemos dado una velocidad de 2 fotogramas por segundo, por lo que ahora nuestro color de fondo cambiar\u00e1 dos veces cada segundo en lugar de estar cambiando 60 veces por segundo.<\/p>\n
Si queremos parar por completo el refresco y que el c\u00f3digo que tenemos en el draw()<\/span> se ejecute una \u00fanica vez, lo podemos hacer con noLoop()<\/span>:<\/p>\n
function setup(){\r\n createCanvas(400, 400);\r\n noLoop();\r\n}\r\n\r\nfunction draw() {\r\n let randomValue = random(0, 255);\r\n background(randomValue);\r\n}<\/pre>\n
El m\u00e9todo noLoop()<\/span> no precisa de par\u00e1metros y lo que hace es que limita la ejecuci\u00f3n del draw()<\/span> a una \u00fanica vez. De esta manera, no veremos cambio alguno y si queremos que el m\u00e9todo random()<\/span> nos devuelva un nuevo valor y que consecuentemente el fondo cambie de color, deberemos ejecutar de nuevo nuestro sketch<\/em>.<\/p>\n
Una vez hecho este inciso para explicar c\u00f3mo podemos alterar la ejecuci\u00f3n de nuestro sketch<\/em> mediante frameRate()<\/span> y noLoop()<\/span>, regresemos a la aleatoriedad con el m\u00e9todo random()<\/span>. En los ejemplos anteriores hemos utilizado dos par\u00e1metros para definir el rango de valores que el m\u00e9todo nos va a devolver, pero podemos usarlo tambi\u00e9n de otros modos:<\/p>\n
\/\/ Sin par\u00e1metros \r\n\/\/ Valores entre 0 y 1\r\nlet value = random();\r\n\r\n\/\/ Con un par\u00e1metro\r\n\/\/ Valores entre 0 y el valor del par\u00e1metro\r\nlet value = random(255);\r\n\r\n\/\/ Con dos par\u00e1metros\r\n\/\/ Valores entre el primer y el segundo par\u00e1metro\r\nlet value = random(100, 200);<\/pre>\n
Si usamos la consola para imprimir alguno de estos valores, nos daremos cuenta de una peculiaridad: los valores que nos devuelve random()<\/span> son siempre valores decimales. Esto puede ser algo deseable o no seg\u00fan el caso, por lo que veamos c\u00f3mo podemos transformar los n\u00fameros decimales en enteros usando las funciones int()<\/span>, round()<\/span>, floor()<\/span> y ceil()<\/span>:<\/p>\n
let value = 14.6604;\r\n\r\n\/\/ int() se queda con la parte entera del valor\r\nlet intValue = int(value);\r\n\/\/ intValue valdr\u00e1 14\r\n\r\n\/\/ round() redondea al entero m\u00e1s cercano\r\nlet roundValue = round(value);\r\n\/\/ roundValue valdr\u00e1 15\r\n\r\n\/\/ floor() redondea hacia abajo\r\nlet floorValue = floor(value);\r\n\/\/ floorValue valdr\u00e1 14\r\n\r\n\/\/ ceil() redondea hacia arriba\r\nlet ceilValue = ceil(value);\r\n\/\/ ceilValue valdr\u00e1 15<\/pre>\n
La combinaci\u00f3n de la aleatoriedad con los bucles nos puede resultar de bastante provecho. Con los bucles tenemos la capacidad de repetir un motivo m\u00faltiples veces por nuestro canvas<\/em>, mientras que con la aleatoriedad podemos dotar a cada uno de estos elementos de cierta variaci\u00f3n para hacer que nuestros dise\u00f1os sean m\u00e1s din\u00e1micos.<\/p>\n
Pongamos como ejemplo el patr\u00f3n sencillo que creamos mediante bucles anidados. Si antes de dibujar cada c\u00edrculo creamos una variable a la que asignamos un valor aleatorio y utilizamos esa variable para establecer el di\u00e1metro del c\u00edrculo, tendremos un patr\u00f3n con un espaciado regular pero el tama\u00f1o de cada elemento ser\u00e1 distinto.<\/p>\n
Figura 51. Aleatoriedad dentro de bucles for<\/span> Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>En el ejemplo de la figura 51 hemos usado un random(10, separation)<\/span> para que los c\u00edrculos tengan un di\u00e1metro aleatorio de entre 10 px y la separaci\u00f3n entre cada c\u00edrculo, para que de esta manera no se superpongan. En el setup()<\/span> hemos incluido tambi\u00e9n un noLoop()<\/span>, para que el draw()<\/span> se ejecute una \u00fanica vez y no tengamos valores aleatorios 60 veces por segundo.<\/p>\n
![\"\"](\"\/wp-content\/uploads\/2022\/10\/PID_00290094_050.jpg\")
![\"\"](\"\/wp-content\/uploads\/2022\/10\/PID_00290094_051.jpg\")