0:00:01.006,0:00:03.807
Una gema, ¡una hermosa y dulce gema!

0:00:03.807,0:00:08.275
Pero sabes que sería mejor tener todo una fila de gemas que tener sólo una.

0:00:08.275,0:00:12.562
Y por supuesto, ahora sabemos que la mejor manera de hacer una fila de gemas sería con un ciclo.

0:00:12.562,0:00:16.162
Así que usemos un ciclo para dibujar 12 gemas en una fila.

0:00:16.162,0:00:19.523
Vamos a ir de izquierda a derecha de la pantalla.

0:00:19.523,0:00:22.304
Algo así. Entonces éste será un ciclo

0:00:22.304,0:00:30.706
"for" definimos la variable "i" igual a cero, "i" es menor que doce, "i" más más.

0:00:30.706,0:00:35.409
Y luego tomamos esta línea y la movemos aquí dentro.

0:00:35.409,0:00:40.075
Ok, ahora tenemos 12 gemas pero en realidad están todas apiladas, una encima de otra.

0:00:40.075,0:00:43.141
Recuerda que queremos que estén a lo largo de la pantalla.

0:00:43.141,0:00:45.941
Esto significa que queremos que la "x" cambie cada vez.

0:00:45.941,0:00:49.174
Ahora "x" es igual a 36, pero queremos que sea diferente cada vez.

0:00:49.174,0:00:51.859
Esto significa que queremos que "x" dependa de "i".

0:00:51.859,0:00:55.949
Entonces lo que podemos hacer es simplemente escribir: "i" por 36.

0:00:55.949,0:01:02.147
Así que la primera "x" es 0, luego 36, luego 72, etc. etc.

0:01:02.147,0:01:04.575
¡Genial! Ahora tenemos una fila de gemas.

0:01:04.575,0:01:07.997
Y esto me recuerda aquellas escenas de Indiana Jones o Aladino,

0:01:07.997,0:01:11.086
donde el héroe descubre un tesoro enterrado lleno de joyas,

0:01:11.086,0:01:13.732
pero ellos generalmente descubren más joyas que esto.

0:01:13.732,0:01:17.016
¡No sólo una fila de gemas sino un montón de joyas!

0:01:17.016,0:01:21.609
Entonces, ¿en realidad cómo podemos hacer gemas

0:01:21.609,0:01:24.386
que llenen toda la pantalla?

0:01:24.386,0:01:30.119
Bueno, podemos empezar por repetir este ciclo "for", copiándolo y pegándolo,

0:01:30.119,0:01:33.735
y luego cambiando esta "y" cada vez.

0:01:33.735,0:01:36.798
Y aquí la cambiamos a 60, luego a 90. ¿Ok?

0:01:36.798,0:01:41.588
Así que ahora tenemos tres renglones de gemas, y eso está bien.

0:01:41.588,0:01:45.495
Pero eso se está volviendo aburrido porque todo lo que estoy haciendo

0:01:45.495,0:01:49.193
es copiar y pegar, y cambiar esta cosa de aquí.

0:01:49.193,0:01:52.859
Y normalmente en el pasado cuando nos encontrábamos escribiendo un código repetitivo como éste

0:01:52.859,0:01:57.025
habríamos dicho: "Oh, creo que sería mejor usar un ciclo".

0:01:57.025,0:01:58.607
Pero ya estamos usando un ciclo.

0:01:58.607,0:02:03.854
Así que ¿cuál es la solución para evitar escribir todo esto? Me refiero a copiar y pegar repetidamente.

0:02:03.854,0:02:09.018
Bueno, la solución es usar lo que llamamos ciclos anidados. Un ciclo dentro de otro.

0:02:09.018,0:02:12.132
Así que lo que vamos a hacer es un ciclo externo,

0:02:12.132,0:02:14.851
que va a recorrer la pantalla de arriba a abajo,

0:02:14.851,0:02:19.234
y luego nuestro ciclo interno es el que va ocuparse de lo que está haciendo ya,

0:02:19.234,0:02:21.977
que es recorrer de izquierda a derecha.

0:02:21.977,0:02:24.006
Déjenme mostrarles lo que quiero decir.

0:02:24.006,0:02:29.851
Escribimos "for" y usaremos una variable diferente, la "j", hemos estado usando "i",

0:02:29.851,0:02:36.614
entonces, "for", para la variable "j" igual a 0, "j" es menor que 13, "j" más más.

0:02:36.614,0:02:41.219
Ok, éste es nuestro ciclo externo, encargado de recorrer de arriba a abajo.

