Una gema, ¡una hermosa y dulce gema!
Pero sabes que sería mejor tener todo una fila de gemas que tener sólo una.
Y por supuesto, ahora sabemos que la mejor manera de hacer una fila de gemas sería con un ciclo.
Así que usemos un ciclo para dibujar 12 gemas en una fila.
Vamos a ir de izquierda a derecha de la pantalla.
Algo así. Entonces éste será un ciclo
"for" definimos la variable "i" igual a cero, "i" es menor que doce, "i" más más.
Y luego tomamos esta línea y la movemos aquí dentro.
Ok, ahora tenemos 12 gemas pero en realidad están todas apiladas, una encima de otra.
Recuerda que queremos que estén a lo largo de la pantalla.
Esto significa que queremos que la "x" cambie cada vez.
Ahora "x" es igual a 36, pero queremos que sea diferente cada vez.
Esto significa que queremos que "x" dependa de "i".
Entonces lo que podemos hacer es simplemente escribir: "i" por 36.
Así que la primera "x" es 0, luego 36, luego 72, etc. etc.
¡Genial! Ahora tenemos una fila de gemas.
Y esto me recuerda aquellas escenas de Indiana Jones o Aladino,
donde el héroe descubre un tesoro enterrado lleno de joyas,
pero ellos generalmente descubren más joyas que esto.
¡No sólo una fila de gemas sino un montón de joyas!
Entonces, ¿en realidad cómo podemos hacer gemas
que llenen toda la pantalla?
Bueno, podemos empezar por repetir este ciclo "for", copiándolo y pegándolo,
y luego cambiando esta "y" cada vez.
Y aquí la cambiamos a 60, luego a 90. ¿Ok?
Así que ahora tenemos tres renglones de gemas, y eso está bien.
Pero eso se está volviendo aburrido porque todo lo que estoy haciendo
es copiar y pegar, y cambiar esta cosa de aquí.
Y normalmente en el pasado cuando nos encontrábamos escribiendo un código repetitivo como éste
habríamos dicho: "Oh, creo que sería mejor usar un ciclo".
Pero ya estamos usando un ciclo.
Así que ¿cuál es la solución para evitar escribir todo esto? Me refiero a copiar y pegar repetidamente.
Bueno, la solución es usar lo que llamamos ciclos anidados. Un ciclo dentro de otro.
Así que lo que vamos a hacer es un ciclo externo,
que va a recorrer la pantalla de arriba a abajo,
y luego nuestro ciclo interno es el que va ocuparse de lo que está haciendo ya,
que es recorrer de izquierda a derecha.
Déjenme mostrarles lo que quiero decir.
Escribimos "for" y usaremos una variable diferente, la "j", hemos estado usando "i",
entonces, "for", para la variable "j" igual a 0, "j" es menor que 13, "j" más más.
Ok, éste es nuestro ciclo externo, encargado de recorrer de arriba a abajo.
y luego tomamos uno de nuestros ciclos "for" anteriores y lo ponemos aquí dentro,
arreglamos la indentación y borramos estos ciclos anteriores. Ok.
Ahora tenemos todas las gems apiladas en la misma fila.
Ahora, el punto es cambiar la "y", ¿cierto?
Eso era lo que estábamos cambiando cuando copiábamos y pegábamos,
y ahora la "y" siempre es igual a 90.
Queremos cambiar la "y" para cada renglón.
Así que de la misma manera que "x" depende de "i", queremos que la "y" dependa de "j".
Entonces podemos cambiar esto de alguna manera, en que la "y" sea, digamos "j" por 30.
¡Tan tan! ¡Yeah! ¡Muchas gemas! ¡Muy bien!
Vamos a revisar una vez más cómo funciona esto.
El ciclo externo crea esta variable "j" y la incrementa hasta 13.
Y en cada corrida de este ciclo externo se ejecuta este ciclo interno.
Este ciclo interno crea la variable "i" que se incrementa hasta 12.
Y en cada corrida del ciclo interno, dibuja una imagen en "x" y "y" que están basadas en "i" y "j".
Y por eso esta "i" cambia más frecuentemente que la "j".
Para tratar de entender esto un poco mejor, vamos a visualizar los valores de "i" y "j".
Entonces lo que voy a hacer es comentar esta imagen,
seleccionar un color de relleno,
y voy a usar un comando "text" para mostrar el valor de "j", así que "text(j..."
y luego lo voy poner en el lugar apropiado. Ok.
Ahora podemos ver que "j" va de 0 a 12.
Básicamente éstas son las posiciones de los renglones de nuestras gemas.
Y ahora visualizaremos "i" y nos daremos cuenta cómo cambia.
Así que para "i" vamos a seleccionar un color diferente.
Y luego vamos a poner a "i" en algún lugar.
Y cambiaremos la "x" para que vaya a través de la pantalla.
Haremos lo mismo para la "y". Ok.
Ahora podemos ver que la "i" va de 0 a 11.
Y la "i", como les había dicho, cambia más frecuentemente.
Y esta línea de código se ejecuta muchas más veces que esta otra.
Porque esta línea de código es ejecutada en cada corrida del ciclo "for" interno,
mientras que esta línea de código se ejecuta solamente en cada corrida del ciclo externo.
Así que espero que esta visualización de "i" y "j"
ayude a entender mejor lo que está pasando con estos ciclos anidados.
Ahora traigamos de regreso nuestras gemas, ¡porque están geniales!
Así que hay muchas cosas que puedes hacer con ciclos anidados.
Si tan sólo piensas en todo lo que en el mundo
se ve como una cuadrícula bidimensional, como un tablero de ajedrez, como un edredón,
las estrellas de la bandera de EU, patrones interesantes y tapices.
Deja volar tu imaginación, juega con este código,
podría ser cambiando la imagen.
¡Yo voy a empezar cambiándola por un corazón!
!Para enseñarte cuánto amo los ciclos anidados!