0:00:01.020,0:00:05.071
Animację tworzymy na wiele sposobów,[br]ale zasada jest taka sama.

0:00:05.162,0:00:09.682
Weźcie rysunki, z których każdy[br]nieco się różni od poprzedniego,

0:00:09.782,0:00:13.102
i przekartkujcie je szybko:[br]będzie wrażenie ruchu.

0:00:13.202,0:00:15.932
Dawniej wszystko rysowano ręcznie.

0:00:16.032,0:00:19.644
Tworzenie trzysekundowej animacji[br]trwało bardzo długo!

0:00:19.744,0:00:22.151
Na szczęście my żyjemy[br]w przyszłości.

0:00:22.735,0:00:25.843
Łatwo jest zaprogramować[br]prostą animację.

0:00:25.943,0:00:27.281
Pokażę wam, jak.

0:00:27.838,0:00:31.212
Po prawej stronie widać[br]autko na ślicznym żółtym tle.

0:00:31.312,0:00:34.017
Sama zaprojektowałam, dziękuję!

0:00:34.737,0:00:38.421
Tutaj określiliśmy[br]ten piękny kolor tła.

0:00:38.521,0:00:42.283
Samochód nie ma konturu:[br]korzystamy z funkcji „noStroke”.

0:00:42.383,0:00:44.791
Tu robimy nową zmienną, „x”,

0:00:44.891,0:00:47.508
pozycję auta.[br]Przypisujemy jej wartość 10.

0:00:47.608,0:00:49.295
Jeśli zmienimy tę wartość,

0:00:49.395,0:00:53.200
to autko będzie się przesuwać[br]w przód i w tył. Wróćmy do 10.

0:00:53.300,0:00:57.963
Tu określamy kolor i rysujemy[br]dwa prostokąty - karoserię.

0:00:58.063,0:01:01.675
Pierwszy prostokąt to dół,[br]drugi - góra.

0:01:02.438,0:01:04.916
Z kołami robimy podobnie.

0:01:05.016,0:01:06.989
Określamy kolor i rysujemy elipsy.

0:01:07.089,0:01:10.120
Jedną na „x+25”, drugą na „x+75”.

0:01:10.220,0:01:12.463
Dochodzimy do czegoś nowego.

0:01:12.563,0:01:14.907
To się nazywa „definicją funkcji”.

0:01:15.007,0:01:16.619
Opowiem o tym później,

0:01:16.719,0:01:19.550
na razie zapamiętajcie,[br]jak to wygląda.

0:01:19.650,0:01:23.841
Zauważcie słowo „draw” i klamry.

0:01:23.941,0:01:26.676
Tę na początku i tę na końcu.

0:01:26.776,0:01:30.136
To nazywamy „draw loop”[br](pętlą rysowania lub animacji).

0:01:30.210,0:01:32.392
Wszystko, co umieścicie w klamrach,

0:01:32.492,0:01:35.108
będzie się powtarzać. Bardzo szybko.

0:01:35.208,0:01:36.502
Stąd pętla.

0:01:36.602,0:01:38.522
Wszystko poza klamrami

0:01:38.622,0:01:41.726
zostaje uruchomione raz,[br]na początku programu.

0:01:41.826,0:01:45.346
Najpierw program dotyczący[br]rysunku przeniesiemy w klamry.

0:01:45.446,0:01:47.754
Żeby obrazek był rysowany[br]raz po raz.

0:01:47.854,0:01:50.573
Zróbmy to. Wezmę cały ten program

0:01:51.398,0:01:53.959
i wrzucę go w pętlę.

0:01:54.059,0:01:58.073
Żeby pamiętać, że ten blok[br]programu będzie w klamrach,

0:01:58.173,0:02:01.699
zrobię wcięcie, zaznaczając[br]wszystko i wciskając „tab”.

0:02:02.308,0:02:05.503
Teraz wiem, że ten program[br]jest w klamrach.

0:02:05.603,0:02:10.078
Jak widać, wszystko wygląda[br]tak samo. Nic się nie zmieniło.

0:02:10.178,0:02:12.167
Gdy pierwszy raz uruchomimy pętlę,

0:02:12.267,0:02:14.722
komputer powie: „Zrobić zmienną x,

0:02:14.822,0:02:17.721
przypisać 10, narysować[br]prostokąty i elipsy”.

0:02:17.821,0:02:20.202
A potem przejdzie[br]do samej góry i powie:

0:02:20.302,0:02:24.195
„Zrobić zmienną x, przypisać 10,[br]narysować prostokąty i elipsy”.

0:02:24.295,0:02:27.947
I potem: „Zrobić zmienną x...”.[br]To samo.

0:02:28.047,0:02:30.945
Nic się nie zmieniło,[br]nie zobaczycie animacji.

0:02:31.045,0:02:34.435
Komputer rysuje nowe prostokąty[br]i elipsy na poprzednich.

