0:00:00.289,0:00:03.797
Du har allerede lært at[br]definere og bruge dine egne variable.
0:00:03.797,0:00:06.657
Nu skal vi lære om to specielle variable:
0:00:06.657,0:00:09.353
mouseX og mouseY.
0:00:10.222,0:00:12.671
Du behøver ikke selv at[br]definere disse to variable,
0:00:12.671,0:00:15.980
og faktisk skal du aldrig gøre det,[br]for de eksisterer allerede.
0:00:15.980,0:00:19.599
Ser du, programmet sætter automatisk[br]værdien af disse variable i baggrunden,
0:00:19.599,0:00:23.758
og sørger for at værdien af mouseX[br]er altid x positionen af din musemarkør,
0:00:23.758,0:00:27.548
og at værdien af mouseY [br]er altid y positionen af din musemarkør.
0:00:27.548,0:00:30.864
Det gør det rigtig nemt at lave[br]seje, interaktive ting
0:00:30.864,0:00:32.559
baseret på musen's position.
0:00:33.430,0:00:35.868
Lad os se på den ellipse[br]jeg tegner her.[br]
0:00:35.868,0:00:39.366
Lige nu, tegner jeg den[br]altid ved 200, 200.
0:00:40.612,0:00:43.827
Hvis jeg bruger mouseX og mouseY,[br]disse specielle variable,
0:00:44.439,0:00:48.286
så kan jeg faktisk tegne den[br]ved mouseX og mouseY.
0:00:49.337,0:00:52.359
Hvis jeg så nu forsøger at bevæge musen[br]over tegneområdet, kan du se
0:00:52.359,0:00:55.291
at ellipsen altid bliver tegnet hvor[br]min musemarkør er --
0:00:55.291,0:00:57.193
så den følger min muse rundt.
0:00:57.193,0:01:00.000
Det er ret sejt; kan du se [br]hvad jeg tegner? Juhuuu!
0:01:00.468,0:01:04.125
Hvis du bruger mouseX og mouseY,[br]skal du sørge for at
0:01:04.125,0:01:06.365
du bruger dem inde i[br]draw-funktionen
0:01:06.365,0:01:08.135
for se hvad der sker
0:01:09.575,0:01:12.700
hvis vi flytter disse to linjer kode[br]uden for draw = function ().
0:01:13.289,0:01:14.436
Kan du se?
0:01:14.871,0:01:19.206
Nu vil koden her kun blive kørt én gang,
0:01:19.206,0:01:21.811
så den her ellipse bliver kun tegnet en gang,
0:01:21.811,0:01:24.036
og den bliver tegnet der hvor musen[br]nu lige var
0:01:24.036,0:01:26.140
helt, helt i starten af programmet
0:01:26.725,0:01:30.337
Det er derfor vi bliver nødt til[br]bruge dem inde i draw = function ().
0:01:30.337,0:01:32.459
fordi draw = function ()[br]er den funktion
0:01:32.459,0:01:35.784
der bliver kaldt igen og igen[br]mens vores program kører.
0:01:35.784,0:01:39.149
Så vi vil have at når den bliver kaldt,[br]så ser den på den nuværende værdi
0:01:39.149,0:01:43.246
af mouseX og mouseY, og derefter[br]tegnet den ellipsen på den position.
0:01:43.246,0:01:46.063
Hvis du tænker over det, så[br]er det lidt ligesom en animation --
0:01:46.063,0:01:48.561
det ændrer sig over tid,[br]bare på en anden måde.
0:01:49.191,0:01:52.065
Okay, nu kan vi gøre alle mulige sjove ting.
0:01:52.567,0:01:55.724
Hvad hvis, i stedet for at tegne den[br]ved mouseX og mouseY,
0:01:56.353,0:02:02.591
så tegne vi den stadig ved mouseX,[br]men holdt mouseY fast ved 300?
0:02:03.231,0:02:07.369
Nu kan du se at ellipsen[br]kun følger mit x koordinat,
0:02:07.369,0:02:09.204
og ignorer hvad jeg gør i y-retningen.
0:02:10.991,0:02:16.873
Hvad nu hvis jeg går tilbage, og [br]tegner ved mouseX og mouseY*,
0:02:16.873,0:02:19.756
men fjerner baggrunden,[br]bare ved at udkommentere det?
0:02:20.547,0:02:25.234
Woo! Se nu, jeg har fået en funky malerpensel!
0:02:25.234,0:02:27.031
Det er ret sejt.
0:02:27.031,0:02:30.470
Eller, jeg kunne endda ændre[br]disse variable.
0:02:31.029,0:02:32.894
Lad os få baggrunden tilbage.
0:02:32.894,0:02:37.703
Jeg ændrer de variable her,[br]mouseX og mouseY,
0:02:37.703,0:02:39.202
og ser hvad der sker.
0:02:39.202,0:02:41.232
Nu føles det hele rigtig, rigtig mærkeligt.
0:02:41.232,0:02:43.853
Jeg kan styre med musen,[br]men der sker det modsatte
0:02:43.854,0:02:45.576
af hvad jeg forventer den gør.
0:02:45.576,0:02:48.321
Men det er sejt, du kunne måske forestille[br]dig et helt spil
0:02:48.321,0:02:50.950
der handler om at tegne noget[br]eller gøre noget
0:02:50.950,0:02:52.940
mens man bruger inverteret musestyring
0:02:53.040,0:02:58.908
Det var alt om mouseX og mouseY --[br]faktisk ret sjovt. Hav det godt!