[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.57,0:00:02.36,Default,,0000,0000,0000,,En nuestra última guía paso a paso,
Dialogue: 0,0:00:02.36,0:00:07.34,Default,,0000,0000,0000,,mostramos cómo animar una bola que rebota en los bordes de la pantalla usando la función "draw" y la sentencia "if"
Dialogue: 0,0:00:07.34,0:00:08.64,Default,,0000,0000,0000,,Vamos a revisar.
Dialogue: 0,0:00:08.64,0:00:12.41,Default,,0000,0000,0000,,En primer lugar, hemos creado algunas variables iniciales para la posición y la velocidad de una bola.
Dialogue: 0,0:00:12.41,0:00:17.24,Default,,0000,0000,0000,,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,
Dialogue: 0,0:00:17.24,0:00:20.91,Default,,0000,0000,0000,,repintamos el fondo y dibujamos una elipse en la pantalla
Dialogue: 0,0:00:20.91,0:00:27.78,Default,,0000,0000,0000,,y posicionamos esa elipse con base en la variable de posición y de velocidad y cómo se afectan mutuamente.
Dialogue: 0,0:00:27.78,0:00:31.20,Default,,0000,0000,0000,,Ahora, sin la sentencia "if", nuestra bola sólo siguió adelante por siempre,
Dialogue: 0,0:00:31.20,0:00:32.86,Default,,0000,0000,0000,,o hasta que presionamos reiniciar.
Dialogue: 0,0:00:32.86,0:00:36.02,Default,,0000,0000,0000,,Así que incluimos dos sentencias "if" aquí abajo
Dialogue: 0,0:00:36.02,0:00:40.60,Default,,0000,0000,0000,,para revisar y ver si la bola estaba cerca del borde derecho o del borde izquierdo de la pantalla,
Dialogue: 0,0:00:40.61,0:00:45.68,Default,,0000,0000,0000,,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.
Dialogue: 0,0:00:45.68,0:00:49.84,Default,,0000,0000,0000,,Entonces ahora tenemos esta bola, rebotando de un lado a otro para siempre.
Dialogue: 0,0:00:49.84,0:00:53.67,Default,,0000,0000,0000,,Eso está muy bien, y hay muchas animaciones realmente interesantes que podemos hacer con esto.
Dialogue: 0,0:00:53.67,0:00:57.68,Default,,0000,0000,0000,,Pero ahora, quiero añadir la interacción del usuario a este programa.
Dialogue: 0,0:00:57.68,0:01:00.07,Default,,0000,0000,0000,,Verán, en este momento este programa es como un show de televisión.
Dialogue: 0,0:01:00.07,0:01:04.94,Default,,0000,0000,0000,,si se lo das a un amigo, y tu amigo no sabe como programar, no podría interactuar con él.
Dialogue: 0,0:01:04.94,0:01:07.61,Default,,0000,0000,0000,,Todo lo que podría hacer es mirar, lo cual es genial,
Dialogue: 0,0:01:07.61,0:01:10.34,Default,,0000,0000,0000,,pero sería mejor si pudiera hacer algo más.
Dialogue: 0,0:01:10.34,0:01:13.47,Default,,0000,0000,0000,,Así que vamos a darle al usuario algunas formas de controlar el programa.
Dialogue: 0,0:01:13.47,0:01:20.16,Default,,0000,0000,0000,,Recuerda que antes aprendimos sobre dos variables globales especiales llamadas "mouseX" y "mouseY".
Dialogue: 0,0:01:20.16,0:01:25.97,Default,,0000,0000,0000,,Esas variables nos regresan números que nos dicen la posición actual del ratón del usuario
Dialogue: 0,0:01:25.97,0:01:28.78,Default,,0000,0000,0000,,y son una manera genial de hacer que el programa sea más interactivo.
Dialogue: 0,0:01:28.78,0:01:31.24,Default,,0000,0000,0000,,Así que veamos. ¿Cómo las podemos usar?
Dialogue: 0,0:01:31.24,0:01:34.03,Default,,0000,0000,0000,,Bueno, deberíamos usarlas en algún lugar dentro de la función "draw".
Dialogue: 0,0:01:34.03,0:01:39.50,Default,,0000,0000,0000,,Porque es el único código que se ejecuta una y otra vez mientras el programa corre.
Dialogue: 0,0:01:39.50,0:01:44.55,Default,,0000,0000,0000,,Todo lo que está fuera de la función "draw" es llamado sólo una vez, cuando el programa inicia.
Dialogue: 0,0:01:44.55,0:01:48.14,Default,,0000,0000,0000,,Así que no tiene sentido usar "mouseX" y "mouseY" ahí fuera.
Dialogue: 0,0:01:48.14,0:01:51.09,Default,,0000,0000,0000,,El usuario no tendría oportunidad de interactuar con él.
Dialogue: 0,0:01:51.09,0:01:57.28,Default,,0000,0000,0000,,En la función "draw", en este momento estamos dibujando la bola 200 pixeles abajo en la pantalla.
Dialogue: 0,0:01:57.28,0:02:00.84,Default,,0000,0000,0000,,¿Qué pasa si reemplazamos eso con "mouseY"?
Dialogue: 0,0:02:00.84,0:02:02.74,Default,,0000,0000,0000,,Porque esa es la posición de "y", ¿cierto?
Dialogue: 0,0:02:02.74,0:02:08.53,Default,,0000,0000,0000,,De esta manera añadirá la posición de "y" dependiendo de la posición de "y" del usuario. ¿correcto?
Dialogue: 0,0:02:08.53,0:02:14.36,Default,,0000,0000,0000,,Revisemos esto. Moviendo mi cursor arriba y abajo, puedo cambiar la línea en la que la bola se mueve.
Dialogue: 0,0:02:14.36,0:02:18.20,Default,,0000,0000,0000,,Eso es genial. Pero también quiero usar "mouseX".
Dialogue: 0,0:02:18.20,0:02:19.86,Default,,0000,0000,0000,,Entonces, ¿cómo puedo usarla?
Dialogue: 0,0:02:19.86,0:02:22.44,Default,,0000,0000,0000,,Bueno, por qué no hacemos otra bola
Dialogue: 0,0:02:22.44,0:02:25.94,Default,,0000,0000,0000,,y hacemos que esta bola vaya en la dirección opuesta: arriba y abajo.
Dialogue: 0,0:02:25.94,0:02:30.51,Default,,0000,0000,0000,,Y ahí tendríamos al usuario controlando la posición "x" de esta bola.
Dialogue: 0,0:02:30.51,0:02:32.61,Default,,0000,0000,0000,,Así que haríamos lo contrario.
Dialogue: 0,0:02:32.61,0:02:40.64,Default,,0000,0000,0000,,Digamos "ellipse (mouseX, position, 50, 50)" ¿correcto?
Dialogue: 0,0:02:40.64,0:02:46.91,Default,,0000,0000,0000,,¡Verifiquemos esto! Ahora tengo estas dos bolas que yo controlo y que van en direcciones perpendiculares.
Dialogue: 0,0:02:46.91,0:02:50.08,Default,,0000,0000,0000,,Pero todavía no estoy contenta.
Dialogue: 0,0:02:50.08,0:02:53.44,Default,,0000,0000,0000,,Quiero darle al usuario más control.
Dialogue: 0,0:02:53.44,0:02:56.94,Default,,0000,0000,0000,,Quiero darle al usuario el poder de poner en marcha la segunda bola.
Dialogue: 0,0:02:56.94,0:03:01.41,Default,,0000,0000,0000,,Para que realmente haga que exista, sólo con presionar el ratón.
Dialogue: 0,0:03:01.41,0:03:07.34,Default,,0000,0000,0000,,Bueno, entonces tengo que encontrar la manera de decirle al programa que el usuario está presionando su ratón.
Dialogue: 0,0:03:07.34,0:03:12.94,Default,,0000,0000,0000,,Afortunadamente, tenemos una variable booleana súper especial para esto.
Dialogue: 0,0:03:12.94,0:03:19.36,Default,,0000,0000,0000,,Se llama "mouseIsPressed" y podemos usarla dentro de una sentencia "if".
Dialogue: 0,0:03:19.36,0:03:22.34,Default,,0000,0000,0000,,Veamos, ésta es nuestra segunda bola.
Dialogue: 0,0:03:22.34,0:03:31.94,Default,,0000,0000,0000,,Así que podemos escribir que si "mouseIsPressed", y luego moveremos la instrucción de elipse para acá.
Dialogue: 0,0:03:31.94,0:03:40.86,Default,,0000,0000,0000,,Entonces lo que estamos haciendo aquí, es decirle al programa que sólo queremos dibujar esta elipse si esto es verdad
Dialogue: 0,0:03:40.86,0:03:46.03,Default,,0000,0000,0000,,y "mouseIsPressed" será verdadera si el usuario está presionando su ratón.
Dialogue: 0,0:03:46.03,0:03:48.20,Default,,0000,0000,0000,,Tratemos.
Dialogue: 0,0:03:48.20,0:03:49.79,Default,,0000,0000,0000,,¡Tan tan!
Dialogue: 0,0:03:49.79,0:03:52.70,Default,,0000,0000,0000,,Ahora puedo hacer que la bola aparezca cuando presiono el ratón.
Dialogue: 0,0:03:52.70,0:03:57.88,Default,,0000,0000,0000,,Esto es un acercamiento de este universo paralelo. ¡Aparece! ¡Aparece! ¡Aparece!
Dialogue: 0,0:03:57.88,0:04:00.03,Default,,0000,0000,0000,,¡Es impresionante!
Dialogue: 0,0:04:00.03,0:04:04.74,Default,,0000,0000,0000,,Así que lo interesante de esta variable "mouseIsPressed"
Dialogue: 0,0:04:04.74,0:04:09.06,Default,,0000,0000,0000,,es que cambia con base en lo que el usuario hace, y no en lo que programa hace.
Dialogue: 0,0:04:09.06,0:04:13.20,Default,,0000,0000,0000,,Y como la función "draw" se llama repetidamente, una y otra vez,
Dialogue: 0,0:04:13.20,0:04:16.17,Default,,0000,0000,0000,,el resultado del programa cambiará con el tiempo
Dialogue: 0,0:04:16.17,0:04:18.74,Default,,0000,0000,0000,,sólo con una pequeña entrada del usuario.
Dialogue: 0,0:04:18.74,0:04:22.03,Default,,0000,0000,0000,,Con el poder combinado de la sentencia "if" y la variable "mouseIsPressed",
Dialogue: 0,0:04:22.03,0:04:26.24,Default,,0000,0000,0000,,tienes todo lo que necesitas para hacer cosas impresionantes como botones y programas de dibujo.
Dialogue: 0,0:04:26.24,0:04:28.36,Default,,0000,0000,0000,,¡Yuju!