< Return to Video

Interacción del Ratón (Version Video)

  • 0:01 - 0:04
    Ya aprendiste ha crear tus propias variables y a usarlas.
  • 0:04 - 0:11
    Ahora aprenderemos 2 variables especiales: mouseX y mouseY.
  • 0:11 - 0:17
    Nunca tendras que crear estas variables, por que de hecho, ya existen.
  • 0:17 - 0:28
    El programa establece los valores de estas variable, detrás de las cortinas, asegurándose que el valor de mouseX sea siempre la posición x de tu ratón y mouseY la posición de tu ratón.
  • 0:28 - 0:33
    Esto permite hacer facilmente cosas interactivas que dependen de la posición del ratón.
  • 0:33 - 0:37
    Veamos la elipse que estoy dibujando aqui.
  • 0:37 - 0:41
    Ahorita, la estoy dibujando en 200, 200.
  • 0:41 - 0:50
    Si uso mouseX y mouseY, las variables especiales, entonces puedo dibujarla la elipse en las coordinadas mouseX y mouseY.
  • 0:50 - 0:58
    Ahora, si muevo el ratón sobre el canvas, puedes ver la elipse es dibujada en donde el ratón esta - entonces sigue a donde el ratón va.
  • 0:58 - 1:02
    Esto es super cool, puedes ver lo que estoy dibujando? Woo!
  • 1:02 - 1:14
    Si vas a use mouseX y mouseY, tiene que asegurarte que esten dentro de la función draw, porque mira que pase si movemos estas dos lineas fuera de la función draw
  • 1:14 - 1:16
    Ves?
  • 1:16 - 1:27
    Este codigo solo corre una vez, entonces la elipse es dibujada una vez nada más, y es dibujada donde mi ratón esta al principio del programa.
  • 1:27 - 1:36
    Por eso es que necesitamos ponerlo dentro de la función draw, porque la función draw es la función que es llamada repetidamente mientras nuestro programa esta corriendo.
  • 1:36 - 1:44
    Entonces queremos que cuando sea llamada, vea cuales son los valores actuales de mouseX y mouseY en ese momento, para que dibuje la elipse en esa posicion.
  • 1:44 - 1:49
    Si te pones a pensar, en realidad es bien similar a una animación - cambia en la medida que pasa el tiempo, solo que en una forma diferente.
  • 1:49 - 1:53
    Muy bien, ahora podemos hacer cosas mas entretenidas.
  • 1:53 - 2:04
    Que tal si, en vez de dibujar la elipse sobre las coordinadas mouseX y mouseY, la dibujo en mouseX pero fijo mouseY a algo asi como 300?
  • 2:04 - 2:11
    Ahora puedes ver que la elipse solo sigue mi coordinada x, ignorando el valor de la coordinada y de mi ratón.
  • 2:11 - 2:22
    Entonces, que tal si dibujo la elipse en las coordinadas mouseX y mouseY de nuevo, pero quito la llamada a la función background al commentarla?
  • 2:22 - 2:28
    Ahora mira, woo! Tengo esta cosa que parece como un genial pincel.
  • 2:28 - 2:40
    O, tambien puedo intercambiar estas variables. Dejame traer de regreso la llamada a la función background.
  • 2:40 - 2:46
    Se siente raro. Tengo los controles del ratón haciendo lo opuesto a lo que normalmente hacen.
  • 2:46 - 2:53
    Pero esta genial, te puedes imaginar el hacer un juego que trata de dibujar algo o hacer algo mientras usas los controles del ratón invertidos.
  • 2:53 - 3:00
    Esto es todo sobre mouseX y mouseY - muy divertido. Disfruta!
Title:
Interacción del Ratón (Version Video)
Description:

Este es una video-clase interactive donde puedes ver la pantalla con código , preparado para hacer la creación de subtítulos y traducción mas fácil. Es mejor que veas nuestros video-clase aqui: https://www.khanacademy.org/cs/programming/

more » « less
Video Language:
English
Duration:
03:00

Spanish subtitles

Revisions