1
00:00:00,677 --> 00:00:04,643
Może już wiecie, że trzeba
zdefiniować pewną funkcję

2
00:00:04,743 --> 00:00:09,632
gdy chcemy mieć w programie
animację. To "draw" (rysuj).

3
00:00:09,732 --> 00:00:13,729
Dla przypomnienia
- program z animowanym autem.

4
00:00:13,829 --> 00:00:17,189
Ma zmienną „x” i zaczyna się od 11.

5
00:00:17,289 --> 00:00:21,014
Funkcja "draw" rysuje auto

6
00:00:21,114 --> 00:00:22,904
w punkcie zmiennej

7
00:00:23,004 --> 00:00:27,035
i za każdym razem do "x" dodaje 3.

8
00:00:27,135 --> 00:00:32,806
Samochodzik stale przesuwa się
po monitorze, zawsze o 3 piksele.

9
00:00:32,906 --> 00:00:35,275
Tak to działa.

10
00:00:35,375 --> 00:00:37,865
Umiecie już pisać własne funkcje,

11
00:00:37,965 --> 00:00:41,886
może więc zastanawiacie się
nad "draw".

12
00:00:41,986 --> 00:00:44,110
Dlaczego zawsze tak się nazywa?

13
00:00:44,210 --> 00:00:46,420
Czy to funkcja niestandardowa?

14
00:00:46,520 --> 00:00:48,263
Bardzo trafne pytania!

15
00:00:49,350 --> 00:00:51,989
W bibliotece Processing JS

16
00:00:52,089 --> 00:00:56,099
„draw” jest jedną z nielicznych
predefiniowanych funkcji,

17
00:00:56,199 --> 00:01:00,634
które dają programom
większą kontrolę nad obrazem.

18
00:01:01,297 --> 00:01:04,995
Funkcja predefiniowana to taka,
która została określona

19
00:01:05,096 --> 00:01:07,438
przez bibliotekę Processing JS.

20
00:01:07,538 --> 00:01:11,188
Zwykle zaczyna się
jako pusta definicja.

21
00:01:11,288 --> 00:01:14,736
Np. w bibliotece Processing JS

22
00:01:14,836 --> 00:01:19,332
znajdziemy coś takiego:
`var draw = function() { }`

23
00:01:19,432 --> 00:01:22,506
a dalej jest pusto. Zupełnie!

24
00:01:23,607 --> 00:01:26,358
Ładujemy bibliotekę ProcessingJS

25
00:01:26,458 --> 00:01:28,902
do każdego programu w Khan Academy,

26
00:01:29,002 --> 00:01:34,060
więc tej linii nie widzicie nigdy,
ale wierzcie mi, ona istnieje.

27
00:01:34,160 --> 00:01:35,996
Wyrzucę tę linię,

28
00:01:37,036 --> 00:01:40,159
skoro Processing JS nas wyręcza.

29
00:01:41,617 --> 00:01:44,187
Gdy ponownie zdefiniujecie „draw”

30
00:01:44,287 --> 00:01:50,085
we własnym programie,
nowa definicja anuluje starą, pustą.

31
00:01:50,185 --> 00:01:53,642
Teraz funkcja "draw"
robi świetne rzeczy,

32
00:01:53,742 --> 00:01:55,142
np. rysuje auto.

33
00:01:56,998 --> 00:02:01,643
Pytanie: dlaczego ta funkcja
jest przywoływana raz po raz?

34
00:02:01,743 --> 00:02:06,320
W bibliotece ProcessingJS
jest też program,

35
00:02:06,420 --> 00:02:09,412
który ustawia zegar przeglądarki

36
00:02:09,512 --> 00:02:13,793
i stale przywołuje funkcję "draw".

37
00:02:15,358 --> 00:02:17,713
Funkcję musimy nazwać "draw",

38
00:02:17,813 --> 00:02:21,833
bo taka jest nazwa,
którą przywołuje ProcessingJS.

39
00:02:22,856 --> 00:02:26,898
Jeśli zmienimy nazwę,
np. na "drawCar",

40
00:02:27,892 --> 00:02:30,488
widzimy: "niezdefiniowany błąd".

41
00:02:30,588 --> 00:02:33,135
Napiszmy więc "var drawCar".

42
00:02:34,668 --> 00:02:39,822
Jak widzicie, jeśli zmienimy nazwę
na "drawCar", animacji nie będzie.

43
00:02:39,922 --> 00:02:44,599
To dlatego, że funkcja
nie jest już stale przywoływana.

44
00:02:44,699 --> 00:02:46,641
Bo nie nazywa się "draw".

45
00:02:47,740 --> 00:02:50,043
Musimy wprowadzić program,

46
00:02:50,143 --> 00:02:55,124
który ma być stale przywoływany
wewnątrz funkcji o nazwie "draw".

47
00:02:55,224 --> 00:02:57,423
Zrobię to jeszcze raz

48
00:02:57,523 --> 00:03:00,738
i przywołam "drawCar" tutaj.

49
00:03:00,838 --> 00:03:02,833
Aha! Znowu działa.

