{"id":2018,"date":"2019-07-10T18:53:38","date_gmt":"2019-07-10T16:53:38","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=2018"},"modified":"2019-09-02T17:57:12","modified_gmt":"2019-09-02T15:57:12","slug":"5-2-funciones","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/5-2-funciones\/","title":{"rendered":"5.2. Funciones"},"content":{"rendered":"

Las funciones<\/strong> nos permiten reaprovechar el c\u00f3digo que escribimos. A menudo nos encontraremos escribiendo un c\u00f3digo que habr\u00e1 que usar en diferentes lugares del mismo programa. Tener el c\u00f3digo \u00abencapsulado\u00bb dentro de una funci\u00f3n nos permitir\u00e1 volverlo a usar sin tenerlo que escribir de nuevo. Pero no solo en el programa que estamos haciendo nos ser\u00e1 \u00fatil, lo puede ser tambi\u00e9n en otros programas. Poner este c\u00f3digo en una funci\u00f3n nos permitir\u00e1 copiarlo y pegarlo para usarlo r\u00e1pidamente en otro programa que hagamos.<\/p>\n

Fij\u00e9monos, por ejemplo, en la instrucci\u00f3n\/funci\u00f3n\u00a0stroke()<\/span>. Cuando la llamamos, ponemos un valor entre los par\u00e9ntesis y la funci\u00f3n hace unas determinadas operaciones para que las l\u00edneas que pintamos a continuaci\u00f3n tengan un determinado color. Nosotros podemos definir nuestras propias funciones que hagan las operaciones que nosotros queramos.<\/p>\n

Pongamos un peque\u00f1o ejemplo.<\/p>\n

Hagamos un dibujo de un cuadrado con degradado, similar al que hemos visto en el apartado \u00ab2. Reto 2. Aut\u00f3matas\u00bb. Las instrucciones que har\u00edamos ser\u00edan estas:<\/p>\n

for (var i=0; i<=255; i=i+4 ) {\r\n  stroke(i);\r\n  line(xIni+i\/4,yIni,xIni+i\/4,yIni+64);\r\n}<\/pre>\n
Con esto haremos un cuadrado que es una cuarta parte m\u00e1s peque\u00f1o que el que ten\u00edamos antes. Ahora supongamos que queremos hacer esto:<\/p>\n
\"\"<\/p>\n
Es decir, dibujar 16 cuadros con degradado. Ahora mismo la \u00fanica soluci\u00f3n que se nos ocurre es escribir 16 veces el for<\/span><\/strong> con los cambios correspondientes a xIni<\/span> e yIni<\/span>. Sin embargo, hay una manera m\u00e1s f\u00e1cil de hacerlo: creando una funci\u00f3n:<\/p>\n
function cuadradoDegradado (x,y){\r\n  for (var i=0; i<=255; i=i+4 ) {\r\n\u00a0\u00a0\u00a0\u00a0 stroke(i);\r\n\u00a0\u00a0\u00a0\u00a0 line(x+i\/4,y,x+i\/4,y+64);\r\n  }\r\n}<\/pre>\n
Ahora, si en nuestro programa escribimos:<\/p>\n
cuadradoDegradado(50,50);<\/pre>\n
Lo que estaremos haciendo es ejecutar la repetici\u00f3n, pero haciendo que las variables x<\/strong>\u00a0e y<\/strong>\u00a0tomen los valores de 50 y 50. Probadlo, este es el programa completo:<\/p>\n
function setup() {\r\n createCanvas(480, 480);\r\n}\r\n\r\nfunction draw() {\r\n cuadradoDegradado(50,50);\r\n}\r\n\r\nfunction cuadradoDegradado(x,y){\r\n for (var i=0; i<=255; i=i+4 ) {\r\n\u00a0\u00a0\u00a0\u00a0 stroke(i);\r\n\u00a0\u00a0\u00a0\u00a0 line(x+i\/4,y,x+i\/4,y+64);\r\n }\r\n}<\/pre>\n
Por lo tanto, para hacer 16 repeticiones en vez de hacer 16 instrucciones for<\/span><\/strong>, llamaremos a la funci\u00f3n cuadradoDegradado()<\/span> 16 veces.<\/p>\n
El programa quedar\u00eda de la siguiente manera:<\/p>\n
function setup() {\r\n createCanvas(480, 480);\r\n}\r\n\r\nfunction draw() {\r\n background(204);\r\n cuadradoDegradado(50,50);\r\n cuadradoDegradado(50,150);\r\n cuadradoDegradado(50,250);\r\n cuadradoDegradado(50,350);\r\n cuadradoDegradado(150,50);\r\n cuadradoDegradado(150,150);\r\n cuadradoDegradado(150,250);\r\n cuadradoDegradado(150,350);\r\n cuadradoDegradado(250,50);\r\n cuadradoDegradado(250,150);\r\n cuadradoDegradado(250,250);\r\n cuadradoDegradado(250,350);\r\n cuadradoDegradado(350,50);\r\n cuadradoDegradado(350,150);\r\n cuadradoDegradado(350,250);\r\n cuadradoDegradado(350,350);\r\n}\r\n\r\nfunction cuadradoDegradado(xIni,yIni){\r\n for (var i=0; i<=255; i=i+4 ) {\r\n\u00a0\u00a0\u00a0\u00a0 stroke(i);\r\n\u00a0\u00a0\u00a0\u00a0 line(xIni+i\/4,yIni,xIni+i\/4,yIni+64);\r\n }\r\n}<\/pre>\n
Fijaos bien en este programa. Es f\u00e1cil ver que hay un mont\u00f3n de repeticiones. Tratemos de simplificar.<\/p>\n
function draw() {\r\n background(204);\r\n for (var i = 50; i <= 350; i = i +100){\r\n\u00a0\u00a0\u00a0 cuadradoDegradado(i,50);\r\n\u00a0\u00a0\u00a0 cuadradoDegradado(i,150);\r\n\u00a0\u00a0\u00a0 cuadradoDegradado(i,250);\r\n\u00a0\u00a0\u00a0 cuadradoDegradado(i,350);\r\n }\r\n}<\/pre>\n
Esto tambi\u00e9n funcionar\u00e1, y hemos simplificado bastante el programa. Todav\u00eda se podr\u00eda simplificar algo m\u00e1s. Pero ahora lo podemos dejar aqu\u00ed.<\/p>\n
Vamos al libro. Las funciones est\u00e1n explicadas en el cap\u00edtulo 9. Ah\u00ed tenemos unos cuantos ejemplos. En el ejemplo 9-1 se usan algunas instrucciones que a\u00fan no hemos usado:<\/p>\n