{"id":348,"date":"2022-10-04T12:23:55","date_gmt":"2022-10-04T10:23:55","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=348"},"modified":"2022-10-04T12:23:55","modified_gmt":"2022-10-04T10:23:55","slug":"2-3-estructura-de-un-programa-en-p5-js","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/2-3-estructura-de-un-programa-en-p5-js\/","title":{"rendered":"2.3. Estructura de un programa en P5.js"},"content":{"rendered":"<p>La estructura b\u00e1sica de un programa escrito en P5.js es la siguiente:<\/p>\n<pre>function setup() {\r\n  createCanvas(400, 400);\r\n}\r\n\r\nfunction draw() {\r\n  background(200);\r\n  ellipse(200, 200, 50, 50);\r\n}<\/pre>\n<p>Podemos observar que el c\u00f3digo est\u00e1 organizado en dos <strong>funciones<\/strong>: <span class=\"courier\">setup()<\/span> y <span class=\"courier\">draw()<\/span>. La funci\u00f3n <span class=\"courier\">setup()<\/span> se ejecuta una \u00fanica vez al iniciarse el programa. En esta escribiremos c\u00f3digo que se ocupe de establecer el estado inicial de nuestro programa, como por ejemplo definir el tama\u00f1o de nuestro <em>canvas<\/em> (el \u00e1rea donde crearemos nuestros dibujos).<\/p>\n<p>Por otro lado, todo el c\u00f3digo que realmente se ocupe de dibujar lo pondremos dentro de la funci\u00f3n <span class=\"courier\">draw()<\/span>. Dentro de esta dibujaremos nuestras formas, textos o im\u00e1genes. A diferencia de <span class=\"courier\">setup()<\/span>, la funci\u00f3n <span class=\"courier\">draw()<\/span> se ejecuta en bucle continuamente a no ser que le indiquemos lo contrario. Por defecto, se ejecuta a 60 FPS (<em>frames<\/em> por segundo).<\/p>\n<p>Dentro de las funciones <span class=\"courier\">setup()<\/span> y <span class=\"courier\">draw()<\/span> tenemos distintos <strong>m\u00e9todos<\/strong>, como <span class=\"courier\">createCanvas()<\/span>, <span class=\"courier\">background()<\/span> o <span class=\"courier\">ellipse()<\/span><em>. <\/em>Estos m\u00e9todos son propios de P5.js y dentro de sus par\u00e9ntesis reciben <strong>par\u00e1metros<\/strong> cuya finalidad depende de qu\u00e9 m\u00e9todo utilicemos.<\/p>\n<p>Habr\u00e9is podido observar la peculiar sintaxis que tiene nuestro c\u00f3digo, con par\u00e9ntesis, llaves o puntos y coma. En el caso de <span class=\"courier\">setup()<\/span> y <span class=\"courier\">draw()<\/span>, al ser funciones se definen con la palabra clave <span class=\"courier\">function<\/span> seguida del nombre de la funci\u00f3n, unos par\u00e9ntesis y unas llaves que encierran el contenido de la funci\u00f3n. M\u00e1s adelante, en la asignatura, veremos con detalle las funciones y crearemos las nuestras propias, pero de momento las utilizaremos tal como se muestran en el ejemplo.<\/p>\n<p>Con el fin de mantener nuestro c\u00f3digo ordenado, es importante que todo el c\u00f3digo que vaya dentro de una funci\u00f3n lo tabulemos (en programaci\u00f3n se usa mucho el anglicismo <em>indentar <\/em>en lugar de tabular) para que visualmente seamos capaces de distinguir de un vistazo d\u00f3nde empieza y d\u00f3nde acaba una funci\u00f3n.<\/p>\n<p>Tambi\u00e9n habr\u00e9is observado que cada una de las instrucciones dentro de las funciones terminan con un punto y coma. En Javascript, y por extensi\u00f3n tambi\u00e9n en P5.js, los puntos y coma son opcionales, pero es muy recomendable que los pongamos, ya que no hacerlo puede ser fuente de quebraderos de cabeza m\u00e1s adelante.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La estructura b\u00e1sica de un programa escrito en P5.js es la siguiente: function setup() { createCanvas(400, 400); } function draw() { background(200); ellipse(200, 200, 50, 50); } Podemos observar que el c\u00f3digo est\u00e1 organizado en dos funciones: y . La funci\u00f3n se ejecuta una \u00fanica vez al iniciarse el programa. En esta escribiremos c\u00f3digo que [&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\/348"}],"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=348"}],"version-history":[{"count":1,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/348\/revisions"}],"predecessor-version":[{"id":349,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/348\/revisions\/349"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}