1 00:00:01,014 --> 00:00:07,073 Ahora que has aprendido los fundamentos sobre ciclos, continuemos y hagamos un impresionante ciclo de dibujo como éste, 2 00:00:07,073 --> 00:00:09,849 Ballon Hooper flotando a través de un cielo hermoso. 3 00:00:09,849 --> 00:00:16,401 Así como yo escribí este programa desde el principio, quiero que pienses cómo lo harías tú, porque muy pronto lo harás. 4 00:00:16,401 --> 00:00:20,207 Así que en primer lugar, siempre ayuda descomponer tu programa en pasos. 5 00:00:20,207 --> 00:00:27,485 Empezaremos por dibujar estos globos, que es la misma elipse repetida una y otra vez, y que parece que es trabajo para un ciclo. 6 00:00:27,485 --> 00:00:33,774 Luego vamos a poner estas líneas y al final vamos a poner a Ballon Hopper. 7 00:00:33,774 --> 00:00:37,963 Muy bien, aquí tenemos una pizarra en blanco. Que puede ser muy intimidante. 8 00:00:37,963 --> 00:00:43,869 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. 9 00:00:43,869 --> 00:00:49,933 Ahora, como vamos a hacer un ciclo, lo primero que debemos pensar es en las preguntas para ciclos que hicimos la última vez. 10 00:00:49,933 --> 00:00:56,933 Y esta vez lo haremos un poco rápido, así que si necesitas recordarlo, puedes revisar "Introducción al ciclo While". 11 00:00:56,933 --> 00:01:01,393 Ahora, la primera pregunta es: "¿Qué queremos repetir?" 12 00:01:01,393 --> 00:01:06,441 Tratemos de dibujar este primer globo. Porque queremos repetir estos globos. 13 00:01:06,441 --> 00:01:15,066 Puedes seguir adelante y escribirlo, tal vez como esto, bueno este es un poco pequeño y no está en el lugar correcto, 14 00:01:15,066 --> 00:01:17,169 así que tratemos de moverlo un poco. 15 00:01:17,169 --> 00:01:25,183 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. 16 00:01:25,183 --> 00:01:33,870 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. 17 00:01:33,870 --> 00:01:40,898 ¿Todo bien? A continuación tenemos que pensar en qué queremos estar cambiando exactamente de nuestro globo durante el ciclo. 18 00:01:40,898 --> 00:01:47,733 Bueno, queremos dibujar globos a lo largo de la pantalla, ¿no es así? Queremos que los globos queden dibujados aquí, aquí y aquí, 19 00:01:47,733 --> 00:01:51,013 y queremos que la computadora lo haga porque yo dibujo muy mal. 20 00:01:51,013 --> 00:01:58,391 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. 21 00:01:58,391 --> 00:02:02,767 Pero esto se ve un poco incompleto, ¿cierto? no es como el dibujo tan agradable que teníamos antes. 22 00:02:02,767 --> 00:02:11,108 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. 23 00:02:11,108 --> 00:02:15,912 Y ahora vamos a estar cambiando la variable que está dentro de nuestro ciclo, vamos a usar un ciclo "while", 24 00:02:15,912 --> 00:02:22,136 y luego dentro de nuestro ciclo vamos a decir que "x" va a cambiar cada vez, digamos en 20. 25 00:02:22,136 --> 00:02:27,398 Y luego movemos esta elipse dentro del ciclo, con mucho cuidado, no debemos mover esta declaración de variable dentro del ciclo, 26 00:02:27,398 --> 00:02:30,209 porque si lo hacemos perderemos tiempo pensando qué es lo que está mal. 27 00:02:30,209 --> 00:02:34,375 En realidad valdría la pena que lo probaras por tu cuenta, si eres curioso. 28 00:02:34,375 --> 00:02:39,392 Ok, ahora nuestra tercera pregunta es: "¿Hasta cuándo queremos repetir?" 29 00:02:39,392 --> 00:02:43,818 Podemos pensar en repetir esto básicamente hasta que rebasemos el borde de la pantalla. 30 00:02:43,818 --> 00:02:46,647 Así que probablemente hasta que "x" sea menor que 400. 31 00:02:46,647 --> 00:02:51,163 Entonces, esto que resultó se ve bien, ¿cierto? Pero no es lo que habíamos imaginado. 32 00:02:51,163 --> 00:02:55,839 Así que como la vez anterior, hacemos las correcciones necesarias para obtener lo que habíamos imaginado. 33 00:02:55,839 --> 00:02:59,400 En primer lugar las elipses quedaron encimadas, así que arreglemos eso. 34 00:02:59,400 --> 00:03:02,409 Ok, eso es bueno para darles un poco de espacio para respirar. 35 00:03:02,409 --> 00:03:09,317 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 36 00:03:09,317 --> 00:03:16,507 las elipses que están acá, ya sabes, aquí, porque estamos diciendo que tan pronto como "x" llegue aquí, debe dejar de dibujar. 37 00:03:16,507 --> 00:03:19,385 Y es lo que dice esta parte del ciclo. 38 00:03:19,385 --> 00:03:24,945 ¿Ok? Y también podemos decir, "Queremos mover un poco las elipses," queremos moverlas todas hacia abajo, 39 00:03:24,945 --> 00:03:34,018 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. 40 00:03:34,018 --> 00:03:36,896 Muy bien. Perfecto. 41 00:03:36,896 --> 00:03:42,024 Bueno, ahora veamos estos globos, estaría bien ponerles cuerdas. Si queremos podemos poner cuerdas, 42 00:03:42,024 --> 00:03:43,892 sino los globos se van a ir flotando. 43 00:03:43,892 --> 00:03:50,573 Así que necesitamos una línea para cada uno. Podemos poner las líneas iniciando en el centro de cada uno de los globos, 44 00:03:50,573 --> 00:03:55,912 sólo para hacerlo más fácil, y las vamos a unir todas en el mismo punto, como esto. 45 00:03:55,912 --> 00:03:59,430 Así que ¿cómo podemos hacer que el programa haga eso, en lugar de que nosotros dibujemos esas líneas? 46 00:03:59,430 --> 00:04:05,000 Entonces podemos pensar que, si queremos repetir algo, lo podemos poner dentro de este ciclo "while", así que continuemos y dibujemos esa línea. 47 00:04:05,000 --> 00:04:10,702 Y si queremos que quede en el centro de la elipse, tenemos que empezar con esas dos coordenadas, así que podemos hacerlo. 48 00:04:10,702 --> 00:04:16,618 Y puedes poner el punto donde quieres que termine, ya sabes, donde sea. ¡Y ese, está muy cerca! 49 00:04:16,618 --> 00:04:23,306 Pero de nuevo, no es perfecto, lo tenemos que arreglar, pero primero vamos a arreglar esta cosa tan fea que tenemos aquí. 50 00:04:23,306 --> 00:04:29,713 La línea que dibujamos está sobre el globo, y eso no está bien. 51 00:04:29,713 --> 00:04:35,249 Lo que queremos realmente es que el globo cubra la línea, y podemos arreglarlo simplemente cambiando el orden. 52 00:04:35,249 --> 00:04:38,764 Has visto muchas cosas de las que has aprendido aplicadas aquí al mismo tiempo. 53 00:04:38,764 --> 00:04:45,315 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? 54 00:04:45,315 --> 00:04:47,224 Bueno, podemos revisar la documentación. 55 00:04:47,224 --> 00:04:50,474 O podemos ver el video de la documentación si no sabemos cómo hacer eso. 56 00:04:50,474 --> 00:04:54,924 Entonces, podemos continuar y usar "stroke()" para seleccionar el color de las líneas, 57 00:04:54,924 --> 00:05:00,253 y hacerlas, no sé, ¿tal vez de este color? 58 00:05:00,253 --> 00:05:10,152 ¡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, 59 00:05:10,152 --> 00:05:16,536 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í 60 00:05:16,536 --> 00:05:18,229 y flotando por el cielo. 61 00:05:18,229 --> 00:05:26,534 ¡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, 62 00:05:26,534 --> 00:05:30,534 e incluso usar un ciclo en tu próximo dibujo.