1
00:00:01,006 --> 00:00:03,807
Una gema, ¡una hermosa y dulce gema!

2
00:00:03,807 --> 00:00:08,275
Pero sabes que sería mejor tener todo una fila de gemas que tener sólo una.

3
00:00:08,275 --> 00:00:12,562
Y por supuesto, ahora sabemos que la mejor manera de hacer una fila de gemas sería con un ciclo.

4
00:00:12,562 --> 00:00:16,162
Así que usemos un ciclo para dibujar 12 gemas en una fila.

5
00:00:16,162 --> 00:00:19,523
Vamos a ir de izquierda a derecha de la pantalla.

6
00:00:19,523 --> 00:00:22,304
Algo así. Entonces éste será un ciclo

7
00:00:22,304 --> 00:00:30,706
"for" definimos la variable "i" igual a cero, "i" es menor que doce, "i" más más.

8
00:00:30,706 --> 00:00:35,409
Y luego tomamos esta línea y la movemos aquí dentro.

9
00:00:35,409 --> 00:00:40,075
Ok, ahora tenemos 12 gemas pero en realidad están todas apiladas, una encima de otra.

10
00:00:40,075 --> 00:00:43,141
Recuerda que queremos que estén a lo largo de la pantalla.

11
00:00:43,141 --> 00:00:45,941
Esto significa que queremos que la "x" cambie cada vez.

12
00:00:45,941 --> 00:00:49,174
Ahora "x" es igual a 36, pero queremos que sea diferente cada vez.

13
00:00:49,174 --> 00:00:51,859
Esto significa que queremos que "x" dependa de "i".

14
00:00:51,859 --> 00:00:55,949
Entonces lo que podemos hacer es simplemente escribir: "i" por 36.

15
00:00:55,949 --> 00:01:02,147
Así que la primera "x" es 0, luego 36, luego 72, etc. etc.

16
00:01:02,147 --> 00:01:04,575
¡Genial! Ahora tenemos una fila de gemas.

17
00:01:04,575 --> 00:01:07,997
Y esto me recuerda aquellas escenas de Indiana Jones o Aladino,

18
00:01:07,997 --> 00:01:11,086
donde el héroe descubre un tesoro enterrado lleno de joyas,

19
00:01:11,086 --> 00:01:13,732
pero ellos generalmente descubren más joyas que esto.

20
00:01:13,732 --> 00:01:17,016
¡No sólo una fila de gemas sino un montón de joyas!

21
00:01:17,016 --> 00:01:21,609
Entonces, ¿en realidad cómo podemos hacer gemas

22
00:01:21,609 --> 00:01:24,386
que llenen toda la pantalla?

23
00:01:24,386 --> 00:01:30,119
Bueno, podemos empezar por repetir este ciclo "for", copiándolo y pegándolo,

24
00:01:30,119 --> 00:01:33,735
y luego cambiando esta "y" cada vez.

25
00:01:33,735 --> 00:01:36,798
Y aquí la cambiamos a 60, luego a 90. ¿Ok?

26
00:01:36,798 --> 00:01:41,588
Así que ahora tenemos tres renglones de gemas, y eso está bien.

27
00:01:41,588 --> 00:01:45,495
Pero eso se está volviendo aburrido porque todo lo que estoy haciendo

28
00:01:45,495 --> 00:01:49,193
es copiar y pegar, y cambiar esta cosa de aquí.

29
00:01:49,193 --> 00:01:52,859
Y normalmente en el pasado cuando nos encontrábamos escribiendo un código repetitivo como éste

30
00:01:52,859 --> 00:01:57,025
habríamos dicho: "Oh, creo que sería mejor usar un ciclo".

31
00:01:57,025 --> 00:01:58,607
Pero ya estamos usando un ciclo.

32
00:01:58,607 --> 00:02:03,854
Así que ¿cuál es la solución para evitar escribir todo esto? Me refiero a copiar y pegar repetidamente.

33
00:02:03,854 --> 00:02:09,018
Bueno, la solución es usar lo que llamamos ciclos anidados. Un ciclo dentro de otro.

34
00:02:09,018 --> 00:02:12,132
Así que lo que vamos a hacer es un ciclo externo,

35
00:02:12,132 --> 00:02:14,851
que va a recorrer la pantalla de arriba a abajo,

36
00:02:14,851 --> 00:02:19,234
y luego nuestro ciclo interno es el que va ocuparse de lo que está haciendo ya,

37
00:02:19,234 --> 00:02:21,977
que es recorrer de izquierda a derecha.

38
00:02:21,977 --> 00:02:24,006
Déjenme mostrarles lo que quiero decir.

39
00:02:24,006 --> 00:02:29,851
Escribimos "for" y usaremos una variable diferente, la "j", hemos estado usando "i",

40
00:02:29,851 --> 00:02:36,614
entonces, "for", para la variable "j" igual a 0, "j" es menor que 13, "j" más más.

41
00:02:36,614 --> 00:02:41,219
Ok, éste es nuestro ciclo externo, encargado de recorrer de arriba a abajo.

42
00:02:41,219 --> 00:02:47,657
y luego tomamos uno de nuestros ciclos "for" anteriores y lo ponemos aquí dentro,

