1
00:00:00,289 --> 00:00:03,797
Du har allerede lært at
definere og bruge dine egne variable.
2
00:00:03,797 --> 00:00:06,657
Nu skal vi lære om to specielle variable:
3
00:00:06,657 --> 00:00:09,353
mouseX og mouseY.
4
00:00:10,222 --> 00:00:12,671
Du behøver ikke selv at
definere disse to variable,
5
00:00:12,671 --> 00:00:15,980
og faktisk skal du aldrig gøre det,
for de eksisterer allerede.
6
00:00:15,980 --> 00:00:19,599
Ser du, programmet sætter automatisk
værdien af disse variable i baggrunden,
7
00:00:19,599 --> 00:00:23,758
og sørger for at værdien af mouseX
er altid x positionen af din musemarkør,
8
00:00:23,758 --> 00:00:27,548
og at værdien af mouseY
er altid y positionen af din musemarkør.
9
00:00:27,548 --> 00:00:30,864
Det gør det rigtig nemt at lave
seje, interaktive ting
10
00:00:30,864 --> 00:00:32,559
baseret på musen's position.
11
00:00:33,430 --> 00:00:35,868
Lad os se på den ellipse
jeg tegner her.
12
00:00:35,868 --> 00:00:39,366
Lige nu, tegner jeg den
altid ved 200, 200.
13
00:00:40,612 --> 00:00:43,827
Hvis jeg bruger mouseX og mouseY,
disse specielle variable,
14
00:00:44,439 --> 00:00:48,286
så kan jeg faktisk tegne den
ved mouseX og mouseY.
15
00:00:49,337 --> 00:00:52,359
Hvis jeg så nu forsøger at bevæge musen
over tegneområdet, kan du se
16
00:00:52,359 --> 00:00:55,291
at ellipsen altid bliver tegnet hvor
min musemarkør er --
17
00:00:55,291 --> 00:00:57,193
så den følger min muse rundt.
18
00:00:57,193 --> 00:01:00,000
Det er ret sejt; kan du se
hvad jeg tegner? Juhuuu!
19
00:01:00,468 --> 00:01:04,125
Hvis du bruger mouseX og mouseY,
skal du sørge for at
20
00:01:04,125 --> 00:01:06,365
du bruger dem inde i
draw-funktionen
21
00:01:06,365 --> 00:01:08,135
for se hvad der sker
22
00:01:09,575 --> 00:01:12,700
hvis vi flytter disse to linjer kode
uden for draw = function ().
23
00:01:13,289 --> 00:01:14,436
Kan du se?
24
00:01:14,871 --> 00:01:19,206
Nu vil koden her kun blive kørt én gang,
25
00:01:19,206 --> 00:01:21,811
så den her ellipse bliver kun tegnet en gang,
26
00:01:21,811 --> 00:01:24,036
og den bliver tegnet der hvor musen
nu lige var
27
00:01:24,036 --> 00:01:26,140
helt, helt i starten af programmet
28
00:01:26,725 --> 00:01:30,337
Det er derfor vi bliver nødt til
bruge dem inde i draw = function ().
29
00:01:30,337 --> 00:01:32,459
fordi draw = function ()
er den funktion
30
00:01:32,459 --> 00:01:35,784
der bliver kaldt igen og igen
mens vores program kører.
31
00:01:35,784 --> 00:01:39,149
Så vi vil have at når den bliver kaldt,
så ser den på den nuværende værdi
32
00:01:39,149 --> 00:01:43,246
af mouseX og mouseY, og derefter
tegnet den ellipsen på den position.
33
00:01:43,246 --> 00:01:46,063
Hvis du tænker over det, så
er det lidt ligesom en animation --
34
00:01:46,063 --> 00:01:48,561
det ændrer sig over tid,
bare på en anden måde.
35
00:01:49,191 --> 00:01:52,065
Okay, nu kan vi gøre alle mulige sjove ting.
36
00:01:52,567 --> 00:01:55,724
Hvad hvis, i stedet for at tegne den
ved mouseX og mouseY,
37
00:01:56,353 --> 00:02:02,591
så tegne vi den stadig ved mouseX,
men holdt mouseY fast ved 300?
38
00:02:03,231 --> 00:02:07,369
Nu kan du se at ellipsen
kun følger mit x koordinat,
39
00:02:07,369 --> 00:02:09,204
og ignorer hvad jeg gør i y-retningen.
40
00:02:10,991 --> 00:02:16,873
Hvad nu hvis jeg går tilbage, og
tegner ved mouseX og mouseY*,
41
00:02:16,873 --> 00:02:19,756
men fjerner baggrunden,
bare ved at udkommentere det?
42
00:02:20,547 --> 00:02:25,234
Woo! Se nu, jeg har fået en funky malerpensel!
43
00:02:25,234 --> 00:02:27,031
Det er ret sejt.
44
00:02:27,031 --> 00:02:30,470
Eller, jeg kunne endda ændre
disse variable.
45
00:02:31,029 --> 00:02:32,894
Lad os få baggrunden tilbage.
46
00:02:32,894 --> 00:02:37,703
Jeg ændrer de variable her,
mouseX og mouseY,
47
00:02:37,703 --> 00:02:39,202
og ser hvad der sker.
48
00:02:39,202 --> 00:02:41,232
Nu føles det hele rigtig, rigtig mærkeligt.
49
00:02:41,232 --> 00:02:43,853
Jeg kan styre med musen,
men der sker det modsatte
50
00:02:43,854 --> 00:02:45,576
af hvad jeg forventer den gør.
51
00:02:45,576 --> 00:02:48,321
Men det er sejt, du kunne måske forestille
dig et helt spil
52
00:02:48,321 --> 00:02:50,950
der handler om at tegne noget
eller gøre noget
53
00:02:50,950 --> 00:02:52,940
mens man bruger inverteret musestyring
54
00:02:53,040 --> 00:02:58,908
Det var alt om mouseX og mouseY --
faktisk ret sjovt. Hav det godt!