WEBVTT 00:00:01.091 --> 00:00:04.441 Hasta ahora hemos visto cómo crear un arreglo y acceder a él. 00:00:04.441 --> 00: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. 00:00:12.859 --> 00:00:15.805 Ok, déjenme mostrarles a qué me refiero. 00:00:15.805 --> 00:00:21.172 Aquí tenemos este programa que despliega a "Hooper" sujetando algunos globos; súper lindo. 00:00:21.172 --> 00: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. 00:00:29.397 --> 00:00:35.325 Y luego aquí abajo tenemos este ciclo, y este ciclo recorre cada elemento del arreglo. 00:00:35.325 --> 00: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. 00:00:47.570 --> 00: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. 00:00:58.343 --> 00:01:02.063 Hermoso. Ahora tenemos tres globos para el feliz "Hooper". 00:01:02.063 --> 00:01:10.932 Pero digamos que queremos que el usuario, que no sabe cómo programar, pueda añadir nuevos globos. 00:01:10.932 --> 00:01:17.801 Entonces queremos darle el programa a un usuario y decirle: "Oye, puedes hacer click donde quieras que aparezca un globo". 00:01:17.801 --> 00:01:20.688 Eso sería interesante ¿no? Yo creo que sí. 00:01:20.688 --> 00:01:26.640 Así que ¿cómo hacemos eso? Queremos que nuestro programa esté cambiando, ¿cierto? 00:01:26.640 --> 00:01:30.278 Que cada vez que el usuario haga click, aparezca un globo nuevo. 00:01:30.278 --> 00:01:37.637 Así que empecemos por mover todo esto dentro de una función "draw", así será fácil cambiarla. 00:01:37.637 --> 00:01:43.185 Entonces movemos esto aquí, indentamos esto. Ok. Genial. 00:01:43.185 --> 00:01:48.405 Así que ahora queremos verificar y ver si el usuario presiona el ratón en este momento. 00:01:48.405 --> 00:01:55.339 Bueno, podemos hacer eso con un "if". Así que "if(mouseIsPressed)", y luego hacemos algo. 00:01:55.339 --> 00: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 00:02:01.176 --> 00:02:04.232 Vamos a hacer este arreglo de dos elemento nuevamente. Ok. 00:02:04.232 --> 00: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. 00:02:10.464 --> 00:02:18.508 Entonces podemos escribir "xPositions[2] = mouseX;" 00:02:18.508 --> 00:02:21.681 Muy bien, déjenme mostrarles que esto funciona. 00:02:21.681 --> 00:02:26.640 Hago click y ¡tan tan! Aparezco un globo. ¿Qué fue lo que pasó? 00:02:26.640 --> 00: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. 00:02:38.236 --> 00:02:41.742 Y si lo ven aquí, no hay tercer elemento, ¿cierto? No hay nada en ese espacio. 00:02:41.742 --> 00:02:45.897 Así que dice que lo encuentre, y que ponga "mouseX" en ese espacio. 00:02:45.897 --> 00:02:51.358 Bueno, como antes no había nada ahí, ahora está "mouseX". 00:02:51.358 --> 00: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. 00:03:00.130 --> 00:03:04.027 Eso está muy bien, y déjenme hacer click más veces para mostrarles que esto funciona. 00:03:04.027 --> 00: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. 00:03:10.690 --> 00:03:18.938 Y eso es porque constantemente estamos reemplazando el espacio 2, el índice 2. 00:03:18.938 --> 00:03:22.898 Estamos constantemente reemplazándolo con la posición "x" del ratón. 00:03:22.898 --> 00: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? 00:03:34.574 --> 00:03:40.235 Eso está bien, pero lo que realmente queremos es que el usuario pueda poner muchísimos globos, ¿cierto? 00:03:40.235 --> 00:03:43.524 Que cada vez que el usuario haga click, haya un globo nuevo. 00:03:43.524 --> 00:03:50.852 Eso significa que necesitamos incrementar constantemente el índice de nuestro arreglo en el que estamos guardando la nueva posición. 00:03:50.852 --> 00: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. 00:03:56.106 --> 00:04:01.019 Podemos hacer esto si tenemos una variable como contador. Así que escribimos "newInd = 2;" 00:04:01.019 --> 00:04:05.523 Con este vamos a empezar, y luego aquí vamos a poner "newInd" en lugar de 2. 00:04:05.523 --> 00:04:10.270 Y luego lo que queremos hacer es incrementar "newInd++". 00:04:10.270 --> 00:04:16.231 Así que cada vez sumamos 1 a esta variable. Entonces empezamos en 2, luego se convierte en 3, luego en 4. 00:04:16.231 --> 00:04:18.473 Así que cada vez que hace click, se convierte en un valor mayor. Probemos. 00:04:18.473 --> 00:04:22.009 ¡Tan tan! Muchos globos. Es una fiesta de globos. ¡Wow! 00:04:22.009 --> 00: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. 00:04:32.108 --> 00:04:35.023 Así que tenemos una manera más fácil de hacer esto. 00:04:35.023 --> 00:04:42.768 Déjenme borrar todo esto que hicimos. Muy bien, no necesitamos esto, y ya no necesitamos esto. Lo marcamos como comentario. 00:04:42.768 --> 00:04:50.996 Ok, la manera de hacerlo es escribir "xPositions.push(mouseX);". 00:04:50.996 --> 00:04:56.573 Lo que estamos haciendo es llamar este método del arreglo "xPositions". 00:04:56.573 --> 00: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". 00:05:05.232 --> 00: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. 00:05:12.467 --> 00:05:17.858 Entonces el arreglo va a ser más grande cada vez. Así que vamos a reiniciar y probar esto. 00:05:17.858 --> 00:05:22.954 ¡Tan tan! ¡Funciona! Y de esta manera tenemos menos código que antes. ¿Correcto? 00:05:22.954 --> 00:05:27.630 Así que la mayoría de las veces querrás usar "push" para agregarle cosas a tu arreglo como aquí. 00:05:27.630 --> 00:05:32.182 Y es bastante ordenado porque puedes hacer que estos arreglos se hagan más grandes cada vez durante el programa. 00:05:32.182 --> 00:05:36.017 Como cuando tienes una animación o cuando hay usuarios haciendo cosas y entonces puedes hacer mucho más. 00:05:36.017 --> 00:05:41.295 Así que has visto el 90% de las razones por las que usarías arreglos y las formas de usarlos. 00:05:41.295 --> 00: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. 00:05:47.021 --> 00:05:50.600 Pero primero asegúrate de volverte un maestro en los fundamentos.