43
00:02:47,657 --> 00:02:53,274
arreglamos la indentación y borramos estos ciclos anteriores. Ok.

44
00:02:53,274 --> 00:02:58,109
Ahora tenemos todas las gems apiladas en la misma fila.

45
00:02:58,109 --> 00:03:01,289
Ahora, el punto es cambiar la "y", ¿cierto?

46
00:03:01,289 --> 00:03:04,309
Eso era lo que estábamos cambiando cuando copiábamos y pegábamos,

47
00:03:04,309 --> 00:03:06,108
y ahora la "y" siempre es igual a 90.

48
00:03:06,108 --> 00:03:09,440
Queremos cambiar la "y" para cada renglón.

49
00:03:09,440 --> 00:03:15,378
Así que de la misma manera que "x" depende de "i", queremos que la "y" dependa de "j".

50
00:03:15,378 --> 00:03:24,663
Entonces podemos cambiar esto de alguna manera, en que la "y" sea, digamos "j" por 30.

51
00:03:24,663 --> 00:03:29,934
¡Tan tan! ¡Yeah! ¡Muchas gemas! 
¡Muy bien!

52
00:03:29,934 --> 00:03:32,428
Vamos a revisar una vez más cómo funciona esto.

53
00:03:32,428 --> 00:03:37,620
El ciclo externo crea esta variable "j" y la incrementa hasta 13.

54
00:03:37,620 --> 00:03:44,340
Y en cada corrida de este ciclo externo se ejecuta este ciclo interno.

55
00:03:44,340 --> 00:03:48,113
Este ciclo interno crea la variable "i" que se incrementa hasta 12.

56
00:03:48,113 --> 00:03:54,728
Y en cada corrida del ciclo interno, dibuja una imagen en "x" y "y" que están basadas en "i" y "j".

57
00:03:54,728 --> 00:03:58,987
Y por eso esta "i" cambia más frecuentemente que la "j".

58
00:03:58,987 --> 00:04:04,738
Para tratar de entender esto un poco mejor, vamos a visualizar los valores de "i" y "j".

59
00:04:04,738 --> 00:04:09,277
Entonces lo que voy a hacer es comentar esta imagen,

60
00:04:09,277 --> 00:04:12,027
seleccionar un color de relleno,

61
00:04:12,027 --> 00:04:16,796
y voy a usar un comando "text" para mostrar el valor de "j", así que "text(j..."

62
00:04:16,796 --> 00:04:21,545
y luego lo voy poner en el lugar apropiado. Ok.

63
00:04:21,545 --> 00:04:25,499
Ahora podemos ver que "j" va de 0 a 12.

64
00:04:25,499 --> 00:04:31,549
Básicamente éstas son las posiciones de los renglones de nuestras gemas.

65
00:04:31,549 --> 00:04:35,044
Y ahora visualizaremos "i" y nos daremos cuenta cómo cambia.

66
00:04:35,044 --> 00:04:42,216
Así que para "i" vamos a seleccionar un color diferente.

67
00:04:42,216 --> 00:04:45,915
Y luego vamos a poner a "i" en algún lugar.

68
00:04:45,915 --> 00:04:50,031
Y cambiaremos la "x" para que vaya a través de la pantalla.

69
00:04:50,031 --> 00:04:53,848
Haremos lo mismo para la "y". Ok.

70
00:04:53,848 --> 00:04:59,561
Ahora podemos ver que la "i" va de 0 a 11.

71
00:04:59,561 --> 00:05:04,686
Y la "i", como les había dicho, cambia más frecuentemente.

72
00:05:04,686 --> 00:05:08,778
Y esta línea de código se ejecuta muchas más veces que esta otra.

73
00:05:08,778 --> 00:05:13,855
Porque esta línea de código es ejecutada en cada corrida del ciclo "for" interno,

74
00:05:13,855 --> 00:05:18,597
mientras que esta línea de código se ejecuta solamente en cada corrida del ciclo externo.

75
00:05:18,597 --> 00:05:21,750
Así que espero que esta visualización de "i" y "j"

76
00:05:21,750 --> 00:05:26,133
ayude a entender mejor lo que está pasando con estos ciclos anidados.

77
00:05:26,133 --> 00:05:30,475
Ahora traigamos de regreso nuestras gemas, ¡porque están geniales!

78
00:05:30,475 --> 00:05:33,636
Así que hay muchas cosas que puedes hacer con ciclos anidados.

79
00:05:33,636 --> 00:05:37,232
Si tan sólo piensas en todo lo que en el mundo

80
00:05:37,232 --> 00:05:39,859
se ve como una cuadrícula bidimensional, como un tablero de ajedrez, como un edredón,

81
00:05:39,859 --> 00:05:44,244
las estrellas de la bandera de EU, patrones interesantes y tapices.

82
00:05:44,244 --> 00:05:47,462
Deja volar tu imaginación, juega con este código,

83
00:05:47,462 --> 00:05:49,806
podría ser cambiando la imagen.

84
00:05:49,806 --> 00:05:53,796
¡Yo voy a empezar cambiándola por un corazón!

85
00:05:53,796 --> 00:05:59,196
!Para enseñarte cuánto amo los ciclos anidados!