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

Now we're going to learn 
about two special variables:

<i>mouseX</i> and <i>mouseY</i>.

You never have to make 
these variables yourself,

and in fact you shouldn't,
because they already exist.

You see, the program sets the values 
of these variables behind the scenes,

making sure that the value of mouseX
is always the <i>x</i> position of your mouse,

and the value of mouseY 
is always the <i>y</i> position of your mouse.

This makes it really easy to do
cool, interactive things

based on the user's mouse position.

Let's look at this ellipse
that I'm drawing here.

So, right now, 
I'm always drawing it at 200, 200.

If I use mouseX and mouseY, 
these special variables,

then I can actually draw it
at mouseX and mouseY.

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.

That's pretty cool; can you tell
what I'm drawing? Whee!

If you're going to use mouseX and mouseY,
you've got to make sure

that you use them inside
the <i>draw = function ()</i>

because look what happens

if we move these two lines of code
outside the <i>draw = function ()</i>.

You see?

Now this code here only gets run once,

so this ellipse is only drawn once,

and it's drawn wherever my mouse
happened to be

at the very, very beginning
of the program.

That's why we <i>need</i> to have it
inside the <i>draw = function ()</i>,

because the <i>draw = function ()</i>
is this function

that's called repeatedly over
and over while our program is running.

So we want that when it gets called,
it looks at what the current value

of mouseX and mouseY is, and then
it draws the ellipse at that position.

If you think about it, it's 
actually very similar to an animation --

it's changing over time, 
just in a different way.

Okay, now we can do 
all sorts of fun things.

What if, instead of drawing it 
at mouseX and mouseY,

I drew it at mouseX still but I fixed
mouseY at something like 300?

Now you can see that the ellipse 
only follows my x coordinate,

ignoring whatever I do in the y.

Then, what if I now draw it at mouseX
and mouseY, bringing that back,

but I get rid of the background,
just commenting that out?

<i>Woo</i>! Now look, I've got 
this funky paintbrush thing.

That's pretty awesome.

Or, or, I could even switch
these variables.

Let me bring back our background.

I'll switch these variables here, 
mouseY and mouseX,

and then see what happens.

Now it just feels really, really weird.

I've got these mouse controls 
that are doing opposite

of what I would expect them to.

But that's cool, you could imagine 
making a whole game

which is about trying to draw something
or do something

while using inverted mouse controls.

That's it for mouseX and mouseY --
really, pretty fun. Enjoy!