1
00:00:00,757 --> 00:00:02,376
V tuto chvíli si asi uvědomujete,

2
00:00:02,376 --> 00:00:06,995
že jste při animování pokaždé
používali jednu a tu samou funkci.

3
00:00:07,652 --> 00:00:09,451
Jedná se o funkci "draw".

4
00:00:09,801 --> 00:00:13,406
Pojďme si ji připomenout
na našem programu pro animaci auta.

5
00:00:13,406 --> 00:00:16,992
Máme v něm proměnnou x
s počáteční hodnotou 11.

6
00:00:16,992 --> 00:00:22,648
Uvnitř funkce "draw" se pak
u proměnné x nakreslí auto.

7
00:00:22,648 --> 00:00:26,757
Poté program k proměnné x
pokaždé přičte hodnotu 3.

8
00:00:26,757 --> 00:00:28,378
Výsledkem toho je,

9
00:00:28,378 --> 00:00:31,807
že se auto nepřetržitě posouvá 
po 3 pixelech přes celou obrazovku.

10
00:00:32,747 --> 00:00:35,351
Takto to funguje.

11
00:00:35,351 --> 00:00:38,103
Ale teď, když už umíte
vytvořit své vlastní funkce,

12
00:00:38,103 --> 00:00:42,203
možná budete chtít vědět 
o funkci "draw" něco víc.

13
00:00:42,203 --> 00:00:44,109
Proč je vždy pojmenována "draw"?

14
00:00:44,109 --> 00:00:46,139
Je to vlastní funkce?

15
00:00:46,449 --> 00:00:48,664
Jsou to velmi dobré otázky.

16
00:00:49,254 --> 00:00:51,985
V knihovně ProcessingJS uvidíte,

17
00:00:51,985 --> 00:00:56,132
že funkce "draw" je jednou z
několika předdefinovaných funkcí.

18
00:00:56,132 --> 00:01:01,009
Tyto funkce dávají našim programům větší
kontrolu nad tím, co se děje na plátně.

19
00:01:01,009 --> 00:01:03,169
Předdefinovaná funkce je funkce,

20
00:01:03,169 --> 00:01:07,209
která již byla definována 
knihovnou ProcessingJS.

21
00:01:07,209 --> 00:01:11,149
Ale obvykle začíná
jako prázdná definice.

22
00:01:11,149 --> 00:01:17,045
Například v knihovně ProcessingJS
existuje kód, který vypadá takto:

23
00:01:17,045 --> 00:01:19,434
"var draw = function ()"

24
00:01:19,434 --> 00:01:23,266
A pak je úplně prázdný,
zcela prázdný.

25
00:01:23,266 --> 00:01:28,620
Na Khan Academy načítáme knihovnu 
ProcessingJS do každého zdejšího programu.

26
00:01:28,620 --> 00:01:32,823
Sice tento kód nikdy neuvidíte,
ale věřte mi, existuje.

27
00:01:33,977 --> 00:01:40,349
Tento kód teď zakomentuji,
protože ProcessingJS ho již pro nás dělá.

28
00:01:42,329 --> 00:01:45,308
A když ve vašem vlastním programu
předefinujete "draw",

29
00:01:45,308 --> 00:01:50,259
tak tato nová definice má přednost
před starou prázdnou definicí.

30
00:01:50,259 --> 00:01:53,862
Nyní funkce "draw" dělá
velmi zajímavé věci.

31
00:01:53,862 --> 00:01:55,547
Například kreslí auto.

32
00:01:56,959 --> 00:01:58,079
Otázkou nyní je:

33
00:01:58,079 --> 00:02:01,686
Proč je funkce "draw" 
přivolávána opakovaně?

34
00:02:01,686 --> 00:02:05,964
V knihovně ProcessingJS
je totiž také kód,

35
00:02:05,964 --> 00:02:11,111
který nastavuje časovač prohlížeče a
funkci přivolává opakovaně.

36
00:02:11,111 --> 00:02:13,998
Znovu a znovu a znovu.

37
00:02:15,128 --> 00:02:17,849
Musíme pojmenovat funkci "draw",

38
00:02:17,849 --> 00:02:22,073
protože to je název funkce,
kterou ProcessingJS volá opakovaně.

39
00:02:22,663 --> 00:02:27,543
Co když funkci přejmenujeme
například na "drawCar".

40
00:02:27,543 --> 00:02:33,480
Nejprve dostaneme neurčitou chybu,
měli bychom tedy napsat "var drawCar".

41
00:02:34,510 --> 00:02:35,567
Takže teď vidíte,

42
00:02:35,567 --> 00:02:39,651
že když přejmenujeme funkci na "drawCar",
tak už nevidíme žádnou animaci.

43
00:02:39,651 --> 00:02:44,692
A to proto, že tato funkce
už není přivolávána opakovaně.

44
00:02:44,692 --> 00:02:47,244
Jelikož již není 
pojmenována jako "draw".

45
00:02:47,738 --> 00:02:51,366
Musíme tedy kód,
který chceme volat opakovaně,

46
00:02:51,366 --> 00:02:55,912
vložit dovnitř funkce
pojmenované přesně "draw".

47
00:02:55,912 --> 00:03:00,594
Takže to udělám znovu,
a odtud přivolám "drawCar".

