{"id":408,"date":"2022-10-06T09:53:11","date_gmt":"2022-10-06T07:53:11","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=408"},"modified":"2022-10-06T09:53:11","modified_gmt":"2022-10-06T07:53:11","slug":"5-7-bucles-y-condicionales","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/5-7-bucles-y-condicionales\/","title":{"rendered":"5.7. Bucles y condicionales"},"content":{"rendered":"

Pasemos ahora a combinar las dos estructuras de control que hemos aprendido en este tema y en el anterior: la iteraci\u00f3n y las estructuras condicionales.<\/p>\n

Igual que hicimos en el tema pasado con el uso de la aleatoriedad para hacer que nuestros patrones fuesen m\u00e1s org\u00e1nicos, con el uso de las estructuras condicionales abrimos un mundo de nuevas posibilidades que pueden hacer nuestros dise\u00f1os mucho m\u00e1s interesantes.<\/p>\n

Partamos de un ejemplo sencillo y vayamos implementando los nuevos conocimientos que hemos adquirido:<\/p>\n

\"\"
Figura 61. Patr\u00f3n con condicional
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

En este ejemplo estamos creando un patr\u00f3n de c\u00edrculos mediante bucles for<\/span> anidados. La novedad la tenemos en que dentro del bucle hemos incluido una estructura condicional que solo dibuja el c\u00edrculo que toca cuando se cumple que random()<\/span> (recordemos que si no le pasamos ning\u00fan par\u00e1metro, devuelve valores decimales entre 0 y 1) sea mayor que la variable prob<\/span>, a la que en el principio del sketch<\/em> le hemos asignado el valor 0,5. Es como si cada vez que tocase dibujar un c\u00edrculo tir\u00e1semos una moneda al aire: si sale cara dibujamos el c\u00edrculo, si sale cruz no lo dibujamos.<\/p>\n

Podr\u00edamos cambiar el valor de la variable prob<\/span> para que la probabilidad de dibujar o no el c\u00edrculo cambie; veamos c\u00f3mo queda el dibujo con distintos valores:<\/p>\n

\"\"
Figura 62. prob = 0,2<\/span>; prob = 0,5<\/span>; prob = 0,9<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>Ahora mismo tenemos puesto un noLoop()<\/span> que impide que el patr\u00f3n se redibuje en cada frame<\/em>, pero podr\u00edamos poner un temporizador para que el patr\u00f3n se redibuje cuando transcurra un segundo:<\/p>\n
\"\"
Figura 63. Redibujando el patr\u00f3n con un temporizador
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

Hemos encapsulado todo el c\u00f3digo que dibuja el patr\u00f3n en la funci\u00f3n drawPattern()<\/span> y estamos invoc\u00e1ndola \u00fanicamente cuando frameCount % 60 == 0<\/span>, es decir, cada vez que pase un segundo. Ya podemos eliminar el noLoop()<\/span> y nuestro patr\u00f3n se redibujar\u00e1 cada vez que transcurra un segundo.<\/p>\n

Podr\u00edamos tambi\u00e9n hacer que la probabilidad cambiase cada vez que el patr\u00f3n se dibuje. Para ello, podemos pasarle un valor aleatorio entre 0 y 1 a la funci\u00f3n drawPattern()<\/span> y utilizar este par\u00e1metro dentro de la funci\u00f3n:<\/p>\n

\"\"
Figura 64. Pasando un valor aleatorio como par\u00e1metro a drawPattern()<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>Vemos ahora que, como a la definici\u00f3n de la funci\u00f3n drawPattern()<\/span> le hemos a\u00f1adido el par\u00e1metro prob<\/span>, que dentro de la funci\u00f3n utilizamos en el condicional para compararlo con el valor de coin<\/span>, cuando invocamos la funci\u00f3n cada segundo le pasamos a prob<\/span> un valor aleatorio entre 0 y 1. De esta manera, cada segundo la probabilidad de dibujar los c\u00edrculos cambia y tenemos patrones de distinta densidad.<\/p>\n

El siguiente paso que podemos llevar a cabo es dibujar una figura distinta cuando no se dibuje un c\u00edrculo. De esta manera, podemos darle mayor riqueza a nuestro patr\u00f3n. Para ello, podemos a\u00f1adir un else<\/span> a nuestro if<\/span> para que cuando no entre en el if<\/span> dibuje la nueva figura. Al cambiar la probabilidad cada segundo, tendremos mayor o menor prevalencia de una u otra figura.<\/p>\n

\"\"
Figura 65. A\u00f1adiendo una nueva figura al patr\u00f3n con un else<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>Se ha a\u00f1adido a continuaci\u00f3n del if<\/span>, en el else<\/span>, el dibujo de una l\u00ednea en diagonal cruzando el punto (i, j)<\/span>. Para conservar la apariencia de los c\u00edrculos, tambi\u00e9n hemos movido el noStroke()<\/span> con el fin de que afecte \u00fanicamente al dibujo de los c\u00edrculos.<\/p>\n

Ahora ya tenemos un sistema generativo que nos crea patrones aleatorios con combinaciones pr\u00e1cticamente infinitas (con un patr\u00f3n de 20 \u00d7 20 figuras son un total de 2400 <\/sup>combinaciones, o lo que es lo mismo:<\/p>\n

255822500000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 combinaciones posibles).<\/p>\n

Por \u00faltimo, podr\u00eda resultarnos \u00fatil tener una manera de ir guardando estas distintas combinaciones. Podr\u00edan ser, por ejemplo, variaciones de un dise\u00f1o para distintas aplicaciones: cartel impreso, flyer<\/em>, publicaci\u00f3n en redes sociales, banner<\/em> web, etc.<\/p>\n

Para poder guardar el resultado de nuestros sketches<\/em> de P5 podemos usar el m\u00e9todo save()<\/span>, que nos permite almacenar nuestro canvas<\/em> como una imagen PNG o JPG de la siguiente manera:<\/p>\n

if (frameCount % 60 == 0){\r\n    drawPattern(random());\r\n    save(\u201cmyPattern.png\u201d);\r\n}<\/pre>\n
De este modo, cada vez que dibujemos el patr\u00f3n estaremos guard\u00e1ndolo en nuestro disco duro. Es probable que el navegador web muestre una advertencia diciendo que el sitio web est\u00e1 intentando guardar muchos archivos. En este caso, al estar guard\u00e1ndolas cada segundo no deber\u00eda resultar un problema, pero debemos tener cuidado cuando usemos el m\u00e9todo save()<\/span>, ya que si lo ponemos directamente en el draw()<\/span>, estaremos intentando guardar 60 im\u00e1genes por segundo desde el navegador y es muy probable que se bloquee.<\/p>\n","protected":false},"excerpt":{"rendered":"
Pasemos ahora a combinar las dos estructuras de control que hemos aprendido en este tema y en el anterior: la iteraci\u00f3n y las estructuras condicionales. Igual que hicimos en el tema pasado con el uso de la aleatoriedad para hacer que nuestros patrones fuesen m\u00e1s org\u00e1nicos, con el uso de las estructuras condicionales abrimos un […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/408"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=408"}],"version-history":[{"count":1,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/408\/revisions"}],"predecessor-version":[{"id":409,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/408\/revisions\/409"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}