9. Objetos y arrays

9.3. Arrays

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ón que varía a lo largo de la ejecución 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ás sencilla y flexible. Con el último ejemplo de los objetos veíamos que si queríamos añadir una segunda flor, no teníamos más que añadir una nueva variable, pero ¿y si queremos crear cincuenta flores? Crear una variable para cada una no parece que sea muy eficiente.

Los arrays 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ás sencilla y eficiente.

Trabajar con arrays es similar a trabajar con variables: necesitamos crearlos y asignarles valores que luego utilizaremos.

Creando y asignando valores a los arrays

Para crear un array, podemos hacerlo de la siguiente manera:

let values = [100, 200, 300];

Igual que con las variables, utilizamos la palabra clave let seguida del nombre que le queramos dar al array y a continuación le asignamos los valores que queramos entre corchetes y separados con una coma. Con esto, lo que hemos hecho ha sido crear un array de tres elementos. En este caso, le hemos asignado valores numéricos, pero podría ser cualquier tipo de valor, incluso valores de distintos tipos en un mismo array:

let values = [100, 200, 300];
let colors = ["pink", "lightblue", "lightgreen"];
let booleans = [true, false, false, true];
let mixedValues = [23, true, "yellow"];

Accediendo a los valores de un array

Cada uno de los elementos de un array tiene un índice para determinar su posición en el array. Igual que ocurre con las coordenadas, para las posiciones de un array comenzamos a contar desde el cero.

Para acceder a los elementos del array necesitaremos conocer su índice. Tomando como ejemplo el array de la figura 120, podemos acceder a sus elementos de la siguiente manera:

console.log(years[0]);   // Imprime 1920
let x = years[2];
let y = years[4];
console.log(x + y);      // Imprime 3990 (1980 + 2010)

Una propiedad de los arrays que nos resultará muy útil será su tamaño, que podemos averiguar mediante su propiedad length:

let colors = ["pink", "blue", "red"];
console.log(colors.length);                // Imprime 3

let values = [];
console.log(values.length);                // Imprime 0

// Para acceder al último elemento de cualquier array
// sea del tamaño que sea
console.log(colors[colors.length - 1]);    // Imprime “red”

Del mismo modo que ocurre con las variables, es común que queramos acceder a un array tanto desde el setup() como desde el draw(), por lo que querremos declararlo al principio del código y más tarde asignarles valores. Esto lo podemos hacer creando al principio del código un array vacío:

let values = [];

function setup() {
  values[0] = 34553;
  values[1] = 13234;
}

Veamos un pequeño ejemplo de un array en uso para elegir aleatoriamente entre un set de colores preestablecidos.

En este ejemplo, creamos un array con tres colores y en la función chooseColor() elegimos aleatoriamente mediante random() un número entre 0 y el tamaño del array (en este caso, entre 0 y 2) para luego acceder al elemento del array cuyo índice es ese número aleatorio y lo aplicamos como relleno del círculo. Si hacemos clic con el ratón, elegiremos otro elemento del array al azar. Elegir un elemento aleatorio dentro de un array es una operación bastante común en el mundo de la computación creativa y P5 nos ofrece una manera más sencilla de hacerlo usando random():

let colors = ["red", "green", "blue"];
let randomColor = random(colors);

Si a random() le pasamos como parámetro un array, nos devolverá directamente un elemento al azar de ese array.

Asignar y acceder a los valores de un array mediante bucles

Hasta ahora hemos asignado y accedido a los valores de nuestros arrays de manera «manual», con lo que realmente no hemos ganado mucho respecto a cuando teníamos que crear múltiples variables. Sin embargo, podemos automatizar este proceso utilizando bucles tanto para asignar valores a los arrays como para acceder a estos.

En el ejemplo anterior creamos un array vacío al que en el setup() le asignamos 100 valores aleatorios usando el valor de i, que itera desde 0 hasta 99 para asignar el valor en el índice correspondiente del array. A continuación, en el draw() iteramos a través del array previamente creado usando también un bucle que va desde el elemento 0 hasta el elemento 99, ya que el array tiene 100 elementos y estamos usando < y no <=. Usamos esos valores aleatorios almacenados en el array para dibujar líneas horizontales en coordenadas verticales aleatorias.

Todo esto lo podríamos replicar haciendo uso únicamente de bucles y random(), pero tendríamos que utilizar también un noLoop() o manipular el frameRate() para que los valores de las posiciones en la coordenada y de las líneas no cambiase en cada frame, lo que nos impediría utilizar las capacidades interactivas de P5. Además, tenemos acceso a estos valores de posición en y, por lo que podríamos hacer que estos valores variasen a lo largo del tiempo.

Dentro de un array podemos almacenar cualquier tipo de dato, incluso otros arrays, lo cual puede resultar muy útil a la hora de crear conjuntos de coordenadas (x, y) por ejemplo.

let positions = [[100, 50], [20, 70], [120, 60]];

console.log(positions[0]);     // Imprime [100, 50]
console.log(positions[0][0]);  // Imprime 100
console.log(positions[0][1]);  // Imprime 50

console.log(positions[1][0]);  // Imprime 20

Veamos un ejemplo algo más complejo utilizando arrays dentro de otro array:

En esta ocasión, a la hora de rellenar el array lo hemos hecho con otros arrays de dos elementos, por lo que en snowPos 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. Estos dos elementos son a los que podemos acceder mediante snowPos[i][0] y snowPos[i][1] para utilizarlos como coordenadas de nuestros copos de nieve. Para darles movimiento de caída, a cada elemento snowPos[i][1] (la coordenada y 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] (la coordenada x).