48
00:03:00,594 --> 00:03:03,957
Tak a máme to zpět.

49
00:03:05,177 --> 00:03:08,249
Čili funkce musí být 
pojmenována "draw".

50
00:03:08,879 --> 00:03:12,970
To také znamená, že byste neměli
pojmenovávat své vlastní funkce "draw".

51
00:03:12,970 --> 00:03:18,228
Pokud tedy nechcete, aby byly použity 
speciálně a přivolávány znovu a znovu.

52
00:03:18,228 --> 00:03:24,348
Také si pamatujte, že nemůžete mít
více funkcí s názvem "draw".

53
00:03:24,348 --> 00:03:27,889
Počítá se pouze poslední definice.

54
00:03:27,889 --> 00:03:31,770
Dejme tomu, že bychom
tady uvnitř měli "rect".

55
00:03:31,770 --> 00:03:35,903
Teď můžeme vidět,
že se naše auto už nekreslí.

56
00:03:35,903 --> 00:03:40,965
Místo toho se kreslí pouze obdélník,
protože se počítá pouze poslední definice.

57
00:03:40,965 --> 00:03:42,576
Pojďme to teď smazat.

58
00:03:44,676 --> 00:03:48,289
Funkce draw není jedinou
předdefinovanou funkcí,

59
00:03:48,289 --> 00:03:50,499
která funguje jinak.

60
00:03:50,499 --> 00:03:56,292
Existuje spousta funkcí
pro reakci na myš a na stisknutí kláves.

61
00:03:57,032 --> 00:04:01,624
Dejme tomu, že chceme program,
který nakreslí barevnou elipsu.

62
00:04:01,624 --> 00:04:04,276
A to kdykoli, když
uživatel pohne myší.

63
00:04:04,716 --> 00:04:09,042
Toho bychom mohli docílit s
následující funkcí.

64
00:04:09,042 --> 00:04:19,998
Napíšeme fill, mouseX, mouseY, mouseY
a ellipse mouseX, mouseY, 10 a 10.

65
00:04:19,998 --> 00:04:23,255
Dobře, oh, krásné.

66
00:04:23,255 --> 00:04:27,224
Tato funkce je volána
znovu a znovu.

67
00:04:27,724 --> 00:04:29,576
A to i když uživatel 
nepohybuje myší.

68
00:04:29,576 --> 00:04:31,286
Jako právě teď.

69
00:04:31,766 --> 00:04:34,703
A tento program funguje, 
dělá totiž přesně to, co chceme.

70
00:04:34,703 --> 00:04:38,568
Maluje tyto pěkné elipsy
po celé obrazovce.

71
00:04:38,568 --> 00:04:39,984
Ale jak se ukazuje,

72
00:04:39,984 --> 00:04:44,568
existuje lepší a efektivnější způsob,
jak docílit toho samého.

73
00:04:44,568 --> 00:04:49,845
Můžeme tedy změnit funkci "draw"
na "mouseMoved".

74
00:04:52,095 --> 00:04:54,477
A stále to funguje.

75
00:04:55,267 --> 00:04:58,751
Naše prostředí kontroluje programy,
aby následně zjistilo,

76
00:04:58,751 --> 00:05:00,754
zda jsme definovali
funkci "mouseMoved".

77
00:05:00,754 --> 00:05:05,457
A pokud ano, volá tuto funkci
kdykoli uživatel pohne myší.

78
00:05:05,457 --> 00:05:10,029
Ale nebude se volat,
pokud uživatel nepohybuje myší.

79
00:05:10,029 --> 00:05:13,423
Předtím jsme přivolali
kód ve funkci "draw".

80
00:05:13,423 --> 00:05:15,908
A to i když jsme to nepotřebovali, 
znovu a znovu.

81
00:05:15,908 --> 00:05:20,265
A teď voláme tento kód 
jen ve funkci "mouseMoved".

82
00:05:20,265 --> 00:05:23,292
Pouze tehdy, když se hodnoty mouseX 
nebo mouseY opravdu změní.

83
00:05:23,292 --> 00:05:28,183
Náš program je tedy efektivnější,
a to je dobrá věc.

84
00:05:28,183 --> 00:05:30,968
Obecně platí, že pokud chcete
změnit pouze výstup programu,

85
00:05:30,968 --> 00:05:33,369
a to když uživatel 
pohne myší,

86
00:05:33,369 --> 00:05:36,952
pak je lepší mít kód
uvnitř funkce "mouseMoved".

87
00:05:38,172 --> 00:05:40,987
A je tu spousta dalších
takto předdefinovaných funkcí.

88
00:05:40,987 --> 00:05:44,655
V dokumentaci můžete 
vidět další příklady.

89
00:05:44,655 --> 00:05:48,882
Jako "mousePressed", "mouseReleased",
"keyPressed" a další.

90
00:05:50,455 --> 00:05:54,883
Takže nezapomeňte, pokud chcete použít
speciální předdefinované funkce,

91
00:05:54,883 --> 00:05:59,244
jako "mouseMoved" nebo "draw",
napište je přesně a použijte je přesně.

92
00:05:59,244 --> 00:06:00,630
Pokud tak neučiníte,

93
00:06:00,630 --> 00:06:05,967
pak se ujistěte, že své vlastní funkci 
dáte nové a jedinečné jméno.