WEBVTT 00:00:00.567 --> 00:00:02.361 En nuestra última guía paso a paso, 00:00:02.361 --> 00:00:07.341 mostramos cómo animar una bola que rebota en los bordes de la pantalla usando la función "draw" y la sentencia "if" 00:00:07.341 --> 00:00:08.637 Vamos a revisar. 00:00:08.637 --> 00:00:12.407 En primer lugar, hemos creado algunas variables iniciales para la posición y la velocidad de una bola. 00:00:12.407 --> 00:00:17.240 Después en la función "draw", que es esa función especial que se llama una y otra vez mientras el programa está corriendo, 00:00:17.240 --> 00:00:20.907 repintamos el fondo y dibujamos una elipse en la pantalla 00:00:20.907 --> 00:00:27.779 y posicionamos esa elipse con base en la variable de posición y de velocidad y cómo se afectan mutuamente. 00:00:27.779 --> 00:00:31.195 Ahora, sin la sentencia "if", nuestra bola sólo siguió adelante por siempre, 00:00:31.195 --> 00:00:32.862 o hasta que presionamos reiniciar. 00:00:32.862 --> 00:00:36.021 Así que incluimos dos sentencias "if" aquí abajo 00:00:36.021 --> 00:00:40.605 para revisar y ver si la bola estaba cerca del borde derecho o del borde izquierdo de la pantalla, 00:00:40.606 --> 00:00:45.679 y en caso de que así fuera, cambiamos la variable "speed" para que fuera positiva o negativa de modo que la bola básicamente rebotara de un lado a otro. 00:00:45.679 --> 00:00:49.841 Entonces ahora tenemos esta bola, rebotando de un lado a otro para siempre. 00:00:49.841 --> 00:00:53.671 Eso está muy bien, y hay muchas animaciones realmente interesantes que podemos hacer con esto. 00:00:53.671 --> 00:00:57.675 Pero ahora, quiero añadir la interacción del usuario a este programa. 00:00:57.675 --> 00:01:00.071 Verán, en este momento este programa es como un show de televisión. 00:01:00.071 --> 00:01:04.945 si se lo das a un amigo, y tu amigo no sabe como programar, no podría interactuar con él. 00:01:04.945 --> 00:01:07.606 Todo lo que podría hacer es mirar, lo cual es genial, 00:01:07.606 --> 00:01:10.340 pero sería mejor si pudiera hacer algo más. 00:01:10.340 --> 00:01:13.470 Así que vamos a darle al usuario algunas formas de controlar el programa. 00:01:13.470 --> 00:01:20.156 Recuerda que antes aprendimos sobre dos variables globales especiales llamadas "mouseX" y "mouseY". 00:01:20.156 --> 00:01:25.972 Esas variables nos regresan números que nos dicen la posición actual del ratón del usuario 00:01:25.972 --> 00:01:28.779 y son una manera genial de hacer que el programa sea más interactivo. 00:01:28.779 --> 00:01:31.239 Así que veamos. ¿Cómo las podemos usar? 00:01:31.239 --> 00:01:34.029 Bueno, deberíamos usarlas en algún lugar dentro de la función "draw". 00:01:34.029 --> 00:01:39.503 Porque es el único código que se ejecuta una y otra vez mientras el programa corre. 00:01:39.503 --> 00:01:44.551 Todo lo que está fuera de la función "draw" es llamado sólo una vez, cuando el programa inicia. 00:01:44.551 --> 00:01:48.136 Así que no tiene sentido usar "mouseX" y "mouseY" ahí fuera. 00:01:48.136 --> 00:01:51.093 El usuario no tendría oportunidad de interactuar con él. 00:01:51.093 --> 00:01:57.280 En la función "draw", en este momento estamos dibujando la bola 200 pixeles abajo en la pantalla. 00:01:57.280 --> 00:02:00.842 ¿Qué pasa si reemplazamos eso con "mouseY"? 00:02:00.842 --> 00:02:02.739 Porque esa es la posición de "y", ¿cierto? 00:02:02.739 --> 00:02:08.530 De esta manera añadirá la posición de "y" dependiendo de la posición de "y" del usuario. ¿correcto? 00:02:08.530 --> 00:02:14.362 Revisemos esto. Moviendo mi cursor arriba y abajo, puedo cambiar la línea en la que la bola se mueve. 00:02:14.362 --> 00:02:18.196 Eso es genial. Pero también quiero usar "mouseX". 00:02:18.196 --> 00:02:19.863 Entonces, ¿cómo puedo usarla? 00:02:19.863 --> 00:02:22.445 Bueno, por qué no hacemos otra bola NOTE Paragraph 00:02:22.445 --> 00:02:25.945 y hacemos que esta bola vaya en la dirección opuesta: arriba y abajo. 00:02:25.945 --> 00:02:30.510 Y ahí tendríamos al usuario controlando la posición "x" de esta bola. 00:02:30.510 --> 00:02:32.612 Así que haríamos lo contrario. 00:02:32.612 --> 00:02:40.637 Digamos "ellipse (mouseX, position, 50, 50)" ¿correcto? 00:02:40.637 --> 00:02:46.906 ¡Verifiquemos esto! Ahora tengo estas dos bolas que yo controlo y que van en direcciones perpendiculares. 00:02:46.906 --> 00:02:50.075 Pero todavía no estoy contenta. 00:02:50.075 --> 00:02:53.445 Quiero darle al usuario más control. 00:02:53.445 --> 00:02:56.944 Quiero darle al usuario el poder de poner en marcha la segunda bola. 00:02:56.944 --> 00:03:01.407 Para que realmente haga que exista, sólo con presionar el ratón. 00:03:01.407 --> 00:03:07.340 Bueno, entonces tengo que encontrar la manera de decirle al programa que el usuario está presionando su ratón. 00:03:07.340 --> 00:03:12.945 Afortunadamente, tenemos una variable booleana súper especial para esto. 00:03:12.945 --> 00:03:19.362 Se llama "mouseIsPressed" y podemos usarla dentro de una sentencia "if". 00:03:19.362 --> 00:03:22.339 Veamos, ésta es nuestra segunda bola. 00:03:22.339 --> 00:03:31.945 Así que podemos escribir que si "mouseIsPressed", y luego moveremos la instrucción de elipse para acá. 00:03:31.945 --> 00:03:40.863 Entonces lo que estamos haciendo aquí, es decirle al programa que sólo queremos dibujar esta elipse si esto es verdad 00:03:40.863 --> 00:03:46.030 y "mouseIsPressed" será verdadera si el usuario está presionando su ratón. 00:03:46.030 --> 00:03:48.195 Tratemos. 00:03:48.195 --> 00:03:49.788 ¡Tan tan! 00:03:49.788 --> 00:03:52.702 Ahora puedo hacer que la bola aparezca cuando presiono el ratón. 00:03:52.702 --> 00:03:57.877 Esto es un acercamiento de este universo paralelo. ¡Aparece! ¡Aparece! ¡Aparece! 00:03:57.877 --> 00:04:00.029 ¡Es impresionante! 00:04:00.029 --> 00:04:04.740 Así que lo interesante de esta variable "mouseIsPressed" 00:04:04.740 --> 00:04:09.055 es que cambia con base en lo que el usuario hace, y no en lo que programa hace. 00:04:09.055 --> 00:04:13.195 Y como la función "draw" se llama repetidamente, una y otra vez, 00:04:13.195 --> 00:04:16.171 el resultado del programa cambiará con el tiempo 00:04:16.171 --> 00:04:18.740 sólo con una pequeña entrada del usuario. 00:04:18.740 --> 00:04:22.029 Con el poder combinado de la sentencia "if" y la variable "mouseIsPressed", 00:04:22.029 --> 00:04:26.241 tienes todo lo que necesitas para hacer cosas impresionantes como botones y programas de dibujo. 00:04:26.241 --> 00:04:28.360 ¡Yuju!