{"id":2023,"date":"2019-07-10T19:28:57","date_gmt":"2019-07-10T17:28:57","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=2023"},"modified":"2019-08-18T13:23:36","modified_gmt":"2019-08-18T11:23:36","slug":"5-3-arrays","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/5-3-arrays\/","title":{"rendered":"5.3. <em>Arrays<\/em>"},"content":{"rendered":"<p>Ya hemos hecho algo con <em>arrays<\/em>, as\u00ed que m\u00e1s o menos ya ten\u00e9is una idea de lo que son.<\/p>\n<div class=\"featured featured-blue\"><p>Podemos definir un <strong><em>array<\/em><\/strong> como una variable que nos permite guardar muchos valores.<\/p>\n<\/div>\n<p>Todos del mismo tipo, eso s\u00ed. El hecho de usar <em>arrays<\/em> nos permitir\u00e1 trabajar con varios objetos a la vez y modificarlos todos con facilidad.<\/p>\n<p>El libro empieza con dos ejemplos, el 11-1 y el 11-2, que son copia del ejemplo 8-3, pero creando dos figuras iguales al 1-11 y cinco al 11-2. En este \u00faltimo ejemplo ya se ve que empezamos a tener muchas variables, para, al final, hacer casi lo mismo con cada una de ellas. La soluci\u00f3n pasa por usar un <em>array<\/em> de cinco posiciones en vez de cinco variables.<\/p>\n<p>Y esto es lo que se hace en el ejemplo 11-3.<\/p>\n<p>En la p\u00e1gina 168 del libro se explica qu\u00e9 es un <em>array<\/em> y se ponen de relieve tres conceptos:<\/p>\n<ul>\n<li>El nombre del<em> array<\/em>, que es el nombre de la variable que almacena el <em>array.<\/em><\/li>\n<li>El n\u00famero de elemento. Un <em>array<\/em> est\u00e1 formado por un conjunto de elementos. Para referirnos a cada elemento, usaremos el n\u00famero de la posici\u00f3n donde se encuentra.<\/li>\n<li>El valor de cada elemento.<\/li>\n<\/ul>\n<p>A la hora de definir un <em>array<\/em> lo que haremos es declarar una variable a la que le \u00abasignaremos\u00bb un <em>array<\/em> vac\u00edo o un <em>array<\/em> con un contenido, como por ejemplo:<\/p>\n<pre>var x = [];\r\nvar y = [\"coche\", 40, \"moto\", 25, \"cami\u00f3n\", 60];\r\nvar z = [14,40,33,25,54,60];<\/pre>\n<p>A partir de aqu\u00ed, si es necesario guardar un valor en el<em> array<\/em>, haremos esto:<\/p>\n<pre>x[posici\u00f3n_a_modificar] = valor_a_guardar;<\/pre>\n<p>La <span style=\"font-family: Courier, Arial;\">posici\u00f3n_a_modificar<\/span> siempre ser\u00e1 un n\u00famero entero positivo y siempre empezaremos por 0.<\/p>\n<p>Para consultar un valor que tengamos almacenado en el<em> array<\/em> lo haremos de este modo:<\/p>\n<pre>console.log(x[posici\u00f3n_a_consultar]);<\/pre>\n<p>Tambi\u00e9n podemos consultar cu\u00e1ntos elementos tiene el <em>array<\/em>:<\/p>\n<pre>console.log(x.length);<\/pre>\n<p>Al final estamos sustituyendo <strong>x<\/strong>0, <strong>x<\/strong>1, <strong>x<\/strong>2, <strong>x<\/strong>3 por <strong>x<\/strong>[0], <strong>x<\/strong>[1], <strong>x<\/strong>[2], <strong>x<\/strong>[3] y nos podemos preguntar qu\u00e9 ganamos con esto. Con un ejemplo se ve muy f\u00e1cil. Vamos a escribir en la consola los valores de todas estas 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>Quiz\u00e1s con 4 variables no se ve una gran diferencia\u2026 Pero en el ejemplo 11-3 \u00a1se usan 3.000!<\/p>\n<p>Los ejemplos 11-4, 11-5 y 11-6 son peque\u00f1os c\u00f3digos que nos permiten ver en la pr\u00e1ctica todo esto que hemos ido viendo aqu\u00ed.<\/p>\n<p>Vamos a darle un vistazo al ejemplo 11-7. Lo que hace es crear una variable de tipo <em>array<\/em> donde almacena, dentro del <span style=\"font-family: Courier, Arial;\">setup()<\/span>, tantos valores aleatorios (entre 0 y 255) como la medida horizontal del <em>canvas<\/em> (<span style=\"font-family: Courier, Arial;\">width<\/span>).<\/p>\n<p>Despu\u00e9s en el\u00a0<span style=\"font-family: Courier, Arial;\">draw()<\/span>\u00a0dibuja <span style=\"font-family: Courier, Arial;\">width<\/span> l\u00edneas verticales, del color almacenado en la posici\u00f3n del <em>array<\/em> que toca. El ejercicio no es nada complicado, as\u00ed que lo hemos modificado un poco para darle m\u00e1s inter\u00e9s:<\/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>Hemos a\u00f1adido dos l\u00edneas extras que hacen que se dibuje una l\u00ednea negra en el lugar donde est\u00e1 el rat\u00f3n. Como guardamos en el <em>array<\/em> el color original de las l\u00edneas, una vez el rat\u00f3n cambia de lugar, la l\u00ednea recupera el color que ya ten\u00eda.<\/p>\n<p>El ejemplo 11-8 es bastante interesante, pero a la vez un poco complicado de entender. Para poder comprender mejor lo que hace, hemos creado un ejemplo parecido, pero m\u00e1s sencillo.<\/p>\n<p>Lo que hace este ejemplo es dibujar un c\u00edrculo cada vez que hacemos un clic con el rat\u00f3n. No tiene\u00a0funci\u00f3n\u00a0<span style=\"font-family: Courier, Arial;\">draw()<\/span> porque solo se dibuja cuando hagamos un clic. Por lo tanto, lo que s\u00ed tenemos es la funci\u00f3n\u00a0<span style=\"font-family: Courier, Arial;\">mouseClicked()<\/span>. Lo que pasa es que hemos limitado el n\u00famero de c\u00edrculos que podremos tener en la pantalla a 10. Cuando ya tenemos 10 c\u00edrculos en la pantalla y se hace un clic con el rat\u00f3n, se borra el m\u00e1s antiguo antes de pintar uno nuevo. As\u00ed podemos ir pintando c\u00edrculos, pero siempre tendremos 10.<\/p>\n<p>La complicaci\u00f3n de este ejemplo radica en el borrado. No tenemos una manera de borrar un elemento sin borrarlo todo (borrarlo todo siempre es pintar de nuevo el fondo (<em>background<\/em>)). Por lo tanto, borrar un elemento implicar\u00e1 borrarlo a pesar de pintar todos los elementos menos el que quer\u00edamos borrar.<\/p>\n<p>Tenemos tres variables globales, dos, <span style=\"font-family: Courier, Arial;\">circX<\/span>\u00a0y\u00a0<span style=\"font-family: Courier, Arial;\">circY<\/span> nos guardan las posiciones <strong>x<\/strong> e <strong>y<\/strong> de todos los c\u00edrculos dibujados. A cada c\u00edrculo que dibujamos le asignaremos una posici\u00f3n en los <em>arrays<\/em>. Y usaremos la variable <span style=\"font-family: Courier, Arial;\">pos<\/span> para saber en qu\u00e9 posici\u00f3n de los <em>arrays<\/em> guardaremos el pr\u00f3ximo c\u00edrculo que dibujamos. Tambi\u00e9n nos servir\u00e1 para decidir cu\u00e1l es el c\u00edrculo que hay que borrar.<\/p>\n<p>Para borrar el c\u00edrculo que toca, usamos la funci\u00f3n <span style=\"font-family: Courier, Arial;\">borrar<\/span> que, de hecho, lo que hace es borrar todo el <em>canvas<\/em> y volver a pintar todos los c\u00edrculos menos el que toca borrar.<\/p>\n<p>Con un sencillo ejemplo lo veremos m\u00e1s claro. Supongamos que ya tenemos los 10 c\u00edrculos pintados y que llevamos un rato haciendo clic con el rat\u00f3n. Supongamos que en la variable <span style=\"font-family: Courier, Arial;\">pos<\/span> hay un 5. \u00bfQu\u00e9 haremos? Pues borraremos el <em>canvas<\/em> y pintaremos todos los c\u00edrculos menos el que est\u00e1 en la posici\u00f3n 5. Despu\u00e9s pintaremos un nuevo c\u00edrculo y guardaremos su posici\u00f3n en el <em>canvas<\/em> (los valores de <strong>x<\/strong> e <strong>y<\/strong>) en la posici\u00f3n <span style=\"font-family: Courier, Arial;\">pos<\/span> de los <em>arrays<\/em>. Finalmente, incrementaremos el valor de la variable <span style=\"font-family: Courier, Arial;\">pos<\/span> para que el pr\u00f3ximo c\u00edrculo que pintemos se guarde una posici\u00f3n m\u00e1s all\u00e1 y no borremos el que acabamos de pintar.<\/p>\n<pre>var circX = []; \/\/ Variables donde guardaremos las posiciones\r\nvar circY = []; \/\/ x e y de los c\u00edrculos que dibujamos.\r\nvar pos = 0;\u00a0\u00a0 \/\/ C\u00edrculo que estamos dibujando.\r\nvar mx = 10;\u00a0\u00a0 \/\/ N\u00famero m\u00e1ximo de c\u00edrculos\r\n\r\nfunction setup() {\r\n  createCanvas(400, 400); \/\/ Creamos el canvas\r\n  background(220);\u00a0\u00a0 \/\/ Ponemos un fondo \r\n  noStroke();\u00a0\u00a0\u00a0\u00a0 \/\/ No queremos filete a los c\u00edrculos\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() { \/\/ Cuando se hace clic con el rat\u00f3n\r\n esborrar(pos, mx);\u00a0\u00a0     \/\/ Borramos el c\u00edrculo que toca\r\n circX[pos] = mouseX;\u00a0\u00a0   \/\/ Guardamos la posici\u00f3n del rat\u00f3n\r\n circY[pos] = mouseY;\r\n ellipse(circX[pos],circY[pos],50,50); \/\/ Dibujamos el nuevo c\u00edrculo\r\n pos++;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0           \/\/ Incrementamos la variable pos.\r\n if (pos === mx){\u00a0\u00a0\u00a0\u00a0     \/\/ Si pos vale mx le damos el valor de \r\n  pos = 0;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0          \/\/ 0. As\u00ed controlamos el n\u00famero de \r\n }\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0              \/\/ c\u00edrculos.\r\n}\r\n\r\nfunction borrar(elemento, mx) {\r\n  background(220);\r\n  for (var i = 0; i &lt; elemento; i++){ \/\/ Pintamos de 0 a pos\r\n    ellipse(circX[i],circY[i],50,50);\r\n}\r\n  for (i = elemento+1; i &lt; mx; i++){ \/\/ Pintamos de pos hasta el final\r\n    ellipse(circX[i],circY[i],50,50);\r\n }\r\n}<\/pre>\n<p>Ahora podemos mirar el ejemplo 11-8. Este usa dos <em>arrays<\/em> (igual que hemos hecho con nuestro ejemplo) para guardar la informaci\u00f3n de las posiciones por donde ha pasado el c\u00edrculo y poder hacer as\u00ed un rastro. Como el c\u00edrculo se dibuja siguiendo el rat\u00f3n, aqu\u00ed s\u00ed que se hace todo dentro de la funci\u00f3n <span style=\"font-family: Courier, Arial;\">draw()<\/span>.<\/p>\n<p>Echemos un vistazo al ejemplo:<\/p>\n<pre>var num = 60; \/\/ Tama\u00f1o del rastro. Si lo incrementamos, el rastro ser\u00e1\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0        \/\/ m\u00e1s largo\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       \/\/ Inicializamos las dos tablas poniendo 0 en todas\r\n\u00a0\u00a0\u00a0\u00a0       \/\/ las posiciones. Es conveniente poner siempre un valor\r\n\u00a0\u00a0\u00a0\u00a0       \/\/ inicial en todas las variables que usamos.\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); \/\/ Borramos la pantalla para volver a dibujarlo\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0           \/\/ todo de nuevo\r\n    \/\/ Mueve todos los valores de las variables a una posici\u00f3n m\u00e1s alta\r\n    \/\/ As\u00ed mantiene el hist\u00f3rico de los lugares por los que ha pasado el\r\n    \/\/ c\u00edrculo.\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\u00f3n actual del rat\u00f3n en el primer elemento de las\r\n\/\/ dos tablas\r\nx[0] = mouseX; \/\/ Set the first element\r\ny[0] = mouseY; \/\/ Set the first element\r\n\/\/ Dibuja todos los c\u00edrculos, tanto el primero como los que hacen el\r\n\/\/ rastro. Va haciendo el color del c\u00edrculo m\u00e1s oscuro conforme la\r\n\/\/ la posici\u00f3n es m\u00e1s grande.\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>En la p\u00e1gina 174 del libro se explica c\u00f3mo se van moviendo los valores para poder hacer el rastro.<\/p>\n<p>Antes de acabar, el libro pone dos ejemplos m\u00e1s, el 11-9 y el 11-10, pero usa objetos y es un tema que solo veremos, ahora mismo, un poco por encima, as\u00ed que no los usaremos en la asignatura.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ya hemos hecho algo con arrays, as\u00ed que m\u00e1s o menos ya ten\u00e9is una idea de lo que son. Todos del mismo tipo, eso s\u00ed. El hecho de usar arrays nos permitir\u00e1 trabajar con varios objetos a la vez y modificarlos todos con facilidad. El libro empieza con dos ejemplos, el 11-1 y el 11-2, [&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\/es\/wp-json\/wp\/v2\/pages\/2023"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/comments?post=2023"}],"version-history":[{"count":25,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/2023\/revisions"}],"predecessor-version":[{"id":4079,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/2023\/revisions\/4079"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/media?parent=2023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}