0:00:01.091,0:00:04.441
Hasta ahora hemos visto cómo crear un arreglo y acceder a él.

0:00:04.441,0:00:12.859
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.

0:00:12.859,0:00:15.805
Ok, déjenme mostrarles a qué me refiero.

0:00:15.805,0:00:21.172
Aquí tenemos este programa que despliega a "Hooper" sujetando algunos globos; súper lindo.

0:00:21.172,0:00:29.397
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.

0:00:29.397,0:00:35.325
Y luego aquí abajo tenemos este ciclo, y este ciclo recorre cada elemento del arreglo.

0:00:35.325,0:00:47.570
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.

0:00:47.570,0:00:58.343
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.

0:00:58.343,0:01:02.063
Hermoso. Ahora tenemos tres globos para el feliz "Hooper".

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

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

0:01:17.801,0:01:20.688
Eso sería interesante ¿no? Yo creo que sí.

0:01:20.688,0:01:26.640
Así que ¿cómo hacemos eso? Queremos que nuestro programa esté cambiando, ¿cierto?

0:01:26.640,0:01:30.278
Que cada vez que el usuario haga click, aparezca un globo nuevo.

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

0:01:37.637,0:01:43.185
Entonces movemos esto aquí, indentamos esto. Ok. Genial.

0:01:43.185,0:01:48.405
Así que ahora queremos verificar y ver si el usuario presiona el ratón en este momento.

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

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

0:02:01.176,0:02:04.232
Vamos a hacer este arreglo de dos elemento nuevamente. Ok.

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

0:02:10.464,0:02:18.508
Entonces podemos escribir "xPositions[2] = mouseX;"

0:02:18.508,0:02:21.681
Muy bien, déjenme mostrarles que esto funciona.

0:02:21.681,0:02:26.640
Hago click y ¡tan tan! Aparezco un globo. ¿Qué fue lo que pasó?

0:02:26.640,0:02:38.236
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.

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

0:02:41.742,0:02:45.897
Así que dice que lo encuentre, y que ponga "mouseX" en ese espacio.

0:02:45.897,0:02:51.358
Bueno, como antes no había nada ahí, ahora está "mouseX".

0:02:51.358,0:03:00.130
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.

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

0:03:04.027,0:03:10.690
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.

0:03:10.690,0:03:18.938
Y eso es porque constantemente estamos reemplazando el espacio 2, el índice 2.

0:03:18.938,0:03:22.898
Estamos constantemente reemplazándolo con la posición "x" del ratón.

0:03:22.898,0:03:34.574
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?

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

0:03:40.235,0:03:43.524
Que cada vez que el usuario haga click, haya un globo nuevo.

0:03:43.524,0:03:50.852
Eso significa que necesitamos incrementar constantemente el índice de nuestro arreglo en el que estamos guardando la nueva posición.

0:03:50.852,0:03:56.106
Así que no queremos que sea 2 cada vez, queremos que sea 2, luego 3, luego 4, luego 5, luego 6, etc.

0:03:56.106,0:04:01.019
Podemos hacer esto si tenemos una variable como contador. Así que escribimos "newInd = 2;"

0:04:01.019,0:04:05.523
Con este vamos a empezar, y luego aquí vamos a poner "newInd" en lugar de 2.

0:04:05.523,0:04:10.270
Y luego lo que queremos hacer es incrementar "newInd++".

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

0:04:16.231,0:04:18.473
Así que cada vez que hace click, se convierte en un valor mayor. Probemos.

0:04:18.473,0:04:22.009
¡Tan tan! Muchos globos. Es una fiesta de globos. ¡Wow!

0:04:22.009,0:04:32.108
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.

0:04:32.108,0:04:35.023
Así que tenemos una manera más fácil de hacer esto.

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

0:04:42.768,0:04:50.996
Ok, la manera de hacerlo es escribir "xPositions.push(mouseX);".

0:04:50.996,0:04:56.573
Lo que estamos haciendo es llamar este método del arreglo "xPositions".

0:04:56.573,0:05:05.232
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".

0:05:05.232,0:05:12.467
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.

0:05:12.467,0:05:17.858
Entonces el arreglo va a ser más grande cada vez. Así que vamos a reiniciar y probar esto.

0:05:17.858,0:05:22.954
¡Tan tan! ¡Funciona! Y de esta manera tenemos menos código que antes. ¿Correcto?

0:05:22.954,0:05:27.630
Así que la mayoría de las veces querrás usar "push" para agregarle cosas a tu arreglo como aquí.

0:05:27.630,0:05:32.182
Y es bastante ordenado porque puedes hacer que estos arreglos se hagan más grandes cada vez durante el programa.

0:05:32.182,0:05:36.017
Como cuando tienes una animación o cuando hay usuarios haciendo cosas y entonces puedes hacer mucho más.

0:05:36.017,0:05:41.295
Así que has visto el 90% de las razones por las que usarías arreglos y las formas de usarlos.

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

0:05:47.021,0:05:50.600
Pero primero asegúrate de volverte un maestro en los fundamentos.