0:02:34.535,0:02:37.431
Pamiętacie? Żeby uzyskać[br]efekt animacji,

0:02:37.531,0:02:40.194
trzeba trochę zmieniać rysunek.

0:02:40.294,0:02:42.665
Aby samochód[br]przesunął się do przodu,

0:02:42.765,0:02:45.163
powinnam zmienić wartość[br]zmiennej „x”.

0:02:45.263,0:02:47.777
Zatem zróbmy... 11.

0:02:47.877,0:02:51.014
O, nie! Bo za każdym razem[br]będzie 11.

0:02:51.114,0:02:54.149
Jak sprawić, że wartość[br]„x” będzie się zmieniać,

0:02:54.249,0:02:57.321
gdy komputer będzie[br]odtwarzał to samo raz po raz?

0:02:57.421,0:02:59.467
Sztuczka magiczna.

0:02:59.567,0:03:02.572
Pamiętajcie: „var x”[br]tworzy nową zmienną.

0:03:02.672,0:03:04.509
Gdy jest w pętli rysowania,

0:03:04.609,0:03:08.035
za każdym razem stworzy[br]nową zmienną „x”.

0:03:08.135,0:03:11.103
Musimy zrobić tę zmienną[br]poza pętlą rysunku.

0:03:11.203,0:03:13.329
Dzięki temu wystarczy raz.

0:03:13.429,0:03:17.369
Zawsze, gdy komputer uruchomi[br]program i zobaczy zmienną „x”,

0:03:17.469,0:03:22.495
wykorzysta ją z ostatnią[br]przypisaną jej wartością.

0:03:22.595,0:03:27.258
Zrobię tak: wezmę tę zmienną[br]i umieszczę poza pętlą rysunku.

0:03:27.358,0:03:30.262
Teraz komputer wykorzysta[br]zmienną tylko raz.

0:03:31.156,0:03:35.368
A potem, gdy się na nią natknie,[br]zastosuje tę samą wartość.

0:03:35.468,0:03:38.105
Ostatnia przypisana wartość[br]wynosiła 11,

0:03:38.205,0:03:39.660
więc zawsze będzie 11.

0:03:39.760,0:03:41.455
I tu dzieje się magia.

0:03:41.487,0:03:44.444
Gdzieś w pętli zmienimy[br]wartość „x”,

0:03:44.544,0:03:46.603
żeby była nieco większa:

0:03:46.703,0:03:51.875
„x” przybiera dawną wartość[br]plus, powiedzmy, 1.

0:03:52.749,0:03:54.271
Tak! To działa!

0:03:54.761,0:03:57.149
Obraz jest rozmazany.

0:03:57.249,0:03:59.132
Zastanawiacie się, dlaczego?

0:03:59.232,0:04:02.555
Bo zapomnieliśmy narysować[br]tła w pętli rysunku.

0:04:02.655,0:04:07.083
Komputer rysuje auta. Pod każdym[br]kolejnym widać poprzednie.

0:04:07.183,0:04:11.797
Jeśli przeniosę ten wiersz[br]na górę pętli,

0:04:11.897,0:04:15.741
i wcisnę „restart”,[br]by znów zobaczyć samochodzik...

0:04:15.841,0:04:18.029
Tak! Doskonale!

0:04:18.161,0:04:19.974
A żeby jechał szybciej,

0:04:20.074,0:04:22.760
zmienimy wartość,[br]o którą rośnie „x”.

0:04:22.860,0:04:24.707
Zrobimy 10... Odjechał!

0:04:24.807,0:04:27.981
Mogę dać liczbę ujemną:[br]„x - 10” i...

0:04:28.764,0:04:29.862
Jest!

0:04:29.962,0:04:32.184
Znowu liczba dodatnia...

0:04:33.374,0:04:34.331
Jedzie.

0:04:34.431,0:04:36.563
Zapamiętajcie ważne sprawy:

0:04:36.663,0:04:39.471
to nazywamy pętlą rysowania.

0:04:39.571,0:04:43.316
Tu wprowadzamy program rysowania,[br]aby wzór rysował się raz po raz.

0:04:43.416,0:04:46.222
I ustawiamy zmienną[br]poza pętlą rysowania.

0:04:46.322,0:04:49.297
To bardzo ważne,[br]żeby zmienna była poza pętlą:

0:04:49.397,0:04:51.841
wtedy możemy używać jej[br]za każdym razem.

0:04:51.941,0:04:55.822
Wewnątrz pętli, tutaj,[br]zmodyfikujemy zmienną,

0:04:55.922,0:04:58.399
zwykle ustawiając starą wartość

0:04:58.499,0:05:02.041
powiększoną lub zmniejszoną[br]o jakąś liczbę.

0:05:02.141,0:05:05.612
No i używamy zmiennej[br]gdzieś w programie rysowania,

0:05:05.712,0:05:09.816
żeby rysunek za każdym razem[br]wyglądał inaczej. I już!