0:00:00.677,0:00:04.643
Może już wiecie, że trzeba[br]zdefiniować pewną funkcję

0:00:04.743,0:00:09.632
gdy chcemy mieć w programie[br]animację. To "draw" (rysuj).

0:00:09.732,0:00:13.729
Dla przypomnienia[br]- program z animowanym autem.

0:00:13.829,0:00:17.189
Ma zmienną „x” i zaczyna się od 11.

0:00:17.289,0:00:21.014
Funkcja "draw" rysuje auto

0:00:21.114,0:00:22.904
w punkcie zmiennej

0:00:23.004,0:00:27.035
i za każdym razem do "x" dodaje 3.

0:00:27.135,0:00:32.806
Samochodzik stale przesuwa się[br]po monitorze, zawsze o 3 piksele.

0:00:32.906,0:00:35.275
Tak to działa.

0:00:35.375,0:00:37.865
Umiecie już pisać własne funkcje,

0:00:37.965,0:00:41.886
może więc zastanawiacie się[br]nad "draw".

0:00:41.986,0:00:44.110
Dlaczego zawsze tak się nazywa?

0:00:44.210,0:00:46.420
Czy to funkcja niestandardowa?

0:00:46.520,0:00:48.263
Bardzo trafne pytania!

0:00:49.350,0:00:51.989
W bibliotece Processing JS

0:00:52.089,0:00:56.099
„draw” jest jedną z nielicznych[br]predefiniowanych funkcji,

0:00:56.199,0:01:00.634
które dają programom[br]większą kontrolę nad obrazem.

0:01:01.297,0:01:04.995
Funkcja predefiniowana to taka,[br]która została określona

0:01:05.096,0:01:07.438
przez bibliotekę Processing JS.

0:01:07.538,0:01:11.188
Zwykle zaczyna się[br]jako pusta definicja.

0:01:11.288,0:01:14.736
Np. w bibliotece Processing JS

0:01:14.836,0:01:19.332
znajdziemy coś takiego:[br]`var draw = function() { }`

0:01:19.432,0:01:22.506
a dalej jest pusto. Zupełnie!

0:01:23.607,0:01:26.358
Ładujemy bibliotekę ProcessingJS

0:01:26.458,0:01:28.902
do każdego programu w Khan Academy,

0:01:29.002,0:01:34.060
więc tej linii nie widzicie nigdy,[br]ale wierzcie mi, ona istnieje.

0:01:34.160,0:01:35.996
Wyrzucę tę linię,

0:01:37.036,0:01:40.159
skoro Processing JS nas wyręcza.

0:01:41.617,0:01:44.187
Gdy ponownie zdefiniujecie „draw”

0:01:44.287,0:01:50.085
we własnym programie,[br]nowa definicja anuluje starą, pustą.

0:01:50.185,0:01:53.642
Teraz funkcja "draw"[br]robi świetne rzeczy,

0:01:53.742,0:01:55.142
np. rysuje auto.

0:01:56.998,0:02:01.643
Pytanie: dlaczego ta funkcja[br]jest przywoływana raz po raz?

0:02:01.743,0:02:06.320
W bibliotece ProcessingJS[br]jest też program,

0:02:06.420,0:02:09.412
który ustawia zegar przeglądarki

0:02:09.512,0:02:13.793
i stale przywołuje funkcję "draw".

0:02:15.358,0:02:17.713
Funkcję musimy nazwać "draw",

0:02:17.813,0:02:21.833
bo taka jest nazwa,[br]którą przywołuje ProcessingJS.

0:02:22.856,0:02:26.898
Jeśli zmienimy nazwę,[br]np. na "drawCar",

0:02:27.892,0:02:30.488
widzimy: "niezdefiniowany błąd".

0:02:30.588,0:02:33.135
Napiszmy więc "var drawCar".

0:02:34.668,0:02:39.822
Jak widzicie, jeśli zmienimy nazwę[br]na "drawCar", animacji nie będzie.

0:02:39.922,0:02:44.599
To dlatego, że funkcja[br]nie jest już stale przywoływana.

0:02:44.699,0:02:46.641
Bo nie nazywa się "draw".

0:02:47.740,0:02:50.043
Musimy wprowadzić program,

0:02:50.143,0:02:55.124
który ma być stale przywoływany[br]wewnątrz funkcji o nazwie "draw".

0:02:55.224,0:02:57.423
Zrobię to jeszcze raz

0:02:57.523,0:03:00.738
i przywołam "drawCar" tutaj.

0:03:00.838,0:03:02.833
Aha! Znowu działa.

0:03:03.855,0:03:05.149
No dobrze.

