Krystyna Zielińska krysia150@poczta.pl nauczyciel informatyki Szkoła Podstawowa i Gimnazjum w Szalowej Przykład animacji w Logo Komeniusz 1 Projekt animacji z zastosowaniem wielu żółwi W środowisku Logo Komeniusz może równocześnie istnieć do 4000 żółwi. Żółwie te mogą być w stanie aktywnym (poruszać się, kreślić rysunki), lub w stanie nieaktywnym. Każdy żółw ma swoją nazwę (identyfikator). Po uruchomieniu Logo Komeniusza jest tylko jeden, podstawowy żółw, mający postać małego trójkącika, ulokowany na środku ekranu graficznego i skierowany do góry. Jego pisak jest opuszczony, a jego nazwą jest słowo utworzone z jednego znaku 0. Nowego żółwia można utworzyć dwoma sposobami: bezpośrednio na ekranie graficznym, posługując się myszą, za pomocą procedury pierwotnej nowyżółw. Zarówno w jednym jak i w drugim przypadku utworzony żółw może służyć do sygnalizacji tzw. kursora graficznego lub może być elementem animacji. Po utworzeniu żółwia można mu nadać różnorodną postać (obraz) w poszczególnych fazach. Obraz postaci żółwia jest zmienną, obraz ten możemy utworzyć za pomocą dołączonego do Logo Komeniusza edytora obrazów, lub korzystając z innych zasobów. 1.1 Tworzenie postaci żółwia w edytorze obrazów 1. Wciskamy klawisz F4, otwiera nam się okienko pamięci. 2. Wybieramy w menu nowo otwartego okna Obiekty. 3. Wybieramy pozycję menu Dodaj zmienną Rys. 1 Okno Dodaj zmienną 4. W otwartym okienku, rys. 1 wpisujemy nazwę zmiennej np. dym (będzie to nazwa postaci żółwia, ale nie samego żółwia), i jako typ wybieramy obraz. Zatwierdzamy OK. 5. Otwarte zostanie okno edytora obrazów, rysunek 2.
1 Pasek skrótów Pole powiększenia Pole podglądu Pasek narzędzi Paleta kolorów Pole zmiany koloru Paleta dodatkowych kolorów Pole wyboru grubości pisaka Rys. 2 Okno edytora obrazów
2 W oknie edytora obrazów możemy ustalić rozmiar animowanego obrazu żółwia (w pikselach), standardowy rozmiar to 32 * 32. Poszczególne fazy obrazu mogą mieć różny rozmiar, stąd nazwa okienka Rozmiar fazy, rysunek 3. Rys. 3 Ustawianie rozmiaru obrazu żółwia W oknie edytora obrazów możemy również ustalić punkt zaczepienia (środek geometryczny) animowanego obrazu żółwia, standardowo jest to 1, 1, rysunek 4. Rys. 4 Ustawienie przesunięcia współrzędnych punktu zaczepienia żółwia W prawej części pola roboczego Edytora obrazów znajduje się zestaw narzędzi do edycji obrazu. Na rysunkach 5, 6, 7 przedstawiono różnorodne narzędzia do edycji obrazu i jego faz w grafice rastrowej.
3 Tryb rysowania (ołówek) Tryb malowania Wstawianie tekstu Rysowanie odcinka Rysowanie prostokąta, (z SHIFT) kwadratu Zamalowany prostokąt, (z SHIFT-em) kwadrat Rysowanie elipsy, (z SHIFT-em) okręgu Zamalowana elipsa, (z SHIFT-em) okrąg Rys. 5 Podstawowe narzędzia edytora obrazów Widok poprzedniej fazy Numer widocznej fazy Przejście do następnej fazy Ilość wszystkich faz Pomniejszanie lub powiększanie obrazka Redukcja wymiarów przez obcinanie zbędnego obszaru tła Przedstawienie animacji faz obrazu Zdjęcie. Wybór fragmentu ekranu jako obraz fazy Rys. 6 Inne narzędzia do edycji faz żółwia
4 Podgląd wszystkich faz Wstawia pustą fazę przed Wstawia pustą fazę po Usuwa aktualną fazę Poziome odbicie obrazka redagowanej fazy Pionowe odbicie obrazka redagowanej fazy Obrót w lewo obrazka aktualnej fazy o 90 o Obrót w prawo obrazka aktualnej fazy o 90 o Rys. 7 Narzędzia do edycji obrazków i faz Koniec edycji Obrót zaznaczonego wycinka obrazu o dowolny kąt Obrót wybranego wycinka obrazu o dowolny kąt Dodaj ramkę przycisku zwolnionego Dodaj ramkę przycisku wciśniętego Rys. 8 Dalsze elementy paska narzędziowego edytora obrazu
5 Pomoc Wytnij Kopiuj Wklej Cofnij Zapisz obraz Wybierz obraz Zaznacz wycinek Rys. 9 Pasek skrótów edytora obrazu Kolory wybieramy podobnie jak w innych programach: Kolor pierwszego planu wybieramy na palecie kliknięciem w lewy przycisk myszy, zaś kolor tła prawym przyciskiem myszy. Objaśnienia do palety kolorów, z uwzględnieniem tylko kolorów podstawowych przedstawiono na rysunku 10. Przycisk rozszerzonej palety Kolory podstawowe Kolor przeźroczysty Wybrany kolor pierwszego planu Przycisk odwracania kolorów Wybrany kolor tła Rys. 10 Paleta kolorów podstawowych edytora grafiki W menu głównym Edytora obrazu, wybierając Opcje edytora można między innymi włączyć dodatkową rozszerzoną paletę kolorów, rysunek 11.
6 Rys. 11 Opcje edytora obrazu Za pomocą Edytora obrazów w pracy wykonano obrazek dymu unoszącego się z komina, w 12 fazach. Przedstawiono to na rysunku 12. Na rysunku 13 przedstawiono tworzenie 9 fazy rysunku żółwia (dym). Rys. 12 Dwunastofazowy rysunek dymu
7 Rys. 13 Tworzenie dziewiątej fazy rysunku dym 1.2 Tworzenie projektu animacji Projekt animowanego rysunku będzie składał się z nieanimowanego rysunku domu, animowanego dymu unoszącego się z komina domu, dwóch przelatujących ptaków, słońca z rozbłyskującymi promieniami, poruszającego się powoli ze wschodu na zachód oraz z wiatraka z kręcącym się wirnikiem. Do narysowania domu użyto procedur kwadrat, okna, drzwi, dach, komin, parter, przesuń, dom, opracowanych w projekcie pierwszym. Projekt animacji przedstawiono na rysunku 14.
8 Rys. 14 Widok projektu z animacjami Animacja przesuwającego i rozpraszającego się dymu została wykonana przez ręczne rysowanie dwunastu faz, w edytorze Logo Komeniusza. Każda następna faza była tworzona na bazie poprzedniej skopiowanej fazy przez rozjaśnianie pewnej części obrazu. Jako kolor jasny użyto koloru przeźroczystego, aby chmura odpowiednio przysłaniała słońce. Animacja ptaka wykonana została na bazie cliparta, rysunek 15. Jest to faza pierwsza. Drugą fazę otrzymano przez skopiowanie pierwszej fazy i zmianę położenia skrzydeł, rysunek 16. Rys. 15 Widok ptaka wstawianego z cliparta
9 Rys. 16 Dwie fazy ptaka animowanego w edytorze grafiki Logo Komeniusz Animacja ruchu i rozbłysków słońca została wykonana za pomocą trzech faz ręcznie zrobionego rysunku, w edytorze grafiki Logo Komeniusz. Rysunek wiatraka został wykonany w grafice wektorowej w programie do rysowania, zawartym w edytorze tekstu WORD. Został wykonany jeden rysunek budki wiatraka oraz wirnika wiatraka. Wirnik był obracany w poszczególnych fazach o 15 o i łączony z budką, rysunek 17. Tak połączonych 6 rysunków w postaci wektorowej zostało przekopiowane przez schowek do Painta, w celu zamiany z postaci wektorowej na postać rastrową, a później ponownie kopiowany przez schowek do edytora grafiki Logo, gdyż ten ostatni przyjmuje rysunki w postaci rastrowej. Rys. 17 Etapy tworzenia rysunku wiatraka Po przygotowaniu czterech wielofazowych rysunków postaci żółwi przystąpiono do procedur tworzenia nowych żółwi.
10 Tworzenie nowego żółwia rozpoczyna się od polecenia nowyżółw i nadania nazwy temu żółwiowi. Następnie poleceniem proszę uaktywnia się tego żółwia. Kolejne polecenie to pod, aby żółw nie pozostawiał kreski. Polecenie z dwoma parametrami nowexy ustawia nam żółwia w określonym punkcie ekranu, zadanym parametrami. Z kolei polecenie z jednym parametrem skieruj nadaje początkowy kierunek ruchu. Polecenie przypos ma za zadanie skojarzenie żółwia z postacią, czyli wcześniej przygotowanym obrazem. Natomiast polecenie animacja prawda powoduje to, że żółw zamiast zmiany swojego kierunku będzie zmieniał fazy. Później ustala się numer fazy początkowej poleceniem ustalfazę. Po tych przygotowaniach można już żółwia pokazać poleceniem pż (pokaż żółwia). W podobny sposób tworzy się pozostałe nowe żółwie. Wykonuje to opracowana procedura żółwie, przedstawiona poniżej. Polecenie kolż pozwala ustalić kolejność żółwi, co ma znaczenie przy wzajemnym przysłanianiu się. Pierwszy, najstarszy żółw będzie najdalej i będzie przysłaniany przez młodsze żółwie. W naszym przypadku najstarszym żółwiem jest słońce. oto żółwie nowyżółw "ptak słuchaj [ptak] pod nowexy -390 220 skieruj 90 przypos :ptak animacja "prawda ustalfazę 1 pż nowyżółw "ptak2 słuchaj [ptak2] pod nowexy -390 200 skieruj 90 przypos :ptak animacja "prawda ustalfazę 2 pż nowyżółw "dym słuchaj [dym] pod nowexy :x :y przypos :dym animacja "prawda skieruj 77 ustalfazę 1 pż nowyżółw "słońce słuchaj [słońce] pod nowexy 350 250 skieruj 90 przypos :słoneczko animacja "prawda
11 pż nowyżółw "wiatrak słuchaj [wiatrak] pod nowexy -290 120 przypos :wiatrak animacja "prawda pż kolż [słońce dym ptak ptak2 wiatrak] już Po pokazaniu nieruchomych żółwi w procedurze żółwie należy uruchomić żółwie i tym samym animację. Dokonuje tego procedura ruch. Procedura ta jest wykonywana rekurencyjnie w zamkniętej pętli. Najbardziej złożony jest ruch dymu, który wykonywany jest cyklicznie. Do odmierzania czasu trwania cyklu ruchu dymu jest używana pomocnicza zmienna i. Na początku cyklu, gdy dym jest nad kominem ta zmienna pomocnicza jest ustawiana na wartość 88 (11 cykli ). W każdym kroku ruchu ta zmienna jest dekrementowana. Po osiągnięciu wartości zerowej przez zmienną i następuje ponowne rozpoczęcie cyklu ruchu dymu, czemu towarzyszy ustawienie żółwia dym nad kominem (współrzędne :x i :y), ustalenie pierwszej fazy obrazu oraz ponowne ustawienie i na 88. Zmienna i taktuje animacją. I tak w każdym takcie tej zmiennej słońce porusza się o jeden piksel do tyłu (w lewo), pierwszy ptak o 6 pikseli do przodu, ptak2 o 8 pikseli do przodu, a dym o 4 piksele ukośnie w prawo, natomiast wiatrak nie przesuwa się w ogóle. Ponadto co 8 taktów (reszta z dzielenia i przez 10) zmieniana jest faza słońca, co 8 taktów jest zmieniana faza dymu, co 2 takty faza ptaków, a co jeden takt faza wiatraka, czyli obrót wirnika o 15 o. A oto treść procedury ruch. oto ruch jeśli :i = 0 [przyp "i 88 proszę "dym [nowexy :x :y skieruj 77 ustalfazę 1]] przyp "i :i - 1 jeśli ( reszta :i 10 = 0 ) [proszę "słońce [ustalfazę faza + 1]] proszę "słońce [np -1] jeśli ( reszta :i 2 = 0 ) [proszę [ptak ptak2][ustalfazę faza + 1]] proszę "ptak [np 6] proszę "ptak2 [np 8] jeśli ( reszta :i 8 = 0 ) [proszę "dym [ustalfazę faza + 1]] proszę "dym [np 4] proszę "wiatrak [ustalfazę faza + 1] czekaj 100 ruch już Projekt uruchamiamy w trzech etapach: narysowanie domu, wywołując procedurę dom przykładowo o rozmiarze 160, rysującą dom, następnie uruchamiamy procedurę żółwie ustawiającą żółwie na stanowiskach startowych. Ostatnią procedurą jest procedura ruch dająca już pełną
12 animację. Można również uruchomić animację zbiorczą procedurą obrazek która zawiera już te trzy etapy uruchamiania animacji. Treść tej procedury zamieszczono poniżej. oto obrazek cs dom 160 żółwie ruch już
13 2 Podsumowanie Ważną częścią systemu Logo Komeniusza jest Edytor obrazów. Ma on wiele typowych właściwości edytorów graficznych, będących aplikacjami Windows, takich jak rysowanie, zamalowywanie obszarów, wpisywanie różnorodnych tekstów, wstawianie regularnych figur prostokątów, elips, obracanie figur. Ma też nowe specjalne możliwości, jak okienko animacji. Logo Komeniusz jest aplikacją Windows i może współpracować z innymi aplikacjami Windows.
14 3 Literatura A.Walat; Wprowadzenie do języka i środowiska Logo Komeniusz OEIiZK, Warszawa 1996 A. Walat: Za pomocą komputera. Podręcznik dla klasy I Informatyka dla gimnazjalistów. Oficyna Wydawnicza Pazdro 1999 A. Drogowski; Elementy informatyki Podręcznik dla ucznia Czarny Kruk Bydgoszcz 1998 A. Drogowski Zbiór ćwiczeń z Logo Czarny Kruk Bydgoszcz 2000 E. Gurbiel, G.Hardt-Olejniczak, E.Kołczyk, H.Krupnicka, Maciej M.Sysło Informatyka Podręcznik dla ucznia gimnazjum WSiP Warszawa 2000 G. Koba: Informatyka Podstawowe tematy nie tylko dla gimnazjum WS PWN Warszawa-Wrocław 1999 M. Mordaka; Informatyka 2000 Podręcznik dla gimnazjum II rok nauki Czarny Kruk Bydgoszcz 2001
15 4 Spis rysunków Rys. 1 Okno Dodaj zmienną... 0 Rys. 2 Okno edytora obrazów... 1 Rys. 3 Ustawianie rozmiaru obrazu żółwia... 2 Rys. 4 Ustawienie przesunięcia współrzędnych punktu zaczepienia żółwia... 2 Rys. 5 Podstawowe narzędzia edytora obrazów... 3 Rys. 6 Inne narzędzia do edycji faz żółwia... 3 Rys. 7 Narzędzia do edycji obrazków i faz... 4 Rys. 8 Dalsze elementy paska narzędziowego edytora obrazu... 4 Rys. 9 Pasek skrótów edytora obrazu... 5 Rys. 10 Paleta kolorów podstawowych edytora grafiki... 5 Rys. 11 Opcje edytora obrazu... 6 Rys. 12 Dwunastofazowy rysunek dymu... 6 Rys. 13 Tworzenie dziewiątej fazy rysunku dym... 7 Rys. 14 Widok projektu z animacjami... 8 Rys. 15 Widok ptaka wstawianego z cliparta... 8 Rys. 16 Dwie fazy ptaka animowanego w edytorze grafiki Logo Komeniusz... 9 Rys. 17 Etapy tworzenia rysunku wiatraka... 9
16 Spis treści 1 Projekt animacji z zastosowaniem wielu żółwi... 0 1.1 Tworzenie postaci żółwia w edytorze obrazów... 0 1.2 Tworzenie projektu animacji...7 2 Podsumowanie... 13 3 Literatura... 14 4 Spis rysunków... 15