{"id":379,"date":"2022-10-04T15:14:54","date_gmt":"2022-10-04T13:14:54","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=379"},"modified":"2022-11-18T15:08:05","modified_gmt":"2022-11-18T13:08:05","slug":"3-7-funciones-con-parametros","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/3-7-funciones-con-parametros\/","title":{"rendered":"3.7. Funciones con par\u00e1metros"},"content":{"rendered":"<p>A\u00f1adir par\u00e1metros a nuestras funciones resulta sencillo. Como ejemplo, vamos a hacer una funci\u00f3n que nos permita cambiar nuestro estilo de dibujo en una \u00fanica l\u00ednea:<\/p>\n<pre>function changeStyle(par1, par2) {\r\n    \/\/ Aqu\u00ed podemos hacer uso de par1 y par2\r\n    strokeWeight(par1); \r\n    fill(par2);\r\n}<\/pre>\n<p>Dentro de los par\u00e9ntesis escribimos el nombre de los par\u00e1metros que queramos usar. En el ejemplo hemos usado <span class=\"courier\">par1<\/span> y <span class=\"courier\">par2<\/span>, pero pueden tener los nombres que queramos. Estos par\u00e1metros son los que podremos utilizar luego dentro del cuerpo de la funci\u00f3n para lo que necesitemos.<\/p>\n<p>A la hora de invocar la funci\u00f3n, \u00fanicamente hemos de pasarle los valores que queramos a los par\u00e1metros que hemos definido en la funci\u00f3n. En este caso, a <span class=\"courier\">par1<\/span> le damos el valor 10 y a <span class=\"courier\">par2<\/span> le damos el valor 255:<\/p>\n<pre>changeStyle(10, 255);\r\n\/\/ Equivalente a que escribi\u00e9ramos:\r\n\/\/ strokeWeight(10);\r\n\/\/ fill(255);<\/pre>\n<p>Nos ahorramos una l\u00ednea, que puede no parecer mucho, pero si es una operaci\u00f3n que hacemos m\u00faltiples veces a lo largo de nuestro c\u00f3digo, nos merecer\u00e1 la pena. Veamos c\u00f3mo podr\u00edamos aplicar las funciones con par\u00e1metros a nuestra funci\u00f3n <span class=\"courier\">eye()<\/span>:<\/p>\n<p><figure id=\"attachment_977\" aria-describedby=\"caption-attachment-977\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-977 size-full\" src=\"\/wp-content\/uploads\/2022\/11\/PID_00290094_143.jpg\" alt=\"\" width=\"800\" height=\"366\" srcset=\"\/wp-content\/uploads\/2022\/11\/PID_00290094_143.jpg 800w, \/wp-content\/uploads\/2022\/11\/PID_00290094_143-300x137.jpg 300w, \/wp-content\/uploads\/2022\/11\/PID_00290094_143-768x351.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-977\" class=\"wp-caption-text\">La funci\u00f3n <span class=\"courier\">eye()<\/span> con par\u00e1metros<br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>Ahora tenemos de nuevo la funcionalidad del dibujo del ojo encapsulada en la funci\u00f3n <span class=\"courier\">eye()<\/span>, pero adem\u00e1s, como tenemos par\u00e1metros que definen su tama\u00f1o, posici\u00f3n tanto en <em>x<\/em> como en <em>y<\/em>, as\u00ed como su color, podemos dibujar muchos ojos distintos sin tener que repetir las casi quince l\u00edneas de c\u00f3digo que necesitamos para dibujar un \u00fanico ojo:<\/p>\n<p><figure id=\"attachment_104\" aria-describedby=\"caption-attachment-104\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-104\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_035.jpg\" alt=\"\" width=\"800\" height=\"479\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_035.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_035-300x180.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_035-768x460.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-104\" class=\"wp-caption-text\">Figura 36. M\u00faltiples ojos con varias llamadas a <span class=\"courier\">eye()<\/span><br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>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>A\u00f1adir par\u00e1metros a nuestras funciones resulta sencillo. Como ejemplo, vamos a hacer una funci\u00f3n que nos permita cambiar nuestro estilo de dibujo en una \u00fanica l\u00ednea: function changeStyle(par1, par2) { \/\/ Aqu\u00ed podemos hacer uso de par1 y par2 strokeWeight(par1); fill(par2); } Dentro de los par\u00e9ntesis escribimos el nombre de los par\u00e1metros que queramos usar. [&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\/379"}],"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=379"}],"version-history":[{"count":5,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/379\/revisions"}],"predecessor-version":[{"id":986,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/379\/revisions\/986"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}