0:03:05.249,0:03:07.232
Musi być nazwa "draw".

0:03:07.922,0:03:10.176
Dlatego też nie powinniście nadawać

0:03:10.276,0:03:13.053
niestandardowym funkcjom nazwy "draw",

0:03:13.153,0:03:17.628
chyba że chcecie, by były[br]przywoływane raz po raz.

0:03:18.516,0:03:20.026
I pamiętajcie,

0:03:20.126,0:03:23.962
nie możecie nadać[br]nazwy "draw" kilku funkcjom.

0:03:24.064,0:03:28.136
Będzie się liczyć[br]tylko ostatnia definicja.

0:03:28.236,0:03:30.767
Jeśli damy tu "rect",

0:03:31.656,0:03:35.591
samochodzik już się nie pojawi.

0:03:35.691,0:03:40.868
Rysowany jest tylko prostokąt,[br]bo liczy się ostatnia definicja.

0:03:40.968,0:03:42.356
Skasujmy to więc.

0:03:44.792,0:03:48.762
"Draw" nie jest jedyną[br]predefiniowaną funkcją

0:03:48.862,0:03:50.717
zachowującą się wyjątkowo.

0:03:50.817,0:03:52.454
Jest też grupa funkcji

0:03:52.554,0:03:57.331
obsługujących reakcję myszy[br]i wciskanie klawiszy na klawiaturze.

0:03:57.431,0:04:01.620
Powiedzmy, że program[br]ma narysować kolorową elipsę,

0:04:01.720,0:04:04.722
gdy tylko użytkownik[br]poruszy myszką.

0:04:04.822,0:04:08.964
Załatwimy sprawę[br]właśnie taką funkcją.

0:04:09.064,0:04:12.394
"MouseX", "mouseY",

0:04:12.494,0:04:14.915
a potem "ellipse".

0:04:15.015,0:04:18.156
"MouseX", "mouseY"...

0:04:19.529,0:04:22.106
No dobrze. Pięknie!

0:04:23.075,0:04:27.636
Ta funkcja jest przywoływana[br]raz po raz,

0:04:27.736,0:04:31.702
nawet gdy użytkownik[br]nie porusza myszką, jak w tej chwili.

0:04:31.802,0:04:34.831
Program działa, robi to, czego żądamy,

0:04:34.931,0:04:38.175
czyli maluje ładne elipsy[br]na całym monitorze.

0:04:38.275,0:04:43.441
Ale okazuje się, że jest[br]lepszy, wydajniejszy sposób.

0:04:44.801,0:04:49.970
Możemy zamienić funkcję "draw"[br]na "mouseMoved"

0:04:51.062,0:04:53.505
i zobaczmy... Wciąż działa!

0:04:55.440,0:04:59.252
Nasze środowisko sprawdza,[br]czy w programach zdefiniowano

0:04:59.352,0:05:01.696
funkcję "mouseMoved", a jeśli tak,

0:05:01.796,0:05:05.777
to przywołuje ją,[br]gdy użytkownik porusza myszką.

0:05:05.877,0:05:10.464
Ale funkcja nie zostanie przywołana,[br]gdy użytkownik myszką nie rusza.

0:05:10.564,0:05:15.801
Wcześniej przywoływaliśmy raz po raz[br]program w "draw", choć bez potrzeby.

0:05:15.901,0:05:18.329
Teraz przywołujemy go

0:05:19.042,0:05:23.460
w "mouseMoved" tylko gdy "mouseX"[br]lub "mouseY" naprawdę się zmieniło.

0:05:23.560,0:05:27.037
Program stał się[br]wydajniejszy, a to dobrze.

0:05:28.045,0:05:33.100
Jeśli chcecie zmienić efekt działania[br]programu, gdy użytkownik rusza myszką,

0:05:33.200,0:05:37.243
to lepiej jest mieć ten program[br]w funkcji "mouseMoved".

0:05:38.307,0:05:41.194
Jest więcej[br]predefiniowanych funkcji;

0:05:41.294,0:05:44.683
przykłady znajdziecie[br]w dokumentacji:

0:05:44.783,0:05:48.901
"mousePressed",[br]"mouseReleased", "keyPressed" itd.

0:05:50.296,0:05:54.478
Pamiętajcie: chcąc użyć[br]specjalnej predefiniowanej funkcji,

0:05:54.578,0:05:56.569
jak "mouseMoved" lub "draw",

0:05:56.669,0:05:58.901
poprawnie zapiszcie jej nazwę.

0:05:59.605,0:06:05.479
Albo nadawajcie własnym funkcjom[br]nowe, niepowtarzalne nazwy.