Arreglos/Matrices

// Un ejemplo de arreglo simple (Array)

var myFriend = "Sophia";

var myFriends = ["Sophia", "John", "Leif"];

// myFriends[1]

fill(255, 0, 0);

text( myFriends[0], 10, 30);

text( myFriends[1], 10, 80);

text( myFriends[2], 10, 130);

text( myFriends[3], 10, 130);

--------------------------------

Un arreglo con la función "lenght" que mide cuantos ítems hay en el arreglo.

var myFriend = "Sophia";

var myFriends = ["Sophia", "John", "Leif", "Winston", "OhNoes Guy!!"];

// myFriends[1]

fill(255, 0, 0);

text( myFriends[0], 10, 30);

text( myFriends[1], 10, 80);

text( myFriends[2], 10, 130);

text("I have " + myFriends.length + " friends!!!", 10, 150);

--------------------------------

Iteración (loop) + arreglos(Array)

var myFriends = ["Sophia", "John", "Leif", "Winston", "OhNoes Guy", "Sal"];

fill(255, 0, 0);

var friendNum = 0;

while(friendNum < myFriends.length) {

text(myFriends[friendNum], 10, 30+friendNum*30);

friendNum++;

}

/*

1. What do I want to repeat?

the text() command

2. What do I want to change each time?

the friend num, and the y position

3. How long should we repeat?

until there are no more friends left

*/

----------------

Se puede usar "while" o "for", indistintamente, para iterar arreglos

var myFriends = ["Sophia", "John", "Leif", "Winston", "OhNoes Guy", "Sal"];

fill(255, 0, 0);

var friendNum = 0;

while(friendNum < myFriends.length) {

text(myFriends[friendNum], 10, 30+friendNum*30);

friendNum++;

}

for(var friendNum = 0; friendNum < myFriends.length; friendNum++) {

text(myFriends[friendNum], 87, 30+friendNum*30);

}

-------------------------------------------------------------

Añadir nuevos items del arreglo a un array usando "Push"

var xPositions = [100, 200];

var draw = function() {

if (mouseIsPressed) {

xPositions.push(mouseX);

}

noStroke();

background(212, 254, 255);

stroke(64, 117, 207);

fill(196, 33, 255);

for (var i = 0; i < xPositions.length; i++) {

line(xPositions[i], 120, 194, 285);

ellipse(xPositions[i], 104, 32, 46);

}

var hopper = getImage("creatures/Hopper-Jumping");

image(hopper, 189, 227);

};

---------------------------------------------------------------

Repaso: arreglos

Ocultar el tutorial de navegación

Muchas veces queremos almacenar listas de valores cuando estamos creando programas y, en JavaScript, podemos hacer eso al usar un tipo de valor llamado un arreglo.

Para crear un arreglo, declaramos una variable como siempre lo hacemos, pero luego rodeamos nuestra lista de valores con corchetes y separamos cada valor con una coma:

var xPositions = [33, 72, 64];

Podemos guardar cualquier tipo de valor de JavaScript en un arreglo, no solo números. Aquí hay un ejemplo donde almacenamos una lista de cadenas de caracteres:

var myFriends = ['Winston', 'OhNoesGuy', 'John', 'Sophia'];

Muchas veces queremos desplegar la longitud de un arreglo, o hacer algo con base en la longitud del arreglo. Afortunadamente, cada arreglo tiene una propiedad length que nos dirá la longitud actual del arreglo:

text(myFriends.length, 200, 200); // Despliega "4"

Cuando queremos acceder a un valor particular en un arreglo, accedemos a él haciendo referencia a su "índice" en el arreglo, el cual representa su posición. El primer índice en un arreglo es "0", así que si queremos acceder al primer elemento en un arreglo, especificamos el nombre de la variable del arreglo, luego corchetes y 0:

text(myFriends[0], 200, 0); // Despliega "Winston"

El segundo elemento está en el índice "1", el tercero en el índice "2" y el cuarto en el índice "3":

text(myFriends[1], 200, 100); // Despliega "OhNoesGuy" text(myFriends[2], 200, 200); // Despliega "John" text(myFriends[3], 200, 300); // Despliega "Sophia"

La indexación basada en cero es uno de los aspectos más confusos de los arreglos para los programadores nuevos, así que ten eso en cuenta si apenas estás empezando con arreglos. ¡Eventualmente te vas a acostumbrar !

A menudo queremos hacer alguna acción para cada elemento en un arreglo, como cuando arriba usamos el comando text() para desplegar los nombres. En lugar de escribir el código una y otra vez, es mejor usar un bucle for para iterar a través de cada uno de los elementos en el arreglo, y hacerle algo a cada elemento dentro del bucle. Tenemos que empezar desde el índice 0, ir hasta llegar al final del arreglo, y agregarle 1 al índice cada vez. Aquí está cómo haríamos eso:

for (var i = 0; i < myFriends.length; i++) { text(myFriends[i], 200, i*100); }

Observa cómo ponemos i dentro de los corchetes, porque representa el índice actual cada vez que se ejecuta el bucle.

Los arreglos pueden ser cambiados de muchas maneras. Para empezar, podemos cambiarles un valor:

myFriends[1] = "TheErrorBuddy";

También podemos agregarles valores completamente nuevos, usando el método push(), pasándole el nuevo valor:

myFriends.push("Hopper");

Después de ejecutar esa línea de código, la propiedad length de nuestro arreglo cambiará para reflejar la nueva longitud, y el índice final del arreglo será 4 en lugar de 3.

Si quieres una lista completa de lo que puedes hacer con los arreglos en JavaScript, revisa esta referencia.

--------------------------------------------------------------------------------------------------------------

Los Mejores ejemplo derivados de arrays