Mouse Interaction (Video Version)

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/

You've already learned how to make your own variables and use them.

Now we're gonna learn about two special variables: mouseX and mouseY

Now you never have to make these variables yourself, and in fact you shouldn't,

because they already exist. Some awesome person already did the whole "var mouseX" and "var mouseY" thing so you don't have to,

and the same awesome person made it so that the value of mouseX is always the x-position of your mouse,

and the value of mouseY is always the y-position of your mouse.

This makes it really easy to do cool interactive things, like this:

Check out this ellipse I'm drawing. Right now I'm always drawing it at 200, 200

Instead, I can use these special variables and draw it at mouseX and mouseY

And now, if I move my mouse over the canvas, you can see the ellipse is always being drawn where my mouse is,

so it follows my mouse around! So that's pretty cool.

If you're gonna use mouseX and mouseY you've got to make sure that you use them inside this draw loop,

because look what happens if we move these two lines of code outside the draw loop.

Now, they're only gonna get run once, and this ellipse will only be drawn where my mouse was at the very beginning of the program.

So that's why we need the draw loop. Because, if you think about it, even though it may not feel like it, this is also a kind of animation

Now we can do all sorts of fun things. So what if, instead of drawing it at mouseX and mouseY I drew it at mouseX,

and then fixed mouseY at something like 300, and now the ellipse only follows my x-coordinate,

the x-coordinate of my mouse, but not the y.

Yeah? And then maybe I can draw it at mouseX and mouseY again but then get rid of this background() line.

So now we're gonna see all of the ellipses that we drew before, so we've got this funky paintbrush kind of thing.

That's pretty awesome. Or, I could even switch these variables, so draw it at mouseY and mouseX, and now it's kind of like before

except the mouse controls are all messed up, but that's cool too, you can imagine making a whole game about trying to draw something

trying to write something with these messed-up controls.

So that's it for mouseX and mouseY! Super easy to use, but super awesome.