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.