WEBVTT

00:00:00.677 --> 00:00:04.643
Może już wiecie, że trzeba
zdefiniować pewną funkcję

00:00:04.743 --> 00:00:09.632
gdy chcemy mieć w programie
animację. To "draw" (rysuj).

00:00:09.732 --> 00:00:13.729
Dla przypomnienia
- program z animowanym autem.

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

00:00:17.289 --> 00:00:21.014
Funkcja "draw" rysuje auto

00:00:21.114 --> 00:00:22.904
w punkcie zmiennej

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

00:00:27.135 --> 00:00:32.806
Samochodzik stale przesuwa się
po monitorze, zawsze o 3 piksele.

00:00:32.906 --> 00:00:35.275
Tak to działa.

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

00:00:37.965 --> 00:00:41.886
może więc zastanawiacie się
nad "draw".

00:00:41.986 --> 00:00:44.110
Dlaczego zawsze tak się nazywa?

00:00:44.210 --> 00:00:46.420
Czy to funkcja niestandardowa?

00:00:46.520 --> 00:00:48.263
Bardzo trafne pytania!

00:00:49.350 --> 00:00:51.989
W bibliotece Processing JS

00:00:52.089 --> 00:00:56.099
„draw” jest jedną z nielicznych
predefiniowanych funkcji,

00:00:56.199 --> 00:01:00.634
które dają programom
większą kontrolę nad obrazem.

00:01:01.297 --> 00:01:04.995
Funkcja predefiniowana to taka,
która została określona

00:01:05.096 --> 00:01:07.438
przez bibliotekę Processing JS.

00:01:07.538 --> 00:01:11.188
Zwykle zaczyna się
jako pusta definicja.

00:01:11.288 --> 00:01:14.736
Np. w bibliotece Processing JS

00:01:14.836 --> 00:01:19.332
znajdziemy coś takiego:
`var draw = function() { }`

00:01:19.432 --> 00:01:22.506
a dalej jest pusto. Zupełnie!

00:01:23.607 --> 00:01:26.358
Ładujemy bibliotekę ProcessingJS

00:01:26.458 --> 00:01:28.902
do każdego programu w Khan Academy,

00:01:29.002 --> 00:01:34.060
więc tej linii nie widzicie nigdy,
ale wierzcie mi, ona istnieje.

00:01:34.160 --> 00:01:35.996
Wyrzucę tę linię,

00:01:37.036 --> 00:01:40.159
skoro Processing JS nas wyręcza.

00:01:41.617 --> 00:01:44.187
Gdy ponownie zdefiniujecie „draw”

00:01:44.287 --> 00:01:50.085
we własnym programie,
nowa definicja anuluje starą, pustą.

00:01:50.185 --> 00:01:53.642
Teraz funkcja "draw"
robi świetne rzeczy,

00:01:53.742 --> 00:01:55.142
np. rysuje auto.

00:01:56.998 --> 00:02:01.643
Pytanie: dlaczego ta funkcja
jest przywoływana raz po raz?

00:02:01.743 --> 00:02:06.320
W bibliotece ProcessingJS
jest też program,

00:02:06.420 --> 00:02:09.412
który ustawia zegar przeglądarki

00:02:09.512 --> 00:02:13.793
i stale przywołuje funkcję "draw".

00:02:15.358 --> 00:02:17.713
Funkcję musimy nazwać "draw",

00:02:17.813 --> 00:02:21.833
bo taka jest nazwa,
którą przywołuje ProcessingJS.

00:02:22.856 --> 00:02:26.898
Jeśli zmienimy nazwę,
np. na "drawCar",

00:02:27.892 --> 00:02:30.488
widzimy: "niezdefiniowany błąd".

00:02:30.588 --> 00:02:33.135
Napiszmy więc "var drawCar".

00:02:34.668 --> 00:02:39.822
Jak widzicie, jeśli zmienimy nazwę
na "drawCar", animacji nie będzie.

00:02:39.922 --> 00:02:44.599
To dlatego, że funkcja
nie jest już stale przywoływana.

00:02:44.699 --> 00:02:46.641
Bo nie nazywa się "draw".

00:02:47.740 --> 00:02:50.043
Musimy wprowadzić program,

00:02:50.143 --> 00:02:55.124
który ma być stale przywoływany
wewnątrz funkcji o nazwie "draw".

00:02:55.224 --> 00:02:57.423
Zrobię to jeszcze raz

00:02:57.523 --> 00:03:00.738
i przywołam "drawCar" tutaj.

00:03:00.838 --> 00:03:02.833
Aha! Znowu działa.

00:03:03.855 --> 00:03:05.149
No dobrze.

00:03:05.249 --> 00:03:07.232
Musi być nazwa "draw".

