{"id":950,"date":"2019-07-07T20:57:57","date_gmt":"2019-07-07T18:57:57","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=950"},"modified":"2019-08-18T13:28:07","modified_gmt":"2019-08-18T11:28:07","slug":"5-3-arrays","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/5-3-arrays\/","title":{"rendered":"5.3. <em>Arrays<\/em>"},"content":{"rendered":"<p>Ja hem fet alguna cosa amb els <em>arrays<\/em>, aix\u00ed que m\u00e9s o menys ja teniu una idea de qu\u00e8 s\u00f3n.<\/p>\n<div class=\"featured featured-blue\"><p>Podem definir un <strong><em>array<\/em><\/strong> com una variable que ens permet guardar molts valors.<\/p>\n<\/div>\n<p>Tots del mateix tipus, aix\u00f2 s\u00ed. El fet de fer servir <em>arrays<\/em> ens permetr\u00e0 treballar amb diversos objectes alhora i modificar-los tots amb facilitat.<\/p>\n<p>El llibre comen\u00e7a amb dos exemples: l\u201911-1 i l\u201911-2 que s\u00f3n una c\u00f2pia de l\u2019exemple 8-3 per\u00f2 creant dues figures iguals a l\u201911-1 i cinc a l\u201911-2. En aquest darrer exemple, ja es veu que comencem a tenir massa variables, per, al final, fer gaireb\u00e9 el mateix amb cadascuna d\u2019aquestes. La soluci\u00f3 passa per fer servir un <em>array<\/em> de cinc posicions en comptes de cinc variables.<\/p>\n<p>I aix\u00f2 \u00e9s el que es fa en l\u2019exemple 11-3.<\/p>\n<p>En la p\u00e0gina 168 del llibre, se\u2019ns explica qu\u00e8 \u00e9s un <em>array<\/em> i posa en relleu tres conceptes:<\/p>\n<ul>\n<li>El nom de l\u2019<em>array<\/em>, que \u00e9s el nom de la variable que emmagatzema l\u2019<em>array<\/em>.<\/li>\n<li>El nombre d\u2019elements. Un <em>array<\/em> est\u00e0 format per un conjunt d\u2019elements. Per a referir-nos a cada element, farem servir el n\u00famero de la posici\u00f3 on est\u00e0.<\/li>\n<li>El valor de cada element.<\/li>\n<\/ul>\n<p>A l\u2019hora de definir un <em>array<\/em>, el que farem \u00e9s declarar una variable a qu\u00e8 li \u00abassignarem\u00bb un <em>array<\/em> buit o un <em>array<\/em> amb un contingut, com per exemple:<\/p>\n<pre>var x = [];\r\nvar y = [\"cotxe\", 40, \"moto\", 25, \"cami\u00f3\", 60];\r\nvar z = [14,40,33,25,54,60];<\/pre>\n<p>A partir d\u2019aqu\u00ed, si ens cal guardar un valor a l\u2019<em>array<\/em> farem aix\u00f2:<\/p>\n<pre>x[posici\u00f3_a_modificar] = valor_a_guardar;<\/pre>\n<p>La <span style=\"font-family: Courier, Arial;\">posici\u00f3_a_modificar<\/span> sempre ser\u00e0 un nombre enter positiu i sempre comen\u00e7arem per 0.<\/p>\n<p>Per a consultar un valor que tinguem emmagatzemat a l\u2019<em>array<\/em>, ho farem d\u2019aquesta manera:<\/p>\n<pre>console.log(x[posici\u00f3_a_consultar]);<\/pre>\n<p>Tamb\u00e9 podem consultar quants elements t\u00e9 l\u2019<em>array<\/em>:<\/p>\n<pre>console.log(x.length);<\/pre>\n<p>Al final estem substituint <strong>x<\/strong>0, <strong>x<\/strong>1, <strong>x<\/strong>2, <strong>x<\/strong>3 per <strong>x<\/strong>[0], <strong>x<\/strong>[1], <strong>x<\/strong>[2], <strong>x<\/strong>[3] i ens podem preguntar qu\u00e8 guanyem amb aix\u00f2. Amb un exemple es veu molt f\u00e0cil. Escrivim a la consola els valors de totes aquestes variables:<\/p>\n<pre>console.log(x0);\r\nconsole.log(x1);\r\nconsole.log(x2);\r\nconsole.log(x3);\r\nfor (var i = 0; i &lt;= 3; i++) {\r\n console.log(x[i]);\r\n}<\/pre>\n<p>Potser amb 4 variables no es veu una gran difer\u00e8ncia, per\u00f2 l\u2019exemple 11-3 en fa servir 3000!<\/p>\n<p>Els exemples 11-4, 11-5 i 11-6 s\u00f3n petits codis que ens permeten veure, a la pr\u00e0ctica, tot aix\u00f2 que hem anat veient aqu\u00ed.<\/p>\n<p>Fem una ullada a l\u2019exemple 11-7. El que fa es crear una variable de tipus <em>array<\/em> on emmagatzema, dins el <span style=\"font-family: Courier, Arial;\">setup()<\/span>, tants valors aleatoris (entre 0 i 255) com la mida horitzontal del <em>canvas<\/em> (<span style=\"font-family: Courier, Arial;\">width<\/span>).<\/p>\n<p>Despr\u00e9s al <span style=\"font-family: Courier, Arial;\">draw()<\/span> dibuixa <span style=\"font-family: Courier, Arial;\">width<\/span> l\u00ednies verticals, del color emmagatzemat a la posici\u00f3 de l\u2019<em>array<\/em> que toca. L\u2019exercici no \u00e9s gens complicat, aix\u00ed que l\u2019hem modificat una mica per a donar-li m\u00e9s inter\u00e8s:<\/p>\n<pre>var gray = [];\r\nfunction setup() {\r\n createCanvas(240, 120);\r\n for (var i = 0; i &lt; width; i++) {\r\n  gray[i] = random(0, 255);\r\n }\r\n}\r\nfunction draw() {\r\n background(204);\r\n for (var i = 0; i &lt; gray.length; i++) {\r\n  stroke(gray[i]);\r\n  line(i, 0, i, height);\r\n}\r\n stroke(0);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ <strong>Extra<\/strong>\r\n line(mouseX,0,mouseX,height); \/\/ <strong>Extra<\/strong>\r\n}<\/pre>\n<p>Hem afegit dues l\u00ednies extres que fan que dibuixi una l\u00ednia negra a la posici\u00f3 on hi ha el ratol\u00ed. Com que guardem a l\u2019<em>array<\/em> el color original de les l\u00ednies, un cop el ratol\u00ed canvia de lloc, la l\u00ednia recupera el color que ja tenia.<\/p>\n<p>L\u2019exemple 11-8 \u00e9s for\u00e7a interessant, per\u00f2 alhora una mica complicat d\u2019entendre. Per a poder entendre millor el que fa, hem creat un exemple semblant, per\u00f2 m\u00e9s senzill.<\/p>\n<p>El que fa aquest exemple \u00e9s dibuixar un cercle cada cop que fem un clic amb el ratol\u00ed. No t\u00e9 la funci\u00f3 <span style=\"font-family: Courier, Arial;\">draw()<\/span> perqu\u00e8 nom\u00e9s ho dibuixa quan fem un clic. Per tant, el que s\u00ed que tenim \u00e9s la funci\u00f3 <span style=\"font-family: Courier, Arial;\">mouseClicked()<\/span>. El que passa \u00e9s que hem limitat a 10 el nombre de cercles que podrem tenir a la pantalla. Quan ja tenim 10 cercles a la pantalla i fem un clic amb el ratol\u00ed, s\u2019esborra el m\u00e9s antic abans de pintar-ne un de nou. Aix\u00ed, podem anar pintant cercles, per\u00f2 sempre en tindrem 10.<\/p>\n<p>La complicaci\u00f3 d\u2019aquest exemple rau en l\u2019esborrat. No tenim una manera d\u2019esborrar un element sense esborrar-ho tot (esborrar-ho tot sempre \u00e9s pintar de nou el fons (<em>background<\/em>)). Per tant, esborrar un element implicar\u00e0 esborrar-ho tot i pintar tots els elements menys el que vol\u00edem esborrar.<\/p>\n<p>Tenim tres variables globals, dues, <span style=\"font-family: Courier, Arial;\">circX<\/span> i <span style=\"font-family: Courier, Arial;\">circY<\/span> ens guarden les posicions <strong>x<\/strong> i <strong>y <\/strong>de tots els cercles dibuixats. A cada cercle que dibuixem li assignarem una posici\u00f3 als <em>arrays<\/em>. I farem servir la variable <span style=\"font-family: Courier, Arial;\">pos<\/span> per a saber a quina posici\u00f3 dels <em>arrays<\/em> guardarem el proper cercle que dibuixarem. Tamb\u00e9 ens servir\u00e0 per a decidir quin \u00e9s el cercle que cal esborrar.<\/p>\n<p>Per a esborrar el cercle que toca, fem servir la funci\u00f3 <span style=\"font-family: Courier, Arial;\">esborrar<\/span> que, de fet, el que fa \u00e9s esborrar tot el <em>canvas<\/em> i tornar a pintar tots els cercles menys el que toca esborrar.<\/p>\n<p>Amb un senzill exemple ho veurem m\u00e9s clar. Suposem que ja tenim els 10 cercles pintats i que portem una estona fent clic amb el ratol\u00ed. Suposem que a la variable <span style=\"font-family: Courier, Arial;\">pos<\/span> hi ha un 5. Qu\u00e8 farem? Doncs esborrarem el<em> canvas<\/em> i pintarem tots els cercles menys el que est\u00e0 a la posici\u00f3 5. Despr\u00e9s pintarem un nou cercle i guardarem la seva posici\u00f3 al <em>canvas<\/em> (els valors d\u2019<strong>x<\/strong> i <strong>y<\/strong>) a la posici\u00f3 <span style=\"font-family: Courier, Arial;\">pos<\/span> dels <em>arrays<\/em>. Finalment, incrementarem el valor de la variable <span style=\"font-family: Courier, Arial;\">pos<\/span> per tal que el proper cercle que pintem es guardi una posici\u00f3 m\u00e9s enll\u00e0 i no esborrem el que acabem de pintar.<\/p>\n<pre>var circX = []; \/\/ Variables on guardarem les posicions\r\nvar circY = []; \/\/ x i y dels cercles que dibuixem.\r\nvar pos = 0;\u00a0\u00a0 \/\/ Cercle que estem dibuixant.\r\nvar mx = 10;\u00a0\u00a0 \/\/ Nombre m\u00e0xim de cercles\r\n\r\nfunction setup() {\r\n  createCanvas(400, 400); \/\/ Creem el <em>canvas<\/em>\r\n  background(220);\u00a0\u00a0 \/\/ Li posem un fons\r\n  noStroke();\u00a0\u00a0\u00a0\u00a0 \/\/ No volem filet als cercles\r\n  for (var i = 0; i &lt; 10; i++){\r\n    circX[i] = -100;\r\n    circY[i] = -100;\r\n} \r\n  fill(0);\r\n}\r\n\r\nfunction mouseClicked() { \/\/ Quan es fa clic amb el ratol\u00ed\r\n esborrar(pos, mx);\u00a0\u00a0     \/\/ Esborrem el cercle que toca\r\n circX[pos] = mouseX;\u00a0\u00a0   \/\/ Guardem la posici\u00f3 del ratol\u00ed\r\n circY[pos] = mouseY;\r\n ellipse(circX[pos],circY[pos],50,50); \/\/ Dibuixem el nou cercle\r\n pos++;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0            \/\/ Incrementem la variable pos.\r\n if (pos === mx){\u00a0\u00a0\u00a0\u00a0      \/\/ Si pos val mx li donem el valor de\r\n  pos = 0;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0           \/\/ 0. Aix\u00ed controlem el nombre de\r\n }\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0               \/\/ cercles.\r\n}\r\n\r\nfunction esborrar(element, mx) {\r\n  background(220);\r\n  for (var i = 0; i &lt; element; i++){ \/\/ Pintem de 0 a pos\r\n    ellipse(circX[i],circY[i],50,50);\r\n}\r\n  for (i = element+1; i &lt; mx; i++){ \/\/ Pintem de pos fins al final\r\n    ellipse(circX[i],circY[i],50,50);\r\n }\r\n}<\/pre>\n<p>Ara podem mirar l\u2019exemple 11-8. Aquest exemple fa servir dos <em>arrays<\/em> (igual que hem fet amb el nostre exemple) per a guardar la informaci\u00f3 de les posicions per on ha passat el cercle i, aix\u00ed, poder fer un rastre. Com que el cercle es dibuixa seguint el ratol\u00ed, aqu\u00ed s\u00ed que es fa tot dins de la funci\u00f3 <span style=\"font-family: Courier, Arial;\">draw()<\/span>.<\/p>\n<p>Fem una ullada a l\u2019exemple:<\/p>\n<pre>var num = 60; \/\/ Mida del rastre. Si l\u2019incrementem, el rastre ser\u00e0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0        \/\/ m\u00e9s llarg\r\nvar x = [];\r\nvar y = [];\r\n\r\nfunction setup() {\r\n  createCanvas(240, 120);\r\n  noStroke();\r\n\u00a0\u00a0\u00a0\u00a0       \/\/ Inicialitzem les dues taules posant 0 a totes\r\n\u00a0\u00a0\u00a0        \/\/ les posicions. \u00c9s convenient posar sempre un valor\r\n\u00a0\u00a0\u00a0\u00a0       \/\/ inicial a totes les variables que fem servir.\r\n  for (var i = 0; i &lt; num; i++) {\r\n    x[i] = 0;\r\n    y[i] = 0;\r\n }\r\n}\r\nfunction draw() {\r\n  background(0); \/\/ Esborrem la pantalla per a tornar a dibuixar-ho\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0           \/\/ tot de nou\r\n      \/\/ Mou tots els valors de les variables a una posici\u00f3 m\u00e9s alta\r\n      \/\/ Aix\u00ed mant\u00e9 l\u2019hist\u00f2ric dels llocs pels quals ha passat el\r\n      \/\/ cercle.\r\n  for (var i = num-1; i &gt; 0; i--) {\r\n    x[i] = x[i-1];\r\n    y[i] = y[i-1];\r\n}\r\n\/\/ Guarda la posici\u00f3 actual del ratol\u00ed al primer element de les\r\n\/\/ dues taules\r\nx[0] = mouseX; \/\/ Set the first element\r\ny[0] = mouseY; \/\/ Set the first element\r\n\/\/ Dibuixa tots els cercles, tant el primer com els que fan el\r\n\/\/ rastre. Va fent el color del cercle m\u00e9s fosc a mesura que\r\n\/\/ la posici\u00f3 \u00e9s m\u00e9s gran.\r\n  for (var i = 0; i &lt; num; i++) {\r\n    fill(i * 4);\r\n    ellipse(x[i], y[i], 40, 40);\r\n }\r\n}<\/pre>\n<p>La p\u00e0gina 174 del llibre fa una explicaci\u00f3 de com es van movent els valors per a poder fer el rastre.<\/p>\n<p>Abans d\u2019acabar, el llibre posa dos exemples m\u00e9s, el 11-9 i l\u201911-10, per\u00f2 fa servir objectes i \u00e9s un tema que, ara mateix, nom\u00e9s veurem una mica per sobre, aix\u00ed que no els farem servir a l\u2019assignatura.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ja hem fet alguna cosa amb els arrays, aix\u00ed que m\u00e9s o menys ja teniu una idea de qu\u00e8 s\u00f3n. Tots del mateix tipus, aix\u00f2 s\u00ed. El fet de fer servir arrays ens permetr\u00e0 treballar amb diversos objectes alhora i modificar-los tots amb facilitat. El llibre comen\u00e7a amb dos exemples: l\u201911-1 i l\u201911-2 que s\u00f3n [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/950"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/comments?post=950"}],"version-history":[{"count":20,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/950\/revisions"}],"predecessor-version":[{"id":4080,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/950\/revisions\/4080"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/media?parent=950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}