0:00:00.567,0:00:02.361
En nuestra última guía paso a paso,

0:00:02.361,0: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"

0:00:07.341,0:00:08.637
Vamos a revisar.

0:00:08.637,0:00:12.407
En primer lugar, hemos creado algunas variables iniciales para la posición y la velocidad de una bola.

0:00:12.407,0: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,

0:00:17.240,0:00:20.907
repintamos el fondo y dibujamos una elipse en la pantalla

0:00:20.907,0:00:27.779
y posicionamos esa elipse con base en la variable de posición y de velocidad y cómo se afectan mutuamente.

0:00:27.779,0:00:31.195
Ahora, sin la sentencia "if", nuestra bola sólo siguió adelante por siempre,

0:00:31.195,0:00:32.862
o hasta que presionamos reiniciar.

0:00:32.862,0:00:36.021
Así que incluimos dos sentencias "if" aquí abajo

0:00:36.021,0:00:40.605
para revisar y ver si la bola estaba cerca del borde derecho o del borde izquierdo de la pantalla,

0:00:40.606,0: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.

0:00:45.679,0:00:49.841
Entonces ahora tenemos esta bola, rebotando de un lado a otro para siempre.

0:00:49.841,0:00:53.671
Eso está muy bien, y hay muchas animaciones realmente interesantes que podemos hacer con esto.

0:00:53.671,0:00:57.675
Pero ahora, quiero añadir la interacción del usuario a este programa.

0:00:57.675,0:01:00.071
Verán, en este momento este programa es como un show de televisión.

0:01:00.071,0:01:04.945
si se lo das a un amigo, y tu amigo no sabe como programar, no podría interactuar con él.

0:01:04.945,0:01:07.606
Todo lo que podría hacer es mirar, lo cual es genial,

0:01:07.606,0:01:10.340
pero sería mejor si pudiera hacer algo más.

0:01:10.340,0:01:13.470
Así que vamos a darle al usuario algunas formas de controlar el programa.

0:01:13.470,0:01:20.156
Recuerda que antes aprendimos sobre dos variables globales especiales llamadas "mouseX" y "mouseY".

0:01:20.156,0:01:25.972
Esas variables nos regresan números que nos dicen la posición actual del ratón del usuario

0:01:25.972,0:01:28.779
y son una manera genial de hacer que el programa sea más interactivo.

0:01:28.779,0:01:31.239
Así que veamos. ¿Cómo las podemos usar?

0:01:31.239,0:01:34.029
Bueno, deberíamos usarlas en algún lugar dentro de la función "draw".

0:01:34.029,0:01:39.503
Porque es el único código que se ejecuta una y otra vez mientras el programa corre.

0:01:39.503,0:01:44.551
Todo lo que está fuera de la función "draw" es llamado sólo una vez, cuando el programa inicia.

0:01:44.551,0:01:48.136
Así que no tiene sentido usar "mouseX" y "mouseY" ahí fuera.

0:01:48.136,0:01:51.093
El usuario no tendría oportunidad de interactuar con él.

0:01:51.093,0:01:57.280
En la función "draw", en este momento estamos dibujando la bola 200 pixeles abajo en la pantalla.

0:01:57.280,0:02:00.842
¿Qué pasa si reemplazamos eso con "mouseY"?

0:02:00.842,0:02:02.739
Porque esa es la posición de "y", ¿cierto?

0:02:02.739,0:02:08.530
De esta manera añadirá la posición de "y" dependiendo de la posición de "y" del usuario. ¿correcto?

0:02:08.530,0:02:14.362
Revisemos esto. Moviendo mi cursor arriba y abajo, puedo cambiar la línea en la que la bola se mueve.

0:02:14.362,0:02:18.196
Eso es genial. Pero también quiero usar "mouseX".

0:02:18.196,0:02:19.863
Entonces, ¿cómo puedo usarla?

0:02:19.863,0:02:22.445
Bueno, por qué no hacemos otra bola

0:02:22.445,0:02:25.945
y hacemos que esta bola vaya en la dirección opuesta: arriba y abajo.

0:02:25.945,0:02:30.510
Y ahí tendríamos al usuario controlando la posición "x" de esta bola.

0:02:30.510,0:02:32.612
Así que haríamos lo contrario.

0:02:32.612,0:02:40.637
Digamos "ellipse (mouseX, position, 50, 50)" ¿correcto?

0:02:40.637,0:02:46.906
¡Verifiquemos esto! Ahora tengo estas dos bolas que yo controlo y que van en direcciones perpendiculares.

0:02:46.906,0:02:50.075
Pero todavía no estoy contenta.

0:02:50.075,0:02:53.445
Quiero darle al usuario más control.

0:02:53.445,0:02:56.944
Quiero darle al usuario el poder de poner en marcha la segunda bola.

0:02:56.944,0:03:01.407
Para que realmente haga que exista, sólo con presionar el ratón.

0:03:01.407,0:03:07.340
Bueno, entonces tengo que encontrar la manera de decirle al programa que el usuario está presionando su ratón.

0:03:07.340,0:03:12.945
Afortunadamente, tenemos una variable booleana súper especial para esto.

0:03:12.945,0:03:19.362
Se llama "mouseIsPressed" y podemos usarla dentro de una sentencia "if".

0:03:19.362,0:03:22.339
Veamos, ésta es nuestra segunda bola.

0:03:22.339,0:03:31.945
Así que podemos escribir que si "mouseIsPressed", y luego moveremos la instrucción de elipse para acá.

0:03:31.945,0:03:40.863
Entonces lo que estamos haciendo aquí, es decirle al programa que sólo queremos dibujar esta elipse si esto es verdad

0:03:40.863,0:03:46.030
y "mouseIsPressed" será verdadera si el usuario está presionando su ratón.

0:03:46.030,0:03:48.195
Tratemos.

0:03:48.195,0:03:49.788
¡Tan tan!

0:03:49.788,0:03:52.702
Ahora puedo hacer que la bola aparezca cuando presiono el ratón.

0:03:52.702,0:03:57.877
Esto es un acercamiento de este universo paralelo. ¡Aparece! ¡Aparece! ¡Aparece!

0:03:57.877,0:04:00.029
¡Es impresionante!

0:04:00.029,0:04:04.740
Así que lo interesante de esta variable "mouseIsPressed"

0:04:04.740,0:04:09.055
es que cambia con base en lo que el usuario hace, y no en lo que programa hace.

0:04:09.055,0:04:13.195
Y como la función "draw" se llama repetidamente, una y otra vez,

0:04:13.195,0:04:16.171
el resultado del programa cambiará con el tiempo

0:04:16.171,0:04:18.740
sólo con una pequeña entrada del usuario.

0:04:18.740,0:04:22.029
Con el poder combinado de la sentencia "if" y la variable "mouseIsPressed",

0:04:22.029,0:04:26.241
tienes todo lo que necesitas para hacer cosas impresionantes como botones y programas de dibujo.

0:04:26.241,0:04:28.360
¡Yuju!