WEBVTT

00:00:01.020 --> 00:00:05.071
Animację tworzymy na wiele sposobów,
ale zasada jest taka sama.

00:00:05.162 --> 00:00:09.682
Weźcie rysunki, z których każdy
nieco się różni od poprzedniego,

00:00:09.782 --> 00:00:13.102
i przekartkujcie je szybko:
będzie wrażenie ruchu.

00:00:13.202 --> 00:00:15.932
Dawniej wszystko rysowano ręcznie.

00:00:16.032 --> 00:00:19.644
Tworzenie trzysekundowej animacji
trwało bardzo długo!

00:00:19.744 --> 00:00:22.151
Na szczęście my żyjemy
w przyszłości.

00:00:22.735 --> 00:00:25.843
Łatwo jest zaprogramować
prostą animację.

00:00:25.943 --> 00:00:27.281
Pokażę wam, jak.

00:00:27.838 --> 00:00:31.212
Po prawej stronie widać
autko na ślicznym żółtym tle.

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

00:00:34.737 --> 00:00:38.421
Tutaj określiliśmy
ten piękny kolor tła.

00:00:38.521 --> 00:00:42.283
Samochód nie ma konturu:
korzystamy z funkcji „noStroke”.

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

00:00:44.891 --> 00:00:47.508
pozycję auta.
Przypisujemy jej wartość 10.

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

00:00:49.395 --> 00:00:53.200
to autko będzie się przesuwać
w przód i w tył. Wróćmy do 10.

00:00:53.300 --> 00:00:57.963
Tu określamy kolor i rysujemy
dwa prostokąty - karoserię.

00:00:58.063 --> 00:01:01.675
Pierwszy prostokąt to dół,
drugi - góra.

00:01:02.438 --> 00:01:04.916
Z kołami robimy podobnie.

00:01:05.016 --> 00:01:06.989
Określamy kolor i rysujemy elipsy.

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

00:01:10.220 --> 00:01:12.463
Dochodzimy do czegoś nowego.

00:01:12.563 --> 00:01:14.907
To się nazywa „definicją funkcji”.

00:01:15.007 --> 00:01:16.619
Opowiem o tym później,

00:01:16.719 --> 00:01:19.550
na razie zapamiętajcie,
jak to wygląda.

00:01:19.650 --> 00:01:23.841
Zauważcie słowo „draw” i klamry.

00:01:23.941 --> 00:01:26.676
Tę na początku i tę na końcu.

00:01:26.776 --> 00:01:30.136
To nazywamy „draw loop”
(pętlą rysowania lub animacji).

00:01:30.210 --> 00:01:32.392
Wszystko, co umieścicie w klamrach,

00:01:32.492 --> 00:01:35.108
będzie się powtarzać. Bardzo szybko.

00:01:35.208 --> 00:01:36.502
Stąd pętla.

00:01:36.602 --> 00:01:38.522
Wszystko poza klamrami

00:01:38.622 --> 00:01:41.726
zostaje uruchomione raz,
na początku programu.

00:01:41.826 --> 00:01:45.346
Najpierw program dotyczący
rysunku przeniesiemy w klamry.

00:01:45.446 --> 00:01:47.754
Żeby obrazek był rysowany
raz po raz.

00:01:47.854 --> 00:01:50.573
Zróbmy to. Wezmę cały ten program

00:01:51.398 --> 00:01:53.959
i wrzucę go w pętlę.

00:01:54.059 --> 00:01:58.073
Żeby pamiętać, że ten blok
programu będzie w klamrach,

00:01:58.173 --> 00:02:01.699
zrobię wcięcie, zaznaczając
wszystko i wciskając „tab”.

00:02:02.308 --> 00:02:05.503
Teraz wiem, że ten program
jest w klamrach.

00:02:05.603 --> 00:02:10.078
Jak widać, wszystko wygląda
tak samo. Nic się nie zmieniło.

00:02:10.178 --> 00:02:12.167
Gdy pierwszy raz uruchomimy pętlę,

00:02:12.267 --> 00:02:14.722
komputer powie: „Zrobić zmienną x,

00:02:14.822 --> 00:02:17.721
przypisać 10, narysować
prostokąty i elipsy”.

00:02:17.821 --> 00:02:20.202
A potem przejdzie
do samej góry i powie:

00:02:20.302 --> 00:02:24.195
„Zrobić zmienną x, przypisać 10,
narysować prostokąty i elipsy”.

00:02:24.295 --> 00:02:27.947
I potem: „Zrobić zmienną x...”.
To samo.

00:02:28.047 --> 00:02:30.945
Nic się nie zmieniło,
nie zobaczycie animacji.

00:02:31.045 --> 00:02:34.435
Komputer rysuje nowe prostokąty
i elipsy na poprzednich.

00:02:34.535 --> 00:02:37.431
Pamiętacie? Żeby uzyskać
efekt animacji,

00:02:37.531 --> 00:02:40.194
trzeba trochę zmieniać rysunek.

