WEBVTT

00:00:01.078 --> 00:00:04.876
Robiliśmy animację piłki
odbijającej się od ścian.

00:00:04.976 --> 00:00:08.359
Użyliśmy funkcji rysowania
i instrukcji warunkowych.

00:00:08.459 --> 00:00:12.120
Określiliśmy zmienne
dla pozycji i prędkości piłki.

00:00:12.220 --> 00:00:17.205
W funkcji rysowania, wywoływanej
raz po raz przez program,

00:00:17.305 --> 00:00:20.758
malujemy tło i rysujemy elipsę.

00:00:20.858 --> 00:00:24.822
Punkt zależy od zmiennej
pozycji oraz prędkości

00:00:24.922 --> 00:00:27.469
i tego, jak na siebie wpływają.

00:00:27.569 --> 00:00:31.091
Bez instrukcji warunkowych
piłka leciała i leciała,

00:00:31.191 --> 00:00:32.762
aż wcisnęliśmy „restart”.

00:00:32.863 --> 00:00:35.689
Dodaliśmy dwie instrukcje warunkowe,

00:00:35.789 --> 00:00:40.621
żeby sprawdzić, czy piłka
jest blisko lewej lub prawej krawędzi,

00:00:40.721 --> 00:00:45.441
a wtedy zmienialiśmy kierunek,
żeby piłka się odbijała.

00:00:45.541 --> 00:00:49.690
Teraz piłka będzie się odbijała
w nieskończoność.

00:00:49.790 --> 00:00:53.591
Fajna rzecz. W ten sposób
można zrobić wiele animacji.

00:00:53.691 --> 00:00:57.213
Teraz włączę do programu
interakcję z użytkownikiem.

00:00:57.313 --> 00:01:00.004
Na razie - to jak program w TV.

00:01:00.104 --> 00:01:03.163
Jeśli dacie go koledze,
który nie umie programować,

00:01:03.263 --> 00:01:06.618
nie zrobi nic poza patrzeniem.

00:01:06.718 --> 00:01:10.031
To jest niezłe, ale lepiej
byłoby coś zrobić.

00:01:10.131 --> 00:01:13.235
Dajmy użytkownikowi
kontrolę nad piłką.

00:01:13.335 --> 00:01:17.322
Pamiętacie, jak uczyliśmy się
o zmiennych globalnych

00:01:17.422 --> 00:01:20.085
„mouseX” i „mouseY”?

00:01:20.953 --> 00:01:25.890
Zwracają liczby mówiące o bieżącej
pozycji myszki użytkownika.

00:01:25.990 --> 00:01:28.421
Dzięki nim program
będzie interaktywny.

00:01:28.521 --> 00:01:30.975
Pomyślmy - jak je wykorzystać?

00:01:31.075 --> 00:01:34.598
Gdzieś wewnątrz funkcji rysowania.

00:01:34.698 --> 00:01:39.056
Bo to jedyny stale wywoływany
kod w trakcie działania programu.

00:01:39.156 --> 00:01:42.126
Wszystko spoza „draw”
jest wywoływane raz,

00:01:42.725 --> 00:01:44.373
gdy program się uruchamia.

00:01:44.473 --> 00:01:47.694
Nie ma sensu używać tam
„mouseX” i „mouseY”.

00:01:47.794 --> 00:01:49.853
Żadnej szansy na interakcję.

00:01:50.944 --> 00:01:54.497
W „draw” teraz rysujemy piłkę

00:01:54.597 --> 00:01:56.726
200 pikseli w dół ekranu.

00:01:57.353 --> 00:02:00.836
A gdybyśmy zastąpili to „mouseY”?

00:02:00.936 --> 00:02:02.438
Bo to jest pozycja „y”.

00:02:02.538 --> 00:02:08.429
Program doda pozycję „y”
zależnie od pozycji „y” użytkownika.

00:02:08.529 --> 00:02:09.729
Patrzcie:

00:02:09.829 --> 00:02:11.776
Poruszając kursorem w pionie,

00:02:11.876 --> 00:02:15.233
zmieniam trasę
poruszania się piłki. I super!

00:02:15.969 --> 00:02:18.135
Ale chcę też użyć „mouseX”.

00:02:18.235 --> 00:02:21.873
Jak to zrobić?
Może zaprogramujmy drugą piłkę.

00:02:21.973 --> 00:02:26.471
Niech przemieszcza się
w górę i w dół.

00:02:27.168 --> 00:02:30.836
Wtedy użytkownik
będzie kontrolował pozycję „x”.

00:02:30.936 --> 00:02:33.615
Zrobimy odwrotnie
niż poprzednio. Elipsa...

00:02:33.715 --> 00:02:38.974
„mouseX” pozycja: 50,50.

00:02:39.799 --> 00:02:41.680
Spójrzcie!

00:02:41.780 --> 00:02:46.927
Mam dwie piłki, poruszające się
prostopadle do siebie.

00:02:48.049 --> 00:02:49.900
Ale to jeszcze nie to.

00:02:50.000 --> 00:02:53.270
Chcę więcej kontroli
dla użytkownika!

00:02:53.445 --> 00:02:56.773
Żeby sam mógł stworzyć
drugą piłkę.

00:02:56.873 --> 00:03:01.236
Po prostu wciskając
przycisk myszki.

00:03:01.789 --> 00:03:06.665
Tylko jak powiedzieć programowi,
że ktoś wciska przycisk?

00:03:07.756 --> 00:03:12.586
Na szczęście mamy do tego
wyjątkową zmienną logiczną.

00:03:12.686 --> 00:03:18.298
Nazywa się „mouseIsPressed”
i używamy jej w instrukcji warunkowej.

00:03:18.971 --> 00:03:21.827
Zobaczmy. To druga piłka.

00:03:21.927 --> 00:03:24.683
Możemy więc napisać: „if” (jeśli)

00:03:24.783 --> 00:03:26.608
„mouseIsPressed”,

00:03:28.406 --> 00:03:31.719
i przenosimy tu dwukropek elipsy.

00:03:31.819 --> 00:03:35.736
Tutaj mówimy programowi,

00:03:35.836 --> 00:03:40.914
że ma narysować tę elipsę
tylko jeśli to jest prawda.

00:03:41.014 --> 00:03:45.233
A „mouseIsPressed” jest prawdą,
gdy użytkownik wciska klawisz myszki.

00:03:45.333 --> 00:03:47.160
Spróbujmy.

00:03:49.811 --> 00:03:52.826
Piłka pojawi się,
gdy wcisnę przycisk myszki.

00:03:52.926 --> 00:03:57.958
Przylatuje ze wszechświata
równoległego. Jest! Jest!

00:03:58.058 --> 00:03:59.699
Świetnie!

00:03:59.799 --> 00:04:04.506
W zmiennej „mouseIsPressed”
ciekawe jest to,

00:04:04.606 --> 00:04:09.591
że zmienia się zależnie od działania
użytkownika, a nie programu.

00:04:09.691 --> 00:04:13.213
A że funkcja „draw”
jest wywoływana raz po raz,

00:04:13.313 --> 00:04:16.000
wynik będzie się zmieniał,

00:04:16.100 --> 00:04:18.507
z małą pomocą użytkownika.

00:04:18.607 --> 00:04:22.269
Dzięki połączonym siłom instrukcji
warunkowej i „mouseIsPressed”,

00:04:22.369 --> 00:04:27.633
macie wszystko, żeby robić
świetne programy do rysowania.