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.