00:02:40.294 --> 00:02:42.665
Aby samochód
przesunął się do przodu,

00:02:42.765 --> 00:02:45.163
powinnam zmienić wartość
zmiennej „x”.

00:02:45.263 --> 00:02:47.777
Zatem zróbmy... 11.

00:02:47.877 --> 00:02:51.014
O, nie! Bo za każdym razem
będzie 11.

00:02:51.114 --> 00:02:54.149
Jak sprawić, że wartość
„x” będzie się zmieniać,

00:02:54.249 --> 00:02:57.321
gdy komputer będzie
odtwarzał to samo raz po raz?

00:02:57.421 --> 00:02:59.467
Sztuczka magiczna.

00:02:59.567 --> 00:03:02.572
Pamiętajcie: „var x”
tworzy nową zmienną.

00:03:02.672 --> 00:03:04.509
Gdy jest w pętli rysowania,

00:03:04.609 --> 00:03:08.035
za każdym razem stworzy
nową zmienną „x”.

00:03:08.135 --> 00:03:11.103
Musimy zrobić tę zmienną
poza pętlą rysunku.

00:03:11.203 --> 00:03:13.329
Dzięki temu wystarczy raz.

00:03:13.429 --> 00:03:17.369
Zawsze, gdy komputer uruchomi
program i zobaczy zmienną „x”,

00:03:17.469 --> 00:03:22.495
wykorzysta ją z ostatnią
przypisaną jej wartością.

00:03:22.595 --> 00:03:27.258
Zrobię tak: wezmę tę zmienną
i umieszczę poza pętlą rysunku.

00:03:27.358 --> 00:03:30.262
Teraz komputer wykorzysta
zmienną tylko raz.

00:03:31.156 --> 00:03:35.368
A potem, gdy się na nią natknie,
zastosuje tę samą wartość.

00:03:35.468 --> 00:03:38.105
Ostatnia przypisana wartość
wynosiła 11,

00:03:38.205 --> 00:03:39.660
więc zawsze będzie 11.

00:03:39.760 --> 00:03:41.455
I tu dzieje się magia.

00:03:41.487 --> 00:03:44.444
Gdzieś w pętli zmienimy
wartość „x”,

00:03:44.544 --> 00:03:46.603
żeby była nieco większa:

00:03:46.703 --> 00:03:51.875
„x” przybiera dawną wartość
plus, powiedzmy, 1.

00:03:52.749 --> 00:03:54.271
Tak! To działa!

00:03:54.761 --> 00:03:57.149
Obraz jest rozmazany.

00:03:57.249 --> 00:03:59.132
Zastanawiacie się, dlaczego?

00:03:59.232 --> 00:04:02.555
Bo zapomnieliśmy narysować
tła w pętli rysunku.

00:04:02.655 --> 00:04:07.083
Komputer rysuje auta. Pod każdym
kolejnym widać poprzednie.

00:04:07.183 --> 00:04:11.797
Jeśli przeniosę ten wiersz
na górę pętli,

00:04:11.897 --> 00:04:15.741
i wcisnę „restart”,
by znów zobaczyć samochodzik...

00:04:15.841 --> 00:04:18.029
Tak! Doskonale!

00:04:18.161 --> 00:04:19.974
A żeby jechał szybciej,

00:04:20.074 --> 00:04:22.760
zmienimy wartość,
o którą rośnie „x”.

00:04:22.860 --> 00:04:24.707
Zrobimy 10... Odjechał!

00:04:24.807 --> 00:04:27.981
Mogę dać liczbę ujemną:
„x - 10” i...

00:04:28.764 --> 00:04:29.862
Jest!

00:04:29.962 --> 00:04:32.184
Znowu liczba dodatnia...

00:04:33.374 --> 00:04:34.331
Jedzie.

00:04:34.431 --> 00:04:36.563
Zapamiętajcie ważne sprawy:

00:04:36.663 --> 00:04:39.471
to nazywamy pętlą rysowania.

00:04:39.571 --> 00:04:43.316
Tu wprowadzamy program rysowania,
aby wzór rysował się raz po raz.

00:04:43.416 --> 00:04:46.222
I ustawiamy zmienną
poza pętlą rysowania.

00:04:46.322 --> 00:04:49.297
To bardzo ważne,
żeby zmienna była poza pętlą:

00:04:49.397 --> 00:04:51.841
wtedy możemy używać jej
za każdym razem.

00:04:51.941 --> 00:04:55.822
Wewnątrz pętli, tutaj,
zmodyfikujemy zmienną,

00:04:55.922 --> 00:04:58.399
zwykle ustawiając starą wartość

00:04:58.499 --> 00:05:02.041
powiększoną lub zmniejszoną
o jakąś liczbę.

00:05:02.141 --> 00:05:05.612
No i używamy zmiennej
gdzieś w programie rysowania,

00:05:05.712 --> 00:05:09.816
żeby rysunek za każdym razem
wyglądał inaczej. I już!