0:02:41.219,0:02:47.657
y luego tomamos uno de nuestros ciclos "for" anteriores y lo ponemos aquí dentro,

0:02:47.657,0:02:53.274
arreglamos la indentación y borramos estos ciclos anteriores. Ok.

0:02:53.274,0:02:58.109
Ahora tenemos todas las gems apiladas en la misma fila.

0:02:58.109,0:03:01.289
Ahora, el punto es cambiar la "y", ¿cierto?

0:03:01.289,0:03:04.309
Eso era lo que estábamos cambiando cuando copiábamos y pegábamos,

0:03:04.309,0:03:06.108
y ahora la "y" siempre es igual a 90.

0:03:06.108,0:03:09.440
Queremos cambiar la "y" para cada renglón.

0:03:09.440,0:03:15.378
Así que de la misma manera que "x" depende de "i", queremos que la "y" dependa de "j".

0:03:15.378,0:03:24.663
Entonces podemos cambiar esto de alguna manera, en que la "y" sea, digamos "j" por 30.

0:03:24.663,0:03:29.934
¡Tan tan! ¡Yeah! ¡Muchas gemas! [br]¡Muy bien!

0:03:29.934,0:03:32.428
Vamos a revisar una vez más cómo funciona esto.

0:03:32.428,0:03:37.620
El ciclo externo crea esta variable "j" y la incrementa hasta 13.

0:03:37.620,0:03:44.340
Y en cada corrida de este ciclo externo se ejecuta este ciclo interno.

0:03:44.340,0:03:48.113
Este ciclo interno crea la variable "i" que se incrementa hasta 12.

0:03:48.113,0: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".

0:03:54.728,0:03:58.987
Y por eso esta "i" cambia más frecuentemente que la "j".

0:03:58.987,0:04:04.738
Para tratar de entender esto un poco mejor, vamos a visualizar los valores de "i" y "j".

0:04:04.738,0:04:09.277
Entonces lo que voy a hacer es comentar esta imagen,

0:04:09.277,0:04:12.027
seleccionar un color de relleno,

0:04:12.027,0:04:16.796
y voy a usar un comando "text" para mostrar el valor de "j", así que "text(j..."

0:04:16.796,0:04:21.545
y luego lo voy poner en el lugar apropiado. Ok.

0:04:21.545,0:04:25.499
Ahora podemos ver que "j" va de 0 a 12.

0:04:25.499,0:04:31.549
Básicamente éstas son las posiciones de los renglones de nuestras gemas.

0:04:31.549,0:04:35.044
Y ahora visualizaremos "i" y nos daremos cuenta cómo cambia.

0:04:35.044,0:04:42.216
Así que para "i" vamos a seleccionar un color diferente.

0:04:42.216,0:04:45.915
Y luego vamos a poner a "i" en algún lugar.

0:04:45.915,0:04:50.031
Y cambiaremos la "x" para que vaya a través de la pantalla.

0:04:50.031,0:04:53.848
Haremos lo mismo para la "y". Ok.

0:04:53.848,0:04:59.561
Ahora podemos ver que la "i" va de 0 a 11.

0:04:59.561,0:05:04.686
Y la "i", como les había dicho, cambia más frecuentemente.

0:05:04.686,0:05:08.778
Y esta línea de código se ejecuta muchas más veces que esta otra.

0:05:08.778,0:05:13.855
Porque esta línea de código es ejecutada en cada corrida del ciclo "for" interno,

0:05:13.855,0:05:18.597
mientras que esta línea de código se ejecuta solamente en cada corrida del ciclo externo.

0:05:18.597,0:05:21.750
Así que espero que esta visualización de "i" y "j"

0:05:21.750,0:05:26.133
ayude a entender mejor lo que está pasando con estos ciclos anidados.

0:05:26.133,0:05:30.475
Ahora traigamos de regreso nuestras gemas, ¡porque están geniales!

0:05:30.475,0:05:33.636
Así que hay muchas cosas que puedes hacer con ciclos anidados.

0:05:33.636,0:05:37.232
Si tan sólo piensas en todo lo que en el mundo

0:05:37.232,0:05:39.859
se ve como una cuadrícula bidimensional, como un tablero de ajedrez, como un edredón,

0:05:39.859,0:05:44.244
las estrellas de la bandera de EU, patrones interesantes y tapices.

0:05:44.244,0:05:47.462
Deja volar tu imaginación, juega con este código,

0:05:47.462,0:05:49.806
podría ser cambiando la imagen.

0:05:49.806,0:05:53.796
¡Yo voy a empezar cambiándola por un corazón!

0:05:53.796,0:05:59.196
!Para enseñarte cuánto amo los ciclos anidados!