{"id":944,"date":"2019-07-07T20:42:38","date_gmt":"2019-07-07T18:42:38","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=944"},"modified":"2019-09-02T17:56:27","modified_gmt":"2019-09-02T15:56:27","slug":"5-2-funcions","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/5-2-funcions\/","title":{"rendered":"5.2. Funcions"},"content":{"rendered":"

Les funcions<\/strong> ens permeten reaprofitar el codi que escrivim. Sovint, ens trobarem escrivint un codi que caldr\u00e0 fer servir en diferents llocs del mateix programa. Tenir el codi \u00abencapsulat\u00bb dins d\u2019una funci\u00f3 ens permetr\u00e0 tornar-lo a fer servir sense haver-lo d\u2019escriure de nou. Per\u00f2 no solament ens ser\u00e0 \u00fatil en el programa que estem fent, tamb\u00e9 ho pot ser en altres programes. Posar aquest codi en una funci\u00f3 ens permetr\u00e0 copiar-lo i enganxar-lo per a fer-lo servir r\u00e0pidament en un altre programa que fem.<\/p>\n

Fixem-nos, per exemple, en la instrucci\u00f3\/funci\u00f3 stroke()<\/span>. Quan la cridem, posem un valor entre els par\u00e8ntesis i la funci\u00f3 fa unes determinades operacions per tal que les l\u00ednies que pintem a continuaci\u00f3 tinguin un determinat color. Nosaltres podem definir les nostres pr\u00f2pies funcions que facin les operacions que nosaltres vulguem.<\/p>\n

Fem un petit exemple.<\/p>\n

Fem un dibuix d\u2019un quadrat amb degradat, similar al que hem vist en l\u2019apartat \u00ab2. Repte 2. Aut\u00f2mats\u00bb. Les instruccions que donar\u00edem serien aquestes:<\/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
Amb aix\u00f2 farem un quadrat que \u00e9s una quarta part m\u00e9s petit que el que ten\u00edem abans. Ara suposem que volem fer aix\u00f2:<\/p>\n
\"\"<\/p>\n
\u00c9s a dir, dibuixar 16 quadres amb degradat. Ara mateix l\u2019\u00fanica soluci\u00f3 que se\u2019ns acudeix \u00e9s escriure 16 cops el for<\/span><\/strong> amb els canvis corresponents a xIni<\/span> i yIni<\/span>. Per\u00f2 hi ha una manera m\u00e9s f\u00e0cil de fer-ho, creant una funci\u00f3:<\/p>\n
function quadratDegradat(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
Ara, si al nostre programa escrivim:<\/p>\n
quadratDegradat(50,50);<\/pre>\n
El que estarem fent \u00e9s executar la repetici\u00f3, per\u00f2 fent que les variables x<\/strong> i y<\/strong> prenguin els valors de 50 i 50. Proveu-ho, aquest \u00e9s el programa complet:<\/p>\n
function setup() {\r\n createCanvas(480, 480);\r\n}\r\n\r\nfunction draw() {\r\n quadratDegradat(50,50);\r\n}\r\n\r\nfunction quadratDegradat(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
Per tant, per a fer 16 repeticions en comptes de fer 16 instruccions for<\/strong><\/span>, cridarem a la funci\u00f3 quadratDegradat()<\/span> 16 vegades.<\/p>\n
El programa quedaria de la manera seg\u00fcent:<\/p>\n
function setup() {\r\n createCanvas(480, 480);\r\n}\r\n\r\nfunction draw() {\r\n background(204);\r\n quadratDegradat(50,50);\r\n quadratDegradat(50,150);\r\n quadratDegradat(50,250);\r\n quadratDegradat(50,350);\r\n quadratDegradat(150,50);\r\n quadratDegradat(150,150);\r\n quadratDegradat(150,250);\r\n quadratDegradat(150,350);\r\n quadratDegradat(250,50);\r\n quadratDegradat(250,150);\r\n quadratDegradat(250,250);\r\n quadratDegradat(250,350);\r\n quadratDegradat(350,50);\r\n quadratDegradat(350,150);\r\n quadratDegradat(350,250);\r\n quadratDegradat(350,350);\r\n}\r\n\r\nfunction quadratDegradat(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
Fixeu-vos b\u00e9 en aquest programa. \u00c9s f\u00e0cil de veure que hi ha un munt de repeticions. Intentem simplificar-ho.<\/p>\n
function draw() {\r\n background(204);\r\n for (var i = 50; i <= 350; i = i +100){\r\n\u00a0\u00a0\u00a0 quadratDegradat(i,50);\r\n\u00a0\u00a0\u00a0 quadratDegradat(i,150);\r\n\u00a0\u00a0\u00a0 quadratDegradat(i,250);\r\n\u00a0\u00a0\u00a0 quadratDegradat(i,350);\r\n }\r\n}<\/pre>\n
Aix\u00f2 tamb\u00e9 funcionar\u00e0 i hem simplificat for\u00e7a el programa. Encara es podria simplificar una mica m\u00e9s. Per\u00f2 ara ho podem deixar aqu\u00ed.<\/p>\n
Passem al llibre. Les funcions estan explicades en el cap\u00edtol 9. All\u00e0 hi tenim uns quants exemples. En l\u2019exemple 9-1, es fan servir algunes instruccions que encara no hem fet servir:<\/p>\n