WEBVTT 00:00:01.006 --> 00:00:03.807 Una gema, ¡una hermosa y dulce gema! 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. 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. 00:00:12.562 --> 00:00:16.162 Así que usemos un ciclo para dibujar 12 gemas en una fila. 00:00:16.162 --> 00:00:19.523 Vamos a ir de izquierda a derecha de la pantalla. 00:00:19.523 --> 00:00:22.304 Algo así. Entonces éste será un ciclo 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. 00:00:30.706 --> 00:00:35.409 Y luego tomamos esta línea y la movemos aquí dentro. 00:00:35.409 --> 00:00:40.075 Ok, ahora tenemos 12 gemas pero en realidad están todas apiladas, una encima de otra. 00:00:40.075 --> 00:00:43.141 Recuerda que queremos que estén a lo largo de la pantalla. 00:00:43.141 --> 00:00:45.941 Esto significa que queremos que la "x" cambie cada vez. 00:00:45.941 --> 00:00:49.174 Ahora "x" es igual a 36, pero queremos que sea diferente cada vez. 00:00:49.174 --> 00:00:51.859 Esto significa que queremos que "x" dependa de "i". 00:00:51.859 --> 00:00:55.949 Entonces lo que podemos hacer es simplemente escribir: "i" por 36. 00:00:55.949 --> 00:01:02.147 Así que la primera "x" es 0, luego 36, luego 72, etc. etc. 00:01:02.147 --> 00:01:04.575 ¡Genial! Ahora tenemos una fila de gemas. 00:01:04.575 --> 00:01:07.997 Y esto me recuerda aquellas escenas de Indiana Jones o Aladino, 00:01:07.997 --> 00:01:11.086 donde el héroe descubre un tesoro enterrado lleno de joyas, 00:01:11.086 --> 00:01:13.732 pero ellos generalmente descubren más joyas que esto. 00:01:13.732 --> 00:01:17.016 ¡No sólo una fila de gemas sino un montón de joyas! 00:01:17.016 --> 00:01:21.609 Entonces, ¿en realidad cómo podemos hacer gemas 00:01:21.609 --> 00:01:24.386 que llenen toda la pantalla? 00:01:24.386 --> 00:01:30.119 Bueno, podemos empezar por repetir este ciclo "for", copiándolo y pegándolo, 00:01:30.119 --> 00:01:33.735 y luego cambiando esta "y" cada vez. 00:01:33.735 --> 00:01:36.798 Y aquí la cambiamos a 60, luego a 90. ¿Ok? 00:01:36.798 --> 00:01:41.588 Así que ahora tenemos tres renglones de gemas, y eso está bien. 00:01:41.588 --> 00:01:45.495 Pero eso se está volviendo aburrido porque todo lo que estoy haciendo 00:01:45.495 --> 00:01:49.193 es copiar y pegar, y cambiar esta cosa de aquí. 00:01:49.193 --> 00:01:52.859 Y normalmente en el pasado cuando nos encontrábamos escribiendo un código repetitivo como éste 00:01:52.859 --> 00:01:57.025 habríamos dicho: "Oh, creo que sería mejor usar un ciclo". 00:01:57.025 --> 00:01:58.607 Pero ya estamos usando un ciclo. 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. 00:02:03.854 --> 00:02:09.018 Bueno, la solución es usar lo que llamamos ciclos anidados. Un ciclo dentro de otro. 00:02:09.018 --> 00:02:12.132 Así que lo que vamos a hacer es un ciclo externo, 00:02:12.132 --> 00:02:14.851 que va a recorrer la pantalla de arriba a abajo, 00:02:14.851 --> 00:02:19.234 y luego nuestro ciclo interno es el que va ocuparse de lo que está haciendo ya, 00:02:19.234 --> 00:02:21.977 que es recorrer de izquierda a derecha. 00:02:21.977 --> 00:02:24.006 Déjenme mostrarles lo que quiero decir. 00:02:24.006 --> 00:02:29.851 Escribimos "for" y usaremos una variable diferente, la "j", hemos estado usando "i", 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. 00:02:36.614 --> 00:02:41.219 Ok, éste es nuestro ciclo externo, encargado de recorrer de arriba a abajo. 00:02:41.219 --> 00:02:47.657 y luego tomamos uno de nuestros ciclos "for" anteriores y lo ponemos aquí dentro, 00:02:47.657 --> 00:02:53.274 arreglamos la indentación y borramos estos ciclos anteriores. Ok. 00:02:53.274 --> 00:02:58.109 Ahora tenemos todas las gems apiladas en la misma fila. 00:02:58.109 --> 00:03:01.289 Ahora, el punto es cambiar la "y", ¿cierto? 00:03:01.289 --> 00:03:04.309 Eso era lo que estábamos cambiando cuando copiábamos y pegábamos, 00:03:04.309 --> 00:03:06.108 y ahora la "y" siempre es igual a 90. 00:03:06.108 --> 00:03:09.440 Queremos cambiar la "y" para cada renglón. 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". 00:03:15.378 --> 00:03:24.663 Entonces podemos cambiar esto de alguna manera, en que la "y" sea, digamos "j" por 30. 00:03:24.663 --> 00:03:29.934 ¡Tan tan! ¡Yeah! ¡Muchas gemas! ¡Muy bien! 00:03:29.934 --> 00:03:32.428 Vamos a revisar una vez más cómo funciona esto. 00:03:32.428 --> 00:03:37.620 El ciclo externo crea esta variable "j" y la incrementa hasta 13. 00:03:37.620 --> 00:03:44.340 Y en cada corrida de este ciclo externo se ejecuta este ciclo interno. 00:03:44.340 --> 00:03:48.113 Este ciclo interno crea la variable "i" que se incrementa hasta 12. 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". 00:03:54.728 --> 00:03:58.987 Y por eso esta "i" cambia más frecuentemente que la "j". 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". 00:04:04.738 --> 00:04:09.277 Entonces lo que voy a hacer es comentar esta imagen, 00:04:09.277 --> 00:04:12.027 seleccionar un color de relleno, 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..." 00:04:16.796 --> 00:04:21.545 y luego lo voy poner en el lugar apropiado. Ok. 00:04:21.545 --> 00:04:25.499 Ahora podemos ver que "j" va de 0 a 12. 00:04:25.499 --> 00:04:31.549 Básicamente éstas son las posiciones de los renglones de nuestras gemas. 00:04:31.549 --> 00:04:35.044 Y ahora visualizaremos "i" y nos daremos cuenta cómo cambia. 00:04:35.044 --> 00:04:42.216 Así que para "i" vamos a seleccionar un color diferente. 00:04:42.216 --> 00:04:45.915 Y luego vamos a poner a "i" en algún lugar. 00:04:45.915 --> 00:04:50.031 Y cambiaremos la "x" para que vaya a través de la pantalla. 00:04:50.031 --> 00:04:53.848 Haremos lo mismo para la "y". Ok. 00:04:53.848 --> 00:04:59.561 Ahora podemos ver que la "i" va de 0 a 11. 00:04:59.561 --> 00:05:04.686 Y la "i", como les había dicho, cambia más frecuentemente. 00:05:04.686 --> 00:05:08.778 Y esta línea de código se ejecuta muchas más veces que esta otra. 00:05:08.778 --> 00:05:13.855 Porque esta línea de código es ejecutada en cada corrida del ciclo "for" interno, 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. 00:05:18.597 --> 00:05:21.750 Así que espero que esta visualización de "i" y "j" 00:05:21.750 --> 00:05:26.133 ayude a entender mejor lo que está pasando con estos ciclos anidados. 00:05:26.133 --> 00:05:30.475 Ahora traigamos de regreso nuestras gemas, ¡porque están geniales! 00:05:30.475 --> 00:05:33.636 Así que hay muchas cosas que puedes hacer con ciclos anidados. 00:05:33.636 --> 00:05:37.232 Si tan sólo piensas en todo lo que en el mundo 00:05:37.232 --> 00:05:39.859 se ve como una cuadrícula bidimensional, como un tablero de ajedrez, como un edredón, 00:05:39.859 --> 00:05:44.244 las estrellas de la bandera de EU, patrones interesantes y tapices. 00:05:44.244 --> 00:05:47.462 Deja volar tu imaginación, juega con este código, 00:05:47.462 --> 00:05:49.806 podría ser cambiando la imagen. 00:05:49.806 --> 00:05:53.796 ¡Yo voy a empezar cambiándola por un corazón! 00:05:53.796 --> 00:05:59.196 !Para enseñarte cuánto amo los ciclos anidados!