1
00:00:01,091 --> 00:00:04,441
Hasta ahora hemos visto cómo crear un arreglo y acceder a él.

2
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.

3
00:00:12,859 --> 00:00:15,805
Ok, déjenme mostrarles a qué me refiero.

4
00:00:15,805 --> 00:00:21,172
Aquí tenemos este programa que despliega a "Hooper" sujetando algunos globos; súper lindo.

5
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.

6
00:00:29,397 --> 00:00:35,325
Y luego aquí abajo tenemos este ciclo, y este ciclo recorre cada elemento del arreglo.

7
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.

8
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.

9
00:00:58,343 --> 00:01:02,063
Hermoso. Ahora tenemos tres globos para el feliz "Hooper".

10
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.

11
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".

12
00:01:17,801 --> 00:01:20,688
Eso sería interesante ¿no? Yo creo que sí.

13
00:01:20,688 --> 00:01:26,640
Así que ¿cómo hacemos eso? Queremos que nuestro programa esté cambiando, ¿cierto?

14
00:01:26,640 --> 00:01:30,278
Que cada vez que el usuario haga click, aparezca un globo nuevo.

15
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.

16
00:01:37,637 --> 00:01:43,185
Entonces movemos esto aquí, indentamos esto. Ok. Genial.

17
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.

18
00:01:48,405 --> 00:01:55,339
Bueno, podemos hacer eso con un "if". Así que "if(mouseIsPressed)", y luego hacemos algo.

19
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

20
00:02:01,176 --> 00:02:04,232
Vamos a hacer este arreglo de dos elemento nuevamente. Ok.

21
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.

22
00:02:10,464 --> 00:02:18,508
Entonces podemos escribir "xPositions[2] = mouseX;"

23
00:02:18,508 --> 00:02:21,681
Muy bien, déjenme mostrarles que esto funciona.

24
00:02:21,681 --> 00:02:26,640
Hago click y ¡tan tan! Aparezco un globo. ¿Qué fue lo que pasó?

25
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.

26
00:02:38,236 --> 00:02:41,742
Y si lo ven aquí, no hay tercer elemento, ¿cierto? No hay nada en ese espacio.

27
00:02:41,742 --> 00:02:45,897
Así que dice que lo encuentre, y que ponga "mouseX" en ese espacio.

28
00:02:45,897 --> 00:02:51,358
Bueno, como antes no había nada ahí, ahora está "mouseX".

29
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.

30
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.

31
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.

32
00:03:10,690 --> 00:03:18,938
Y eso es porque constantemente estamos reemplazando el espacio 2, el índice 2.

33
00:03:18,938 --> 00:03:22,898
Estamos constantemente reemplazándolo con la posición "x" del ratón.

34
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?

35
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?

36
00:03:40,235 --> 00:03:43,524
Que cada vez que el usuario haga click, haya un globo nuevo.

37
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.

38
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.

39
00:03:56,106 --> 00:04:01,019
Podemos hacer esto si tenemos una variable como contador. Así que escribimos "newInd = 2;"

40
00:04:01,019 --> 00:04:05,523
Con este vamos a empezar, y luego aquí vamos a poner "newInd" en lugar de 2.

41
00:04:05,523 --> 00:04:10,270
Y luego lo que queremos hacer es incrementar "newInd++".

42
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.

43
00:04:16,231 --> 00:04:18,473
Así que cada vez que hace click, se convierte en un valor mayor. Probemos.

44
00:04:18,473 --> 00:04:22,009
¡Tan tan! Muchos globos. Es una fiesta de globos. ¡Wow!

45
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.

46
00:04:32,108 --> 00:04:35,023
Así que tenemos una manera más fácil de hacer esto.

47
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.

48
00:04:42,768 --> 00:04:50,996
Ok, la manera de hacerlo es escribir "xPositions.push(mouseX);".

49
00:04:50,996 --> 00:04:56,573
Lo que estamos haciendo es llamar este método del arreglo "xPositions".

50
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".

51
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.

52
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.

53
00:05:17,858 --> 00:05:22,954
¡Tan tan! ¡Funciona! Y de esta manera tenemos menos código que antes. ¿Correcto?

54
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í.

55
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.

56
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.

57
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.

58
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.

59
00:05:47,021 --> 00:05:50,600
Pero primero asegúrate de volverte un maestro en los fundamentos.