50
00:03:03,855 --> 00:03:05,149
No dobrze.

51
00:03:05,249 --> 00:03:07,232
Musi być nazwa "draw".

52
00:03:07,922 --> 00:03:10,176
Dlatego też nie powinniście nadawać

53
00:03:10,276 --> 00:03:13,053
niestandardowym funkcjom nazwy "draw",

54
00:03:13,153 --> 00:03:17,628
chyba że chcecie, by były
przywoływane raz po raz.

55
00:03:18,516 --> 00:03:20,026
I pamiętajcie,

56
00:03:20,126 --> 00:03:23,962
nie możecie nadać
nazwy "draw" kilku funkcjom.

57
00:03:24,064 --> 00:03:28,136
Będzie się liczyć
tylko ostatnia definicja.

58
00:03:28,236 --> 00:03:30,767
Jeśli damy tu "rect",

59
00:03:31,656 --> 00:03:35,591
samochodzik już się nie pojawi.

60
00:03:35,691 --> 00:03:40,868
Rysowany jest tylko prostokąt,
bo liczy się ostatnia definicja.

61
00:03:40,968 --> 00:03:42,356
Skasujmy to więc.

62
00:03:44,792 --> 00:03:48,762
"Draw" nie jest jedyną
predefiniowaną funkcją

63
00:03:48,862 --> 00:03:50,717
zachowującą się wyjątkowo.

64
00:03:50,817 --> 00:03:52,454
Jest też grupa funkcji

65
00:03:52,554 --> 00:03:57,331
obsługujących reakcję myszy
i wciskanie klawiszy na klawiaturze.

66
00:03:57,431 --> 00:04:01,620
Powiedzmy, że program
ma narysować kolorową elipsę,

67
00:04:01,720 --> 00:04:04,722
gdy tylko użytkownik
poruszy myszką.

68
00:04:04,822 --> 00:04:08,964
Załatwimy sprawę
właśnie taką funkcją.

69
00:04:09,064 --> 00:04:12,394
"MouseX", "mouseY",

70
00:04:12,494 --> 00:04:14,915
a potem "ellipse".

71
00:04:15,015 --> 00:04:18,156
"MouseX", "mouseY"...

72
00:04:19,529 --> 00:04:22,106
No dobrze. Pięknie!

73
00:04:23,075 --> 00:04:27,636
Ta funkcja jest przywoływana
raz po raz,

74
00:04:27,736 --> 00:04:31,702
nawet gdy użytkownik
nie porusza myszką, jak w tej chwili.

75
00:04:31,802 --> 00:04:34,831
Program działa, robi to, czego żądamy,

76
00:04:34,931 --> 00:04:38,175
czyli maluje ładne elipsy
na całym monitorze.

77
00:04:38,275 --> 00:04:43,441
Ale okazuje się, że jest
lepszy, wydajniejszy sposób.

78
00:04:44,801 --> 00:04:49,970
Możemy zamienić funkcję "draw"
na "mouseMoved"

79
00:04:51,062 --> 00:04:53,505
i zobaczmy... Wciąż działa!

80
00:04:55,440 --> 00:04:59,252
Nasze środowisko sprawdza,
czy w programach zdefiniowano

81
00:04:59,352 --> 00:05:01,696
funkcję "mouseMoved", a jeśli tak,

82
00:05:01,796 --> 00:05:05,777
to przywołuje ją,
gdy użytkownik porusza myszką.

83
00:05:05,877 --> 00:05:10,464
Ale funkcja nie zostanie przywołana,
gdy użytkownik myszką nie rusza.

84
00:05:10,564 --> 00:05:15,801
Wcześniej przywoływaliśmy raz po raz
program w "draw", choć bez potrzeby.

85
00:05:15,901 --> 00:05:18,329
Teraz przywołujemy go

86
00:05:19,042 --> 00:05:23,460
w "mouseMoved" tylko gdy "mouseX"
lub "mouseY" naprawdę się zmieniło.

87
00:05:23,560 --> 00:05:27,037
Program stał się
wydajniejszy, a to dobrze.

88
00:05:28,045 --> 00:05:33,100
Jeśli chcecie zmienić efekt działania
programu, gdy użytkownik rusza myszką,

89
00:05:33,200 --> 00:05:37,243
to lepiej jest mieć ten program
w funkcji "mouseMoved".

90
00:05:38,307 --> 00:05:41,194
Jest więcej
predefiniowanych funkcji;

91
00:05:41,294 --> 00:05:44,683
przykłady znajdziecie
w dokumentacji:

92
00:05:44,783 --> 00:05:48,901
"mousePressed",
"mouseReleased", "keyPressed" itd.

93
00:05:50,296 --> 00:05:54,478
Pamiętajcie: chcąc użyć
specjalnej predefiniowanej funkcji,

94
00:05:54,578 --> 00:05:56,569
jak "mouseMoved" lub "draw",

95
00:05:56,669 --> 00:05:58,901
poprawnie zapiszcie jej nazwę.

96
00:05:59,605 --> 00:06:05,479
Albo nadawajcie własnym funkcjom
nowe, niepowtarzalne nazwy.