[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.09,0:00:04.44,Default,,0000,0000,0000,,Hasta ahora hemos visto cómo crear un arreglo y acceder a él.
Dialogue: 0,0:00:04.44,0:00:12.86,Default,,0000,0000,0000,,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.
Dialogue: 0,0:00:12.86,0:00:15.80,Default,,0000,0000,0000,,Ok, déjenme mostrarles a qué me refiero.
Dialogue: 0,0:00:15.80,0:00:21.17,Default,,0000,0000,0000,,Aquí tenemos este programa que despliega a "Hooper" sujetando algunos globos; súper lindo.
Dialogue: 0,0:00:21.17,0:00:29.40,Default,,0000,0000,0000,,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.
Dialogue: 0,0:00:29.40,0:00:35.32,Default,,0000,0000,0000,,Y luego aquí abajo tenemos este ciclo, y este ciclo recorre cada elemento del arreglo.
Dialogue: 0,0:00:35.32,0:00:47.57,Default,,0000,0000,0000,,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.
Dialogue: 0,0:00:47.57,0:00:58.34,Default,,0000,0000,0000,,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.
Dialogue: 0,0:00:58.34,0:01:02.06,Default,,0000,0000,0000,,Hermoso. Ahora tenemos tres globos para el feliz "Hooper".
Dialogue: 0,0:01:02.06,0:01:10.93,Default,,0000,0000,0000,,Pero digamos que queremos que el usuario, que no sabe cómo programar, pueda añadir nuevos globos.
Dialogue: 0,0:01:10.93,0:01:17.80,Default,,0000,0000,0000,,Entonces queremos darle el programa a un usuario y decirle: "Oye, puedes hacer click donde quieras que aparezca un globo".
Dialogue: 0,0:01:17.80,0:01:20.69,Default,,0000,0000,0000,,Eso sería interesante ¿no? Yo creo que sí.
Dialogue: 0,0:01:20.69,0:01:26.64,Default,,0000,0000,0000,,Así que ¿cómo hacemos eso? Queremos que nuestro programa esté cambiando, ¿cierto?
Dialogue: 0,0:01:26.64,0:01:30.28,Default,,0000,0000,0000,,Que cada vez que el usuario haga click, aparezca un globo nuevo.
Dialogue: 0,0:01:30.28,0:01:37.64,Default,,0000,0000,0000,,Así que empecemos por mover todo esto dentro de una función "draw", así será fácil cambiarla.
Dialogue: 0,0:01:37.64,0:01:43.18,Default,,0000,0000,0000,,Entonces movemos esto aquí, indentamos esto. Ok. Genial.
Dialogue: 0,0:01:43.18,0:01:48.40,Default,,0000,0000,0000,,Así que ahora queremos verificar y ver si el usuario presiona el ratón en este momento.
Dialogue: 0,0:01:48.40,0:01:55.34,Default,,0000,0000,0000,,Bueno, podemos hacer eso con un "if". Así que "if(mouseIsPressed)", y luego hacemos algo.
Dialogue: 0,0:01:55.34,0:02:01.18,Default,,0000,0000,0000,,Entonces, ¿qué vamos a hacer? Si el usuario presiona el ratón, queremos, de alguna manera, añadir un número a nuestro arreglo
Dialogue: 0,0:02:01.18,0:02:04.23,Default,,0000,0000,0000,,Vamos a hacer este arreglo de dos elemento nuevamente. Ok.
Dialogue: 0,0:02:04.23,0:02:10.46,Default,,0000,0000,0000,,Así que queremos añadir un número a este arreglo de alguna manera. Bueno, te mostraré una forma de hacer esto.
Dialogue: 0,0:02:10.46,0:02:18.51,Default,,0000,0000,0000,,Entonces podemos escribir "xPositions[2] = mouseX;"
Dialogue: 0,0:02:18.51,0:02:21.68,Default,,0000,0000,0000,,Muy bien, déjenme mostrarles que esto funciona.
Dialogue: 0,0:02:21.68,0:02:26.64,Default,,0000,0000,0000,,Hago click y ¡tan tan! Aparezco un globo. ¿Qué fue lo que pasó?
Dialogue: 0,0:02:26.64,0:02:38.24,Default,,0000,0000,0000,,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.
Dialogue: 0,0:02:38.24,0:02:41.74,Default,,0000,0000,0000,,Y si lo ven aquí, no hay tercer elemento, ¿cierto? No hay nada en ese espacio.
Dialogue: 0,0:02:41.74,0:02:45.90,Default,,0000,0000,0000,,Así que dice que lo encuentre, y que ponga "mouseX" en ese espacio.
Dialogue: 0,0:02:45.90,0:02:51.36,Default,,0000,0000,0000,,Bueno, como antes no había nada ahí, ahora está "mouseX".
Dialogue: 0,0:02:51.36,0:03:00.13,Default,,0000,0000,0000,,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.
Dialogue: 0,0:03:00.13,0:03:04.03,Default,,0000,0000,0000,,Eso está muy bien, y déjenme hacer click más veces para mostrarles que esto funciona.
Dialogue: 0,0:03:04.03,0:03:10.69,Default,,0000,0000,0000,,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.
Dialogue: 0,0:03:10.69,0:03:18.94,Default,,0000,0000,0000,,Y eso es porque constantemente estamos reemplazando el espacio 2, el índice 2.
Dialogue: 0,0:03:18.94,0:03:22.90,Default,,0000,0000,0000,,Estamos constantemente reemplazándolo con la posición "x" del ratón.
Dialogue: 0,0:03:22.90,0:03:34.57,Default,,0000,0000,0000,,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?
Dialogue: 0,0:03:34.57,0:03:40.24,Default,,0000,0000,0000,,Eso está bien, pero lo que realmente queremos es que el usuario pueda poner muchísimos globos, ¿cierto?
Dialogue: 0,0:03:40.24,0:03:43.52,Default,,0000,0000,0000,,Que cada vez que el usuario haga click, haya un globo nuevo.
Dialogue: 0,0:03:43.52,0:03:50.85,Default,,0000,0000,0000,,Eso significa que necesitamos incrementar constantemente el índice de nuestro arreglo en el que estamos guardando la nueva posición.
Dialogue: 0,0:03:50.85,0:03:56.11,Default,,0000,0000,0000,,Así que no queremos que sea 2 cada vez, queremos que sea 2, luego 3, luego 4, luego 5, luego 6, etc.
Dialogue: 0,0:03:56.11,0:04:01.02,Default,,0000,0000,0000,,Podemos hacer esto si tenemos una variable como contador. Así que escribimos "newInd = 2;"
Dialogue: 0,0:04:01.02,0:04:05.52,Default,,0000,0000,0000,,Con este vamos a empezar, y luego aquí vamos a poner "newInd" en lugar de 2.
Dialogue: 0,0:04:05.52,0:04:10.27,Default,,0000,0000,0000,,Y luego lo que queremos hacer es incrementar "newInd++".
Dialogue: 0,0:04:10.27,0:04:16.23,Default,,0000,0000,0000,,Así que cada vez sumamos 1 a esta variable. Entonces empezamos en 2, luego se convierte en 3, luego en 4.
Dialogue: 0,0:04:16.23,0:04:18.47,Default,,0000,0000,0000,,Así que cada vez que hace click, se convierte en un valor mayor. Probemos.
Dialogue: 0,0:04:18.47,0:04:22.01,Default,,0000,0000,0000,,¡Tan tan! Muchos globos. Es una fiesta de globos. ¡Wow!
Dialogue: 0,0:04:22.01,0:04:32.11,Default,,0000,0000,0000,,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.
Dialogue: 0,0:04:32.11,0:04:35.02,Default,,0000,0000,0000,,Así que tenemos una manera más fácil de hacer esto.
Dialogue: 0,0:04:35.02,0:04:42.77,Default,,0000,0000,0000,,Déjenme borrar todo esto que hicimos. Muy bien, no necesitamos esto, y ya no necesitamos esto. Lo marcamos como comentario.
Dialogue: 0,0:04:42.77,0:04:50.100,Default,,0000,0000,0000,,Ok, la manera de hacerlo es escribir "xPositions.push(mouseX);".
Dialogue: 0,0:04:50.100,0:04:56.57,Default,,0000,0000,0000,,Lo que estamos haciendo es llamar este método del arreglo "xPositions".
Dialogue: 0,0:04:56.57,0:05:05.23,Default,,0000,0000,0000,,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".
Dialogue: 0,0:05:05.23,0:05:12.47,Default,,0000,0000,0000,,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.
Dialogue: 0,0:05:12.47,0:05:17.86,Default,,0000,0000,0000,,Entonces el arreglo va a ser más grande cada vez. Así que vamos a reiniciar y probar esto.
Dialogue: 0,0:05:17.86,0:05:22.95,Default,,0000,0000,0000,,¡Tan tan! ¡Funciona! Y de esta manera tenemos menos código que antes. ¿Correcto?
Dialogue: 0,0:05:22.95,0:05:27.63,Default,,0000,0000,0000,,Así que la mayoría de las veces querrás usar "push" para agregarle cosas a tu arreglo como aquí.
Dialogue: 0,0:05:27.63,0:05:32.18,Default,,0000,0000,0000,,Y es bastante ordenado porque puedes hacer que estos arreglos se hagan más grandes cada vez durante el programa.
Dialogue: 0,0:05:32.18,0:05:36.02,Default,,0000,0000,0000,,Como cuando tienes una animación o cuando hay usuarios haciendo cosas y entonces puedes hacer mucho más.
Dialogue: 0,0:05:36.02,0:05:41.30,Default,,0000,0000,0000,,Así que has visto el 90% de las razones por las que usarías arreglos y las formas de usarlos.
Dialogue: 0,0:05:41.30,0:05:47.02,Default,,0000,0000,0000,,Pero hay mucho más que puedes hacer con arreglos. Así que si tienes preguntas, sólo hazlas en el área de discusión.
Dialogue: 0,0:05:47.02,0:05:50.60,Default,,0000,0000,0000,,Pero primero asegúrate de volverte un maestro en los fundamentos.