Animację tworzymy na wiele sposobów,
ale zasada jest taka sama.
Weźcie rysunki, z których każdy
nieco się różni od poprzedniego,
i przekartkujcie je szybko:
będzie wrażenie ruchu.
Dawniej wszystko rysowano ręcznie.
Tworzenie trzysekundowej animacji
trwało bardzo długo!
Na szczęście my żyjemy
w przyszłości.
Łatwo jest zaprogramować
prostą animację.
Pokażę wam, jak.
Po prawej stronie widać
autko na ślicznym żółtym tle.
Sama zaprojektowałam, dziękuję!
Tutaj określiliśmy
ten piękny kolor tła.
Samochód nie ma konturu:
korzystamy z funkcji „noStroke”.
Tu robimy nową zmienną, „x”,
pozycję auta.
Przypisujemy jej wartość 10.
Jeśli zmienimy tę wartość,
to autko będzie się przesuwać
w przód i w tył. Wróćmy do 10.
Tu określamy kolor i rysujemy
dwa prostokąty - karoserię.
Pierwszy prostokąt to dół,
drugi - góra.
Z kołami robimy podobnie.
Określamy kolor i rysujemy elipsy.
Jedną na „x+25”, drugą na „x+75”.
Dochodzimy do czegoś nowego.
To się nazywa „definicją funkcji”.
Opowiem o tym później,
na razie zapamiętajcie,
jak to wygląda.
Zauważcie słowo „draw” i klamry.
Tę na początku i tę na końcu.
To nazywamy „draw loop”
(pętlą rysowania lub animacji).
Wszystko, co umieścicie w klamrach,
będzie się powtarzać. Bardzo szybko.
Stąd pętla.
Wszystko poza klamrami
zostaje uruchomione raz,
na początku programu.
Najpierw program dotyczący
rysunku przeniesiemy w klamry.
Żeby obrazek był rysowany
raz po raz.
Zróbmy to. Wezmę cały ten program
i wrzucę go w pętlę.
Żeby pamiętać, że ten blok
programu będzie w klamrach,
zrobię wcięcie, zaznaczając
wszystko i wciskając „tab”.
Teraz wiem, że ten program
jest w klamrach.
Jak widać, wszystko wygląda
tak samo. Nic się nie zmieniło.
Gdy pierwszy raz uruchomimy pętlę,
komputer powie: „Zrobić zmienną x,
przypisać 10, narysować
prostokąty i elipsy”.
A potem przejdzie
do samej góry i powie:
„Zrobić zmienną x, przypisać 10,
narysować prostokąty i elipsy”.
I potem: „Zrobić zmienną x...”.
To samo.
Nic się nie zmieniło,
nie zobaczycie animacji.
Komputer rysuje nowe prostokąty
i elipsy na poprzednich.
Pamiętacie? Żeby uzyskać
efekt animacji,
trzeba trochę zmieniać rysunek.
Aby samochód
przesunął się do przodu,
powinnam zmienić wartość
zmiennej „x”.
Zatem zróbmy... 11.
O, nie! Bo za każdym razem
będzie 11.
Jak sprawić, że wartość
„x” będzie się zmieniać,
gdy komputer będzie
odtwarzał to samo raz po raz?
Sztuczka magiczna.
Pamiętajcie: „var x”
tworzy nową zmienną.
Gdy jest w pętli rysowania,
za każdym razem stworzy
nową zmienną „x”.
Musimy zrobić tę zmienną
poza pętlą rysunku.
Dzięki temu wystarczy raz.
Zawsze, gdy komputer uruchomi
program i zobaczy zmienną „x”,
wykorzysta ją z ostatnią
przypisaną jej wartością.
Zrobię tak: wezmę tę zmienną
i umieszczę poza pętlą rysunku.
Teraz komputer wykorzysta
zmienną tylko raz.
A potem, gdy się na nią natknie,
zastosuje tę samą wartość.
Ostatnia przypisana wartość
wynosiła 11,
więc zawsze będzie 11.
I tu dzieje się magia.
Gdzieś w pętli zmienimy
wartość „x”,
żeby była nieco większa:
„x” przybiera dawną wartość
plus, powiedzmy, 1.
Tak! To działa!
Obraz jest rozmazany.
Zastanawiacie się, dlaczego?
Bo zapomnieliśmy narysować
tła w pętli rysunku.
Komputer rysuje auta. Pod każdym
kolejnym widać poprzednie.
Jeśli przeniosę ten wiersz
na górę pętli,
i wcisnę „restart”,
by znów zobaczyć samochodzik...
Tak! Doskonale!
A żeby jechał szybciej,
zmienimy wartość,
o którą rośnie „x”.
Zrobimy 10... Odjechał!
Mogę dać liczbę ujemną:
„x - 10” i...
Jest!
Znowu liczba dodatnia...
Jedzie.
Zapamiętajcie ważne sprawy:
to nazywamy pętlą rysowania.
Tu wprowadzamy program rysowania,
aby wzór rysował się raz po raz.
I ustawiamy zmienną
poza pętlą rysowania.
To bardzo ważne,
żeby zmienna była poza pętlą:
wtedy możemy używać jej
za każdym razem.
Wewnątrz pętli, tutaj,
zmodyfikujemy zmienną,
zwykle ustawiając starą wartość
powiększoną lub zmniejszoną
o jakąś liczbę.
No i używamy zmiennej
gdzieś w programie rysowania,
żeby rysunek za każdym razem
wyglądał inaczej. I już!