< Return to Video

Mouse Interaction (Video Version)

  • 0:00 - 0:04
    You've already learned how
    to make your own variables and use them.
  • 0:04 - 0:07
    Now we're going to learn
    about two special variables:
  • 0:07 - 0:09
    mouseX and mouseY.
  • 0:10 - 0:13
    You never have to make
    these variables yourself,
  • 0:13 - 0:16
    and in fact you shouldn't,
    because they already exist.
  • 0:16 - 0:20
    You see, the program sets the values
    of these variables behind the scenes,
  • 0:20 - 0:24
    making sure that the value of mouseX
    is always the x position of your mouse,
  • 0:24 - 0:28
    and the value of mouseY
    is always the y position of your mouse.
  • 0:28 - 0:31
    This makes it really easy to do
    cool, interactive things
  • 0:31 - 0:33
    based on the user's mouse position.
  • 0:33 - 0:36
    Let's look at this ellipse
    that I'm drawing here.
  • 0:36 - 0:39
    So, right now,
    I'm always drawing it at 200, 200.
  • 0:41 - 0:44
    If I use mouseX and mouseY,
    these special variables,
  • 0:44 - 0:48
    then I can actually draw it
    at mouseX and mouseY.
  • 0:49 - 0:52
    Now, if I move my mouse
    over the canvas, you can see
  • 0:52 - 0:55
    the ellipse is always being drawn
    where my mouse is --
  • 0:55 - 0:57
    so it follows my mouse around.
  • 0:57 - 1:00
    That's pretty cool; can you tell
    what I'm drawing? Whee!
  • 1:00 - 1:04
    If you're going to use mouseX and mouseY,
    you've got to make sure
  • 1:04 - 1:06
    that you use them inside
    the draw = function ()
  • 1:06 - 1:08
    because look what happens
  • 1:10 - 1:13
    if we move these two lines of code
    outside the draw = function ().
  • 1:13 - 1:14
    You see?
  • 1:15 - 1:19
    Now this code here only gets run once,
  • 1:19 - 1:22
    so this ellipse is only drawn once,
  • 1:22 - 1:24
    and it's drawn wherever my mouse
    happened to be
  • 1:24 - 1:26
    at the very, very beginning
    of the program.
  • 1:27 - 1:30
    That's why we need to have it
    inside the draw = function (),
  • 1:30 - 1:32
    because the draw = function ()
    is this function
  • 1:32 - 1:36
    that's called repeatedly over
    and over while our program is running.
  • 1:36 - 1:39
    So we want that when it gets called,
    it looks at what the current value
  • 1:39 - 1:43
    of mouseX and mouseY is, and then
    it draws the ellipse at that position.
  • 1:43 - 1:46
    If you think about it, it's
    actually very similar to an animation --
  • 1:46 - 1:49
    it's changing over time,
    just in a different way.
  • 1:49 - 1:52
    Okay, now we can do
    all sorts of fun things.
  • 1:53 - 1:56
    What if, instead of drawing it
    at mouseX and mouseY,
  • 1:56 - 2:03
    I drew it at mouseX still but I fixed
    mouseY at something like 300?
  • 2:03 - 2:07
    Now you can see that the ellipse
    only follows my x coordinate,
  • 2:07 - 2:09
    ignoring whatever I do in the y.
  • 2:11 - 2:17
    Then, what if I now draw it at mouseX
    and mouseY, bringing that back,
  • 2:17 - 2:20
    but I get rid of the background,
    just commenting that out?
  • 2:21 - 2:25
    Woo! Now look, I've got
    this funky paintbrush thing.
  • 2:25 - 2:27
    That's pretty awesome.
  • 2:27 - 2:30
    Or, or, I could even switch
    these variables.
  • 2:31 - 2:33
    Let me bring back our background.
  • 2:33 - 2:38
    I'll switch these variables here,
    mouseY and mouseX,
  • 2:38 - 2:39
    and then see what happens.
  • 2:39 - 2:41
    Now it just feels really, really weird.
  • 2:41 - 2:44
    I've got these mouse controls
    that are doing opposite
  • 2:44 - 2:46
    of what I would expect them to.
  • 2:46 - 2:48
    But that's cool, you could imagine
    making a whole game
  • 2:48 - 2:51
    which is about trying to draw something
    or do something
  • 2:51 - 2:53
    while using inverted mouse controls.
  • 2:53 - 2:59
    That's it for mouseX and mouseY --
    really, pretty fun. Enjoy!
Title:
Mouse Interaction (Video Version)
Description:

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

English subtitles

Revisions