1
00:00:01,078 --> 00:00:04,876
Robiliśmy animację piłki
odbijającej się od ścian.

2
00:00:04,976 --> 00:00:08,359
Użyliśmy funkcji rysowania
i instrukcji warunkowych.

3
00:00:08,459 --> 00:00:12,120
Określiliśmy zmienne
dla pozycji i prędkości piłki.

4
00:00:12,220 --> 00:00:17,205
W funkcji rysowania, wywoływanej
raz po raz przez program,

5
00:00:17,305 --> 00:00:20,758
malujemy tło i rysujemy elipsę.

6
00:00:20,858 --> 00:00:24,822
Punkt zależy od zmiennej
pozycji oraz prędkości

7
00:00:24,922 --> 00:00:27,469
i tego, jak na siebie wpływają.

8
00:00:27,569 --> 00:00:31,091
Bez instrukcji warunkowych
piłka leciała i leciała,

9
00:00:31,191 --> 00:00:32,762
aż wcisnęliśmy „restart”.

10
00:00:32,863 --> 00:00:35,689
Dodaliśmy dwie instrukcje warunkowe,

11
00:00:35,789 --> 00:00:40,621
żeby sprawdzić, czy piłka
jest blisko lewej lub prawej krawędzi,

12
00:00:40,721 --> 00:00:45,441
a wtedy zmienialiśmy kierunek,
żeby piłka się odbijała.

13
00:00:45,541 --> 00:00:49,690
Teraz piłka będzie się odbijała
w nieskończoność.

14
00:00:49,790 --> 00:00:53,591
Fajna rzecz. W ten sposób
można zrobić wiele animacji.

15
00:00:53,691 --> 00:00:57,213
Teraz włączę do programu
interakcję z użytkownikiem.

16
00:00:57,313 --> 00:01:00,004
Na razie - to jak program w TV.

17
00:01:00,104 --> 00:01:03,163
Jeśli dacie go koledze,
który nie umie programować,

18
00:01:03,263 --> 00:01:06,618
nie zrobi nic poza patrzeniem.

19
00:01:06,718 --> 00:01:10,031
To jest niezłe, ale lepiej
byłoby coś zrobić.

20
00:01:10,131 --> 00:01:13,235
Dajmy użytkownikowi
kontrolę nad piłką.

21
00:01:13,335 --> 00:01:17,322
Pamiętacie, jak uczyliśmy się
o zmiennych globalnych

22
00:01:17,422 --> 00:01:20,085
„mouseX” i „mouseY”?

23
00:01:20,953 --> 00:01:25,890
Zwracają liczby mówiące o bieżącej
pozycji myszki użytkownika.

24
00:01:25,990 --> 00:01:28,421
Dzięki nim program
będzie interaktywny.

25
00:01:28,521 --> 00:01:30,975
Pomyślmy - jak je wykorzystać?

26
00:01:31,075 --> 00:01:34,598
Gdzieś wewnątrz funkcji rysowania.

27
00:01:34,698 --> 00:01:39,056
Bo to jedyny stale wywoływany
kod w trakcie działania programu.

28
00:01:39,156 --> 00:01:42,126
Wszystko spoza „draw”
jest wywoływane raz,

29
00:01:42,725 --> 00:01:44,373
gdy program się uruchamia.

30
00:01:44,473 --> 00:01:47,694
Nie ma sensu używać tam
„mouseX” i „mouseY”.

31
00:01:47,794 --> 00:01:49,853
Żadnej szansy na interakcję.

32
00:01:50,944 --> 00:01:54,497
W „draw” teraz rysujemy piłkę

33
00:01:54,597 --> 00:01:56,726
200 pikseli w dół ekranu.

34
00:01:57,353 --> 00:02:00,836
A gdybyśmy zastąpili to „mouseY”?

35
00:02:00,936 --> 00:02:02,438
Bo to jest pozycja „y”.

