{"id":377,"date":"2022-10-04T15:07:14","date_gmt":"2022-10-04T13:07:14","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=377"},"modified":"2022-10-04T15:07:14","modified_gmt":"2022-10-04T13:07:14","slug":"3-6-funciones","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/3-6-funciones\/","title":{"rendered":"3.6. Funciones"},"content":{"rendered":"

Adem\u00e1s de las variables, otra herramienta que nos va a resultar de gran ayuda a la hora de organizar nuestro c\u00f3digo y hacerlo m\u00e1s modular son las funciones. Ya hemos utilizado unas cuantas funciones que P5 nos ofrece, como pueden ser createCanvas()<\/span>, ellipse()<\/span> o fill()<\/span>. A partir de ahora seremos capaces tambi\u00e9n de crear nuestras propias funciones cuando necesitemos realizar tareas m\u00e1s complejas que las que las funciones de P5 nos permiten realizar. Imaginemos, por ejemplo, que queremos dibujar un ojo como el de la siguiente imagen:<\/p>\n

\"\"
Figura 32. Un ojo dibujado en P5.js
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

Desafortunadamente, no existe una funci\u00f3n en P5 eye()<\/span> que nos permita dibujar directamente un ojo, pero s\u00ed que conocemos todas las funciones necesarias para dibujar todas sus partes.<\/p>\n

Ser\u00eda algo as\u00ed:<\/p>\n

\"\"
Figura 33. El c\u00f3digo que dibuja el ojo
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

Hemos definido unas variables para el tama\u00f1o y la posici\u00f3n del ojo, y luego hemos dibujado y rellenado de color las distintas elipses que definen su dibujo. Adem\u00e1s, los tama\u00f1os de las elipses son proporcionales al tama\u00f1o total del ojo, por lo que, si cambiamos la variable eyeSize<\/span>, todos los dem\u00e1s elementos variar\u00e1n en funci\u00f3n de esta.<\/p>\n

Es ahora cuando podemos recopilar todo este c\u00f3digo que nos dibuja el ojo y meterlo en nuestra propia funci\u00f3n:<\/p>\n

\"\"
Figura 34. La funci\u00f3n eye()<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>Al crear la funci\u00f3n eye()<\/span>, que vive en el mismo nivel que setup()<\/span> o draw()<\/span>, podemos simplemente invocarla<\/strong> desde dentro del draw()<\/span> y todo el c\u00f3digo que tenemos dentro de eye()<\/span> se ejecutar\u00e1 como si estuviese dentro del draw()<\/span> tambi\u00e9n. Cuando se ejecuta el c\u00f3digo y llega a la l\u00ednea 14, donde est\u00e1 eye()<\/span>, salta a la l\u00ednea 18 y ejecuta todo el c\u00f3digo de la funci\u00f3n hasta que llega al final de esta. Luego retoma por donde se qued\u00f3 (l\u00ednea 15) y contin\u00faa el programa.<\/p>\n

Como ya habr\u00e9is podido observar, para definir una funci\u00f3n seguimos la siguiente estructura:<\/p>\n

function miFuncion() {\r\n    \/\/ Aqu\u00ed dentro todo lo que hace mi funci\u00f3n\r\n}<\/pre>\n
Primero necesitamos la palabra clave function<\/span> para que P5 sepa que vamos a definir una funci\u00f3n; a continuaci\u00f3n, el nombre que le queramos dar a nuestra funci\u00f3n seguido de unos par\u00e9ntesis y unas llaves dentro de las cuales estar\u00e1 el cuerpo<\/strong> de nuestra funci\u00f3n, el c\u00f3digo que queremos que ejecute.<\/p>\n
Y para invocarla <\/strong>desde otra parte del c\u00f3digo \u00fanicamente necesitaremos escribir miFuncion()<\/span>.<\/p>\n
Este tipo de funciones nos pueden servir para organizar mejor nuestro c\u00f3digo y para encapsular<\/strong> funcionalidades complejas. Sin embargo, tal y como la hemos definido, nuestra funci\u00f3n eye()<\/span> no es demasiado \u00fatil. Siempre dibujar\u00e1 el ojo en la misma posici\u00f3n, con el mismo tama\u00f1o y los mismos colores. Nos ser\u00eda de gran utilidad poder crear una funci\u00f3n como ellipse()<\/span>, a la que le podemos dar una serie de par\u00e1metros<\/strong> que personalizan c\u00f3mo y d\u00f3nde ha de dibujarse la elipse. Para ello, en la siguiente secci\u00f3n veremos c\u00f3mo a\u00f1adir par\u00e1metros a nuestras propias funciones.<\/p>\n","protected":false},"excerpt":{"rendered":"
Adem\u00e1s de las variables, otra herramienta que nos va a resultar de gran ayuda a la hora de organizar nuestro c\u00f3digo y hacerlo m\u00e1s modular son las funciones. Ya hemos utilizado unas cuantas funciones que P5 nos ofrece, como pueden ser , o . A partir de ahora seremos capaces tambi\u00e9n de crear nuestras propias […]<\/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\/377"}],"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=377"}],"version-history":[{"count":1,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/377\/revisions"}],"predecessor-version":[{"id":378,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/377\/revisions\/378"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}