WEBVTT

00:00:00.877 --> 00:00:06.001
Vi er igen i gang med Winston-tegneprogrammet,
men jeg har tilføjet lidt tekst til det.

00:00:06.001 --> 00:00:11.072
Jeg vil gerne lægge en Winston under hvert mærkat,

00:00:11.072 --> 00:00:13.210
så vi kan se ham i hver del af livet.

00:00:13.210 --> 00:00:16.437
Lige nu er han over det hele.
Det er fordi vi sætter

00:00:16.437 --> 00:00:20.449
faceX og faceY til tilfældige tal
inden i funktionen.

00:00:20.449 --> 00:00:26.714
Vi vil gerne kunne udtrykke "Her er den præcise
position hvor du skal tegne den her Winston."

00:00:26.714 --> 00:00:30.316
Jeg vil have en måde at give en position på
hver gang jeg kalder funktionen

00:00:30.316 --> 00:00:32.648
på samme måde som vi gør ved
ellipse() og rect().

00:00:34.048 --> 00:00:40.460
Jeg vil gerne have en Winston her, her
her og her,

00:00:40.460 --> 00:00:43.623
og jeg vil ikke bare lægge dem tilfældige steder
hver gang jeg kalder funktionen.

00:00:43.623 --> 00:00:48.882
For at gøre det er vi nødt til at
give funktionen "parametre"

00:00:48.882 --> 00:00:52.811
både i vores funktionsdefinition
-- her i toppen --

00:00:52.811 --> 00:00:57.302
og i vores funktionskald hernede
når vi faktisk kalder den.

00:00:57.302 --> 00:01:02.210
Vi sender faceX og faceY gennem drawWinston(),

00:01:02.210 --> 00:01:09.058
og vi får den til at bruge de sendte værdier
i stedet for at generere dem tilfældigt.

00:01:09.058 --> 00:01:14.657
Vi skal tænke over hvad vi sender
til funktionerne hernede.

00:01:14.657 --> 00:01:20.071
Vi sætter hver Winston under hvert mærkat,
så vi vil nok gerne have at x og y for hver

00:01:20.071 --> 00:01:24.491
Winston er ens med de tal
som vi sendte til text()-funktionerne.

00:01:24.491 --> 00:01:32.166
Måske 10 pixels mindre i y-værdien?
Den første værdi er 10 og 30

00:01:32.166 --> 00:01:40.891
og så måske 200, 230...
10, 230... 200, 230.

00:01:40.891 --> 00:01:44.863
Det er det samme som med mærkat-koordinaterne.
Jeg tilføjer bare 10 til hvert y,

00:01:44.863 --> 00:01:47.405
for jeg vil have den lidt lavere.

00:01:49.985 --> 00:01:55.301
Winston har ikke flyttet sig.
Vi har ikke fortalt vores funktion at

00:01:55.301 --> 00:01:59.177
vi sender parametre til den,
så den bruger stadig de her tilfældige værdier.

00:01:59.177 --> 00:02:03.603
For at fortælle funktionen "Nu skal du have
den her information i stedet"

00:02:03.603 --> 00:02:08.398
er vi nødt til at give parametrene navne
inde i de her paranteser.

00:02:08.398 --> 00:02:14.106
Vi kalder dem faceX og faceY og
separerer dem med et komma.

00:02:14.106 --> 00:02:20.704
Vi kalder dem det fordi vi bruger
dem inde i funktionen.

00:02:20.704 --> 00:02:23.472
Så har vi ikke brug for at omskrive
resten af vores kode.

00:02:23.472 --> 00:02:28.813
Men stadigvæk... Intet er sket!
Winston er over det hele.

00:02:28.813 --> 00:02:31.353
Hvis du kigger i toppen
af funktionen

00:02:31.353 --> 00:02:35.263
ser du at vi stadig overskriver faceX og faceY
med tilfældige værdier

