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ż!