WEBVTT

00:00:00.000 --> 00:00:03.614
Pokračujeme s programem kreslícím
Winstona.

00:00:03.614 --> 00:00:06.001
Přidala jsem k němu nějaký text.

00:00:06.001 --> 00:00:11.072
Bude potřeba umístit každého
Winstona pod jeden štítek.

00:00:11.072 --> 00:00:13.210
Daný štítek ho zobrazí
v určitém bodě života.

00:00:13.210 --> 00:00:15.287
Teď máme Winstony rozházené všude.

00:00:15.287 --> 00:00:20.449
To proto, že faceX a faceY jsou nastavena
jako náhodná čísla.

00:00:20.449 --> 00:00:26.714
Chceme tedy říci: „Toto je přesná pozice,
kde chceme, abys nakreslil Winstona."

00:00:26.714 --> 00:00:30.316
Chceme mít možnost určit tuto pozici,
když zavoláme funkci.

00:00:30.316 --> 00:00:34.048
Přesně tak jako u funkcí elipse() a rect().

00:00:34.048 --> 00:00:40.460
Chceme dát Winstona sem, tady,
jednoho sem a jednoho sem.

00:00:40.460 --> 00:00:44.733
Nechceme náhodnou pozici, 
když zavoláme funkci.

00:00:44.733 --> 00:00:49.562
Abychom to mohli udělat, musíme určit
"parametry" funkce.

00:00:49.562 --> 00:00:53.617
Musí být přímo v definici 
naší funkce, tedy zde úplně nahoře.

00:00:53.617 --> 00:00:58.235
A pak se použijí, když voláme naší funkci,
tady dole.

00:00:58.235 --> 00:01:03.075
Pro funkci drawWinston (),
tedy určíme parametry faceX a faceY.

00:01:03.075 --> 00:01:10.668
Použijeme tyto hodnoty,
místo náhodného generování.

00:01:10.668 --> 00:01:15.287
Co bychom přidali do volání těchto funkcí,
když chceme umístit Winstony pod text?

00:01:15.287 --> 00:01:25.081
Chceme, aby x a y každého Winstona byly
podobné číslům, které jsou ve funkci text.

00:01:25.081 --> 00:01:29.198
Možná tak o 10 pixelů níž u parametru y.

00:01:29.198 --> 00:01:33.316
První dáme na 10 a 30.

00:01:33.316 --> 00:01:41.195
Pak třeba 200 a 30 ...
10 a 230 ... a 200 a 230.

00:01:41.195 --> 00:01:45.793
Je to stejné jako textové souřadnice,
jen přidáváme 10 ke každému y.

00:01:45.793 --> 00:01:49.855
Chceme Winstona trošku níž než text.

00:01:49.985 --> 00:01:51.853
Winston se ale stále nepohnul.

00:01:51.853 --> 00:01:57.001
Neřekli jsme totiž naší funkci,
že chceme používat parametry.

00:01:57.001 --> 00:02:00.247
Funkce stále tedy používá náhodné hodnoty 
místo parametrů.

00:02:00.247 --> 00:02:05.134
Naší funkci ale chceme říct,
že místo náhodných čísel má použít zadané parametry.

00:02:05.134 --> 00:02:09.558
Názvy parametrů proto musíme dát 
do těchto závorek.

00:02:09.558 --> 00:02:15.279
Nazveme je faceX a faceY
a oddělíme je čárkou.

00:02:15.279 --> 00:02:20.704
Na tyto parametry už odkazujeme uvnitř funkce

00:02:20.704 --> 00:02:25.457
a díky tomu nemusíme 
přepisovat zbytek našeho kódu.

00:02:25.457 --> 00:02:29.223
Pořád se ale nic nestalo. 
Winstonové se nepohnuli.

00:02:29.223 --> 00:02:31.353
Podívejte se na začátek naší funkce.

00:02:31.353 --> 00:02:36.361
Tady totiž přepisujeme faceX a faceY 
náhodnými hodnotami.