00:03:07.922 --> 00:03:10.176
Dlatego też nie powinniście nadawać

00:03:10.276 --> 00:03:13.053
niestandardowym funkcjom nazwy "draw",

00:03:13.153 --> 00:03:17.628
chyba że chcecie, by były
przywoływane raz po raz.

00:03:18.516 --> 00:03:20.026
I pamiętajcie,

00:03:20.126 --> 00:03:23.962
nie możecie nadać
nazwy "draw" kilku funkcjom.

00:03:24.064 --> 00:03:28.136
Będzie się liczyć
tylko ostatnia definicja.

00:03:28.236 --> 00:03:30.767
Jeśli damy tu "rect",

00:03:31.656 --> 00:03:35.591
samochodzik już się nie pojawi.

00:03:35.691 --> 00:03:40.868
Rysowany jest tylko prostokąt,
bo liczy się ostatnia definicja.

00:03:40.968 --> 00:03:42.356
Skasujmy to więc.

00:03:44.792 --> 00:03:48.762
"Draw" nie jest jedyną
predefiniowaną funkcją

00:03:48.862 --> 00:03:50.717
zachowującą się wyjątkowo.

00:03:50.817 --> 00:03:52.454
Jest też grupa funkcji

00:03:52.554 --> 00:03:57.331
obsługujących reakcję myszy
i wciskanie klawiszy na klawiaturze.

00:03:57.431 --> 00:04:01.620
Powiedzmy, że program
ma narysować kolorową elipsę,

00:04:01.720 --> 00:04:04.722
gdy tylko użytkownik
poruszy myszką.

00:04:04.822 --> 00:04:08.964
Załatwimy sprawę
właśnie taką funkcją.

00:04:09.064 --> 00:04:12.394
"MouseX", "mouseY",

00:04:12.494 --> 00:04:14.915
a potem "ellipse".

00:04:15.015 --> 00:04:18.156
"MouseX", "mouseY"...

00:04:19.529 --> 00:04:22.106
No dobrze. Pięknie!

00:04:23.075 --> 00:04:27.636
Ta funkcja jest przywoływana
raz po raz,

00:04:27.736 --> 00:04:31.702
nawet gdy użytkownik
nie porusza myszką, jak w tej chwili.

00:04:31.802 --> 00:04:34.831
Program działa, robi to, czego żądamy,

00:04:34.931 --> 00:04:38.175
czyli maluje ładne elipsy
na całym monitorze.

00:04:38.275 --> 00:04:43.441
Ale okazuje się, że jest
lepszy, wydajniejszy sposób.

00:04:44.801 --> 00:04:49.970
Możemy zamienić funkcję "draw"
na "mouseMoved"

00:04:51.062 --> 00:04:53.505
i zobaczmy... Wciąż działa!

00:04:55.440 --> 00:04:59.252
Nasze środowisko sprawdza,
czy w programach zdefiniowano

00:04:59.352 --> 00:05:01.696
funkcję "mouseMoved", a jeśli tak,

00:05:01.796 --> 00:05:05.777
to przywołuje ją,
gdy użytkownik porusza myszką.

00:05:05.877 --> 00:05:10.464
Ale funkcja nie zostanie przywołana,
gdy użytkownik myszką nie rusza.

00:05:10.564 --> 00:05:15.801
Wcześniej przywoływaliśmy raz po raz
program w "draw", choć bez potrzeby.

00:05:15.901 --> 00:05:18.329
Teraz przywołujemy go

00:05:19.042 --> 00:05:23.460
w "mouseMoved" tylko gdy "mouseX"
lub "mouseY" naprawdę się zmieniło.

00:05:23.560 --> 00:05:27.037
Program stał się
wydajniejszy, a to dobrze.

00:05:28.045 --> 00:05:33.100
Jeśli chcecie zmienić efekt działania
programu, gdy użytkownik rusza myszką,

00:05:33.200 --> 00:05:37.243
to lepiej jest mieć ten program
w funkcji "mouseMoved".

00:05:38.307 --> 00:05:41.194
Jest więcej
predefiniowanych funkcji;

00:05:41.294 --> 00:05:44.683
przykłady znajdziecie
w dokumentacji:

00:05:44.783 --> 00:05:48.901
"mousePressed",
"mouseReleased", "keyPressed" itd.

00:05:50.296 --> 00:05:54.478
Pamiętajcie: chcąc użyć
specjalnej predefiniowanej funkcji,

00:05:54.578 --> 00:05:56.569
jak "mouseMoved" lub "draw",

00:05:56.669 --> 00:05:58.901
poprawnie zapiszcie jej nazwę.

00:05:59.605 --> 00:06:05.479
Albo nadawajcie własnym funkcjom
nowe, niepowtarzalne nazwy.