00:02:35.263 --> 00:02:38.793
Så vi skal slette de her linjer...

00:02:38.793 --> 00:02:45.457
Nu bliver faceX og faceY sendt
til funktionen, og

00:02:45.457 --> 00:02:49.581
den bruger de værdier
som vi kalder dem med.

00:02:49.581 --> 00:02:55.311
Jeg satte ikke helt Winston korrekt,
for jeg glemte at tekst positioneres

00:02:55.311 --> 00:03:01.041
i forhold til øverste venstre hjørne, og ansigtet
positioneres i forhold til midten.

00:03:01.041 --> 00:03:06.383
Jeg er nødt til at fikse mine tal lidt.

00:03:06.383 --> 00:03:12.608
Jeg skal flytte x-værdien en del og flytte
den her, og så... det er vores baby.

00:03:12.608 --> 00:03:18.028
Vi gennemgår og ændrer hvad jeg sender til funktionen.

00:03:18.028 --> 00:03:22.518
Jeg behøver slet ikke at
ændre funktionsdefinitionen.

00:03:22.518 --> 00:03:25.758
Den tager altid de værdier
som vi giver den.

00:03:25.758 --> 00:03:28.388
Helt ligesom ellipse() og rect().

00:03:28.388 --> 00:03:33.348
Jeg har positioneret den, men jeg
har lagt mærke til at Winston er for stor.

00:03:33.348 --> 00:03:35.756
Han overlapper og passer ikke ind.

00:03:35.756 --> 00:03:39.019
Jeg har lagt koden til at tegne ham
ind i en funktion.

00:03:39.019 --> 00:03:42.374
Jeg kan ændre størrelsen af allesammen
på én gang

00:03:42.374 --> 00:03:45.439
ved at ændre en linje kode
der tegner ellipsen.

00:03:45.439 --> 00:03:50.626
Hvis vi giver ham 190
kommer han på en diæt. 190 igen.

00:03:50.626 --> 00:03:55.964
Nu passer han bedre, og I er
godt klar over at jeg kunne blive ved med

00:03:55.964 --> 00:04:01.902
at justere ham for at han kan komme derind.
Sejt!

00:04:01.902 --> 00:04:08.531
Lad os repetere hvad koden gøre.
Den definerer en funktion vi kalder drawWinston()

00:04:08.531 --> 00:04:14.673
og siger at funktionen tager to værdier
og giver dem navnene faceX og faceY.

00:04:14.673 --> 00:04:19.949
De værdier kommer som variabler som
vi kan bruge overalt i vores funktion

00:04:19.949 --> 00:04:23.055
helt ligesom vi plejede at bruge
variablerne fra toppen.

00:04:23.055 --> 00:04:29.113
Og så kan vi kalde funktionen
hvornår vi nu vil.

00:04:29.113 --> 00:04:33.711
Vi kan give den forskellige værdier,
så den bruger <i>de</i> værdier hver gang.

00:04:33.711 --> 00:04:38.110
Du har set hvad der er sejt ved funktioner.
Vi kan finde på miljøvenlig kode der

00:04:38.110 --> 00:04:42.509
nemt kan genbruges,
men vi kan også bruge parametrene til at sige

00:04:42.509 --> 00:04:46.460
"Hey, her er noget som du kan ændre
ved koden."

00:04:46.460 --> 00:04:49.405
Det er som en opskrift.
Du skriver de generalle instruktioner,

00:04:49.405 --> 00:04:52.810
og hvis du indser at du pludselig skal
fodre 4 Winstons i stedet for 1

00:04:52.810 --> 00:04:55.941
behøver du ikke starte forfra, for du
ændrer bare de oprindelige instruktioner

00:04:55.941 --> 00:04:57.632
og ganger alt med 4.

00:04:57.632 --> 00:05:02.205
Nu kan du tænke lidt over dine
kode-opskrifter! Nam-nam.