0:00:00.289,0:00:03.797
You've already learned how [br]to make your own variables and use them.

0:00:03.797,0:00:06.657
Now we're going to learn [br]about two special variables:

0:00:06.657,0:00:09.353
<i>mouseX</i> and <i>mouseY</i>.

0:00:10.222,0:00:12.671
You never have to make [br]these variables yourself,

0:00:12.671,0:00:15.980
and in fact you shouldn't,[br]because they already exist.

0:00:15.980,0:00:19.599
You see, the program sets the values [br]of these variables behind the scenes,

0:00:19.599,0:00:23.758
making sure that the value of mouseX[br]is always the <i>x</i> position of your mouse,

0:00:23.758,0:00:27.548
and the value of mouseY [br]is always the <i>y</i> position of your mouse.

0:00:27.548,0:00:30.864
This makes it really easy to do[br]cool, interactive things

0:00:30.864,0:00:32.559
based on the user's mouse position.

0:00:33.430,0:00:35.868
Let's look at this ellipse[br]that I'm drawing here.

0:00:35.868,0:00:39.366
So, right now, [br]I'm always drawing it at 200, 200.

0:00:40.612,0:00:43.827
If I use mouseX and mouseY, [br]these special variables,

0:00:44.439,0:00:48.286
then I can actually draw it[br]at mouseX and mouseY.

0:00:49.337,0:00:52.359
Now, if I move my mouse [br]over the canvas, you can see

0:00:52.359,0:00:55.291
the ellipse is always being drawn[br]where my mouse is --

0:00:55.291,0:00:57.193
so it follows my mouse around.

0:00:57.193,0:01:00.000
That's pretty cool; can you tell[br]what I'm drawing? Whee!

0:01:00.468,0:01:04.125
If you're going to use mouseX and mouseY,[br]you've got to make sure

0:01:04.125,0:01:06.365
that you use them inside[br]the <i>draw = function ()</i>

0:01:06.365,0:01:08.135
because look what happens

0:01:09.575,0:01:12.700
if we move these two lines of code[br]outside the <i>draw = function ()</i>.

0:01:13.289,0:01:14.436
You see?

0:01:14.871,0:01:19.206
Now this code here only gets run once,

0:01:19.206,0:01:21.811
so this ellipse is only drawn once,

0:01:21.811,0:01:24.036
and it's drawn wherever my mouse[br]happened to be

0:01:24.036,0:01:26.140
at the very, very beginning[br]of the program.

0:01:26.725,0:01:30.337
That's why we <i>need</i> to have it[br]inside the <i>draw = function ()</i>,

0:01:30.337,0:01:32.459
because the <i>draw = function ()</i>[br]is this function

0:01:32.459,0:01:35.784
that's called repeatedly over[br]and over while our program is running.

0:01:35.784,0:01:39.149
So we want that when it gets called,[br]it looks at what the current value

0:01:39.149,0:01:43.246
of mouseX and mouseY is, and then[br]it draws the ellipse at that position.

0:01:43.246,0:01:46.063
If you think about it, it's [br]actually very similar to an animation --

0:01:46.063,0:01:48.561
it's changing over time, [br]just in a different way.

0:01:49.191,0:01:52.065
Okay, now we can do [br]all sorts of fun things.

0:01:52.567,0:01:55.724
What if, instead of drawing it [br]at mouseX and mouseY,

0:01:56.353,0:02:02.591
I drew it at mouseX still but I fixed[br]mouseY at something like 300?

0:02:03.231,0:02:07.369
Now you can see that the ellipse [br]only follows my x coordinate,

0:02:07.369,0:02:09.204
ignoring whatever I do in the y.

0:02:10.991,0:02:16.873
Then, what if I now draw it at mouseX[br]and mouseY, bringing that back,

0:02:16.873,0:02:19.756
but I get rid of the background,[br]just commenting that out?

0:02:20.547,0:02:25.234
<i>Woo</i>! Now look, I've got [br]this funky paintbrush thing.

0:02:25.234,0:02:27.031
That's pretty awesome.

0:02:27.031,0:02:30.470
Or, or, I could even switch[br]these variables.

0:02:31.029,0:02:32.894
Let me bring back our background.

0:02:32.894,0:02:37.703
I'll switch these variables here, [br]mouseY and mouseX,

0:02:37.703,0:02:39.202
and then see what happens.

0:02:39.202,0:02:41.232
Now it just feels really, really weird.

0:02:41.232,0:02:43.853
I've got these mouse controls [br]that are doing opposite

0:02:43.854,0:02:45.576
of what I would expect them to.

0:02:45.576,0:02:48.321
But that's cool, you could imagine [br]making a whole game

0:02:48.321,0:02:50.950
which is about trying to draw something[br]or do something

0:02:50.950,0:02:52.940
while using inverted mouse controls.

0:02:53.040,0:02:58.908
That's it for mouseX and mouseY --[br]really, pretty fun. Enjoy!