00:02:36.361 --> 00:02:43.117
Takže teď nám stačí akorát
smazat tyto řádky.

00:02:43.117 --> 00:02:46.127
Nyní se už faceX a faceY dostávají
správně do funkce.

00:02:46.127 --> 00:02:50.526
Používají se hodnoty,
které voláme.

00:02:50.526 --> 00:02:54.361
Ale nepodařilo se nám trefit
pozice úplně správně.

00:02:54.361 --> 00:03:02.371
Zapomněli jsme, že text získá pozici podle
levého horního rohu a obličej podle středu.

00:03:02.572 --> 00:03:06.383
Musíme si teď trošku pohrát s čísly.

00:03:06.383 --> 00:03:15.072
Měli bychom asi dost posunout x souřadnici.

00:03:15.072 --> 00:03:18.613
Takže teď měním hodnoty, které
vkládáme do funkce.

00:03:18.613 --> 00:03:22.518
Nemusím už měnit
celou definici funkce.

00:03:22.518 --> 00:03:27.375
Vždycky se použijí tato čísla
jako hodnoty do naší funkce.

00:03:27.375 --> 00:03:29.548
Přesně tak jako u funkcí 
ellipse() a rect().

00:03:29.548 --> 00:03:33.348
Pozice jsem už spravila, ale
všimněte si, že Winston je příliš velký.

00:03:33.348 --> 00:03:35.756
Obličeje se překrývají a 
nevejdou se vedle sebe.

00:03:35.756 --> 00:03:39.019
Kód k nakreslení obličeje je vložený
přímo do funkce.

00:03:39.019 --> 00:03:42.374
Můžeme tedy změnit velikost
u všech najednou.

00:03:42.374 --> 00:03:45.439
Stačí změnit řádek
kódu, který kreslí elipsu.

00:03:45.439 --> 00:03:49.034
Pokud sem napíšu třeba 190,
tak bude Winston moc hubený.

00:03:49.034 --> 00:03:55.324
Ještě sem 190, teď už se vejdou lépe.

00:03:55.324 --> 00:04:03.165
Dál bychom ho mohli upravit tak,
aby se vešel hezky mezi texty.

00:04:03.165 --> 00:04:06.361
Zopakujme si teď, co tento kód dělá.

00:04:06.361 --> 00:04:09.557
Definuje funkci
nazvanou drawWinston().

00:04:09.557 --> 00:04:14.673
Říká také, že tato funkce má dvě hodnoty
označené jako faceX a faceY.

00:04:14.673 --> 00:04:19.949
Tyto hodnoty jsou proměnné. 
Můžeme je tak použít kdekoli uvnitř funkce.

00:04:19.949 --> 00:04:24.632
Třeba tady jsme je použili jako proměnné.

00:04:24.632 --> 00:04:29.113
Poté, co máme funkci hotovou,
ji můžeme zavolat, kdykoli chceme.

00:04:29.113 --> 00:04:34.517
Můžeme jí předávat různé hodnoty,
takže použije vždy nové hodnoty.

00:04:34.517 --> 00:04:37.510
Ukázali jsme si tedy,
jaká je výhoda funkcí.

00:04:37.510 --> 00:04:41.329
Můžeme je použít na kód,
který potřebujeme použít opakovaně.

00:04:41.329 --> 00:04:46.460
Můžeme také pomocí parametrů říct:
„V kódu je něco, co můžeš změnit.“

00:04:46.460 --> 00:04:49.405
Je to jako recept.
Zapíšete si obecný postup.

00:04:49.405 --> 00:04:52.810
A pak si uvědomíte, že potřebujete
uvařit pro 4 Winstony, ne pro 1.

00:04:52.810 --> 00:04:55.941
Nemusíte začínat znovu.
Stačí upravit původní postup

00:04:55.941 --> 00:04:57.632
a třeba to celé 4 krát vynásobit.

00:04:57.632 --> 00:05:02.205
A teď je čas na vymýšlení
receptů ve vašem kódu.