Return to Video

Más Interacción con el Ratón (Versión en Video)

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

Spanish, Mexican subtitles

Revisions

Our website uses cookies for analysis purposes.