1
00:00:01,020 --> 00:00:05,071
Animację tworzymy na wiele sposobów,
ale zasada jest taka sama.

2
00:00:05,162 --> 00:00:09,682
Weźcie rysunki, z których każdy
nieco się różni od poprzedniego,

3
00:00:09,782 --> 00:00:13,102
i przekartkujcie je szybko:
będzie wrażenie ruchu.

4
00:00:13,202 --> 00:00:15,932
Dawniej wszystko rysowano ręcznie.

5
00:00:16,032 --> 00:00:19,644
Tworzenie trzysekundowej animacji
trwało bardzo długo!

6
00:00:19,744 --> 00:00:22,151
Na szczęście my żyjemy
w przyszłości.

7
00:00:22,735 --> 00:00:25,843
Łatwo jest zaprogramować
prostą animację.

8
00:00:25,943 --> 00:00:27,281
Pokażę wam, jak.

9
00:00:27,838 --> 00:00:31,212
Po prawej stronie widać
autko na ślicznym żółtym tle.

10
00:00:31,312 --> 00:00:34,017
Sama zaprojektowałam, dziękuję!

11
00:00:34,737 --> 00:00:38,421
Tutaj określiliśmy
ten piękny kolor tła.

12
00:00:38,521 --> 00:00:42,283
Samochód nie ma konturu:
korzystamy z funkcji „noStroke”.

13
00:00:42,383 --> 00:00:44,791
Tu robimy nową zmienną, „x”,

14
00:00:44,891 --> 00:00:47,508
pozycję auta.
Przypisujemy jej wartość 10.

15
00:00:47,608 --> 00:00:49,295
Jeśli zmienimy tę wartość,

16
00:00:49,395 --> 00:00:53,200
to autko będzie się przesuwać
w przód i w tył. Wróćmy do 10.

17
00:00:53,300 --> 00:00:57,963
Tu określamy kolor i rysujemy
dwa prostokąty - karoserię.

18
00:00:58,063 --> 00:01:01,675
Pierwszy prostokąt to dół,
drugi - góra.

19
00:01:02,438 --> 00:01:04,916
Z kołami robimy podobnie.

20
00:01:05,016 --> 00:01:06,989
Określamy kolor i rysujemy elipsy.

21
00:01:07,089 --> 00:01:10,120
Jedną na „x+25”, drugą na „x+75”.

22
00:01:10,220 --> 00:01:12,463
Dochodzimy do czegoś nowego.

23
00:01:12,563 --> 00:01:14,907
To się nazywa „definicją funkcji”.

24
00:01:15,007 --> 00:01:16,619
Opowiem o tym później,

25
00:01:16,719 --> 00:01:19,550
na razie zapamiętajcie,
jak to wygląda.

26
00:01:19,650 --> 00:01:23,841
Zauważcie słowo „draw” i klamry.

27
00:01:23,941 --> 00:01:26,676
Tę na początku i tę na końcu.

28
00:01:26,776 --> 00:01:30,136
To nazywamy „draw loop”
(pętlą rysowania lub animacji).

29
00:01:30,210 --> 00:01:32,392
Wszystko, co umieścicie w klamrach,

30
00:01:32,492 --> 00:01:35,108
będzie się powtarzać. Bardzo szybko.

31
00:01:35,208 --> 00:01:36,502
Stąd pętla.

32
00:01:36,602 --> 00:01:38,522
Wszystko poza klamrami

33
00:01:38,622 --> 00:01:41,726
zostaje uruchomione raz,
na początku programu.

34
00:01:41,826 --> 00:01:45,346
Najpierw program dotyczący
rysunku przeniesiemy w klamry.

35
00:01:45,446 --> 00:01:47,754
Żeby obrazek był rysowany
raz po raz.

36
00:01:47,854 --> 00:01:50,573
Zróbmy to. Wezmę cały ten program

37
00:01:51,398 --> 00:01:53,959
i wrzucę go w pętlę.

38
00:01:54,059 --> 00:01:58,073
Żeby pamiętać, że ten blok
programu będzie w klamrach,

39
00:01:58,173 --> 00:02:01,699
zrobię wcięcie, zaznaczając
wszystko i wciskając „tab”.

40
00:02:02,308 --> 00:02:05,503
Teraz wiem, że ten program
jest w klamrach.

41
00:02:05,603 --> 00:02:10,078
Jak widać, wszystko wygląda
tak samo. Nic się nie zmieniło.

42
00:02:10,178 --> 00:02:12,167
Gdy pierwszy raz uruchomimy pętlę,

43
00:02:12,267 --> 00:02:14,722
komputer powie: „Zrobić zmienną x,

44
00:02:14,822 --> 00:02:17,721
przypisać 10, narysować
prostokąty i elipsy”.

45
00:02:17,821 --> 00:02:20,202
A potem przejdzie
do samej góry i powie:

46
00:02:20,302 --> 00:02:24,195
„Zrobić zmienną x, przypisać 10,
narysować prostokąty i elipsy”.

47
00:02:24,295 --> 00:02:27,947
I potem: „Zrobić zmienną x...”.
To samo.

48
00:02:28,047 --> 00:02:30,945
Nic się nie zmieniło,
nie zobaczycie animacji.

49
00:02:31,045 --> 00:02:34,435
Komputer rysuje nowe prostokąty
i elipsy na poprzednich.

