0:00:01.216,0:00:03.833
You've already learned how to make your own variables and use them.

0:00:03.833,0:00:13.853
Now we're gonna learn about two special variables: mouseX and mouseY

0:00:13.853,0:00:16.875
Now you never have to make these variables yourself, and in fact you shouldn't,

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

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

0:00:32.017,0:00:35.579
and the value of mouseY is always the y-position of your mouse.

0:00:35.579,0:00:39.629
This makes it really easy to do cool interactive things, like this:

0:00:39.629,0:00:44.077
Check out this ellipse I'm drawing. Right now I'm always drawing it at 200, 200

0:00:44.077,0:00:50.507
Instead, I can use these special variables and draw it at mouseX and mouseY

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

0:00:55.934,0:00:59.571
so it follows my mouse around! So that's pretty cool.

0:00:59.571,0:01:03.687
If you're gonna use mouseX and mouseY you've got to make sure that you use them inside this draw loop,

0:01:03.687,0:01:07.599
because look what happens if we move these two lines of code outside the draw loop.

0:01:07.599,0:01:14.898
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.

0:01:14.898,0:01:22.936
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

0:01:22.936,0:01:28.598
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,

0:01:28.598,0:01:36.685
and then fixed mouseY at something like 300, and now the ellipse only follows my x-coordinate,

0:01:36.685,0:01:39.689
the x-coordinate of my mouse, but not the y.

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

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

0:01:54.935,0:02:04.621
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

0:02:04.621,0:02:10.203
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

0:02:10.203,0:02:13.184
trying to write something with these messed-up controls.

0:02:13.184,0:02:17.184
So that's it for mouseX and mouseY! Super easy to use, but super awesome.