Modificando Arreglos (Versión en Video)

Hasta ahora hemos visto cómo crear un arreglo y acceder a él.

Como con otras variables, una de las mejores cosas de los arreglos es la manera en que podemos cambiarlos dinámicamente mientras nuestro programa está corriendo.

Ok, déjenme mostrarles a qué me refiero.

Aquí tenemos este programa que despliega a "Hooper" sujetando algunos globos; súper lindo.

Y la manera en que funciona es que tenemos este arreglo "xPositions" que tiene dos números que nos indican la posición en la que queremos los globos.

Y luego aquí abajo tenemos este ciclo, y este ciclo recorre cada elemento del arreglo.

Y para cada uno de ellos dibuja una línea desde "x" hasta la mano de "Hooper", y luego dibuja una elipse en "x" de 30 x 40 pixeles, que es nuestro globo.

Ok, bien. Ahora que vimos cómo funciona, sabemos que si queremos otro globo, podemos agregar otro número a nuestro arreglo, ¿cierto? Algo como 300.

Hermoso. Ahora tenemos tres globos para el feliz "Hooper".

Pero digamos que queremos que el usuario, que no sabe cómo programar, pueda añadir nuevos globos.

Entonces queremos darle el programa a un usuario y decirle: "Oye, puedes hacer click donde quieras que aparezca un globo".

Eso sería interesante ¿no? Yo creo que sí.

Así que ¿cómo hacemos eso? Queremos que nuestro programa esté cambiando, ¿cierto?

Que cada vez que el usuario haga click, aparezca un globo nuevo.

Así que empecemos por mover todo esto dentro de una función "draw", así será fácil cambiarla.

Entonces movemos esto aquí, indentamos esto. Ok. Genial.

Así que ahora queremos verificar y ver si el usuario presiona el ratón en este momento.

Bueno, podemos hacer eso con un "if". Así que "if(mouseIsPressed)", y luego hacemos algo.

Entonces, ¿qué vamos a hacer? Si el usuario presiona el ratón, queremos, de alguna manera, añadir un número a nuestro arreglo

Vamos a hacer este arreglo de dos elemento nuevamente. Ok.

Así que queremos añadir un número a este arreglo de alguna manera. Bueno, te mostraré una forma de hacer esto.

Entonces podemos escribir "xPositions[2] = mouseX;"

Muy bien, déjenme mostrarles que esto funciona.

Hago click y ¡tan tan! Aparezco un globo. ¿Qué fue lo que pasó?

Aquí dice que encuentre el arreglo "xPosicitions[2]" en el elemento 2, recuerden que es el tercer elemento, porque nuestro arreglo inicia con el elemento cero.

Y si lo ven aquí, no hay tercer elemento, ¿cierto? No hay nada en ese espacio.

Así que dice que lo encuentre, y que ponga "mouseX" en ese espacio.

Bueno, como antes no había nada ahí, ahora está "mouseX".

Y ahora nuestro arreglo tiene tres elementos, y este ciclo "for" de aquí abajo, ejecuta el código con el tercer elemento y termina por dibujar el tercer globo.

Eso está muy bien, y déjenme hacer click más veces para mostrarles que esto funciona.

Así que cada vez que hago click, el programa dibuja el tercer globo en la posición en la que hago click con mi ratón.

Y eso es porque constantemente estamos reemplazando el espacio 2, el índice 2.

Estamos constantemente reemplazándolo con la posición "x" del ratón.

Así que siempre vamos a tener tres globos, porque ya teníamos este en el elemento 0, este otro en el elemento 1 y estamos cambiando constantemente el espacio 2. ¿Ok?

Eso está bien, pero lo que realmente queremos es que el usuario pueda poner muchísimos globos, ¿cierto?

Que cada vez que el usuario haga click, haya un globo nuevo.

Eso significa que necesitamos incrementar constantemente el índice de nuestro arreglo en el que estamos guardando la nueva posición.

Así que no queremos que sea 2 cada vez, queremos que sea 2, luego 3, luego 4, luego 5, luego 6, etc.

Podemos hacer esto si tenemos una variable como contador. Así que escribimos "newInd = 2;"

Con este vamos a empezar, y luego aquí vamos a poner "newInd" en lugar de 2.

Y luego lo que queremos hacer es incrementar "newInd++".

Así que cada vez sumamos 1 a esta variable. Entonces empezamos en 2, luego se convierte en 3, luego en 4.

Así que cada vez que hace click, se convierte en un valor mayor. Probemos.

¡Tan tan! Muchos globos. Es una fiesta de globos. ¡Wow!

Eso es genial, ¿cierto? Pero no es la mejor manera de hacerlo, resulta que agregar elementos a un arreglo es algo que vamos a hacer muchas veces.

Así que tenemos una manera más fácil de hacer esto.

Déjenme borrar todo esto que hicimos. Muy bien, no necesitamos esto, y ya no necesitamos esto. Lo marcamos como comentario.

Ok, la manera de hacerlo es escribir "xPositions.push(mouseX);".

Lo que estamos haciendo es llamar este método del arreglo "xPositions".

Estamos llamado una especie de comando en el arreglo. Estamos diciéndole al arreglo. "Oye, pon este nuevo valor, el de "mouseX", al final del arreglo".

Así que cada vez que se llama, cada vez que el usuario presiona el ratón, va a tomar el valor de "mouseX" y lo va a poner al final del arreglo.

Entonces el arreglo va a ser más grande cada vez. Así que vamos a reiniciar y probar esto.

¡Tan tan! ¡Funciona! Y de esta manera tenemos menos código que antes. ¿Correcto?

Así que la mayoría de las veces querrás usar "push" para agregarle cosas a tu arreglo como aquí.

Y es bastante ordenado porque puedes hacer que estos arreglos se hagan más grandes cada vez durante el programa.

Como cuando tienes una animación o cuando hay usuarios haciendo cosas y entonces puedes hacer mucho más.

Así que has visto el 90% de las razones por las que usarías arreglos y las formas de usarlos.

Pero hay mucho más que puedes hacer con arreglos. Así que si tienes preguntas, sólo hazlas en el área de discusión.

Pero primero asegúrate de volverte un maestro en los fundamentos.