Może już wiecie, że trzeba zdefiniować pewną funkcję
gdy chcemy mieć w programie animację. To "draw" (rysuj).
Dla przypomnienia - program z animowanym autem.
Ma zmienną „x” i zaczyna się od 11.
Funkcja "draw" rysuje auto
w punkcie zmiennej
i za każdym razem do "x" dodaje 3.
Samochodzik stale przesuwa się po monitorze, zawsze o 3 piksele.
Tak to działa.
Umiecie już pisać własne funkcje,
może więc zastanawiacie się nad "draw".
Dlaczego zawsze tak się nazywa?
Czy to funkcja niestandardowa?
Bardzo trafne pytania!
W bibliotece Processing JS
„draw” jest jedną z nielicznych predefiniowanych funkcji,
które dają programom większą kontrolę nad obrazem.
Funkcja predefiniowana to taka, która została określona
przez bibliotekę Processing JS.
Zwykle zaczyna się jako pusta definicja.
Np. w bibliotece Processing JS
znajdziemy coś takiego: `var draw = function() { }`
a dalej jest pusto. Zupełnie!
Ładujemy bibliotekę ProcessingJS
do każdego programu w Khan Academy,
więc tej linii nie widzicie nigdy, ale wierzcie mi, ona istnieje.
Wyrzucę tę linię,
skoro Processing JS nas wyręcza.
Gdy ponownie zdefiniujecie „draw”
we własnym programie, nowa definicja anuluje starą, pustą.
Teraz funkcja "draw" robi świetne rzeczy,
np. rysuje auto.
Pytanie: dlaczego ta funkcja jest przywoływana raz po raz?
W bibliotece ProcessingJS jest też program,
który ustawia zegar przeglądarki
i stale przywołuje funkcję "draw".
Funkcję musimy nazwać "draw",
bo taka jest nazwa, którą przywołuje ProcessingJS.
Jeśli zmienimy nazwę, np. na "drawCar",
widzimy: "niezdefiniowany błąd".
Napiszmy więc "var drawCar".
Jak widzicie, jeśli zmienimy nazwę na "drawCar", animacji nie będzie.
To dlatego, że funkcja nie jest już stale przywoływana.
Bo nie nazywa się "draw".
Musimy wprowadzić program,
który ma być stale przywoływany wewnątrz funkcji o nazwie "draw".
Zrobię to jeszcze raz
i przywołam "drawCar" tutaj.
Aha! Znowu działa.
No dobrze.
Musi być nazwa "draw".
Dlatego też nie powinniście nadawać
niestandardowym funkcjom nazwy "draw",
chyba że chcecie, by były przywoływane raz po raz.
I pamiętajcie,
nie możecie nadać nazwy "draw" kilku funkcjom.
Będzie się liczyć tylko ostatnia definicja.
Jeśli damy tu "rect",
samochodzik już się nie pojawi.
Rysowany jest tylko prostokąt, bo liczy się ostatnia definicja.
Skasujmy to więc.
"Draw" nie jest jedyną predefiniowaną funkcją
zachowującą się wyjątkowo.
Jest też grupa funkcji
obsługujących reakcję myszy i wciskanie klawiszy na klawiaturze.
Powiedzmy, że program ma narysować kolorową elipsę,
gdy tylko użytkownik poruszy myszką.
Załatwimy sprawę właśnie taką funkcją.
"MouseX", "mouseY",
a potem "ellipse".
"MouseX", "mouseY"...
No dobrze. Pięknie!
Ta funkcja jest przywoływana raz po raz,
nawet gdy użytkownik nie porusza myszką, jak w tej chwili.
Program działa, robi to, czego żądamy,
czyli maluje ładne elipsy na całym monitorze.
Ale okazuje się, że jest lepszy, wydajniejszy sposób.
Możemy zamienić funkcję "draw" na "mouseMoved"
i zobaczmy... Wciąż działa!
Nasze środowisko sprawdza, czy w programach zdefiniowano
funkcję "mouseMoved", a jeśli tak,
to przywołuje ją, gdy użytkownik porusza myszką.
Ale funkcja nie zostanie przywołana, gdy użytkownik myszką nie rusza.
Wcześniej przywoływaliśmy raz po raz program w "draw", choć bez potrzeby.
Teraz przywołujemy go
w "mouseMoved" tylko gdy "mouseX" lub "mouseY" naprawdę się zmieniło.
Program stał się wydajniejszy, a to dobrze.
Jeśli chcecie zmienić efekt działania programu, gdy użytkownik rusza myszką,
to lepiej jest mieć ten program w funkcji "mouseMoved".
Jest więcej predefiniowanych funkcji;
przykłady znajdziecie w dokumentacji:
"mousePressed", "mouseReleased", "keyPressed" itd.
Pamiętajcie: chcąc użyć specjalnej predefiniowanej funkcji,
jak "mouseMoved" lub "draw",
poprawnie zapiszcie jej nazwę.
Albo nadawajcie własnym funkcjom nowe, niepowtarzalne nazwy.