V tuto chvíli si asi uvědomujete,
že jste při animování pokaždé používali jednu a tu samou funkci.
Jedná se o funkci "draw".
Pojďme si ji připomenout na našem programu pro animaci auta.
Máme v něm proměnnou x s počáteční hodnotou 11.
Uvnitř funkce "draw" se pak u proměnné x nakreslí auto.
Poté program k proměnné x pokaždé přičte hodnotu 3.
Výsledkem toho je,
že se auto nepřetržitě posouvá po 3 pixelech přes celou obrazovku.
Takto to funguje.
Ale teď, když už umíte vytvořit své vlastní funkce,
možná budete chtít vědět o funkci "draw" něco víc.
Proč je vždy pojmenována "draw"?
Je to vlastní funkce?
Jsou to velmi dobré otázky.
V knihovně ProcessingJS uvidíte,
že funkce "draw" je jednou z několika předdefinovaných funkcí.
Tyto funkce dávají našim programům větší kontrolu nad tím, co se děje na plátně.
Předdefinovaná funkce je funkce,
která již byla definována knihovnou ProcessingJS.
Ale obvykle začíná jako prázdná definice.
Například v knihovně ProcessingJS existuje kód, který vypadá takto:
"var draw = function ()"
A pak je úplně prázdný, zcela prázdný.
Na Khan Academy načítáme knihovnu ProcessingJS do každého zdejšího programu.
Sice tento kód nikdy neuvidíte, ale věřte mi, existuje.
Tento kód teď zakomentuji, protože ProcessingJS ho již pro nás dělá.
A když ve vašem vlastním programu předefinujete "draw",
tak tato nová definice má přednost před starou prázdnou definicí.
Nyní funkce "draw" dělá velmi zajímavé věci.
Například kreslí auto.
Otázkou nyní je:
Proč je funkce "draw" přivolávána opakovaně?
V knihovně ProcessingJS je totiž také kód,
který nastavuje časovač prohlížeče a funkci přivolává opakovaně.
Znovu a znovu a znovu.
Musíme pojmenovat funkci "draw",
protože to je název funkce, kterou ProcessingJS volá opakovaně.
Co když funkci přejmenujeme například na "drawCar".
Nejprve dostaneme neurčitou chybu, měli bychom tedy napsat "var drawCar".
Takže teď vidíte,
že když přejmenujeme funkci na "drawCar", tak už nevidíme žádnou animaci.
A to proto, že tato funkce už není přivolávána opakovaně.
Jelikož již není pojmenována jako "draw".
Musíme tedy kód, který chceme volat opakovaně,
vložit dovnitř funkce pojmenované přesně "draw".
Takže to udělám znovu, a odtud přivolám "drawCar".
Tak a máme to zpět.
Čili funkce musí být pojmenována "draw".
To také znamená, že byste neměli pojmenovávat své vlastní funkce "draw".
Pokud tedy nechcete, aby byly použity speciálně a přivolávány znovu a znovu.
Také si pamatujte, že nemůžete mít více funkcí s názvem "draw".
Počítá se pouze poslední definice.
Dejme tomu, že bychom tady uvnitř měli "rect".
Teď můžeme vidět, že se naše auto už nekreslí.
Místo toho se kreslí pouze obdélník, protože se počítá pouze poslední definice.
Pojďme to teď smazat.
Funkce draw není jedinou předdefinovanou funkcí,
která funguje jinak.
Existuje spousta funkcí pro reakci na myš a na stisknutí kláves.
Dejme tomu, že chceme program, který nakreslí barevnou elipsu.
A to kdykoli, když uživatel pohne myší.
Toho bychom mohli docílit s následující funkcí.
Napíšeme fill, mouseX, mouseY, mouseY a ellipse mouseX, mouseY, 10 a 10.
Dobře, oh, krásné.
Tato funkce je volána znovu a znovu.
A to i když uživatel nepohybuje myší.
Jako právě teď.
A tento program funguje, dělá totiž přesně to, co chceme.
Maluje tyto pěkné elipsy po celé obrazovce.
Ale jak se ukazuje,
existuje lepší a efektivnější způsob, jak docílit toho samého.
Můžeme tedy změnit funkci "draw" na "mouseMoved".
A stále to funguje.
Naše prostředí kontroluje programy, aby následně zjistilo,
zda jsme definovali funkci "mouseMoved".
A pokud ano, volá tuto funkci kdykoli uživatel pohne myší.
Ale nebude se volat, pokud uživatel nepohybuje myší.
Předtím jsme přivolali kód ve funkci "draw".
A to i když jsme to nepotřebovali, znovu a znovu.
A teď voláme tento kód jen ve funkci "mouseMoved".
Pouze tehdy, když se hodnoty mouseX nebo mouseY opravdu změní.
Náš program je tedy efektivnější, a to je dobrá věc.
Obecně platí, že pokud chcete změnit pouze výstup programu,
a to když uživatel pohne myší,
pak je lepší mít kód uvnitř funkce "mouseMoved".
A je tu spousta dalších takto předdefinovaných funkcí.
V dokumentaci můžete vidět další příklady.
Jako "mousePressed", "mouseReleased", "keyPressed" a další.
Takže nezapomeňte, pokud chcete použít speciální předdefinované funkce,
jako "mouseMoved" nebo "draw", napište je přesně a použijte je přesně.
Pokud tak neučiníte,
pak se ujistěte, že své vlastní funkci dáte nové a jedinečné jméno.