Return to Video

Interacción con el ratón (Versión en video)

  • 0:01 - 0:04
    Ya aprendiste a crear tus propias variables y a usarlas.
  • 0:04 - 0:07
    Ahora aprenderemos 2 variables especiales:
  • 0:07 - 0:10
    "mouseX" y "mouseY".
  • 0:10 - 0:16
    Nunca tendrás que crear estas variables, porque de hecho, ya existen.
  • 0:16 - 0:20
    El programa establece los valores de estas variable, detrás de bastidores,
  • 0:20 - 0:24
    asegurándose de que el valor de "mouseX" sea siempre la posición "x" de tu ratón,
  • 0:24 - 0:28
    y que el valor de "mouseY" sea la posición "y" de tu ratón.
  • 0:28 - 0:31
    Esto permite hacer fácilmente cosas interactivas,
  • 0:31 - 0:33
    que dependen de la posición del ratón.
  • 0:33 - 0:37
    Veamos la elipse que estoy dibujando aquí.
  • 0:37 - 0:41
    En este momento, siempre la estoy dibujando en 200, 200.
  • 0:41 - 0:44
    Si uso "mouseX" y "mouseY", las variables especiales,
  • 0:44 - 0:49
    entonces puedo dibujar la elipse en las coordenadas "mouseX" y "mouseY".
  • 0:49 - 0:52
    Ahora, si muevo el ratón sobre el área de dibujo, puedes ver
  • 0:52 - 0:55
    la elipse dibujada en donde el ratón se posiciona,
  • 0:55 - 0:57
    la elipse sigue al ratón.
  • 0:57 - 1:01
    Esto es super interesante, ¿puedes ver lo que estoy dibujando? ¡Woo!
  • 1:01 - 1:04
    Si vas a usar "mouseX" y "mouseY", tienes que asegurarte
  • 1:04 - 1:07
    de que las estás usando dentro de la función "draw",
  • 1:07 - 1:08
    porque mira qué pasa
  • 1:08 - 1:13
    si movemos estas dos líneas de código fuera de la función "draw".
  • 1:13 - 1:15
    ¿Lo ves?
  • 1:15 - 1:19
    Ahora, este código que tenemos aquí sólo corre una vez,
  • 1:19 - 1:22
    entonces la elipse se dibuja una vez nada más,
  • 1:22 - 1:25
    y se dibuja en la posición de mi ratón,
  • 1:25 - 1:27
    muy al principio del programa.
  • 1:27 - 1:31
    Es por eso que necesitamos ponerlo dentro de la función "draw",
  • 1:31 - 1:36
    porque la función "draw" es llamada repetidamente mientras nuestro programa está corriendo.
  • 1:36 - 1:41
    Entonces queremos que cuando sea llamada, vea cuáles son los valores actuales de "mouseX" y "mouseY"
  • 1:41 - 1:44
    en ese momento, para que dibuje la elipse en esa posición.
  • 1:44 - 1:46
    Si piensas en eso, en realidad es muy similar a una animación,
  • 1:46 - 1:49
    está cambiando con el tiempo, sólo que de una manera diferente.
  • 1:49 - 1:53
    Muy bien, ahora podemos hacer cosas más entretenidas.
  • 1:53 - 1:57
    ¿Qué tal si en vez de dibujar la elipse sobre las coordenadas "mouseX" y "mouseY",
  • 1:57 - 2:03
    la dibujo en "mouseX" pero configuro "mouseY" a algo así como 300?
  • 2:03 - 2:07
    Ahora puedes ver que la elipse sólo sigue mi coordenada "x",
  • 2:07 - 2:10
    ignorando el valor de la coordenada "y" de mi ratón.
  • 2:10 - 2:17
    Entonces, ¿qué tal si dibujo la elipse en las coordenadas "mouseX" y "mouseY" de nuevo,
  • 2:17 - 2:20
    pero quito la llamada a la función "background", comentándola?
  • 2:20 - 2:25
    Ok, ¡woo!, Ahora mira, tengo esta cosa que parece como un pincel divertido.
  • 2:25 - 2:27
    Es asombroso.
  • 2:27 - 2:31
    O, también puedo intercambiar estas variables.
  • 2:31 - 2:33
    Déjame traer de regreso la llamada a la función "background".
  • 2:33 - 2:38
    Entonces, cambio estas variables aquí, "mouseX" y "mouseY",
  • 2:38 - 2:39
    y vemos qué pasa.
  • 2:39 - 2:42
    Ok, ahora se siente muy raro.
  • 2:42 - 2:44
    Tengo los controles del ratón haciendo lo opuesto,
  • 2:44 - 2:45
    a lo que esperamos que hagan.
  • 2:45 - 2:49
    Pero es genial, te puedes imaginar el hacer un juego que trata de dibujar algo o
  • 2:49 - 2:53
    hacer algo mientras usas los controles del ratón invertidos.
  • 2:53 - 2:59
    Esto es todo sobre "mouseX" y "mouseY", muy divertido. ¡Disfruta!
Title:
Interacción con el ratón (Versión en video)
Description:

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/
more » « less
Video Language:
English
Duration:
03:00

Spanish, Mexican subtitles

Revisions

Our website uses cookies for analysis purposes.