WEBVTT

00:00:00.289 --> 00:00:03.797
You've already learned how 
to make your own variables and use them.

00:00:03.797 --> 00:00:06.657
Now we're going to learn 
about two special variables:

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

00:00:10.222 --> 00:00:12.671
You never have to make 
these variables yourself,

00:00:12.671 --> 00:00:15.980
and in fact you shouldn't,
because they already exist.

00:00:15.980 --> 00:00:19.599
You see, the program sets the values 
of these variables behind the scenes,

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

00:00:23.758 --> 00:00:27.548
and the value of mouseY 
is always the <i>y</i> position of your mouse.

00:00:27.548 --> 00:00:30.864
This makes it really easy to do
cool, interactive things

00:00:30.864 --> 00:00:32.559
based on the user's mouse position.

00:00:33.430 --> 00:00:35.868
Let's look at this ellipse
that I'm drawing here.

00:00:35.868 --> 00:00:39.366
So, right now, 
I'm always drawing it at 200, 200.

00:00:40.612 --> 00:00:43.827
If I use mouseX and mouseY, 
these special variables,

00:00:44.439 --> 00:00:48.286
then I can actually draw it
at mouseX and mouseY.

00:00:49.337 --> 00:00:52.359
Now, if I move my mouse 
over the canvas, you can see

00:00:52.359 --> 00:00:55.291
the ellipse is always being drawn
where my mouse is --

00:00:55.291 --> 00:00:57.193
so it follows my mouse around.

00:00:57.193 --> 00:01:00.000
That's pretty cool; can you tell
what I'm drawing? Whee!

00:01:00.468 --> 00:01:04.125
If you're going to use mouseX and mouseY,
you've got to make sure

00:01:04.125 --> 00:01:06.365
that you use them inside
the <i>draw = function ()</i>

00:01:06.365 --> 00:01:08.135
because look what happens

00:01:09.575 --> 00:01:12.700
if we move these two lines of code
outside the <i>draw = function ()</i>.

00:01:13.289 --> 00:01:14.436
You see?

00:01:14.871 --> 00:01:19.206
Now this code here only gets run once,

00:01:19.206 --> 00:01:21.811
so this ellipse is only drawn once,

00:01:21.811 --> 00:01:24.036
and it's drawn wherever my mouse
happened to be

00:01:24.036 --> 00:01:26.140
at the very, very beginning
of the program.

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

00:01:30.337 --> 00:01:32.459
because the <i>draw = function ()</i>
is this function

00:01:32.459 --> 00:01:35.784
that's called repeatedly over
and over while our program is running.

00:01:35.784 --> 00:01:39.149
So we want that when it gets called,
it looks at what the current value

00:01:39.149 --> 00:01:43.246
of mouseX and mouseY is, and then
it draws the ellipse at that position.

00:01:43.246 --> 00:01:46.063
If you think about it, it's 
actually very similar to an animation --

00:01:46.063 --> 00:01:48.561
it's changing over time, 
just in a different way.

00:01:49.191 --> 00:01:52.065
Okay, now we can do 
all sorts of fun things.

00:01:52.567 --> 00:01:55.724
What if, instead of drawing it 
at mouseX and mouseY,

00:01:56.353 --> 00:02:02.591
I drew it at mouseX still but I fixed
mouseY at something like 300?

00:02:03.231 --> 00:02:07.369
Now you can see that the ellipse 
only follows my x coordinate,

00:02:07.369 --> 00:02:09.204
ignoring whatever I do in the y.

00:02:10.991 --> 00:02:16.873
Then, what if I now draw it at mouseX
and mouseY, bringing that back,

00:02:16.873 --> 00:02:19.756
but I get rid of the background,
just commenting that out?

00:02:20.547 --> 00:02:25.234
<i>Woo</i>! Now look, I've got 
this funky paintbrush thing.

00:02:25.234 --> 00:02:27.031
That's pretty awesome.

00:02:27.031 --> 00:02:30.470
Or, or, I could even switch
these variables.

00:02:31.029 --> 00:02:32.894
Let me bring back our background.

00:02:32.894 --> 00:02:37.703
I'll switch these variables here, 
mouseY and mouseX,

00:02:37.703 --> 00:02:39.202
and then see what happens.

00:02:39.202 --> 00:02:41.232
Now it just feels really, really weird.

00:02:41.232 --> 00:02:43.853
I've got these mouse controls 
that are doing opposite

00:02:43.854 --> 00:02:45.576
of what I would expect them to.

00:02:45.576 --> 00:02:48.321
But that's cool, you could imagine 
making a whole game

00:02:48.321 --> 00:02:50.950
which is about trying to draw something
or do something

00:02:50.950 --> 00:02:52.940
while using inverted mouse controls.

00:02:53.040 --> 00:02:58.908
That's it for mouseX and mouseY --
really, pretty fun. Enjoy!