{"id":392,"date":"2022-10-04T16:13:19","date_gmt":"2022-10-04T14:13:19","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=392"},"modified":"2022-10-04T16:13:19","modified_gmt":"2022-10-04T14:13:19","slug":"4-4-bucles-anidados","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/4-4-bucles-anidados\/","title":{"rendered":"4.4. Bucles anidados"},"content":{"rendered":"

Una t\u00e9cnica que se utiliza con mucha frecuencia en proyectos de computaci\u00f3n creativa es la de crear un bucle anidado dentro de otro para tener no una sucesi\u00f3n lineal de elementos como hemos hecho hasta ahora, sino un patr\u00f3n bidimensional, con elementos que se repiten tanto en el eje horizontal como en el vertical.<\/p>\n

\"\"
Figura 48. El patr\u00f3n que queremos dibujar
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

Un primer acercamiento para dibujar el patr\u00f3n de la figura 48 podr\u00eda ser crear un bucle para una fila (o columna) y repetirlo todas las veces que necesitemos:<\/p>\n

\/\/ Fila 0 (0px en Y)\r\nfor (let i = 0; i <= width; i += 50) {\r\n    circle(i, 0, 25);\r\n}\r\n\/\/ Fila 1 (50px en Y)\r\nfor (let i = 0; i <= width; i += 50) {\r\n    circle(i, 50, 25);\r\n}\r\n\/\/ ...y as\u00ed para el resto de las filas<\/pre>\n
Sin embargo, ya ser\u00e9is capaces de detectar que seguramente haya una manera m\u00e1s eficiente y flexible de realizar esta tarea. Es aqu\u00ed donde entran en juego los bucles anidados:<\/p>\n
\"\"
Figura 49. Bucles anidados
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Centr\u00e9monos en c\u00f3mo hemos construido el set de bucles anidados:<\/p>\n
let separation = 50;\r\nlet circleSize = separation * 0.5;\r\nfor (let i = 0; i <= width; i += separation) {\r\n\tfor (let j = 0; j <= height; j += separation) {\r\n\t\tcircle(i, j, circleSize);\r\n\t}\r\n}<\/pre>\n
Primero, hemos definido un par de variables que almacenan la distancia entre los c\u00edrculos y su tama\u00f1o. A continuaci\u00f3n, hemos creado un bucle de la misma manera que lo hicimos antes para dibujar una fila<\/strong> de c\u00edrculos: damos un valor de inicio, una condici\u00f3n que ese valor tiene que cumplir para ejecutar el cuerpo del bucle y una actualizaci\u00f3n del valor cada vez que el bucle se complete.<\/p>\n
La novedad estriba en que en el cuerpo del bucle hemos creado otro bucle<\/strong>. En este nuevo bucle creamos una nueva variable, una nueva condici\u00f3n y una nueva actualizaci\u00f3n, que nos ayudar\u00e1n a dibujar las columnas<\/strong> de nuestro patr\u00f3n.<\/p>\n
En el cuerpo de este segundo bucle es donde esta vez escribiremos el c\u00f3digo que dibujar\u00e1 los c\u00edrculos. Para definir las coordenadas x<\/em> e y<\/em> de los c\u00edrculos, utilizaremos los valores de las variables i<\/span> y j<\/span> que hemos definido en los respectivos bucles.<\/p>\n
De esta manera, entramos en el primer bucle e inmediatamente entramos en el segundo. En la primera iteraci\u00f3n i<\/span> vale 0 y j<\/span> tambi\u00e9n vale 0, por lo que nos dibujar\u00e1 el primer c\u00edrculo en las coordenadas (0, 0). A continuaci\u00f3n, actualiza el valor de j<\/span> y, como se cumple que j <= height<\/span>, entramos de nuevo en el segundo bucle. Ahora j<\/span> vale 50 e i<\/span> sigue valiendo 0, por lo que nos dibujar\u00e1 el segundo c\u00edrculo en las coordenadas (0, 50). La variable j<\/span> seguir\u00e1 increment\u00e1ndose hasta que j <= height<\/span> no se cumpla, momento en el que saldr\u00e1 del segundo bucle y pasar\u00e1 a la fase de actualizaci\u00f3n del primer bucle, incrementando i<\/span>, por lo que pasaremos a tener una i<\/span> con valor 50 y entraremos de nuevo en el segundo bucle con una j<\/span> valor 0. De esta manera, nos crear\u00e1 la segunda columna. Este proceso se repetir\u00e1 hasta rellenar todo el canvas<\/em>.<\/p>\n
De nuevo, podemos usar nuestra funci\u00f3n eye()<\/span> para dibujar los ojos dentro de los bucles anidados:<\/p>\n
\"\"
Figura 50. La funci\u00f3n eye()<\/span> dentro de bucles anidados
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
Una t\u00e9cnica que se utiliza con mucha frecuencia en proyectos de computaci\u00f3n creativa es la de crear un bucle anidado dentro de otro para tener no una sucesi\u00f3n lineal de elementos como hemos hecho hasta ahora, sino un patr\u00f3n bidimensional, con elementos que se repiten tanto en el eje horizontal como en el vertical. 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\/392"}],"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=392"}],"version-history":[{"count":1,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/392\/revisions"}],"predecessor-version":[{"id":393,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/392\/revisions\/393"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}