36
00:02:02,538 --> 00:02:08,429
Program doda pozycję „y”
zależnie od pozycji „y” użytkownika.

37
00:02:08,529 --> 00:02:09,729
Patrzcie:

38
00:02:09,829 --> 00:02:11,776
Poruszając kursorem w pionie,

39
00:02:11,876 --> 00:02:15,233
zmieniam trasę
poruszania się piłki. I super!

40
00:02:15,969 --> 00:02:18,135
Ale chcę też użyć „mouseX”.

41
00:02:18,235 --> 00:02:21,873
Jak to zrobić?
Może zaprogramujmy drugą piłkę.

42
00:02:21,973 --> 00:02:26,471
Niech przemieszcza się
w górę i w dół.

43
00:02:27,168 --> 00:02:30,836
Wtedy użytkownik
będzie kontrolował pozycję „x”.

44
00:02:30,936 --> 00:02:33,615
Zrobimy odwrotnie
niż poprzednio. Elipsa...

45
00:02:33,715 --> 00:02:38,974
„mouseX” pozycja: 50,50.

46
00:02:39,799 --> 00:02:41,680
Spójrzcie!

47
00:02:41,780 --> 00:02:46,927
Mam dwie piłki, poruszające się
prostopadle do siebie.

48
00:02:48,049 --> 00:02:49,900
Ale to jeszcze nie to.

49
00:02:50,000 --> 00:02:53,270
Chcę więcej kontroli
dla użytkownika!

50
00:02:53,445 --> 00:02:56,773
Żeby sam mógł stworzyć
drugą piłkę.

51
00:02:56,873 --> 00:03:01,236
Po prostu wciskając
przycisk myszki.

52
00:03:01,789 --> 00:03:06,665
Tylko jak powiedzieć programowi,
że ktoś wciska przycisk?

53
00:03:07,756 --> 00:03:12,586
Na szczęście mamy do tego
wyjątkową zmienną logiczną.

54
00:03:12,686 --> 00:03:18,298
Nazywa się „mouseIsPressed”
i używamy jej w instrukcji warunkowej.

55
00:03:18,971 --> 00:03:21,827
Zobaczmy. To druga piłka.

56
00:03:21,927 --> 00:03:24,683
Możemy więc napisać: „if” (jeśli)

57
00:03:24,783 --> 00:03:26,608
„mouseIsPressed”,

58
00:03:28,406 --> 00:03:31,719
i przenosimy tu dwukropek elipsy.

59
00:03:31,819 --> 00:03:35,736
Tutaj mówimy programowi,

60
00:03:35,836 --> 00:03:40,914
że ma narysować tę elipsę
tylko jeśli to jest prawda.

61
00:03:41,014 --> 00:03:45,233
A „mouseIsPressed” jest prawdą,
gdy użytkownik wciska klawisz myszki.

62
00:03:45,333 --> 00:03:47,160
Spróbujmy.

63
00:03:49,811 --> 00:03:52,826
Piłka pojawi się,
gdy wcisnę przycisk myszki.

64
00:03:52,926 --> 00:03:57,958
Przylatuje ze wszechświata
równoległego. Jest! Jest!

65
00:03:58,058 --> 00:03:59,699
Świetnie!

66
00:03:59,799 --> 00:04:04,506
W zmiennej „mouseIsPressed”
ciekawe jest to,

67
00:04:04,606 --> 00:04:09,591
że zmienia się zależnie od działania
użytkownika, a nie programu.

68
00:04:09,691 --> 00:04:13,213
A że funkcja „draw”
jest wywoływana raz po raz,

69
00:04:13,313 --> 00:04:16,000
wynik będzie się zmieniał,

70
00:04:16,100 --> 00:04:18,507
z małą pomocą użytkownika.

71
00:04:18,607 --> 00:04:22,269
Dzięki połączonym siłom instrukcji
warunkowej i „mouseIsPressed”,

72
00:04:22,369 --> 00:04:27,633
macie wszystko, żeby robić
świetne programy do rysowania.