Ćwiczenie P-1 „Wstęp do środowiska Processing”

Transkrypt

Grafika komputerowa
Ćwiczenie P-1
„Wstęp do środowiska Processing”
Instrukcja laboratoryjna
opracował: mgr inż. Jakub Możaryn
„Człowiek - najlepsza inwestycja”
Projekt współfinansowany przez Unię Europejską
w ramach Europejskiego Funduszu Społecznego
Warszawa 2009
2
Ćwiczenie P-1
Wstęp do środowiska Processing
SPIS TREŚCI
1. Środowisko Processing ........................................................................................................... 3
1.1. WPROWADZENIE ........................................................................................................ 3
1.2. INSTALACJA ................................................................................................................ 3
1.3. URUCHOMIENIE PDE ................................................................................................. 3
2. Praca z Processingiem i PDE – kompilowanie i uruchamianie programów .......................... 4
2.1. PODSTAWOWE ELEMENTY INTERFEJSU ŚRODOWISKA PROCESSING ........ 4
2.2. UTWORZENIE NOWEGO PROJEKTU....................................................................... 5
2.3. PISANIE KODU ............................................................................................................. 5
2.4. URUCHOMIENIE APLIKACJI ..................................................................................... 6
2.5. KOMPILOWANIE APLIKACJI PROCESSING DO APLETU JAVA......................... 7
3. Podstawowe elementy języka Processing ............................................................................... 8
3.1. TYPY DANYCH ............................................................................................................ 8
3.2. TABLICE ........................................................................................................................ 8
3.3. INSTRUKCJE WARUNKOWE .................................................................................... 9
3.4. PĘTLE............................................................................................................................. 9
3.5. OPERACJE MATEMATYCZNE ................................................................................ 10
3.6. FUNKCJE ..................................................................................................................... 13
3.7. OBSŁUGA KLAWIATURY I MYSZKI. .................................................................... 13
4. Wstęp do grafiki 2D w Processingu ..................................................................................... 14
4.1. UKŁAD WSPÓŁRZĘDNYCH .................................................................................... 14
4.2. GRAFIKA 2D ............................................................................................................... 15
4.2.1. Śledzenie położenia myszki ................................................................................ 16
4.3. ANIMACJA .................................................................................................................. 18
4.3.1. Ruch jednego obiektu ......................................................................................... 18
4.3.2. Ruch kilku obiektów ........................................................................................... 20
5. Zadania do samodzielnego wykonania ................................................................................. 23
5.1. ZADANIE 1 - WIELOBOK ......................................................................................... 23
5.2. ZADANIE 2 - GRADIENT .......................................................................................... 23
6. Literatura............................................................................................................................... 24
Grafika komputerowa
Ćwiczenie P-1
3
1. Środowisko Processing
1.1.
WPROWADZENIE
Processing jest językiem programowania przeznaczonym do pisania aplikacji
wykorzystujących obrazy, animację i dźwięk. Jest on oparty na języku JAVA.
Projekt zinicjowali w 2001 roku dwaj pracownicy naukowi uczelni
amerykańskich Ben Fry z MIT i Casey Reas z UCLA. Kod oprogramowania do tworzenia
aplikacji w Processingu jest udostępniony na zasadach Open Source i jest rozwijany przez
grono ochotników z całego świata. Dotychczas opracowywano wersje testowe, jednak obecnie
dostępna jest pełna wersja środowiska Processing 1.0 (aktualna wersja to 1.0.7).
1.2.
INSTALACJA
Instalacja oprogramowania do pisania i kompilowania aplikacji pisanych w
Processingu jest bardzo prosta. Wystarczy rozpakować na swoim komputerze odpowiedni plik
znajdujący się na stronie http://www.processing.org, zawierający archiwum całego
środowiska PDE (ang. Processing Developement Enviroment)
Możliwe jest ściągnięcie najnowszej wersji (wersja ‘without JAVA’), przygotowanej
dla trzech popularnych systemów operacyjnych: Linux, Microsoft Windows, Mac OSX.
Dodatkowo, jeśli nie zostało zainstalowane środowisko Java RE, udostępniono archiwa, które
je zawierają (wersja ‘standard’). Najwygodniej jest zainstalować wersję ‘standard’, szczególnie gdy użytkownik nie miał wcześniej doświadczenia z językiem JAVA.
1.3.
URUCHOMIENIE PDE
Po rozpakowaniu wszystkich plików środowiska pisania aplikacji PDE w wybranym
katalogu należy uruchomić znajdujący się w nim plik processing.exe. Nazwa Processing jako
nazwa języka oraz środowiska programowania są zwykle stosowane zamiennie.
Grafika komputerowa
4
Ćwiczenie P-1
2. Praca z Processingiem i PDE – kompilowanie i
uruchamianie programów
2.1. PODSTAWOWE ELEMENTY INTERFEJSU ŚRODOWISKA PROCESSING
Podstawowe elementy interfejsu środowiska Processing zostały przedstawione na rys. 2.1.
Rysunek 2.1 Podstawowe elementy Processing Developement Enviroment
Wszystkie grupy opcji zostały zebrane w menu głównym. Należą do nich: obsługa
plików i projektów (File), edycja kodu (Edit), uruchamianie i kompilacja programów
(Sketch), dodatkowe opcje (Tools) i rozbudowaną pomoc w formacie HTML (Help).
Najczęściej wykorzystywane opcje znajdują się na pasku narzędziowym w postaci
przycisków.
RUN
Kompiluje i uruchamia program w nowym oknie.
STOP
Zatrzymuje program ale nie zamyka okna.
NEW
Otwiera nowy projekt.
OPEN
Otwiera menu, z którego można wybrać wcześniej zapisany projekt.
SAVE
Zapisuje projekt w aktualnym katalogu.
EXPORT Eksportuje bieżący program jako aplet zagnieżdżony w pliku HTML.
Grafika komputerowa
Ćwiczenie P-1
5
2.2. UTWORZENIE NOWEGO PROJEKTU
W celu utworzenia nowego projektu należy wybrać opcje z menu głównego
File > New (skrót klawiszowy Ctrl+N) co spowoduje automatycznie utworzenie nowego
projektu, tzw. szkicu (ang. sketch) o nadanej mu przez środowisko standardowej nazwie (np.
Sketch_Aug10c) i związanego z nim okna edycyjnego. Najlepiej od razu zapisać projekt pod
wybraną przez użytkownika nazwą wybierając opcję File > Save As... i zapisując projekt pod
dowolną nazwą w wybranym przez siebie miejscu na dysku. Automatycznie tworzony jest
katalog o identycznej nazwie, jak nazwa projektu. Zapisywanie programów pod charakterystycznymi, a nie standardowymi, nazwami znacznie ułatwia późniejszą pracę.
Standardowym rozszerzeniem programów, które są interpretowane przez środowisko
Processing jest .pde.
2.3. PISANIE KODU
Kod w środowisku Processing można pisać w trzech różnych trybach, w zależności od
stopnia zaawansowania programisty.
•
Basic Mode – tryb podstawowy – ten tryb charakteryzuje się prostymi komendami bez
dodatkowych funkcji.
•
Continuous Mode – tryb ciągły – ten tryb umożliwia tworzenie własnych klas, funkcji
i metod. W tym trybie najważniejsze funkcje, które zwykle znajdują się w programie,
to:
o setup() – w tej funkcji znajdują się instrukcje, które służą do inicjacji i wykonywane są tylko raz na początku programu,
o draw() – w tej funkcji znajdują się instrukcje, które wykonywane są w pętli
aż do zatrzymania programu, chyba że w funkcji setup() umieści się polecenie noLoop(), co spowoduje że wykonają się tylko raz.
•
JAVA Mode – tryb JAVY – Ten tryb pozwala na programowanie w języku JAVA.
Jest najbardziej złożony, jednak daje programistom najwięcej możliwości.
W praktyce proste programy można napisać w trybie ciągłymi, tak więc będzie to tryb
przykładów realizowanych w trakcie laboratorium.
Składnia języka Processing jest analogiczna do składni języka JAVA. Przykładowa
aplikacja napisana w trybie ciągłym ma następującą postać:
Grafika komputerowa
6
Ćwiczenie P-1
Aplikacja 2.1.
//funkcja inicjująca tryb ciągły
void setup()
{
size(200, 200);
//rozmiar okna aplikacji
noStroke();
//brak krawędzi
background(255);
//tło
fill(0, 102, 153, 204);
//kolor wypełnienia z parametrem alfa
smooth();
//wygładzenie linii
noLoop();
//ograniczenie do jednej pętli
}
//pętla trybu ciągłego, rysowanie okręgów funkcją circles()
void draw()
{
circles(40, 80);
circles(90, 70);
}
//definicja funkcji rysującej okręgi
void circles(int x, int y) {
ellipse(x, y, 50, 50);
ellipse(x+20, y+20, 60, 60);
}
2.4. URUCHOMIENIE APLIKACJI
Po napisaniu kodu należy uruchomić aplikację. Z menu głównego należy wybrać opcję
Sketch > Run (skrót klawiszowy Ctrl+R) lub kliknąć na odpowiedni przycisk w pasku narzędziowym. Wywoła to kompilację kodu i uruchomienie aplikacji. Informacja o przebiegu kompilacji i pojawiających się błędach pojawi się w odpowiednim polu tekstowym pod polem
edycyjnym. W wyniku prawidłowej kompilacji aplikacja powinna uruchomić się w oddzielnym oknie (Rys. 2.2).
Rysunek 2.2. Okno z wynikiem działania aplikacji 2.1
Grafika komputerowa
Ćwiczenie P-1
7
2.5. KOMPILOWANIE APLIKACJI PROCESSING DO APLETU JAVA
Pliki .pde mogą być otwierane i kompilowane przez środowisko Processing.
Środowisko pozwala na wyeksportowanie ich do postaci apletu języka JAVA. Można to
zrobić na dwa sposoby.
Pierwszy z nich to eksport aplikacji do oddzielnego pliku wykonywalnego .exe (wraz z
podkatalogiem ‘/lib’). W tym celu należy wybrać z menu głównego opcję File > Export Application. Następnie pojawi się okno z możliwością wyboru systemu operacyjnego
(MS Windows, MAC OS, Linux), oraz opcją uruchamiania pełnoekranowego (Full Screen)
Rys. 2.3). Po kliknięciu przycisku 'Export' automatycznie zostanie utworzona aplikacja,
w odpowiednim podkatalogu o nazwie odpowiadającej systemowi operacyjnemu.
Rysunek 2.3. Okno z wyborem opcji eksportu aplikacji do apletu Java
Drugim sposobem jest wyeksportowanie aplikacji jako apletu zagnieżdżonego w
pliku HTML, wyświetlanego przez przeglądarki obsługujące język JAVA. W tym celu należy
z menu głównego wybrać opcję File > Export (skrót Ctrl+E), co spowoduje utworzenie w
katalogu z projektem podkatalogu ‘/applet’ a w nim odpowiednich plików wraz z plikiem
‘index.hml’ (Rys. 2.4), w którym zostanie zagnieżdżony skompilowany aplet.
Rysunek 2.4. Wygląd przykładowej strony ‘index.html’ z zagnieżdżonym apletem Java
Grafika komputerowa
8
Ćwiczenie P-1
3. Podstawowe elementy języka Processing
3.1. TYPY DANYCH
Standardowe typy danych stosowane w Processingu zostały zebrane w Tab. 3.1.
Tabela 3.1. Standardowe typy danych.
Oznaczenie Przykład
int
a = 1;
float
a = 1.0;
byte
a = -1;
boolean
tak = true;
color
n = color(0, 0, 255);
lub
n = #0000FF;
char
znak = 'a';
string
text = "Ala";
Opis
Liczby całkowite
Liczby 4-bajtowe zmiennoprzecinkowe
Liczby 1-bajtowe
Typ logiczny, zmienna może przyjmować
wartości logiczne prawda/fałsz (true/false)
32 bitowa zmienna, służy do przechowywania
wartości koloru w postaci 3 wartości
składowych barw RGB (każda od 0 do 255) lub
wartości heksadecymalnej.
Typ znakowy, znak musi być ujęty w
pojedynczy cudzysłów.
Typ tekstowy, zmienna jest łańcuchem znaków,
przy deklaracji tekst musi być ujęty w podwójny
cudzysłów
3.2. TABLICE
W języku Processing można definiować tablice składające się ze stałej liczby
elementów określonego typu. Do każdego elementu odwołujemy się poprzez indeks określający pozycję danego elementu. Indeks pierwszego elementu tablicy ma wartość 0.
Ogólna postać definicji typu tablicowego jest następująca:
LICZBA_EL_TABLICY=10;
typ[] zmienna = new typ[LICZBA_EL_TABLICY];
//liczba elementów tablicy
W Processingu możliwe jest także wykorzystanie tablic wielowymiarowych. Deklaracja przykładowej tablicy dwuwymiarowej może wyglądać następująco:
int RZEDY=10;
int KOLUMY=15;
int[][] tablica2D = new int[RZEDY][KOLUMNY]
Grafika komputerowa
Ćwiczenie P-1
9
3.3. INSTRUKCJE WARUNKOWE
Instrukcja warunkowa if…else w języku Processing pozwala zdecydować, czy
przejść do wykonywania określonego ciągu instrukcji czy nie. Jest sterowana warunkiem
mającym wartość logiczną. Ogólna postać instrukcji warunkowej if…else jest następująca:
if (warunek1)
{
…
//ciąg instrukcji wykonywany jeśli warunek1 spełniony
}
else
{
…
//ciąg instrukcji wykonywany jeśli warunek 1 nie spełniony
};
Kolejnym przypadkiem instrukcji warunkowej jest instrukcja wielokrotnego wyboru
Warunek, od którego zależy wybór określonego ciągu instrukcji, musi
wykorzystywać zmienną typu wyliczeniowego integer, byte lub char. Ogólna postać
instrukcji wielokrotnego wyboru jest następująca:
switch.
switch(zmienna sterująca)
{
case wartosc_1:
…
//ciąg instrukcji;
break;
case wartosc_2:
…
//ciąg instrukcji;
break;
case wartosc_n:
…
//ciąg instrukcji;
break;
default:
…
//ciąg instrukcji;
}
Przy wykonywaniu instrukcji wielokrotnego wyboru dyrektywa case pozwala wybrać
ciąg instrukcji, który wykonywany jest, jeśli zmienna sterująca przyjmie określoną wartość. Z
danego ciągu instrukcji wychodzi się poleceniem break. Możliwe jest także dodanie bloku
instrukcji zatytułowanego default, który będzie wykonywany domyślnie, jeśli żadna z
wartości podanych po instrukcjach case nie będzie równa wartości sprawdzanej zmiennej
sterującej.
3.4. PĘTLE
W języku Processing podstawowa pętla realizowana jest przez instrukcję for i ma
postać
for(inicjacja_zmiennej; warunek; krok_pętli)
{
…
//ciąg instrukcji
}
W celu zastosowania pętli for należy zdefiniować i nadać początkową wartość zmiennej, która będzie ulegać zmianie po każdorazowym wykonaniu określonego ciągu instrukcji
(poprzez zdefiniowanie tzw. kroku pętli). Zmienna jest także nazywana licznikiem. Następnie
podawany jest warunek, przyjmujący wartość logiczną, sprawdzany przed
każdym przebiegiem pętli. Jeżeli warunek ma wartość true (prawda), wykonywane jest ciąg
instrukcji znajdujący się w pętli for. W przeciwnym przypadku, kiedy warunek ma wartość
Grafika komputerowa
10
Ćwiczenie P-1
false (fałsz), następuje zakończenie pętli. Krok_pętli to instrukcja wywoływana po wykonaniu ciągu instrukcji pętli for. Zwykle jest tu modyfikowana wartość licznika.
Aplikacja 3.1 – Przykład działania pętli for
for (int i = 30; i < 80; i = i+5) {
for (int j = 0; j < 80; j = j+5) {
point(i, j);
}
}
Rysunek 3.1. Wynik działania aplikacji 3.1., przykład działania pętli for
W języku Processing dostępna jest instrukcja while(), która także może służyć do
tworzenia pętli.
while(warunek)
{
…
//ciąg instrukcji
}
Zazwyczaj podczas korzystania z instrukcji while do tworzenia pętli definiowana jest
zmienna, do której odnosi się warunek pętli i jej wartość modyfikowana jest w ciągu instrukcji.
3.5. OPERACJE MATEMATYCZNE
W języku Processing zdefiniowano podstawowe operatory matematyczne (Tab. 3.3) i
logiczne (Tab. 3.3), oraz dodatkowe funkcje matematyczne analogiczne do występujących w
języku C lub JAVA (Tab. 3.4). Oznaczenie float/int dotyczy typu zmiennych, które mogą
być zarówno rzeczywiste jak i całkowite. Wynik funkcji jest zwykle tego samego typu co
parametry, oprócz wyszczególnionych w tabelach przypadków.
Grafika komputerowa
Ćwiczenie P-1
Tabela 3.2. Podstawowe operatory matematyczne
Operator
-=
+
/=
*=
%
+=
/
*
++
--
Opis
Skrócone odejmowanie
Dodawanie
Skrócone dzielenie
Odejmowanie
Skrócone mnożenie
Dzielenie modulo, podaje resztę z dzielenia
Skrócone dodawanie
Dzielenie
Mnożenie
Inkrementacja (powiększenie o 1)
Dekrementacja (pomniejszenie o 1)
Tabela 3.3. Podstawowe operatory logiczne
Operator
<
<=
>
>=
==
!=
&&
||
!
Opis
Mniejsze od
Mniejsze lub równe
Większe
Większe lub równe
Równe
Nierówne
Logiczne AND
Logiczne OR
Logiczne NOT
Grafika komputerowa
11
12
Ćwiczenie P-1
Tabela 3.4. Podstawowe funkcje matematyczne.
Funkcja
Opis
Funkcja zwraca wartość bezwzględną liczby
podanej jako parametr.
Funkcja zaokrągla wartość rzeczywistą w górę, do
najbliższej liczby całkowitej. Wynik jest liczbą
całkowitą.
Funkcja ogranicza zadaną wartość wart aby nie
przekraczała zadanych granic [min…max].
abs(float/int wart)
ceil(float wart)
constrain(float/int wart,
float/int min, float/int max)
dist(float/int x1, float/int y1,
float/int x2, float/int y2)
floor(float wart)
max(float/int tablica)
min(float/int tablica)
pow(float/int podstawa,
float/int wykładnik)
round(float wart)
sq(float/int wart)
sqrt(float/int wart)
sin(float wart)
cos(float wart)
tan(float wart)
atan2(float y, float x)
radians(float/int wart)
degrees(float/int wart)
Funkcja oblicza odległość pomiędzy dwoma
zadanymi punktami P1 =(x1,y1), P2=(x2,y2).
Funkcja zaokrągla wartość rzeczywistą w dół, do
całkowitą
Funkcja zwraca największą wartość spośród
wartości znajdujących się w tablicy podanej jako
parametr.
Funkcja zwraca najmniejszą wartość spośród
wartości znajdujących się w tablicy podanej jako
parametr.
Funkcja zwraca wynik potęgowania, je parametry
to podstawa i wykładnik. Wynik jest liczbą
rzeczywistą.
Funkcja zaokrągla wartość rzeczywistą do
całkowitą.
Funkcja zwraca wartość podaną jako parametr podniesioną do kwadratu.
Funkcja zwraca pierwiastek kwadratowy z
wartości podanej jako parametr.
Funkcja zwraca sinus wartości podanej jako
parametr.
Funkcja zwraca cosinus wartości podanej jako parametr.
Funkcja zwraca tangens wartości podanej jako parametr, zakres [- ∞, +∞].
Funkcja zwraca wartość kąta (w radianach)
pomiędzy prostą przechodzącą przez początek
układu i danym punktem (x,y), a osią OX układu.
Funkcja dokonuje konwersji stopni na radiany.
Wynik jest liczbą rzeczywistą.
Funkcja dokonuje konwersji radianów na stopnie.
Wynik jest liczbą rzeczywistą.
Grafika komputerowa
Ćwiczenie P-1
13
3.6. FUNKCJE
Oprócz standardowo określonych w Processingu funkcji można także tworzyć własne.
Dla danej funkcji można określić liczbę parametrów podawanych podczas jej wywoływania.
Funkcja może zwracać wartość określonego typu. W tym celu należy wewnątrz funkcji
wywołać instrukcję return z wynikiem działania funkcji. W przypadku gdy funkcja nie
zwraca wartości należy w miejsce typu napisać void. Ogólna postać definiowanej funkcji
wygląda następująco:
typ nazwa_funkcji(typ1 parametr_1;typ2 parametr_2; …;typn parametr_n)
{
… //ciąg instrukcji;
return wynik_działania_funkcji;
}
3.7. OBSŁUGA KLAWIATURY I MYSZKI.
Do obsługi reakcji na klawisze służą dwie podstawowe funkcje wykonywane
każdorazowo przy ich naciśnięciu lub puszczeniu.
Naciśnięcie klawisza
void keyPressed()
{
…
//ciąg instrukcji
}
Zwolnienie klawisza
void keyReleased ()
{
…
//ciąg instrukcji
}
Po umieszczeniu takiego kodu program samoczynnie przejdzie do wykonywania funkcji keyPressed() przy naciśnięciu dowolnego klawisza klawiatury oraz do wykonywania
funkcji keyReleased() przy jego puszczeniu. Podczas ciągłego trzymania wciśniętego
klawisza klawiatury funkcja keyPressed() będzie wykonywana wielokrotnie.
Wyrażenie keyPressed może być użyte także jako zmienna logiczna przyjmująca
wartość true (prawda) jeżeli jakiś z przycisków klawiatury jest wciśnięty oraz false (fałsz)
gdy żaden z nich nie jest wciśnięty. Do przechowywania wartości aktualnie wciśniętego
klawisza służy zmienna key. Można sprawdzić czy wciśnięty jest klawisz specjalny
odczytując wartość zmiennej keyCode, która może przyjmować wartości: ALT, CONTROL,
SHIFT, BACKSPACE, TAB, ENTER, RETURN, ESC, DELETE (wartości wpisywane
dużymi literami). Przykład instrukcji warunkowej sprawdzającej, które klawisze zostały
wciśnięte może być następujący:
if (keyPressed = = true)
{
if (key == 'a' || key == 'A' || keyCode = = CONTROL)
{
… //ciąg instrukcji
}
}
Grafika komputerowa
14
Ćwiczenie P-1
W Processingu zdefiniowano także funkcje obsługi myszki mousePressed() – naciśnięcie przycisku myszki, oraz mouseReleased()- zwolnienie przycisku myszki.
Zastosowanie ich jest analogiczne jak funkcji klawiszowych. Kod aktualnie wciśniętego
przycisku przechowywany jest w zmiennej mouseButton (wartość LEFT - lewy przycisk
myszki i RIGHT - prawy przycisk myszki).
Funkcja służąca do analizy informacji pochodzących z ruchu kursora sterowanego
myszką jest funkcja mouseMoved() sprawdzająca czy został on przesunięty. Współrzędne
ekranowe, w których aktualnie znajduje sie kursor przechowywane są w zmiennych mouseX
oraz mouseY. Kolejne zmienne to pmouseX oraz pmouseY, w których przechowywane są
współrzędne, w których znajdował sie kursor w poprzedniej ramce (wywołaniu funkcji
draw()) podczas działania aplikacji.
Inną stosowaną funkcją jest mouseDragged(), która reaguje na ruch kursora, w
przypadku gdy wciśnięty jest jeden z przycisków myszki.
4. Wstęp do grafiki 2D w Processingu
4.1. UKŁAD WSPÓŁRZĘDNYCH
W Processingu do opisu położeń punktów w oknie aplikacji stosuje się kartezjański prawoskrętny układ współrzędnych. Początek układu znajduje sie w lewym górnym rogu okna (Rys.
4.1). Oś OX skierowana jest w prawo, natomiast oś OY skierowana jest w dół.
Wielkość okna aplikacji określa się się przy pomocy funkcji size()
size(int szerokość, int wysokość);
gdzie podawane parametry to szerokość i wysokość okna aplikacji w pikselach.
Wysokość i szerokość okna przechowywane są w predefiniowanych zmiennych,
odpowiednio width i height. Współrzędne pierwszego punktu na ekranie to [0,0], natomiast
ostatniego to [width-1, height-1].
Dodając trzecią współrzędną (z) przechodzi się do przestrzeni trójwymiarowej, oś OZ
skierowana jest wtedy do środka ekranu (Rys. 4.1).
Rysunek 4.1. Układy współrzędnych 2D i 3D w Processingu
Grafika komputerowa
Ćwiczenie P-1
15
4.2. GRAFIKA 2D
Język Processing jest przygotowany do szybkiego prototypowania aplikacji graficznych zarówno dwuwymiarowych jak i trójwymiarowych.
Kolor wypełnienia figur zamkniętych określa się przy pomocy funkcji fill(), z
parametrami będącymi trzema wartościami składowych barw RGB i współczynnikiem przezroczystości alpha (każdy z parametrów przyjmuje wartości z zakresu 0-255, domyślnie
przyjmowana jest wartość 255):
fill(int/float R, int/float G, int/float B, int/float alpha);
Jeśli istotne jest wyrysowanie tylko konturu figury, bez wypełnienia, należy poprzedzić wywołanie danej funkcji poleceniem noFill().
Kolor konturu określa się korzystając z funkcji stroke() o składni analogicznej jak
funkcja fill(). Jeśli kontur ma być niewidoczny należy skorzystać z polecenia
noStroke().
Do
ustawienia
grubości
konturu
w
pikselach
służy
funkcja
strokeWeight()(stosowana dla linii, konturu obiektów i punktów).
strokeWeight(int/float grubość);
Podstawowe funkcje służące do rysowania dwuwymiarowych figur zebrano w
Tab. 4.1. Wszystkie wymienione funkcje związane z grafiką dwuwymiarową można
wywoływać z parametrami będącymi liczbami całkowitymi lub rzeczywistymi.
Tabela 4.1. Podstawowe funkcje graficzne.
Funkcja
arc(x, y, szer, wys, start,
stop)
ellipse(x, y, szer, wys)
line(x1, y1, x2, y2) lub
line(x1, y1, z1, x2, y2, z2)
point (x, y) lub point(x, y, z)
quad(x1, y1, x2, y2, x3, y3,
x4, y4)
Opis
Funkcja służy do rysowania łuku (wycinka elipsy).
Parametry funkcji: x, y – współrzędne środka
elipsy; szer, wys – wartości szerokości i wysokości elipsy; start, stop – wartości kątowe
(podane w radianach) początku i końca wycinka
elipsy.
Funkcja rysuje elipsę. Parametry funkcji: x, y –
współrzędne środka elipsy; szer, wys – wartości
szerokości i wysokości elipsy.
Funkcja rysuje linię. Parametry funkcji: x1, y1,
z1 – współrzędne początku linii oraz x2, y2, z2
– współrzędne końca linii.
Funkcja rysuje punkt. Parametry funkcji: x, y, z
– współrzędne punktu.
Funkcja rysuje czworobok. Parametry funkcji:
współrzędne czterech wierzchołków czworoboku
rect(x, y, szer, wys)
Funkcja rysuje prostokąt. Parametry funkcji:
współrzędne x, y górnego lewego wierzchołka
oraz szerokość i wysokość prostokąta.
triangle(x1, y1, x2, y2, x3, y3) Funkcja rysuje trójkąt. Parametry funkcji: współrzędne x, y wierzchołków trójkąta.
Grafika komputerowa
16
Ćwiczenie P-1
4.2.1. Śledzenie położenia myszki
Przykładem aplikacji wykorzystującej interakcję z użytkownikiem i grafikę 2D, będzie
aplikacja śledząca położenie kursora na ekranie. Za poruszającym się kursorem będzie
pozostawał “ślad”.
W programie będą wykorzystane dwa wektory, w których będzie zapisywana historia
ruchu - N ostatnich położeń. W tym celu należy zadeklarować dwa wektory N elementowe:
Aplikacja 4.1. – deklaracja zmiennych
//50 ostatnich połoŜeń
int N=50;
int[] xpos = new int[50];
int[] ypos = new int[50];
//współrzędna x
//współrzędna y
Następnie w funkcji setup() dokonana zostanie inicjalizacja wektorów, należy pamiętać że wektory są indeksowane od 0, więc ostatnim ich indeksem będzie wartość N-1.
Drugą z pojawiających się funkcji jest smooth(), która powoduje wygładzenie
krawędzi z wykorzystaniem techniki tzw. antyaliasingu, co poprawia efekt wizualny.
Instrukcja noSmooth() wyłącza antyaliasing. Należy podkreślić, że antyaliasing można
włączać i wyłączać dla poszczególnych instrukcji aplikacji, co pozwala rysować różne kształty z wygładzaniem lub bez.
Aplikacja 4.1. – funkcja inicjująca
void setup() {
// inicjalizacja wektorów przechowujących połoŜenie
for (int i=0; i<N; i++){
xpos[i]=0;
ypos[i]=0;
};
size(200,200);
//rozmiar okna
smooth();
//antyaliasing
}
W kolejnym kroku w trybie ciągłym, należy zadeklarować funkcję draw(). Jest ona
wywoływana w sposób ciągły, przez cały czas działania aplikacji. Pierwsza z instrukcji,
background(), o składni analogicznej do funkcji fill() i stroke(), określa jakim
kolorem będzie wypełnione okno. Jej każdorazowe wykonanie czyści zawartość okna.
Następnie zostanie dokonane przepisanie wartości pomiędzy kolejnymi elementami
zadeklarowanych wektorów, tak aby zapamiętywane było N ostatnich położeń.
Współrzędne położenia kursora zostaną odczytane z wykorzystaniem instrukcji
mouseX, mouseY i zapisywane w ostatnich elementach wektorów. Ostatnia pętla spowoduje
narysowanie okręgów o malejących średnicach i wypełnieniu ich zanikającymi odcieniami
szarości. Średnica każdego z okręgów jest bezpośrednio związana z jego położeniem w wektorze (indeks, kolejny krok). Do wypełnienia wykorzystana zostanie funkcja fill(), która
może być wywoływana z jednym parametrem określającym odcień szarości (od 255 – kolor
biały do 0 – kolor czarny).
Grafika komputerowa
Ćwiczenie P-1
Aplikacja 4.1. – funkcja rysująca
void draw() {
background(255);
//tło
for (int i=0; i<N-1; i++ ) {
xpos[i]=xpos[i+1];
ypos[i]=ypos[i+1];
};
xpos[N-1]=mouseX;
ypos[N-1]=mouseY;
for (int i=0; i<N; i++ ) {
noStroke();
//brak krawędzi
fill(255-i*5);
//wypełnienie figury
ellipse(xpos[i],ypos[i],i,i);
//rysowanie okręgu
};
}
Rysunek 4.2. Wygląd okna aplikacji 4.1.
Grafika komputerowa
17
18
Ćwiczenie P-1
4.3. ANIMACJA
4.3.1. Ruch jednego obiektu
W Processingu możliwe jest łatwe zrealizowanie animacji, co zostanie zobrazowane
na przykładzie kuli odbijającej się od krawędzi okna.
Na początku zostaną zadeklarowane zmienne globalne
Aplikacja 4.2. - inicjacja zmiennych
int xspeed, yspeed;
int xpos, ypos;
int vposx, vposy;
int r;
//informacja o ruchu kuli
int ruch=0; int predkosc=0;
//współrzędne prędkości kuli
//połoŜenie kuli
//współrzędne ‘strzałki’ prędkości
//promień kuli
Następnie zostaną zainicjowane własności aplikacji
void setup(){
size(400, 400);
background(255);
fill(0);
noStroke();
xspeed = 0;
yspeed = 0;
r=10;
xpos = width/2;
ypos = height/2;
frameRate(30);
}
//wypełnienie kuli
//na początku kula znajduje się na środku ekranu
Nową instrukcją, która pojawia się w powyższym fragmencie kodu, jest
frameRate(). Określa ona częstotliwość odświeżania okna aplikacji. Jest to funkcja o jednym
argumencie, będącym liczbą wywołań funkcji rysującej draw() (tzw. ramek) na sekundę.
frameRate(int liczbaKlatekNaSec)
W kolejnym kroku zostanie zdefiniowana funkcja draw(), wykonywana w sposób
ciągły. W tej funkcji zostaną wykonane następujące kroki. Na początku sprawdzany jest ruch
kuli. Jeśli kulka się porusza (flaga Predkosc ma wartość 1), w pierwszej kolejności zostanie
przerysowane tło (funkcja background() ), co spowoduje wyczyszczenie ekranu. Następnie
zostaje narysowana kula na ekranie w określonej pozycji. W kolejnym kroku współrzędne
położenia kuli zostaną uzupełnione o współrzędne prędkości. Na koniec zostaną sprawdzone
dwa warunki zależne od położenia kuli wobec krawędzi. W przypadku ich spełnienia
zmieniają się kierunki prędkości, co odpowiada odbiciu kuli od krawędzi okna.
Grafika komputerowa
Ćwiczenie P-1
19
void draw(){
if (ruch==1){
background(255);
noStroke();
ellipse(xpos-round(r/2), ypos-round(r/2), r, r);
xpos+=xspeed;
ypos+=yspeed;
//warunki odbicia od krawędzi okna, zmiana kierunku ruchu
if (xpos>=width-r/2 || xpos<=r/2){
xspeed*=-1;
};
if (ypos>=height-r/2 || ypos<=r/2){
yspeed*=-1;
};
};
};
W aplikacji zostaną także obsłużone zdarzenia związane z ruchem kursora. Przyjęto,
że po najechaniu końcem kursora na dany punkt okna i wciśnięciu przycisku myszki
współrzędne tego punktu stają się współrzędnymi środka nieruchomej kuli.
Aplikacja 4.2. - Obsługa zdarzenia związanego z kliknięciem przyciskiem myszy
void mousePressed(){
if (ruch==1){
xpos=mouseX;
//połoŜenie myszy – współrzędna x
ypos=mouseY;
//połoŜenie myszy – współrzędna y
background(255);
noStroke();
ellipse(xpos, ypos, r, r);
ruch=0;
//kula się nie rusza
predkosc=0;
//prędkość nie jest ustawiona
}else if(predkosc==0){
predkosc=1;
//prędkość jest ustawiona
ruch=1;
//kula się rusza
};
};
Kolejne obsłużone zdarzenie związanie jest z ruchem myszki, po pojawieniu się kuli
na ekranie. Po ustawieniu kuli, za pomocą kursora określany jest kierunek i współrzędne
wektora prędkości, z którą inicjowany jest ruch kuli. Kolejne naciśnięcie przycisku myszy
spowoduje ruch kuli w wybranym kierunku z zadaną prędkością.
Grafika komputerowa
20
Ćwiczenie P-1
Aplikacja 4.2. - obsługa zdarzenia związanego z ruchem myszy
void mouseMoved(){
if (predkosc==0){
//warunek –kula jest nieruchoma
background(255);
noStroke();
fill(0);
ellipse(xpos, ypos, r, r);
//odczytanie współrzędnych końca wektora prędkości
int vposX=mouseX;
int vposY=mouseY;
stroke(255,0,0);
line(xpos,ypos,vposX,vposY);
//rysunek wektora prędkości
xspeed=(vposX-xpos)/10;
yspeed=(vposY-ypos)/10;
ruch=0;
//kula się nie rusza
};
};
4.3.2. Ruch kilku obiektów
Kolejny przykład będzie dotyczył animacji wielu obiektów na ekranie. Przyjmijmy, że
poruszającymi się obiektami są kule. Zachowanie każdego z obiektów jest kopią zachowania
kuli z poprzedniego przykładu. Ponieważ jest wiele kul, informacje o każdej z nich
przechowywane są w tablicach, zainicjowanych na początku programu, przed funkcją
setup(). Ponadto w tablicy al zostanie określony parametr alfa każdej kul, odpowiadający
za jej przezroczystość. W ten sposób zostanie uzyskany efekt przezroczystych kul, poruszających się na różnych poziomach.
Grafika komputerowa
Ćwiczenie P-1
21
Aplikacja 4.3. - inicjacja zmiennych
int liczbaElementow = 100;
int rozmiarKuli = 30;
int predkoscKuli = 3;
float[]xv = new float[liczbaElementow];
float[]yv = new float[liczbaElementow];
float[]xpos = new float[liczbaElementow];
float[]ypos = new float[liczbaElementow];
float[]r = new float[liczbaElementow];
float[]al = new float[liczbaElementow];
W funkcji inicjującej należy określić warunki początkowe każdej kul. Należą do nich
położenie, prędkość, promień oraz przezroczystość (parametr alpha). Do losowania wartości
można wykorzystać funkcję random()
float random(float low, float high);
Funkcja random() losuje wartość rzeczywistą z zakresu [low,high).
Inną funkcją losującą w Processingu jest noise(), która zwraca wartość losową z
zakresu [0,1). Może być wywołana z 1-3 parametrami, w zależności od ilości losowanych
liczb. Jest w niej zaimplementowana funkcja nazywana szumem Perlina, zaproponowana
przez Kena Perlina w latach 80-tych. W niektórych przypadkach pozwala ona uzyskać rozkład bardziej zbliżony do normalnego niż funkcja random(). Jest stosowana w popularnych
programach graficznych do generowania tekstur, powierzchni, ruchu zbliżonego do
naturalnego, etc.
void setup(){
size(400, 400);
background(255);
for (int i=0; i< liczbaElementow; i++){
// losowy dobór prędkości kul
xv[i] = random(1, predkoscKuli);
yv[i] = random(-predkoscKuli, predkoscKuli);
// losowy dobór rozmiaru kul
r[i]= random(1, rozmiarKuli);
//określenie przezroczystości kul
al[i]=255-r[i]*5;
//losowe rozmieszczenie kul
xpos[i] = width/2+random(-width/3, width/3);
ypos[i] = height/2+random(-height/3, height/3);
};
noStroke();
smooth();
frameRate(30);
}
Grafika komputerowa
22
Ćwiczenie P-1
Ostatecznie zostanie napisana funkcja draw() odświeżająca okno w kolejnych
krokach i odpowiadająca za animację. Instrukcje sterujące ruchem poszczególnych kul wywołane są w pętli tyle razy ile jest kul. Na ich podstawie modyfikowane są wartości w tablicach
przechowujących współrzędne położenia (xpos[i], ypos[i]) każdej z kul.
void draw(){
background(255);
// pętla wywoływana dla kaŜdej z kul
for (int i=0; i<liczbaElementow; i++){
//rysowanie kuli (i)
fill(255,0,0,al[i]);
ellipse(xpos[i], ypos[i], r[i], r[i]);
//określenie połoŜeń kuli (i) w kolejnym kroku
xpos[i]+=xv[i];
ypos[i]+=yv[i];
//warunki na zderzenie kuli (i) z krawędziami okna
if (xpos[i]+r[i]/2>=width || xpos[i]<=r[i]/2){
xv[i]*=-1;
};
if (ypos[i]+r[i]/2>=height || ypos[i]<=r[i]/2){
yv[i]*=-1;
};
};
};
Grafika komputerowa
Ćwiczenie P-1
23
5. Zadania do samodzielnego wykonania
5.1. ZADANIE 1 - WIELOBOK
Treść zadania:
Należy napisać aplikację rysującą wielobok foremny o n bokach.
W programie należy zaimplementować i wywołać funkcję o nazwie wielobok() z
następującymi parametrami:
• środek wieloboku,
• promień,
• liczba boków wieloboku.
Przydatne informacje:
Na początku należy zaimplementować funkcję inicjującą, w której należy zdefiniować wielkość wyświetlanego okna aplikacji i w tej funkcji wywołać napisaną funkcję wielobok().
Podczas implementacji przydatne mogą być funkcje trygonometryczne, funkcja rysującą linię
pomiędzy dwoma punktami line(), oraz predefiniowane w Processingu stałe PI (π), oraz
TWO_PI (2π).
5.2. ZADANIE 2 - GRADIENT
Treść zadania:
Należy napisać aplikację pozwalającą na wyświetlenie gradientu danego koloru, w taki sposób
że pierwsza linia (pozioma) jest rysowana w kolorze początkowym, natomiast ostatnia linia
jest rysowana w kolorze końcowym. Linie pośrednie należy rysować z zachowaniem liniowej
zmiany gradientu.
W programie należy zaimplementować i wywołać funkcję o nazwie gradient() z
następującymi parametrami:
• 3 składowe RGB koloru początkowego – wartości całkowite
• 3 składowe RGB koloru końcowego – wartości całkowite
Przydatne informacje:
Na początku należy zaimplementować funkcję inicjującą, w której należy zdefiniować wielkość wyświetlanego okna aplikacji i w tej funkcji wywołać napisaną funkcję gradient().
Podczas implementacji funkcji przydatne mogą być: implementacja liniowej interpolacji każdej z poszczególnych składowych RGB, funkcja rysującą linię pomiędzy dwoma punktami,
predefiniowane w Processingu zmienne width i height, zwracające szerokość i wysokość
okna oraz funkcja stroke() wywoływana z trzema parametrami R, G, B, pozwalająca na
zmianę koloru konturu (w tym przypadku rysowanej linii)
Grafika komputerowa
24
Ćwiczenie P-1
6. Literatura
[1] Bożena Pawlak “Processing – nowe narzędzie do tworzenia apletów. Analiza możliwości
na przykładzie apletów z dziedziny grafiki komputerowej”, Praca dyplomowa inżynierska,
Wydział Mechatroniki, 2005/2006.
[2] Ira Greenberg: ”Processing: Creative Coding and Computational Art”, Friendsof, 2007.
[3] Casey Reas, Ben Fry, „Processing: A Programming Handbook for Visual Designers
and Artists”, MIT Press, 2007.
[4] Daniel Shiffman: “Learning Processing. A Beginners Guide to Programming Images,
Animation and Interaction”, Elsevier, 2008.
[4] Pomoc środowiska Processing.
Grafika komputerowa

Ćwiczenie P-1 „Wstęp do środowiska Processing”

Transkrypt

Podobne dokumenty

Krok po kroku