Grafika Komputerowa Materiały Laboratoryjne Laboratorium 5c Processing c.d. Wstęp Laboratorium 5c przedstawia dalsze możliwości środowiska Processing w procesie tworzenia grafiki dwuwymiarowej z wykorzystaniem podstawowych elementów języka Java wraz z omówieniem podstawowych zasad interakcji z użytkownikiem. Ćwiczenie 1 Równanie okręgu i funkcje matematyczne Zadanie: Narysuj punkty leżące na okręgu Użyj funkcji Koocowe zadanie polega na narysowaniu słooca na dwuwymiarowej matematycznych w przestrzeni. Do budowy słooca wystarczy wykorzystad dwa elementy celu narysowania graficzne: koło (rdzeo) oraz linię (promienie). Mimo, iż wachlarz punktów na okręgu wykorzystywanych elementów nie jest szeroki, nieco więcej czasu i uwagi wymaga utworzenie samej animacji. Efekt koocowy działao przedstawiony został poniżej: Spoglądając na efekt koocowy można zauważyd, że promienie słooca ułożone są w charakterystyczny sposób zarówno ich punkt początkowy, jak i koocowy osadzony jest na okręgu. Aby lepiej zobrazowad powyższą sytuację, przedstawiono początkowy model animacji:
Rozwiązaniem powyższego problemu jest skorzystanie z funkcji matematycznych do wyznaczenia współrzędnych poszczególnych punktów na okręgach (małym i dużym). Dla przypomnienia, przedstawiony został wzór pozwalający na wyznaczenie punktów leżących na okręgu: Wartości x 0 oraz y 0 określają środek rysowanego okręgu, r jest jego promieniem, a kąt alfa oznacza kąt obrotu punktu względem osi współrzędnej x. Po zapoznaniu się z powyższymi informacjami można przejśd do tworzenia animacji. W związku z faktem, iż docelowo będzie to animacja, wykorzystany zostanie tryb aktywny. Kod funkcji setup() można ograniczyd wstępnie do dwóch instrukcji (utworzenie okna oraz ustalenie częstotliwości odświeżania): void setup() size(800,800); framerate(30); Częśd drugą stanowi funkcja draw(), która odpowiedzialna będzie za wyświetlenie animacji, wykorzystując przedstawione wyżej równanie okręgu. Równanie to wykorzystuje dwie funkcje trygonometryczne, które są dostępne bezpośrednio z poziomu środowiska Processing pod nazwami: sin() oraz cos() funkcje te domyślnie przyjmują wartośd kąta w radianach. Aby zatem wyświetlid pojedynczy punkt na okręgu, należy obliczyd dwie współrzędne według wzoru: float x1 = 400 + 200*cos(radians(30)); float y1 = 400 + 200*sin(radians(30)); Powyższe przypisanie wyznaczy punkt na okręgu o promieniu 200 pikseli, o środku na współrzędnych (400,400) oraz obrocie wynoszącym 30 stopni (funkcja radians() zamienia wartośd ze stopni na radiany). Jak zatem narysowad cały okrąg składający się z szeregu punktów? Wystarczy użyd prostej pętli, która pokryje obrót poszczególnych punktów w przedziale 0 360 stopni (lub 0 2*PI). Przykładowy kod i efekt działania przedstawiony został poniżej.
void draw() ellipse(400,400,100,100); for (float i =0; i < 2*PI; i += 0.1f) float x1 = 400 + 200*cos(i); float y1 = 400 + 200*sin(i); ellipse(x1,y1,10,10); Dla lepszej wizualizacji efektu do narysowania punktu wykorzystano funkcję ellipse() o promieniu 10 pikseli. Cel dwiczenia został osiągnięty. Zadanie samodzielne Zmieo kolor wypełnienia wyświetlanych elementów na kolor żółty. Spróbuj poeksperymentowad z parametrami równao oraz pętli: co się stanie, gdy zwiększy/zmniejszy się wartośd kroku w pętli for? czy zwiększenie wartości 2*PI na 6*PI daje jakiś efekt? co się stanie, gdy do wyznaczenia wartości x1 użyta zostanie również funkcja sinus? spróbuj zastąpid funkcję cos(i) iloczynem: cos(i)*cos(i)*cos(i) przy zmniejszeniu kroku do 0.01f (możesz zmienid jednocześnie sin(i) na sin(x1)) Czy udało Ci się uzyskad jeden z poniższych efektów?
Spróbuj dodad dodatkową pętlę tak, żeby możliwa była dynamiczna zmiana promienia okręgu (indeks pętli zastąpi wtedy obecną wartośd 200 pikseli) dobierz wartośd tak, aby nie przekroczyd wartości 1000 (ze względu na obecnośd dwóch pętli, liczba operacji rysowania może gwałtownie wzrosnąd). Przykładowe efekty dodania pętli oraz zmian parametrów zaprezentowano poniżej: Ćwiczenie 2 Dwa okręgi i promienie Zadanie: Narysuj słooce z otaczającymi je promieniami Wykorzystaj drugi okrąg w celu wyznaczenia pary punktów do narysowania promieni Mając wiedzę na temat rysowania punktów osadzonych na okręgu, można przystąpid do tworzenia promieni aby było to możliwe, należy utworzyd drugi okrąg, by ostatecznie połączyd odpowiadające sobie punkty. W celu zadbania o warstwę wizualną, dobrze jest odpowiednio dobrad kolory oraz grubośd linii przykładowa konfiguracja zamieszczona została poniżej: background(30,50,100); fill(255,255,0); stroke(0,0,0); strokeweight(3); Dalszą częśd funkcji draw() stanowi kod wyświetlający wygenerowane dynamicznie promienie: for (float i =0; i < 2*PI; i += 0.1f) float x1 = 400 + 80*cos(i); float y1 = 400 + 80*sin(i); float x2 = 400 + 300*cos(i); float y2 = 400 + 300*sin(i); float wart = random(55); stroke(200+wart,200+wart,0,100+random(155)); line(x1,y1,x2,y2);
Jak można zauważyd, konstrukcja par współrzędnych przebiega w ten sam sposób, z tą różnicą, że pierwszy okrąg ma mniejszy promieo (znajduje się bliżej środka okręgu o współrzędnych 400,400). Przed narysowaniem linii łączącej zostaje wylosowany odcieo koloru żółtego. Efekt działania programu widoczny jest poniżej: Animacja w dalszym ciągu jest dośd prymitywna, stąd niezbędne jest podjęcie kolejnych kroków w celu jej usprawnienia. Kod w obecnej postaci daje stosunkowo mało kontroli nad wyglądem tworzonej animacji (czym jest krok 0.1f i jaki ma wpływ na układ promieni?) warto w tym miejscu lekko uporządkowad kod i wyodrębnid fragmenty sterujące przebiegiem rysowania. Przykładowa modyfikacja pętli może mied następującą postad: int liczba_promieni = 60; float krok = 2*PI / liczba_promieni; for (float i =kat; i < 2*PI+kat; i += krok) //... Przy takiej postaci znacznie łatwiej zmienid liczbę rysowanych promieni, od których zależny jest teraz krok pętli. Drugą zmianą jest dodanie losowej zmiany początku i kooca rysowanych linii (funkcję tą pełni wartośd opisująca długośd promienia): float przesuniecie1 = random(30); float x1 = 400 + (80+przesuniecie1)*cos(i); float y1 = 400 + (80+przesuniecie1)*sin(i); float przesuniecie2 = random(60); float x2 = 400 + (300+przesuniecie2)*cos(i); float y2 = 400 + (300+przesuniecie2)*sin(i); Efektem powyższego kodu będzie wygenerowanie drżących promieni. Uważny czytelnik mógł dostrzec pojawienie się również dodatkowej
zmiennej kat, która pojawiła się w nagłówku pętli wartośd ta pozwala na zapewnienie obrotu promieni wokół środka. Aby można było skorzystad z tej właściwości należy zadeklarowad zmienną: float kat = 0; na samym początku programu oraz dodad instrukcję zwiększenia wartości kąta po wyjściu z pętli (na koocu funkcji draw()) w postaci: kat += radians(1); co spowoduje zwiększenie obrotu promieni średnio o 30 stopni na sekundę. Efektem powyższych działao jest poniższy rezultat: Ćwiczenie 3 Efekt pulsacji Zadanie: Narysuj słooce z pulsacją promieni Usprawnij efekt Dodana w poprzednim dwiczeniu losowa pulsacja nie wygląda zbyt pulsowania promieni efektownie przyczyną takiego stanu rzeczy jest losowe generowanie początku i kooca promieni. Znacznie lepiej wyglądałaby płynna zmiana ich długości. Po chwili zastanowienia okazuje się, żeby było to możliwe, trzeba przechowywad stan każdego z promieni osobno pomocne okaże się więc zastosowanie tablic. Efekt działania programu został przedstawiony poniżej:
Jak można zauważyd, zwiększona została liczba promieni (z 60 na 200), przez co uzyskano większe zagęszczenie. float krok = (float)(2*pi / liczba_promieni); float akt_kat = 0; for (int i =0; i < liczba_promieni; i++) float przesuniecie1 = 30; float x1 = (float)(400 + (20+przesuniecie1)*cos(kat+akt_kat)); float y1 = (float)(400 + (20+przesuniecie1)*sin(kat+akt_kat)); float przesuniecie2 = przesuniecia[i]; float x2 = (float)(400 + (100+przesuniecie2)*cos(kat+akt_kat)); float y2 = (float)(400 + (100+przesuniecie2)*sin(kat+akt_kat)); stroke(150+przesuniecia[i]/2,150+przesuniecia[i]/2,0); line(x1,y1,x2,y2); akt_kat += krok; Małym zmianom uległo również działanie pętli for (kontrola nad aktualnym kątem przekazana została do oddzielnej zmiennej), jednak zmiana ta pełni głównie funkcję kosmetyczną. Istotną zmianą w kodzie jest pojawienie się przypisania do zmiennej przesuniecie2 wcześniej wartośd ta była losowana, obecnie pochodzi ona z tablicy przesuniecia (wartośd tablicy służy również do ustalenia koloru promieni im promieo jest dłuższy, tym kolor jest ciemniejszy). Tuż za pętlą znajduje się największa zmiana aktualizacja wartości przechowywanych w tablicy przesunięd: for (int i =0; i < przesuniecia.length; i++) przesuniecia[i] += 5; if (przesuniecia[i] >= 180) przesuniecia[i] = random(100);
Działanie pętli polega na zwiększenie wartości tablicy przesunięd o wybraną wartośd, co powoduje wydłużenie się promienia słooca (w głównej pętli zmianie ulega jedynie wartośd zmiennej przesuniecie2, która odpowiada za położenie punktu na dalszym okręgu). Przekroczenie wartości granicznej (w tym przypadku ustalona została na 180) następuje wylosowanie losowej długości nowego promienia. Aby powyższy kod zadziałał, niezbędne jest również zadeklarowanie tablicy: float przesuniecia[]; oraz wypełnienie jej wartościami z poziomu funkcji setup(): przesuniecia = new float[liczba_promieni]; for (int i =0; i < przesuniecia.length; i++) przesuniecia[i] = random(100); Po dodaniu powyższego kodu, program powinien wygenerowad odpowiednią animację. Dodatkowy efekt pulsacji Możliwe jest dodatkowe usprawnienie animacji poprzez dodanie pulsacji wstecznej w dotychczasowym rozwiązaniu promienie słooca znikały po przekroczeniu wartości progowej. Pulsacja wsteczna polega na naprzemiennym zwiększaniu i pomniejszaniu długości promienia. Efekt ten można osiągnąd poprzez dodanie jeszcze jednej tablicy pomocniczej, która będzie przechowywała wartośd aktualnej przyrostu promienia (wartośd dodatnia będzie powodowała wydłużenie, a wartośd ujemna skrócenie). W tym celu niezbędne jest stworzenie i wypełnienie tablicy: kierunki = new float[liczba_promieni]; for (int i =0; i < kierunki.length; i++) kierunki[i] = 1; Początkowo wszystkie promienie będą się wydłużad (przyrost został określony jako plus jeden). Druga częśd kodu wprowadza zmiany do fragmentu modyfikującego wartośd tablicy przesunięd tak, aby uwzględniała nowy algorytm. for (int i =0; i < przesuniecia.length; i++) przesuniecia[i] += 5*kierunki[i]; if (przesuniecia[i] >= 180 && kierunki[i] >= 1) kierunki[i] = -1*(1+random(3)); else if (przesuniecia[i] <= 50 && kierunki[i] <= -1) kierunki[i] = 1*(1+random(3));
Wartości widoczne w powyższym fragmencie dobrane zostały doświadczalnie i mogą byd z powodzeniem modyfikowane w celu otrzymania preferowanego efektu. Zgodnie z opisem przytoczonym na wstępie, algorytm sprawdza, czy długośd promienia nie przekroczyła wartości krytycznej (powyżej 180 lub poniżej 50) i w zależności od tego losuje nowy przyrost o przeciwnym kierunku. Zadanie samodzielne Spróbuj zmienid wartośd zmiennych sterujących (również grubości linii i kolorów), żeby otrzymad zupełnie inną animację! Jako, że Processing opiera się na środowisku uruchomieniowym języka Java, zdefiniuj klasę Slonce, w której zawarty będzie kod inicjalizacyjny oraz metoda odpowiedzialna za rysowanie słooca w zależności od podanych parametrów (punkt początkowy, długośd promieni itp.) Utwórz na ekranie cztery animacje słooca w różnych miejscach. Processing udostępnia również możliwośd pozyskania aktualnego stanu myszki użytkownika w tym celu można wykorzystad dwie aktualizowane na bieżąco zmienne: mousex oraz mousey (współrzędna X oraz Y myszki) oraz funkcje: mousepressed() (zwraca true, gdy kliknięto) i mousebutton() (zwraca LEFT, RIGHT lub CENTER w zależności od klikniętego przycisku myszy). Wykorzystaj powyższy funkcje by postawid nowe animacje w miejscu klikniętym przez użytkownika.
Poniższe rezultaty otrzymano poprzez modyfikację animacji słooca