{"id":420,"date":"2022-10-06T10:27:19","date_gmt":"2022-10-06T08:27:19","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=420"},"modified":"2022-11-13T13:27:56","modified_gmt":"2022-11-13T11:27:56","slug":"6-6-patron-interactivo","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/6-6-patron-interactivo\/","title":{"rendered":"6.6. Patr\u00f3n interactivo"},"content":{"rendered":"<p>Pongamos ahora en pr\u00e1ctica todo lo que hemos aprendido hasta el momento e integremos el uso de variables, funciones, bucles <span class=\"courier\">for<\/span>, aleatoriedad, estructuras condicionales e interacci\u00f3n en un mismo <em>sketch<\/em>. Veamos algunos de los posibles resultados de nuestro c\u00f3digo:<\/p>\n<figure id=\"attachment_184\" aria-describedby=\"caption-attachment-184\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-184\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_075.jpg\" alt=\"\" width=\"800\" height=\"199\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_075.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_075-300x75.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_075-768x191.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-184\" class=\"wp-caption-text\">Figura 76. Diferentes resultados del patr\u00f3n interactivo<br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n<p>Nuestros programas empiezan a tener un nivel de complejidad que hacen aconsejable que a la hora de plantearlos dividamos el objetivo al que queremos llegar en partes m\u00e1s peque\u00f1as que seamos capaces de controlar sin problema para luego integrar esas partes en un todo. Para la creaci\u00f3n de un patr\u00f3n como el de la anterior figura necesitaremos lo siguiente:<\/p>\n<ul>\n<li>Creaci\u00f3n de un patr\u00f3n de figuras mediante bucles anidados.<\/li>\n<li>C\u00e1lculo del tama\u00f1o de cada figura mediante la distancia de la figura al rat\u00f3n.<\/li>\n<li>Cambio entre c\u00edrculos o cuadrados mediante interacci\u00f3n con el teclado.<\/li>\n<li>Cambio de color aleatorio de fondo mediante interacci\u00f3n con el teclado.<\/li>\n<\/ul>\n<p>En principio, nada a lo que no nos hayamos enfrentado anteriormente, pero haremos bien en ir paso a paso asegur\u00e1ndonos de que el c\u00f3digo se ejecuta sin errores y de que realiza lo que queremos en lugar de tratar de escribir de una sola vez todo el c\u00f3digo para luego encontrarnos con errores que nos costar\u00e1 identificar.<\/p>\n<p>En el c\u00f3digo a continuaci\u00f3n se ha destacado con distintos colores los bloques principales que configuran el patr\u00f3n interactivo:<\/p>\n<figure id=\"attachment_186\" aria-describedby=\"caption-attachment-186\" style=\"width: 640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-186 size-large\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_076-797x1024.jpg\" alt=\"\" width=\"640\" height=\"822\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_076-797x1024.jpg 797w, \/wp-content\/uploads\/2022\/10\/PID_00290094_076-233x300.jpg 233w, \/wp-content\/uploads\/2022\/10\/PID_00290094_076-768x987.jpg 768w, \/wp-content\/uploads\/2022\/10\/PID_00290094_076.jpg 800w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-186\" class=\"wp-caption-text\">Figura 77. C\u00f3digo del patr\u00f3n interactivo<br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n<p>En color rojo tenemos el c\u00f3digo que mediante bucles <span class=\"courier\">for<\/span> anidados crea la estructura del patr\u00f3n. Creamos un bucle para las columnas y otro para las filas, ambas desplaz\u00e1ndose por el <em>canvas<\/em> a raz\u00f3n de una separaci\u00f3n de 50 px que hemos definido con la variable <span class=\"courier\">set<\/span>.<\/p>\n<p>En color naranja, el c\u00e1lculo que se hace del tama\u00f1o de las figuras dependiendo de su distancia al rat\u00f3n. Para ello, primero utilizamos el m\u00e9todo <span class=\"courier\">dist()<\/span> para calcular la distancia entre las coordenadas <em>x<\/em> e <em>y<\/em> del rat\u00f3n (<span class=\"courier\">mouseX<\/span> y <span class=\"courier\">mouseY<\/span>) y cada punto de nuestro patr\u00f3n (<span class=\"courier\">i<\/span> y <span class=\"courier\">j<\/span>). A continuaci\u00f3n, utilizamos el m\u00e9todo <span class=\"courier\">map()<\/span> para acotar esta distancia a un rango (entre 0 y <span class=\"courier\">maxSize<\/span>) m\u00e1s \u00fatil a la hora de dibujar las figuras.<\/p>\n<p>En verde tenemos el c\u00f3digo responsable de cambiar el dibujo de c\u00edrculos por cuadrados. Se utiliza una variable booleana <span class=\"courier\">drawCircle<\/span>, que invierte su valor al pulsar una tecla (cuando <span class=\"courier\">keyPressed()<\/span> se invoca) y mediante una estructura condicional dentro de los bucles anidados se comprueba si dibujamos c\u00edrculos o cuadrados.<\/p>\n<p>Por \u00faltimo, en color morado tenemos el c\u00f3digo que cambia el color de fondo de manera aleatoria. Para ello, en lugar de utilizar tres variables distintas para cambiar aleatoriamente los valores RGB del color, hemos utilizado un tipo de variable especial que almacena informaci\u00f3n de color y que es propia de P5: <a href=\"https:\/\/p5js.org\/es\/reference\/#\/p5\/color\" target=\"_blank\" rel=\"noopener\">color<\/a>. La declaramos al principio del c\u00f3digo como <span class=\"courier\">bgColor<\/span>, en el <span class=\"courier\">setup()<\/span> le damos un valor inicial y cada vez que pulsemos una tecla cambiamos su valor aleatoriamente utilizando <span class=\"courier\">random()<\/span>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pongamos ahora en pr\u00e1ctica todo lo que hemos aprendido hasta el momento e integremos el uso de variables, funciones, bucles , aleatoriedad, estructuras condicionales e interacci\u00f3n en un mismo sketch. Veamos algunos de los posibles resultados de nuestro c\u00f3digo: Nuestros programas empiezan a tener un nivel de complejidad que hacen aconsejable que a la hora [&hellip;]<\/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\/420"}],"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=420"}],"version-history":[{"count":2,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/420\/revisions"}],"predecessor-version":[{"id":774,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/420\/revisions\/774"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}