50
00:02:34,535 --> 00:02:37,431
Pamiętacie? Żeby uzyskać
efekt animacji,

51
00:02:37,531 --> 00:02:40,194
trzeba trochę zmieniać rysunek.

52
00:02:40,294 --> 00:02:42,665
Aby samochód
przesunął się do przodu,

53
00:02:42,765 --> 00:02:45,163
powinnam zmienić wartość
zmiennej „x”.

54
00:02:45,263 --> 00:02:47,777
Zatem zróbmy... 11.

55
00:02:47,877 --> 00:02:51,014
O, nie! Bo za każdym razem
będzie 11.

56
00:02:51,114 --> 00:02:54,149
Jak sprawić, że wartość
„x” będzie się zmieniać,

57
00:02:54,249 --> 00:02:57,321
gdy komputer będzie
odtwarzał to samo raz po raz?

58
00:02:57,421 --> 00:02:59,467
Sztuczka magiczna.

59
00:02:59,567 --> 00:03:02,572
Pamiętajcie: „var x”
tworzy nową zmienną.

60
00:03:02,672 --> 00:03:04,509
Gdy jest w pętli rysowania,

61
00:03:04,609 --> 00:03:08,035
za każdym razem stworzy
nową zmienną „x”.

62
00:03:08,135 --> 00:03:11,103
Musimy zrobić tę zmienną
poza pętlą rysunku.

63
00:03:11,203 --> 00:03:13,329
Dzięki temu wystarczy raz.

64
00:03:13,429 --> 00:03:17,369
Zawsze, gdy komputer uruchomi
program i zobaczy zmienną „x”,

65
00:03:17,469 --> 00:03:22,495
wykorzysta ją z ostatnią
przypisaną jej wartością.

66
00:03:22,595 --> 00:03:27,258
Zrobię tak: wezmę tę zmienną
i umieszczę poza pętlą rysunku.

67
00:03:27,358 --> 00:03:30,262
Teraz komputer wykorzysta
zmienną tylko raz.

68
00:03:31,156 --> 00:03:35,368
A potem, gdy się na nią natknie,
zastosuje tę samą wartość.

69
00:03:35,468 --> 00:03:38,105
Ostatnia przypisana wartość
wynosiła 11,

70
00:03:38,205 --> 00:03:39,660
więc zawsze będzie 11.

71
00:03:39,760 --> 00:03:41,455
I tu dzieje się magia.

72
00:03:41,487 --> 00:03:44,444
Gdzieś w pętli zmienimy
wartość „x”,

73
00:03:44,544 --> 00:03:46,603
żeby była nieco większa:

74
00:03:46,703 --> 00:03:51,875
„x” przybiera dawną wartość
plus, powiedzmy, 1.

75
00:03:52,749 --> 00:03:54,271
Tak! To działa!

76
00:03:54,761 --> 00:03:57,149
Obraz jest rozmazany.

77
00:03:57,249 --> 00:03:59,132
Zastanawiacie się, dlaczego?

78
00:03:59,232 --> 00:04:02,555
Bo zapomnieliśmy narysować
tła w pętli rysunku.

79
00:04:02,655 --> 00:04:07,083
Komputer rysuje auta. Pod każdym
kolejnym widać poprzednie.

80
00:04:07,183 --> 00:04:11,797
Jeśli przeniosę ten wiersz
na górę pętli,

81
00:04:11,897 --> 00:04:15,741
i wcisnę „restart”,
by znów zobaczyć samochodzik...

82
00:04:15,841 --> 00:04:18,029
Tak! Doskonale!

83
00:04:18,161 --> 00:04:19,974
A żeby jechał szybciej,

84
00:04:20,074 --> 00:04:22,760
zmienimy wartość,
o którą rośnie „x”.

85
00:04:22,860 --> 00:04:24,707
Zrobimy 10... Odjechał!

86
00:04:24,807 --> 00:04:27,981
Mogę dać liczbę ujemną:
„x - 10” i...

87
00:04:28,764 --> 00:04:29,862
Jest!

88
00:04:29,962 --> 00:04:32,184
Znowu liczba dodatnia...

89
00:04:33,374 --> 00:04:34,331
Jedzie.

90
00:04:34,431 --> 00:04:36,563
Zapamiętajcie ważne sprawy:

91
00:04:36,663 --> 00:04:39,471
to nazywamy pętlą rysowania.

92
00:04:39,571 --> 00:04:43,316
Tu wprowadzamy program rysowania,
aby wzór rysował się raz po raz.

93
00:04:43,416 --> 00:04:46,222
I ustawiamy zmienną
poza pętlą rysowania.

94
00:04:46,322 --> 00:04:49,297
To bardzo ważne,
żeby zmienna była poza pętlą:

95
00:04:49,397 --> 00:04:51,841
wtedy możemy używać jej
za każdym razem.

96
00:04:51,941 --> 00:04:55,822
Wewnątrz pętli, tutaj,
zmodyfikujemy zmienną,

97
00:04:55,922 --> 00:04:58,399
zwykle ustawiając starą wartość

98
00:04:58,499 --> 00:05:02,041
powiększoną lub zmniejszoną
o jakąś liczbę.

99
00:05:02,141 --> 00:05:05,612
No i używamy zmiennej
gdzieś w programie rysowania,

100
00:05:05,712 --> 00:05:09,816
żeby rysunek za każdym razem
wyglądał inaczej. I już!