{"id":356,"date":"2022-10-04T13:55:13","date_gmt":"2022-10-04T11:55:13","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=356"},"modified":"2022-10-07T12:52:05","modified_gmt":"2022-10-07T10:52:05","slug":"2-7-orden-de-ejecucion-y-de-dibujo","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/2-7-orden-de-ejecucion-y-de-dibujo\/","title":{"rendered":"2.7. Orden de ejecuci\u00f3n y de dibujo"},"content":{"rendered":"<p>Cuando vimos la estructura de un programa de P5.js con sus funciones <span class=\"courier\">setup()<\/span> y <span class=\"courier\">draw()<\/span> ya comentamos que la primera se ejecuta una \u00fanica vez al principio del programa y que la segunda se ejecuta continuamente en bucle despu\u00e9s.<\/p>\n<p>Es importante tambi\u00e9n recalcar que el orden en el que se ejecutan las instrucciones dentro de cada funci\u00f3n es de arriba a abajo seg\u00fan las escribimos, lo cual afectar\u00e1 tambi\u00e9n al resultado visual que obtendremos. Ve\u00e1moslo con un par de ejemplos:<\/p>\n<figure id=\"attachment_68\" aria-describedby=\"caption-attachment-68\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-68\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_017.jpg\" alt=\"\" width=\"800\" height=\"252\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_017.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_017-300x95.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_017-768x242.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-68\" class=\"wp-caption-text\">Figura 17. Orden de dibujo<br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n<p>Aqu\u00ed escribimos primero el c\u00f3digo del rect\u00e1ngulo y despu\u00e9s, el de la elipse. Por lo tanto, primero se dibuja el rect\u00e1ngulo y tras este la elipse, que queda por encima.<\/p>\n<figure id=\"attachment_70\" aria-describedby=\"caption-attachment-70\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-70\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_018.jpg\" alt=\"\" width=\"800\" height=\"271\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_018.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_018-300x102.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_018-768x260.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-70\" class=\"wp-caption-text\">Figura 18. Orden de dibujo<br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n<p>En este segundo ejemplo invertimos el orden: escribimos primero el c\u00f3digo de la elipse y a continuaci\u00f3n, el del rect\u00e1ngulo. Ahora es el rect\u00e1ngulo el que queda por encima.<\/p>\n<p>Para aclararnos, podemos pensar en un <em>sketch<\/em> de P5.js como en una pintura al \u00f3leo: seg\u00fan vamos a\u00f1adiendo l\u00edneas de c\u00f3digo vamos a\u00f1adiendo elementos que se superponen a los anteriores.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando vimos la estructura de un programa de P5.js con sus funciones y ya comentamos que la primera se ejecuta una \u00fanica vez al principio del programa y que la segunda se ejecuta continuamente en bucle despu\u00e9s. Es importante tambi\u00e9n recalcar que el orden en el que se ejecutan las instrucciones dentro de cada funci\u00f3n [&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\/356"}],"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=356"}],"version-history":[{"count":2,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/356\/revisions"}],"predecessor-version":[{"id":557,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/356\/revisions\/557"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}