[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.01,0:00:07.07,Default,,0000,0000,0000,,Ahora que has aprendido los fundamentos sobre ciclos, continuemos y hagamos un impresionante ciclo de dibujo como éste,
Dialogue: 0,0:00:07.07,0:00:09.85,Default,,0000,0000,0000,,Ballon Hooper flotando a través de un cielo hermoso.
Dialogue: 0,0:00:09.85,0:00:16.40,Default,,0000,0000,0000,,Así como yo escribí este programa desde el principio, quiero que pienses cómo lo harías tú, porque muy pronto lo harás.
Dialogue: 0,0:00:16.40,0:00:20.21,Default,,0000,0000,0000,,Así que en primer lugar, siempre ayuda descomponer tu programa en pasos.
Dialogue: 0,0:00:20.21,0:00:27.48,Default,,0000,0000,0000,,Empezaremos por dibujar estos globos, que es la misma elipse repetida una y otra vez, y que parece que es trabajo para un ciclo.
Dialogue: 0,0:00:27.48,0:00:33.77,Default,,0000,0000,0000,,Luego vamos a poner estas líneas y al final vamos a poner a Ballon Hopper.
Dialogue: 0,0:00:33.77,0:00:37.96,Default,,0000,0000,0000,,Muy bien, aquí tenemos una pizarra en blanco. Que puede ser muy intimidante.
Dialogue: 0,0:00:37.96,0:00:43.87,Default,,0000,0000,0000,,Algunas veces, esto ayuda a hacer las cosas un poco más amigables, añadiendo un fondo, sólo para entrar en el ritmo de las cosas.
Dialogue: 0,0:00:43.87,0:00:49.93,Default,,0000,0000,0000,,Ahora, como vamos a hacer un ciclo, lo primero que debemos pensar es en las preguntas para ciclos que hicimos la última vez.
Dialogue: 0,0:00:49.93,0:00:56.93,Default,,0000,0000,0000,,Y esta vez lo haremos un poco rápido, así que si necesitas recordarlo, puedes revisar "Introducción al ciclo While".
Dialogue: 0,0:00:56.93,0:01:01.39,Default,,0000,0000,0000,,Ahora, la primera pregunta es: "¿Qué queremos repetir?"
Dialogue: 0,0:01:01.39,0:01:06.44,Default,,0000,0000,0000,,Tratemos de dibujar este primer globo. Porque queremos repetir estos globos.
Dialogue: 0,0:01:06.44,0:01:15.07,Default,,0000,0000,0000,,Puedes seguir adelante y escribirlo, tal vez como esto, bueno este es un poco pequeño y no está en el lugar correcto,
Dialogue: 0,0:01:15.07,0:01:17.17,Default,,0000,0000,0000,,así que tratemos de moverlo un poco.
Dialogue: 0,0:01:17.17,0:01:25.18,Default,,0000,0000,0000,,Y esto es parte de la programación, tratas de hacer algo y te das cuenta de que no es lo que querías, así que lo intentas de nuevo y finalmente cada vez estás más cerca.
Dialogue: 0,0:01:25.18,0:01:33.87,Default,,0000,0000,0000,,Ok, ahora probablemente necesitamos agregar color, ¿cierto? No pensamos en esto cuando estamos revisando los pasos, podemos decir que esto es parte de dibujar el globo.
Dialogue: 0,0:01:33.87,0:01:40.90,Default,,0000,0000,0000,,¿Todo bien? A continuación tenemos que pensar en qué queremos estar cambiando exactamente de nuestro globo durante el ciclo.
Dialogue: 0,0:01:40.90,0:01:47.73,Default,,0000,0000,0000,,Bueno, queremos dibujar globos a lo largo de la pantalla, ¿no es así? Queremos que los globos queden dibujados aquí, aquí y aquí,
Dialogue: 0,0:01:47.73,0:01:51.01,Default,,0000,0000,0000,,y queremos que la computadora lo haga porque yo dibujo muy mal.
Dialogue: 0,0:01:51.01,0:01:58.39,Default,,0000,0000,0000,,Así que podemos hacer eso simplemente cambiando este primer número que, como recordarás, controla la posición de "x": la posición de los lados.
Dialogue: 0,0:01:58.39,0:02:02.77,Default,,0000,0000,0000,,Pero esto se ve un poco incompleto, ¿cierto? no es como el dibujo tan agradable que teníamos antes.
Dialogue: 0,0:02:02.77,0:02:11.11,Default,,0000,0000,0000,,Así que en lugar de esto, digamos que tenemos esta "x", para la posición de "x", y que la vamos a hacer una variable, como la teníamos antes.
Dialogue: 0,0:02:11.11,0:02:15.91,Default,,0000,0000,0000,,Y ahora vamos a estar cambiando la variable que está dentro de nuestro ciclo, vamos a usar un ciclo "while",
Dialogue: 0,0:02:15.91,0:02:22.14,Default,,0000,0000,0000,,y luego dentro de nuestro ciclo vamos a decir que "x" va a cambiar cada vez, digamos en 20.
Dialogue: 0,0:02:22.14,0:02:27.40,Default,,0000,0000,0000,,Y luego movemos esta elipse dentro del ciclo, con mucho cuidado, no debemos mover esta declaración de variable dentro del ciclo,
Dialogue: 0,0:02:27.40,0:02:30.21,Default,,0000,0000,0000,,porque si lo hacemos perderemos tiempo pensando qué es lo que está mal.
Dialogue: 0,0:02:30.21,0:02:34.38,Default,,0000,0000,0000,,En realidad valdría la pena que lo probaras por tu cuenta, si eres curioso.
Dialogue: 0,0:02:34.38,0:02:39.39,Default,,0000,0000,0000,,Ok, ahora nuestra tercera pregunta es: "¿Hasta cuándo queremos repetir?"
Dialogue: 0,0:02:39.39,0:02:43.82,Default,,0000,0000,0000,,Podemos pensar en repetir esto básicamente hasta que rebasemos el borde de la pantalla.
Dialogue: 0,0:02:43.82,0:02:46.65,Default,,0000,0000,0000,,Así que probablemente hasta que "x" sea menor que 400.
Dialogue: 0,0:02:46.65,0:02:51.16,Default,,0000,0000,0000,,Entonces, esto que resultó se ve bien, ¿cierto? Pero no es lo que habíamos imaginado.
Dialogue: 0,0:02:51.16,0:02:55.84,Default,,0000,0000,0000,,Así que como la vez anterior, hacemos las correcciones necesarias para obtener lo que habíamos imaginado.
Dialogue: 0,0:02:55.84,0:02:59.40,Default,,0000,0000,0000,,En primer lugar las elipses quedaron encimadas, así que arreglemos eso.
Dialogue: 0,0:02:59.40,0:03:02.41,Default,,0000,0000,0000,,Ok, eso es bueno para darles un poco de espacio para respirar.
Dialogue: 0,0:03:02.41,0:03:09.32,Default,,0000,0000,0000,,Pero ya sabes, tal vez estamos yendo un poco lejos de la orilla de la pantalla, así que tenemos cambiar el punto final, y hacer que empiecen a desaparecer
Dialogue: 0,0:03:09.32,0:03:16.51,Default,,0000,0000,0000,,las elipses que están acá, ya sabes, aquí, porque estamos diciendo que tan pronto como "x" llegue aquí, debe dejar de dibujar.
Dialogue: 0,0:03:16.51,0:03:19.38,Default,,0000,0000,0000,,Y es lo que dice esta parte del ciclo.
Dialogue: 0,0:03:19.38,0:03:24.94,Default,,0000,0000,0000,,¿Ok? Y también podemos decir, "Queremos mover un poco las elipses," queremos moverlas todas hacia abajo,
Dialogue: 0,0:03:24.94,0:03:34.02,Default,,0000,0000,0000,,y queremos, ya sabes, cambiar el tamaño un poco, y lo más interesante del ciclo "while" es que podemos hacerlo para todos los globos al mismo tiempo.
Dialogue: 0,0:03:34.02,0:03:36.90,Default,,0000,0000,0000,,Muy bien. Perfecto.
Dialogue: 0,0:03:36.90,0:03:42.02,Default,,0000,0000,0000,,Bueno, ahora veamos estos globos, estaría bien ponerles cuerdas. Si queremos podemos poner cuerdas,
Dialogue: 0,0:03:42.02,0:03:43.89,Default,,0000,0000,0000,,sino los globos se van a ir flotando.
Dialogue: 0,0:03:43.89,0:03:50.57,Default,,0000,0000,0000,,Así que necesitamos una línea para cada uno. Podemos poner las líneas iniciando en el centro de cada uno de los globos,
Dialogue: 0,0:03:50.57,0:03:55.91,Default,,0000,0000,0000,,sólo para hacerlo más fácil, y las vamos a unir todas en el mismo punto, como esto.
Dialogue: 0,0:03:55.91,0:03:59.43,Default,,0000,0000,0000,,Así que ¿cómo podemos hacer que el programa haga eso, en lugar de que nosotros dibujemos esas líneas?
Dialogue: 0,0:03:59.43,0:04:05.00,Default,,0000,0000,0000,,Entonces podemos pensar que, si queremos repetir algo, lo podemos poner dentro de este ciclo "while", así que continuemos y dibujemos esa línea.
Dialogue: 0,0:04:05.00,0:04:10.70,Default,,0000,0000,0000,,Y si queremos que quede en el centro de la elipse, tenemos que empezar con esas dos coordenadas, así que podemos hacerlo.
Dialogue: 0,0:04:10.70,0:04:16.62,Default,,0000,0000,0000,,Y puedes poner el punto donde quieres que termine, ya sabes, donde sea. ¡Y ese, está muy cerca!
Dialogue: 0,0:04:16.62,0:04:23.31,Default,,0000,0000,0000,,Pero de nuevo, no es perfecto, lo tenemos que arreglar, pero primero vamos a arreglar esta cosa tan fea que tenemos aquí.
Dialogue: 0,0:04:23.31,0:04:29.71,Default,,0000,0000,0000,,La línea que dibujamos está sobre el globo, y eso no está bien.
Dialogue: 0,0:04:29.71,0:04:35.25,Default,,0000,0000,0000,,Lo que queremos realmente es que el globo cubra la línea, y podemos arreglarlo simplemente cambiando el orden.
Dialogue: 0,0:04:35.25,0:04:38.76,Default,,0000,0000,0000,,Has visto muchas cosas de las que has aprendido aplicadas aquí al mismo tiempo.
Dialogue: 0,0:04:38.76,0:04:45.32,Default,,0000,0000,0000,,Muy bien, eso es bueno, pero tal vez queremos cambiar el color de esas líneas, y ¿cómo hacemos eso si realmente estamos haciendo este programa por nosotros mismos?
Dialogue: 0,0:04:45.32,0:04:47.22,Default,,0000,0000,0000,,Bueno, podemos revisar la documentación.
Dialogue: 0,0:04:47.22,0:04:50.47,Default,,0000,0000,0000,,O podemos ver el video de la documentación si no sabemos cómo hacer eso.
Dialogue: 0,0:04:50.47,0:04:54.92,Default,,0000,0000,0000,,Entonces, podemos continuar y usar "stroke()" para seleccionar el color de las líneas,
Dialogue: 0,0:04:54.92,0:05:00.25,Default,,0000,0000,0000,,y hacerlas, no sé, ¿tal vez de este color?
Dialogue: 0,0:05:00.25,0:05:10.15,Default,,0000,0000,0000,,¡Y es hermoso! Ahora, para terminar, todo lo que tenemos que hacer es dibujar a Hooper. Y tenemos que ponerla como una imagen, como ésta,
Dialogue: 0,0:05:10.15,0:05:16.54,Default,,0000,0000,0000,,y puedes ver la documentación para saber como lo hice; sólo nos queda moverla un poco, para que parezca que está sujetando los globos así
Dialogue: 0,0:05:16.54,0:05:18.23,Default,,0000,0000,0000,,y flotando por el cielo.
Dialogue: 0,0:05:18.23,0:05:26.53,Default,,0000,0000,0000,,¡Y aquí la tenemos! ¡Terminamos! Puedes tratar de decorar los globos, ya sabes, puedes pensar en agregar cosas a este ciclo para hacer los globos un poco más bonitos,
Dialogue: 0,0:05:26.53,0:05:30.53,Default,,0000,0000,0000,,e incluso usar un ciclo en tu próximo dibujo.