-
En nuestra última guía paso a paso,
-
mostramos cómo animar una bola que rebota en los bordes de la pantalla usando la función "draw" y la sentencia "if"
-
Vamos a revisar.
-
En primer lugar, hemos creado algunas variables iniciales para la posición y la velocidad de una bola.
-
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,
-
repintamos el fondo y dibujamos una elipse en la pantalla
-
y posicionamos esa elipse con base en la variable de posición y de velocidad y cómo se afectan mutuamente.
-
Ahora, sin la sentencia "if", nuestra bola sólo siguió adelante por siempre,
-
o hasta que presionamos reiniciar.
-
Así que incluimos dos sentencias "if" aquí abajo
-
para revisar y ver si la bola estaba cerca del borde derecho o del borde izquierdo de la pantalla,
-
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.
-
Entonces ahora tenemos esta bola, rebotando de un lado a otro para siempre.
-
Eso está muy bien, y hay muchas animaciones realmente interesantes que podemos hacer con esto.
-
Pero ahora, quiero añadir la interacción del usuario a este programa.
-
Verán, en este momento este programa es como un show de televisión.
-
si se lo das a un amigo, y tu amigo no sabe como programar, no podría interactuar con él.
-
Todo lo que podría hacer es mirar, lo cual es genial,
-
pero sería mejor si pudiera hacer algo más.
-
Así que vamos a darle al usuario algunas formas de controlar el programa.
-
Recuerda que antes aprendimos sobre dos variables globales especiales llamadas "mouseX" y "mouseY".
-
Esas variables nos regresan números que nos dicen la posición actual del ratón del usuario
-
y son una manera genial de hacer que el programa sea más interactivo.
-
Así que veamos. ¿Cómo las podemos usar?
-
Bueno, deberíamos usarlas en algún lugar dentro de la función "draw".
-
Porque es el único código que se ejecuta una y otra vez mientras el programa corre.
-
Todo lo que está fuera de la función "draw" es llamado sólo una vez, cuando el programa inicia.
-
Así que no tiene sentido usar "mouseX" y "mouseY" ahí fuera.
-
El usuario no tendría oportunidad de interactuar con él.
-
En la función "draw", en este momento estamos dibujando la bola 200 pixeles abajo en la pantalla.
-
¿Qué pasa si reemplazamos eso con "mouseY"?
-
Porque esa es la posición de "y", ¿cierto?
-
De esta manera añadirá la posición de "y" dependiendo de la posición de "y" del usuario. ¿correcto?
-
Revisemos esto. Moviendo mi cursor arriba y abajo, puedo cambiar la línea en la que la bola se mueve.
-
Eso es genial. Pero también quiero usar "mouseX".
-
Entonces, ¿cómo puedo usarla?
-
Bueno, por qué no hacemos otra bola
-
y hacemos que esta bola vaya en la dirección opuesta: arriba y abajo.
-
Y ahí tendríamos al usuario controlando la posición "x" de esta bola.
-
Así que haríamos lo contrario.
-
Digamos "ellipse (mouseX, position, 50, 50)" ¿correcto?
-
¡Verifiquemos esto! Ahora tengo estas dos bolas que yo controlo y que van en direcciones perpendiculares.
-
Pero todavía no estoy contenta.
-
Quiero darle al usuario más control.
-
Quiero darle al usuario el poder de poner en marcha la segunda bola.
-
Para que realmente haga que exista, sólo con presionar el ratón.
-
Bueno, entonces tengo que encontrar la manera de decirle al programa que el usuario está presionando su ratón.
-
Afortunadamente, tenemos una variable booleana súper especial para esto.
-
Se llama "mouseIsPressed" y podemos usarla dentro de una sentencia "if".
-
Veamos, ésta es nuestra segunda bola.
-
Así que podemos escribir que si "mouseIsPressed", y luego moveremos la instrucción de elipse para acá.
-
Entonces lo que estamos haciendo aquí, es decirle al programa que sólo queremos dibujar esta elipse si esto es verdad
-
y "mouseIsPressed" será verdadera si el usuario está presionando su ratón.
-
Tratemos.
-
¡Tan tan!
-
Ahora puedo hacer que la bola aparezca cuando presiono el ratón.
-
Esto es un acercamiento de este universo paralelo. ¡Aparece! ¡Aparece! ¡Aparece!
-
¡Es impresionante!
-
Así que lo interesante de esta variable "mouseIsPressed"
-
es que cambia con base en lo que el usuario hace, y no en lo que programa hace.
-
Y como la función "draw" se llama repetidamente, una y otra vez,
-
el resultado del programa cambiará con el tiempo
-
sólo con una pequeña entrada del usuario.
-
Con el poder combinado de la sentencia "if" y la variable "mouseIsPressed",
-
tienes todo lo que necesitas para hacer cosas impresionantes como botones y programas de dibujo.
-
¡Yuju!
