Vi er igen i gang med Winston-tegneprogrammet, men jeg har tilføjet lidt tekst til det.
Jeg vil gerne lægge en Winston under hvert mærkat,
så vi kan se ham i hver del af livet.
Lige nu er han over det hele. Det er fordi vi sætter
faceX og faceY til tilfældige tal inden i funktionen.
Vi vil gerne kunne udtrykke "Her er den præcise position hvor du skal tegne den her Winston."
Jeg vil have en måde at give en position på hver gang jeg kalder funktionen
på samme måde som vi gør ved ellipse() og rect().
Jeg vil gerne have en Winston her, her her og her,
og jeg vil ikke bare lægge dem tilfældige steder hver gang jeg kalder funktionen.
For at gøre det er vi nødt til at give funktionen "parametre"
både i vores funktionsdefinition -- her i toppen --
og i vores funktionskald hernede når vi faktisk kalder den.
Vi sender faceX og faceY gennem drawWinston(),
og vi får den til at bruge de sendte værdier i stedet for at generere dem tilfældigt.
Vi skal tænke over hvad vi sender til funktionerne hernede.
Vi sætter hver Winston under hvert mærkat, så vi vil nok gerne have at x og y for hver
Winston er ens med de tal som vi sendte til text()-funktionerne.
Måske 10 pixels mindre i y-værdien? Den første værdi er 10 og 30
og så måske 200, 230... 10, 230... 200, 230.
Det er det samme som med mærkat-koordinaterne. Jeg tilføjer bare 10 til hvert y,
for jeg vil have den lidt lavere.
Winston har ikke flyttet sig. Vi har ikke fortalt vores funktion at
vi sender parametre til den, så den bruger stadig de her tilfældige værdier.
For at fortælle funktionen "Nu skal du have den her information i stedet"
er vi nødt til at give parametrene navne inde i de her paranteser.
Vi kalder dem faceX og faceY og separerer dem med et komma.
Vi kalder dem det fordi vi bruger dem inde i funktionen.
Så har vi ikke brug for at omskrive resten af vores kode.
Men stadigvæk... Intet er sket! Winston er over det hele.
Hvis du kigger i toppen af funktionen
ser du at vi stadig overskriver faceX og faceY med tilfældige værdier
Så vi skal slette de her linjer...
Nu bliver faceX og faceY sendt til funktionen, og
den bruger de værdier som vi kalder dem med.
Jeg satte ikke helt Winston korrekt, for jeg glemte at tekst positioneres
i forhold til øverste venstre hjørne, og ansigtet positioneres i forhold til midten.
Jeg er nødt til at fikse mine tal lidt.
Jeg skal flytte x-værdien en del og flytte den her, og så... det er vores baby.
Vi gennemgår og ændrer hvad jeg sender til funktionen.
Jeg behøver slet ikke at ændre funktionsdefinitionen.
Den tager altid de værdier som vi giver den.
Helt ligesom ellipse() og rect().
Jeg har positioneret den, men jeg har lagt mærke til at Winston er for stor.
Han overlapper og passer ikke ind.
Jeg har lagt koden til at tegne ham ind i en funktion.
Jeg kan ændre størrelsen af allesammen på én gang
ved at ændre en linje kode der tegner ellipsen.
Hvis vi giver ham 190 kommer han på en diæt. 190 igen.
Nu passer han bedre, og I er godt klar over at jeg kunne blive ved med
at justere ham for at han kan komme derind. Sejt!
Lad os repetere hvad koden gøre. Den definerer en funktion vi kalder drawWinston()
og siger at funktionen tager to værdier og giver dem navnene faceX og faceY.
De værdier kommer som variabler som vi kan bruge overalt i vores funktion
helt ligesom vi plejede at bruge variablerne fra toppen.
Og så kan vi kalde funktionen hvornår vi nu vil.
Vi kan give den forskellige værdier, så den bruger de værdier hver gang.
Du har set hvad der er sejt ved funktioner. Vi kan finde på miljøvenlig kode der
nemt kan genbruges, men vi kan også bruge parametrene til at sige
"Hey, her er noget som du kan ændre ved koden."
Det er som en opskrift. Du skriver de generalle instruktioner,
og hvis du indser at du pludselig skal fodre 4 Winstons i stedet for 1
behøver du ikke starte forfra, for du ændrer bare de oprindelige instruktioner
og ganger alt med 4.
Nu kan du tænke lidt over dine kode-opskrifter! Nam-nam.