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