1
00:00:00,289 --> 00:00:03,797
You've already learned how 
to make your own variables and use them.

2
00:00:03,797 --> 00:00:06,657
Now we're going to learn 
about two special variables:

3
00:00:06,657 --> 00:00:09,353
<i>mouseX</i> and <i>mouseY</i>.

4
00:00:10,222 --> 00:00:12,671
You never have to make 
these variables yourself,

5
00:00:12,671 --> 00:00:15,980
and in fact you shouldn't,
because they already exist.

6
00:00:15,980 --> 00:00:19,599
You see, the program sets the values 
of these variables behind the scenes,

7
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,

8
00:00:23,758 --> 00:00:27,548
and the value of mouseY 
is always the <i>y</i> position of your mouse.

9
00:00:27,548 --> 00:00:30,864
This makes it really easy to do
cool, interactive things

10
00:00:30,864 --> 00:00:32,559
based on the user's mouse position.

11
00:00:33,430 --> 00:00:35,868
Let's look at this ellipse
that I'm drawing here.

12
00:00:35,868 --> 00:00:39,366
So, right now, 
I'm always drawing it at 200, 200.

13
00:00:40,612 --> 00:00:43,827
If I use mouseX and mouseY, 
these special variables,

14
00:00:44,439 --> 00:00:48,286
then I can actually draw it
at mouseX and mouseY.

15
00:00:49,337 --> 00:00:52,359
Now, if I move my mouse 
over the canvas, you can see

16
00:00:52,359 --> 00:00:55,291
the ellipse is always being drawn
where my mouse is --

17
00:00:55,291 --> 00:00:57,193
so it follows my mouse around.

18
00:00:57,193 --> 00:01:00,000
That's pretty cool; can you tell
what I'm drawing? Whee!

19
00:01:00,468 --> 00:01:04,125
If you're going to use mouseX and mouseY,
you've got to make sure

20
00:01:04,125 --> 00:01:06,365
that you use them inside
the <i>draw = function ()</i>

21
00:01:06,365 --> 00:01:08,135
because look what happens

22
00:01:09,575 --> 00:01:12,700
if we move these two lines of code
outside the <i>draw = function ()</i>.

23
00:01:13,289 --> 00:01:14,436
You see?

24
00:01:14,871 --> 00:01:19,206
Now this code here only gets run once,

25
00:01:19,206 --> 00:01:21,811
so this ellipse is only drawn once,

26
00:01:21,811 --> 00:01:24,036
and it's drawn wherever my mouse
happened to be

27
00:01:24,036 --> 00:01:26,140
at the very, very beginning
of the program.

28
00:01:26,725 --> 00:01:30,337
That's why we <i>need</i> to have it
inside the <i>draw = function ()</i>,

29
00:01:30,337 --> 00:01:32,459
because the <i>draw = function ()</i>
is this function

30
00:01:32,459 --> 00:01:35,784
that's called repeatedly over
and over while our program is running.

31
00:01:35,784 --> 00:01:39,149
So we want that when it gets called,
it looks at what the current value

32
00:01:39,149 --> 00:01:43,246
of mouseX and mouseY is, and then
it draws the ellipse at that position.

33
00:01:43,246 --> 00:01:46,063
If you think about it, it's 
actually very similar to an animation --

34
00:01:46,063 --> 00:01:48,561
it's changing over time, 
just in a different way.

35
00:01:49,191 --> 00:01:52,065
Okay, now we can do 
all sorts of fun things.

36
00:01:52,567 --> 00:01:55,724
What if, instead of drawing it 
at mouseX and mouseY,

37
00:01:56,353 --> 00:02:02,591
I drew it at mouseX still but I fixed
mouseY at something like 300?

38
00:02:03,231 --> 00:02:07,369
Now you can see that the ellipse 
only follows my x coordinate,

39
00:02:07,369 --> 00:02:09,204
ignoring whatever I do in the y.

40
00:02:10,991 --> 00:02:16,873
Then, what if I now draw it at mouseX
and mouseY, bringing that back,

41
00:02:16,873 --> 00:02:19,756
but I get rid of the background,
just commenting that out?

42
00:02:20,547 --> 00:02:25,234
<i>Woo</i>! Now look, I've got 
this funky paintbrush thing.

43
00:02:25,234 --> 00:02:27,031
That's pretty awesome.

44
00:02:27,031 --> 00:02:30,470
Or, or, I could even switch
these variables.

45
00:02:31,029 --> 00:02:32,894
Let me bring back our background.

46
00:02:32,894 --> 00:02:37,703
I'll switch these variables here, 
mouseY and mouseX,

47
00:02:37,703 --> 00:02:39,202
and then see what happens.

48
00:02:39,202 --> 00:02:41,232
Now it just feels really, really weird.

49
00:02:41,232 --> 00:02:43,853
I've got these mouse controls 
that are doing opposite

50
00:02:43,854 --> 00:02:45,576
of what I would expect them to.

51
00:02:45,576 --> 00:02:48,321
But that's cool, you could imagine 
making a whole game

52
00:02:48,321 --> 00:02:50,950
which is about trying to draw something
or do something

53
00:02:50,950 --> 00:02:52,940
while using inverted mouse controls.

54
00:02:53,040 --> 00:02:58,908
That's it for mouseX and mouseY --
really, pretty fun. Enjoy!