{"id":444,"date":"2022-10-06T13:16:23","date_gmt":"2022-10-06T11:16:23","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=444"},"modified":"2022-10-07T13:27:55","modified_gmt":"2022-10-07T11:27:55","slug":"9-3-arrays","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/9-3-arrays\/","title":{"rendered":"9.3. Arrays<\/em>"},"content":{"rendered":"

Cuando en nuestros skteches<\/em> tenemos pocos elementos, el uso de variables nos puede ser suficiente, pero cuando comenzamos a tener muchos elementos de los cuales tenemos que almacenar alguna informaci\u00f3n que var\u00eda a lo largo de la ejecuci\u00f3n del programa, el uso de variables se nos puede quedar corto y necesitamos nuevas estructuras que nos permitan almacenar y modificar datos de manera m\u00e1s sencilla y flexible. Con el \u00faltimo ejemplo de los objetos ve\u00edamos que si quer\u00edamos a\u00f1adir una segunda flor, no ten\u00edamos m\u00e1s que a\u00f1adir una nueva variable, pero \u00bfy si queremos crear cincuenta flores? Crear una variable para cada una no parece que sea muy eficiente.<\/p>\n

Los arrays<\/em> son una estructura de datos que nos permite almacenar muchas variables bajo un mismo nombre, lo cual nos va a permitir trabajar de manera mucho m\u00e1s sencilla y eficiente.<\/p>\n

Trabajar con arrays<\/em> es similar a trabajar con variables: necesitamos crearlos y asignarles valores que luego utilizaremos.<\/p>\n

Creando y asignando valores a los arrays<\/em><\/h3>\n

Para crear un array<\/em>, podemos hacerlo de la siguiente manera:<\/p>\n

let values = [100, 200, 300];<\/pre>\n
Igual que con las variables, utilizamos la palabra clave let<\/span> seguida del nombre que le queramos dar al array<\/em> y a continuaci\u00f3n le asignamos los valores que queramos entre corchetes y separados con una coma. Con esto, lo que hemos hecho ha sido crear un array<\/em> de tres elementos. En este caso, le hemos asignado valores num\u00e9ricos, pero podr\u00eda ser cualquier tipo de valor, incluso valores de distintos tipos en un mismo array<\/em>:<\/p>\n
let values = [100, 200, 300];\r\nlet colors = [\"pink\", \"lightblue\", \"lightgreen\"];\r\nlet booleans = [true, false, false, true];\r\nlet mixedValues = [23, true, \"yellow\"];<\/pre>\n
Accediendo a los valores de un array<\/em><\/h3>\n
\"\"
Figura 120. Estructura de un array<\/em>
Fuente: adaptaci\u00f3n de L. McCarthy; A. P. C. Reas; B. Fry (2015). Getting Started with P5.Js: Making Interactive Graphics in JavaScript and Processing<\/em>. Make Community, LLC.<\/figcaption><\/figure>\n
Cada uno de los elementos de un array<\/em> tiene un \u00edndice<\/strong> para determinar su posici\u00f3n en el array<\/em>. Igual que ocurre con las coordenadas, para las posiciones de un array<\/em> comenzamos a contar desde el cero.<\/p>\n
Para acceder a los elementos del array<\/em> necesitaremos conocer su \u00edndice. Tomando como ejemplo el array<\/em> de la figura 120, podemos acceder a sus elementos de la siguiente manera:<\/p>\n
console.log(years[0]);   \/\/ Imprime 1920\r\nlet x = years[2];\r\nlet y = years[4];\r\nconsole.log(x + y);      \/\/ Imprime 3990 (1980 + 2010)<\/pre>\n
Una propiedad de los arrays<\/em> que nos resultar\u00e1 muy \u00fatil ser\u00e1 su tama\u00f1o, que podemos averiguar mediante su propiedad length<\/span>:<\/p>\n
let colors = [\"pink\", \"blue\", \"red\"];\r\nconsole.log(colors.length);                \/\/ Imprime 3\r\n\r\nlet values = [];\r\nconsole.log(values.length);                \/\/ Imprime 0\r\n\r\n\/\/ Para acceder al \u00faltimo elemento de cualquier array\r\n\/\/ sea del tama\u00f1o que sea\r\nconsole.log(colors[colors.length - 1]);    \/\/ Imprime \u201cred\u201d<\/pre>\n
Del mismo modo que ocurre con las variables, es com\u00fan que queramos acceder a un array<\/em> tanto desde el setup()<\/span> como desde el draw()<\/span>, por lo que querremos declararlo al principio del c\u00f3digo y m\u00e1s tarde asignarles valores. Esto lo podemos hacer creando al principio del c\u00f3digo un array<\/em> vac\u00edo:<\/p>\n
let values = [];\r\n\r\nfunction setup() {\r\n  values[0] = 34553;\r\n  values[1] = 13234;\r\n}<\/pre>\n
Veamos un peque\u00f1o ejemplo de un array<\/em> en uso para elegir aleatoriamente entre un set de colores preestablecidos.<\/p>\n
\"\"
Figura 121. Usando arrays<\/em>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
En este ejemplo, creamos un array<\/em> con tres colores y en la funci\u00f3n chooseColor()<\/span> elegimos aleatoriamente mediante random()<\/span> un n\u00famero entre 0 y el tama\u00f1o del array<\/em> (en este caso, entre 0 y 2) para luego acceder al elemento del array<\/em> cuyo \u00edndice es ese n\u00famero aleatorio y lo aplicamos como relleno del c\u00edrculo. Si hacemos clic con el rat\u00f3n, elegiremos otro elemento del array<\/em> al azar. Elegir un elemento aleatorio dentro de un array<\/em> es una operaci\u00f3n bastante com\u00fan en el mundo de la computaci\u00f3n creativa y P5 nos ofrece una manera m\u00e1s sencilla de hacerlo usando random()<\/span>:<\/p>\n
let colors = [\"red\", \"green\", \"blue\"];\r\nlet randomColor = random(colors);<\/pre>\n
Si a random()<\/span> le pasamos como par\u00e1metro un array<\/em>, nos devolver\u00e1 directamente un elemento al azar de ese array<\/em>.<\/p>\n
Asignar y acceder a los valores de un array<\/em> mediante bucles<\/h3>\n
Hasta ahora hemos asignado y accedido a los valores de nuestros arrays<\/em> de manera \u00abmanual\u00bb, con lo que realmente no hemos ganado mucho respecto a cuando ten\u00edamos que crear m\u00faltiples variables. Sin embargo, podemos automatizar este proceso utilizando bucles tanto para asignar valores a los arrays<\/em> como para acceder a estos.<\/p>\n
\"\"
Figura 122. Declarando y accediendo a valores de un array<\/em> mediante bucles
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
En el ejemplo anterior creamos un array<\/em> vac\u00edo al que en el setup()<\/span> le asignamos 100 valores aleatorios usando el valor de i, que itera desde 0 hasta 99 para asignar el valor en el \u00edndice correspondiente del array<\/em>. A continuaci\u00f3n, en el draw()<\/span> iteramos a trav\u00e9s del array<\/em> previamente creado usando tambi\u00e9n un bucle que va desde el elemento 0 hasta el elemento 99, ya que el array<\/em> tiene 100 elementos y estamos usando < y no <=. Usamos esos valores aleatorios almacenados en el array<\/em> para dibujar l\u00edneas horizontales en coordenadas verticales aleatorias.<\/p>\n
Todo esto lo podr\u00edamos replicar haciendo uso \u00fanicamente de bucles y random()<\/span>, pero tendr\u00edamos que utilizar tambi\u00e9n un noLoop()<\/span> o manipular el frameRate()<\/span> para que los valores de las posiciones en la coordenada y<\/em> de las l\u00edneas no cambiase en cada frame<\/em>, lo que nos impedir\u00eda utilizar las capacidades interactivas de P5. Adem\u00e1s, tenemos acceso a estos valores de posici\u00f3n en y<\/em>, por lo que podr\u00edamos hacer que estos valores variasen a lo largo del tiempo.<\/p>\n
Dentro de un array <\/em>podemos almacenar cualquier tipo de dato, incluso otros arrays<\/em>, lo cual puede resultar muy \u00fatil a la hora de crear conjuntos de coordenadas (x<\/em>, y<\/em>) por ejemplo.<\/p>\n
let positions = [[100, 50], [20, 70], [120, 60]];\r\n\r\nconsole.log(positions[0]);     \/\/ Imprime [100, 50]\r\nconsole.log(positions[0][0]);  \/\/ Imprime 100\r\nconsole.log(positions[0][1]);  \/\/ Imprime 50\r\n\r\nconsole.log(positions[1][0]);  \/\/ Imprime 20<\/pre>\n
Veamos un ejemplo algo m\u00e1s complejo utilizando arrays<\/em> dentro de otro array:<\/em><\/p>\n
\"\"
Figura 123. Anidando arrays<\/em>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
En esta ocasi\u00f3n, a la hora de rellenar el array <\/em>lo hemos hecho con otros arrays<\/em> de dos elementos, por lo que en snowPos<\/span> tenemos un total de 120 elementos y cada uno de estos almacena a su vez dos elementos: valores aleatorios entre 0 y el ancho o el alto del canvas<\/em>. Estos dos elementos son a los que podemos acceder mediante snowPos[i][0]<\/span> y snowPos[i][1]<\/span> para utilizarlos como coordenadas de nuestros copos de nieve. Para darles movimiento de ca\u00edda, a cada elemento snowPos[i][1]<\/span> (la coordenada y<\/em> de cada copo) le vamos aumentando su valor. Si vemos que se sale de la pantalla, hacemos que vuelva a aparecer por arriba y le damos un nuevo valor de snowPos[i][0]<\/span> (la coordenada x<\/em>).<\/p>\n","protected":false},"excerpt":{"rendered":"
Cuando en nuestros skteches tenemos pocos elementos, el uso de variables nos puede ser suficiente, pero cuando comenzamos a tener muchos elementos de los cuales tenemos que almacenar alguna informaci\u00f3n que var\u00eda a lo largo de la ejecuci\u00f3n del programa, el uso de variables se nos puede quedar corto y necesitamos nuevas estructuras que nos […]<\/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\/444"}],"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=444"}],"version-history":[{"count":3,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/444\/revisions"}],"predecessor-version":[{"id":570,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/444\/revisions\/570"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}