Dotychczas stworzyliśmy aplikacje w wizualnym języku programowania Scratch oraz w Pythonie. To oczywiście tylko dwa spośród wielu dostępnych języków. W kolejnych materiałach pokażemy, jak budować strony internetowe w HTML, natomiast w tej części skupimy się na możliwościach kolejnego języka o nazwie Processing.

Wstęp

Chcąc przystąpić do wykonania interaktywnej aplikacji, należy najpierw pozyskać odpowiednie materiały potrzebne do realizacji projektu. Możesz znaleźć je w internecie lub wykonać je sam.

Posiadając odpowiednie materiały, można przystąpić do programowania aplikacji. Pierwszym krokiem powinien być wybór języka programowania. Dobrym kandydatem jest język ProcessingProcessingProcessing. Służy on do:

• tworzenia projektowanych scenografii do spektakli tanecznych i muzycznych,

• generowania obrazów do teledysków i filmów,

• tworzenia obrazów do plakatów, czasopism i książek,

• tworzenia interaktywnych instalacji w galeriach, muzeach i na ulicy.

Chcąc stworzyć interaktywną aplikację, należy mieć możliwość wyświetlania tekstu, ilustracji oraz filmów, dodatkowo należy mieć możliwość obsługiwania zdarzeń generowanych przez użytkownika (przykładowo kliknięcie myszy). Processing oferuje wszystkie powyższe możliwości, dodatkowo jest przyjazny dla początkujących, posiada własne środowisko oraz prostą składnię.

Drugim krokiem powinno być pobranie i zainstalowanie zintegrowanego środowiska programistycznego. (IDE - ang. Integrated Development Environment)IDE - ang. Integrated Development Environment(IDE - ang. Integrated Development Environment)
Processing rozwijany jest jako projekt Open Source, natomiast Processing IDE jest rozpowszechniane na licencji GPLlicencja_GNU_GPLlicencji GPL. Biblioteki oraz kod dostarczony przez producentów objęte są licencją LGPL, co pozwala autorom na rozpowszechniane swoich prac pod dowolną licencją, bez ograniczeń. Wszystkie wersje środowiska Processing znajdują się na stronie http://processing.org.

Instalacja środowiska

Dla każdego systemu operacyjnego wystarczy pobrać i uruchomić środowisko programistyczne wybierając odpowiednią zakładkę na stronie oprogramowania Processing:

https://processing.org/download/?processing

Wersja środowiska omawiana w materiale to 4.2

Po pobraniu pliku z rozszerzeniem .zip, wypakuj go w wybranym przez siebie miejscu. Następnie otwórz folder i kliknij dwukrotnie ikonę pliku processing.exe.

R1AWmA2eg0qDq

Ilustracja przedstawia zrzut ekranu z eksploratora plików, otwarto pobrany i rozpakowany folder środowiska Processing. Pliki ułożone są w linii prostej, od lewej: core, java, lib, modes, tools, processing, processing‑java, revisions. Pod plikiem processing znajduje się czerwona strzałka, która wskazuje na plik.

Po wykonaniu powyższych czynności powinno ukazać się następujące okienko, przeanalizuj jego poszczególne elementy:

Programowanie w Processing

Twórcy środowiska Processing zalecają, by swoje projekty przechowywać wewnątrz folderu nazwanego przez nich szkicownikiem (ang. sketchbook). Dzięki temu projekty będą dostępne w łatwy sposób z menu File->Sketchbook. Folder ten jest ważny jednak przede wszystkim z innego powodu. To wewnątrz niego musi się znajdować folder z zewnętrznymi bibliotekami, z których chcemy korzystać (instalacja zewnętrznych bibliotek omówiona jest poniżej). Można jednak samodzielnie wybrać inny folder, korzystając z opcji z menu File->Preferences. Pierwszą rzeczą, jaką należy ustawić w oknie Preferences, jest położenie wybranego folderu szkicownika. Powinien on być wybrany tak, aby był do niego łatwy dostęp przy instalowaniu dodatkowych bibliotek. Drugą ważną opcją jest maksymalna dostępna pamięć. W sytuacji, gdy operujemy na dużej ilości plików (zwłaszcza graficznych, wideo czy audio) możemy mieć do czynienia z wyjątkiem java.lang.OutOfMemoryError, którego można uniknąć poprzez zwiększenie maksymalnej pamięć dla środowiska Processing (co jest analogiczne do zwiększania ilości pamięci dla maszyny wirtualnej Javy, bo przecież Processing powstał jako opakowanie właśnie na Javę, a obecnie rozwinął się do obsługi Android SDK oraz JavaScript). Środowisko Processing daje nam możliwość zwiększenia maksymalnej dostępnej pamięci, w tym celu należy wybrać kolejno File, Preferences oraz zaznaczyć pozycję Increase maximum available memory to..., wpisać nową wartość i zatwierdzić zmiany. Pozostałe opcje nie są już tak istotne i mogą być dowolnie konfigurowane.

Przykłady wykorzystania języka Processing

Sztuka

Prostota składni języka Processing, pozwoliła wielu osobom, które nie miały doświadczenia programistycznego w realizacji projektów bez konieczności zatrudniania specjalistów z branży IT. To czysto akademickie rozwiązanie umożliwiło wielu badaczom opracować prototypy i sprawdzić ich działanie w środowisku o bardzo dużych możliwościach graficznych i interakcyjnych bez ponoszenia znacznych nakładów finansowych. W internecie można znaleźć dużo przykładów zastosowania tej technologii przez różne grupy zawodowe. Wystarczy wspomnieć o projekcie, który wzbudził spore zainteresowanie świata sztuki. Artyści Daniel Franke (czyt. Daniel Franke) i Cedric Kiefer (czyt. Cedrik Kiefe) opracowali pomysł wirtualnej ruchomej rzeźby z piasku. Rzeźba powstała na podstawie ruchu tancerki, sczytanego przez kontroler Kinect. Animacja została zrealizowana na podstawie analizy w czasie rzeczywistym właśnie w Processing.

R6ISlZSmt2W3W

Ilustracja dotycząca projektu „Unnamed soundsculpture”. Przedstawia wirtualną ruchomą rzeźbę z piasku, która się kruszy. Dominują kolory czerni oraz szarości.

Wizualizacja danych

Naukowcy ze znanego niemieckiego Instytutu Max Planck, zwizualizowali za pomocą Processing dane około 94,000 publikacji z ostatnich dziesięciu lat zgromadzonych w portalu „SciVerse Scopus”. Zaprojektowana i zaimplementowana dynamiczna sieć pozwoliła na zwizualizowanie połączeń pomiędzy instytucjami naukowymi.

 Sieć ta pozwoliła na stworzenie interaktywnego środowiska prezentującego aktywność naukową i współpracę instytutu z innymi jednostkami na całym świecie.

RLUg8t8gOuRwI

Ilustracja przedstawia postać posługującą się ekranem dotykowym, który stanowi element wystawy Max Planck Science Gallery

Analiza fleksyjna

Stephan Thiel (czyt. Stefan Tiel)  z uniwersytetu w Adelajdzie zrealizował projekt polegający na nowoczesnym sposobie interpretacji dzieł Shakespeare. Użycie Processing pozwoliło na zliczenie słów i znalezienie istniejących relacji i powiązań pomiędzy dziełami autora.

Rzsf5KKDgHYPo

ilustracja dotycząca wizualizacji fleksyjnej analizy dzieł Szekspira wykonana w Processing przez Stephana Thiela z uniwersytetu w Adelajdzie. Na zdjęciu widocznych jest pięć stron z wierszami. Słowa wierszy są niewyraźne. Niektóre z linijek są zaznaczone żółtymi trójkątami. Pod pierwszym wierszem znajduje się napis: The comedy of Errors. Pod drugim wierszem znajduje się napis: The taming of the shrew,. Pod trzecim wierszem znajduje się napis: The two gentlemen of Verona. Pod czwartym wierszem znajduje się napis: Love’s Labour’s Lost. Pod piątym wierszem znajduje się napis: A Midsummer Night’s Dream.

Przedstawione przykłady miały za zadanie zilustrować szerokie zastosowanie technologii którą poznacie podczas najbliższych lekcji. Zdobyta wiedza pozwoli wam zrealizować ciekawe a przede wszystkim kreatywne pomysły.

Typy danych

Zmienna jest to miejsce w pamięci, w którym możemy przechowywać dane. W zależności od rodzaju danych zmienna zajmować będzie odpowiedni rozmiar pamięci. Do najczęściej stosowanych typów danych możemy zaliczyć liczby całkowite, liczby rzeczywiste, znaki (np. litery, cyfry) oraz wartości logiczne.

R1cTxrvBVut78

Przedstawiono tabelę, składającą się z następujących kolumn. Kolejno od lewej. Typ. Ilość bajtów. Zakres wartości. Przykład. Opis. W kolejnych wierszach umieszczono dane odpowiadające kolejnym kolumnom. W wierszu pierwszym. Typ. Int. Ilość bajtów. Cztery. Zakres wartości. Od minus $2\text{'}147\text{'}483\text{'}648$ do $2\text{'}147\text{'}483\text{'}647$. Przykład. A równa się jeden. Opis. Liczby całkowite. Wiersz drugi. Typ. Float. Ilość bajtów. Cztery. Zakres wartości. 3.4 E plus minus trzydzieści osiem w nawiasie siedem cyfr. Przykład. A równa się jedna dziesiąta. Opis. Liczby zmiennoprzecinkowe. Wiersz trzeci. Typ. Byte. Ilość bajtów. Jeden. Zakres wartości od zera do dwustu pięćdziesięciu pięciu. Przykład. A równa się minus jeden. Opis. Liczby jedno bajtowe. Wiersz czwarty. Typ boolen. Ilośc bajtów. Jeden. Zakres wartości. False lub true. Przykład. Tak równa się true. Opis. Typ logiczny zmienna może przyjmować wartość prawda lub fałsz, true lub false. Wiersz piąty. Color. Ilość bajtów. Cztery. Zakres wartości. Od krzyżyk 0 0 0 0 0 0 0 do krzyżyk F F F F F F. Lub od zera do dwustu pięćdziesięciu pięciu dla każdej składowej koloru. Przykład. N równa się color nawias dwieście pięćdziesiąt pięć przecinek zero przecinek zero koniec nawiasu. Lub n równa się krzyżyk F F 0 0 0 0 . Opis. Służy do przechowywania wartości koloru w postaci trzech wartości składowych RGB. Wiersz szósty. Typ. Char. Ilość bajtów. Jeden. Zakres wartości od minus stu dwudziestu ośmiu do stu dwudziestu siedmiu. Przykład. Znak równa się $\text{'}a\text{'}$. Opis. Typ znakowy, znak musi być ujęty w pojedynczy cudzysłów. Wiersz siódmy. Typ string. Kolumny ilość bajtów, zakres wartości, nie zawierają danych. Przykład. Tekst równa się $\text{'}\text{'}a\text{'}\text{'}$. Opis. Typ tekstowy, zmienna jest łańcuchem znaków przy deklaracji tekst musi być ujęty w cudzysłów.

Można określić początkową wartość zmiennej już przy jej deklaracji, można też zrobić to później, za pomocą operatora przypisania:
nazwa_zmiennej = nowa_wartość_dla_zmiennej;.
Operator = służy do przypisywania nowej wartości zmiennej. Wartość jaką przechowuje zmienna, możesz zmieniać wielokrotnie w trakcie działania aplikacji. 
Kolejną rzeczą, jest nazewnictwo zmiennych. Nazwy zmiennych nie mogą zawierać polskich znaków, znaków specjalnych (z wyjątkiem _ i $) i nie mogą zaczynać się od cyfry.

Instrukcje sterujące

Dobrą praktyką jest pisanie czytelnego oraz łatwego do zrozumienia kodu, używając struktur sterujących takich jak pętle oraz instrukcje warunkowe (m. in. if...else) do sekwencyjnego wykonywania odpowiednich instrukcji.

Processing dostarcza standardowe możliwości, które dostępne są w każdym języku programowania takie jak :

• komentarze:

To, co następuje po dwóch ukośnikach to tzw. komentarz. Processing tego nie czyta, bo są to tylko informacje dla programistów. Komentarz obejmuje wszystko, co znajduje się za znakiem podwójnego ukośnika do końca linii, lub między znakami
/* ... */

//komentarz 

/*
wszystko
pomiędzy tymi znakami
jest komentarzem
*/

• pętle: for, while,

Pętle for i while będą powtarzać ciąg instrukcji (iteracja) tak długo, jak długo zdefiniowane warunki będą prawdziwe. Pętla for jest pętlą licznikową, natomiast pętla while jest pętlą warunkową. Przeanalizuj przykłady umieszczone poniżej.

for (int i = 40; i < 80; i = i+5) { 
    line(30, i, 80, i);  
}

/* 
Metoda line(x1, y1, x2, y2) rysuje linię 
od punktu (x1, y1) do punktu (x2, y2).
*/

RNJL2SIOC06g4

Ilustracja przedstawia osiem czarnych poziomych linii na szarym tle. Linie są względem siebie równoległe. Wszystkie linie są tej samej długości.

Taki sam efekt możemy osiągnąć używając pętli while:

int i = 40;
while (i < 80) { 
    line(30, i, 80, i);  
    i = i+5;
}

• instrukcje warunkowe: if, if. . .else,

Podstawowym rodzajem instrukcji warunkowej spotykanej w większości języków programowania jest if. Instrukcja ta pozwala na wykonanie określonego bloku kodu w przypadku spełnienia określonego warunku. Jeśli warunek nie jest spełniony zostanie wykonany blok alternatywny. Pomiędzy różnymi językami programowania występują w tej instrukcji nieznaczne różnice składniowe. W Processing instrukcja ta wygląda następująco:

if(warunek) { 
    Ciąg instrukcji wykonywany jeśli warunek jest spełniony 
}  
else {  
    Ciąg instrukcji wykonywany jeśli warunek nie jest spełniony  
}

• instrukcję wyboru: switch,

int warunek = 0;
switch (warunek) {
    case 0:
        print("Wykonam się, jeżeli warunek == 0");
    break;
    case 1:
        print("Wykonam się, jeżeli warunek == 1");
    break;
    default:
        print("Wykonam się, jeżeli warunek nie przyjmuje żadnej z powyższych wartości");
    break;
}

Podobnie jak if ... else, jest to instrukcja warunkowa, tzw. instrukcja wielokrotnego wyboru. Możemy podejmować decyzje na podstawie wartości jednej zmiennej. Najczęściej wykorzystywana jest do obsługi zdarzeń (np. sterowanie za pomocą klawiatury). W zależności od wartości parametru uruchamiana jest odpowiednia akcja.

• operatory

W poniższej tabeli znajdują się najważniejsze operatory pozwalające wykonywać obliczenia oraz porównywać zmienne ze sobą.

RnUxdnEpiNhP9

Ilustracja przedstawia tabelę operatorów i ich opisy. Wartości początkowe zmienna1 = 4 . Operator Równy (==), Zwraca true, jeśli operandy są równe. Przykładowo otrzymamy prawdę, gdy: 4 == zmienna1 '4' == zmienna1 . Operator Różny (!=), Zwraca true, jeśli operandy są różne. Przykładowo otrzymamy prawdę, gdy: zmienna1 != 1 zmienna1 != „1". Operator Identyczny (===), Zwraca true, jeśli operandy są równe i tego samego typu. Przykładowo otrzymamy prawdę, gdy: 4 === zmienna1 . Operator Nieidentyczny (!==), Zwraca true, jeśli operandy nie są równe lub nie są tego samego typu. Przykładowo otrzymamy prawdę, gdy: zmiennal !== 5 5 !== „5".

R1AMqOEG41Xhl

Ilustracja przedstawia tabelkę operatorów i ich opisy. Wartości początkowe zmienna1 = 2, zmienna2 = 3, Operator Większy niż (>), Zwraca true, jeśli lewy operand jest większy od prawego operandu. Przykładowo otrzymamy prawdę w przypadku gdy: zmienna2 > zmienna1 . Operator Większy - równy (>=), Zwraca true, jeśli lewy operand jest większy lub równy prawemu operandowi. Przykładowo otrzymamy prawdę w przypadku gdy: zmienna2 >= zmienna1 zmienna2 >= 3 . Operator Mniejszy niż (<), Zwraca true, jeśli lewy operand jest mniejszy od prawego operandu. Przykładowo otrzymamy prawdę w przypadku gdy: zmienna1 < zmienna2 . Operator Mniejszy - równy (<=), Zwraca true, jeśli lewy operand jest mniejszy lub równy prawemu operandowi. Przykładowo otrzymamy prawdę w przypadku gdy: zmienna1 <= zmienna2 zmienna2 <= 3 .

R1LtXR8wfzEY4

Ilustracja przedstawia tabelkę Operatorów i ich Opisów. Jeden. Operator sumy koniunkcji. Opis. Koniunkcja to inaczej iloczyn logiczny, przykładowo true && true daje true, true && false daje false, false && true daje false, false && false daje false. Dwa. Operator alternatywy ||. Opis. Alternatywa to inaczej suma logiczna, przykładowo true || true daje true, true || false daje true, false || true daje true, false && false daje false. Trzy. Operator negacji !. Opis. Negacja, jeśli występuje przed operandem powoduje jego negację, przykładowo !(true) daje false.

R14vUJ88ID8mZ

Ilustracja przedstawia tabelkę Operatorów i ich Opisów. Jeden. Operator sumy +. Opis. Dodawanie, przykładowo 2 + 1 = Trzy. Dwa. Operator odejmowania -. Opis. Odejmowanie, przykładowo 2 - 1 = Jeden. Trzy. Operator modulo %. Opis. Modulo (reszta z dzielenia), przykładowo 14 % 5 = Cztery. Cztery. Operator dzielenia /. Opis. Dzielenie, Przykładowo 12 / 5 = 2 , 12.0 / 5.0 = 2.4 , 12 / 5.0 = 2.4 , 12.0 / 5 = 2.4 . Pięć. Operator mnożenia *. Opis. Mnożenie, przykładowo 2 * 3 = sześć. Sześć. Operator inkrementacji ++. Opis. Zwiększenie wartości o jeden, przykładowo 2++ = trzy. Siedem. Operator dekrementacji --. Opis. Zmniejszenie wartości o jeden, przykładowo 2-- = jeden.

 //komentarz 
 /*
 wszystko
 pomiędzy tymi znakami
 jest komentarzem
 */
 
 size(600,600); //Ustawienie wymiarów okna na 600 pikseli w poziomie i w pionie
 scale(5); //Zwiększenie skali rysowanych obiektów o 500%
 
 //Pętla for
 for (int i = 40; i < 80; i = i+5) { 
     line(30, i, 80, i);  
 }
 
 /* 
 Metoda line(x1, y1, x2, y2) rysuje linię 
 od punktu (x1, y1) do punktu (x2, y2).
 */
 
 //Pętla while
 /*
 var i = 40;
 while (i < 80) { 
     line(30, i, 80, i);  
     i = i+5;
 }
 */
 
 //Instrukcja warunkowa if...else
 /*
 int warunek_if = 0;
 if(warunek_if == 0) { 
     print("Ciąg instrukcji wykonywany jeśli warunek jest spełniony"); 
 }  
 else {  
     print("Ciąg instrukcji wykonywany jeśli warunek nie jest spełniony");  
 }
 */
 
 //Instrukcja wyboru switch
 /*
 int warunek_switch = 0;
 switch (warunek_switch) {
     case 0:
         print("Wykonam się, jeżeli warunek == 0");
     break;
     case 1:
         print("Wykonam się, jeżeli warunek == 1");
     break;
     default:
         print("Wykonam się, jeżeli warunek nie przyjmuje żadnej z powyższych wartości");
     break;
 }
 */

Wynikiem kodu z pętli for oraz pętli while jest osiem poziomych linii, natomiast wynikiem kodu z instrukcji warunkowej if...else oraz instrukcji wyboru switch jest fragment tekstu wypisywany w konsoli środowiska.

Kształty

Ważne!

Układ współrzędnych w Processing wygląda inaczej niż ten wykorzystywany w matematyce, tutaj punkt (0,0) znajduje się w lewym górnym rogu okna programu. Kształty w Processing składają się z punktów. Każdy punkt posiada współrzędne:

• x – współrzędna pozioma, odległość (w pikselach) od lewej krawędzi okna.

• y – współrzędna pionowa, odległość (w pikselach) od górnej krawędzi okna.

R1XXg0n00GB2c

Ilustracja przedstawia układ współrzędnych. Układ współrzędnych jest pokazany jako żółta siatkę na białym tle o wymiarach sześć na sześć. Każda pionowa i pozioma linia siatki ma przypisaną liczbę od zera do sześciu. Punkt zero, zero znajduje się w lewym górnym rogu siatki. Jst oznaczony czarną kropką. Na górze siatki widoczna jest strzałka. Strzałka ma grot zwrócony w prawo. Obok strzałki znajduje się literka: x. Po lewej stronie siatki znajduje się strzałka. Grot strzałki zwrócony jest w dół. Obok strzałki widoczna jest litera: y.

Najprostsze figury geometryczne w Processing możemy otrzymać za pomocą funkcji:

R1FdZHYqBOKR0

Przedstawiono siedem figur geometrycznych, każdą umieszczoną w ramce. W pierwszej ramce umieszczono kropkę. Obok zapisano funkcję. Point $\left(x,y\right)$. Niżej w ramce umieszczono prostą. Obok zapisano funkcję. Line. $\left(x1,y1, x2, y2\right)$. Niżej w ramce umieszczono trójkąt, o funkcji. Triangle. $\left(x1,y1,x2,y2,x3,y3\right)$. Niżej umieszczono równoległobok opisany funkcją. Quad. $\left(x1,y1,x2,y2,x3,y3,x4,y4\right)$. W kolejnej ramce umieszczono kwadrat, opisany funkcją. Rect. $\left(x,y,width,height\right)$. W kolejnej ramce umieszczono elipsę, opisaną funkcją. Ellipse. $\left(x,y,width,height\right)$. Kolejna figura to półokrąg, opisany funkcją. Bezier. $\left(x1,y1,cx1,cy1,cx2,cy2,x2,y2\right)$.

/*
Parametry kształtów w Processing

Podstaw wartości pod odpowiednie zmienne,
odkomentuj interesujące cię funkcje i przetestuj ich działanie. 
*/
size(500,500);


// Punkty
int x1 = 100;
int y1 = 100; 
int x2 = 400; 
int y2 = 400; 
int x3;
int y3; 
int x4; 
int y4; 

// Szerokość i wysokość
int w;
int h;

// Punkty kontrolne (Bezier)
int cx1;
int cy1;
int cx2;
int cy2;

//point(x1,y1);  

line(x1,y1,x2,y2); 
/*
(x1,y1) - punkt początkowy linii,
(x2,y2) - punkt końcowy linii
*/

//triangle(x1,y1,x2,y2,x3,y3);
/*
(x1,y1) - pierwszy wierzchołek trójkąta, 
(x2,y2) - drugi wierzchołek trójkąta, 
(x3,y3) - trzeci wierzchołek trójkąta
*/

//quad(x1,y1,x2,y2,x3,y3,x4,y4);
/*
(x1,y1) - pierwszy wierzchołek czworokąta,
(x2,y2) - drugi wierzchołek czworokąta,
(x3,y3) - trzeci wierzchołek czworokąta,
(x4,y4) - czwarty wierzchołek czworokąta
*/

//rect(x1,y1,w,h);
/*
(x1,y1) - lewy górny wierzchołek prostokąta
w - szerokość prostokąta
h - wysokość prostokąta
*/

//ellipse(x1,y1,w,h);
/*
(x1,y1) - punkt środkowy elipsy
w - szerokość elipsy
h - wysokość elipsy
*/

//bezier(x1,y1,cx1,cy1,cx2,cy2,x2,y2);
/*
(x1,y1) - pierwszy punkt zaczepienia
(cx1,cy1) - pierwszy punkt kontrolny
(cx2,cy2) - drugi punkt kontrolny
(x2,y2) - drugi punkt zaczepienia
*/

Kolor

Wartości jakie przyjmuje każda z funkcji odpowiedzialna za generowanie koloru to np.: background( R, G, B); Gdzie R – jest wartością z przedziału od (0‑255) dla koloru czerwonego G – jest wartością z przedziału od (0‑255) dla koloru niebieskiego B – jest wartością z przedziału od (0‑255) dla koloru zielonego

R14QrvXztb0FB

Na ilustracji przedstawiono dwie tabele. W obu z nich przedstawiono kolejno te same kolory, które zdefiniowano za pomocą funkcji na dwa sposoby. Funkcje opisujące te same kolory w tabelach są sobie równoważne. W kolumnie pierwszej przedstawiono kolor czarny. Opisany funkcją. Background $\left(0\right);$. Funkcja jest równoważny z funkcją dla koloru czarnego w tabeli drugiej, opisanego. Background. $\left(0,0,0\right);$. W kolumnie drugiej przedstawiono kolor czarny opisany. Background $\left(125\right);$. Funkcja równoważna jest funkcji w tabeli drugiej. $\left(125,125,125\right);$. W kolumnie trzeciej umieszczono kolor biały opisany funkcją. $\left(255\right);$. Funkcja jest równoważna funkcji w tabeli drugiej. $\left(255,255,255\right);$.

Oprócz wartości RGB stosowana jest też czwarta wartość – „alpha – A”, określająca przezroczystość koloru. Każda z funkcji odpowiedzialna za kolor może przyjmować więc wartości (R, G, B, A);

Metoda Setup

Processing posiada kilka predefiniowanych metod, które określają strukturę programu i odpowiadają za najważniejsze dla każdego projektu części. Pierwszą taką metodą jest funkcja setup:

void setup() {}

Jest to metoda wejściowa dla naszego programu i wewnątrz niej definiujemy wszelkie ustawienia programu (takie jak rozmiar okna, silnik renderujący itp.), inicjalizujemy obiekty klas i zmienne. Po skompilowaniu programu otrzymamy okno aplikacji o domyślnym rozmiarze 100 na 100 pikseli. Uruchomić program można na trzy sposoby:

• poprzez pierwszą od lewej ikonkę na górnym pasku (ikona „play”),

• poprzez menu Sketch->Run,

• poprzez skrót klawiaturowy Ctrl+R.

Można również samemu ustawić rozmiar okna poprzez następujące wywołanie wewnątrz funkcji setup:

size(700, 700);

Jeśli nie określimy silnika renderującego, domyślnie zostanie ustawiony silnik JAVA2D, który pozwala na operacje dwuwymiarowe. Jest on dokładny, lecz nieco wolniejszy niż silnik P2D. Dostępne opcje silników to:

• P2D (Processing 2D) – silnik dwuwymiarowy wykorzystujący możliwości kart graficznych wspierających OpenGL.

• P3D (Processing 3D) – silnik trójwymiarowy wykorzystujący możliwości kart graficznych wspierających OpenGL.

• FX2D (JavaFX 2D) – silnik dwuwymiarowy, używający JavaFX (dla niektórych aplikacji może być szybszy).

• PDF – silnik pozwalający zapisać grafikę dwuwymiarową bezpośrednio do pliku PDF, zamiast wyświetlać ją na ekranie. Co więcej, elementy wektorowe zostaną zapisane również jako wektorowe, co umożliwia późniejszą manipulację nimi w programach typu Adobe Ilustrator. Przydatny, gdy potrzebujemy wysokiej jakości grafiki do druku czy edycji.

• SVG – silnik dwuwymiarowy, który zapisuje obraz wynikowy prosto do pliku SVG.

W starszych wersjach środowiska dostępny jest również:

• OPENGL – silnik trójwymiarowy, do którego potrzebny jest sprzęt, który wspiera OpenGL, wykorzystuje bibliotekę JOGL (Java for OpenGL) i pozwala na rendering trójwymiarowy na stronach www.

• P2D oraz P3D – były to sprzętowe implementacje nie wykorzystujące silnika OpenGL.

Aby korzystać z możliwości oraz zapisu do PDF, należy zaimportować moduł PDF export, informacja jak to zrobić znajduje się w dalszej części materiału. Rodzaj silnika określa się poprzez podanie trzeciego parametru metody size np.

size(400, 200, P3D);  

//lub:  

size(400, 200, PDF, "nazwa\_pliku.pdf");

Powyższy kod jest wszystkim, czego potrzeba, by uruchomić okno dla OPENGL.

Metoda draw

Drugą istotną funkcją jest funkcja draw:

void draw() {}

Jest ona wywoływana cyklicznie w każdej klatce działania programu, zatem w niej należy umieścić kod odpowiedzialny za rysowanie i wszelkie operacje, które powinny odbywać się co klatkę. Można prześledzić to na przykładzie. Należy dodać dwie zmienne typu całkowitego do kodu programu, które będą przechowywać położenie rysowanego obiektu:

int posx = 0, posy = 0;

Linię tę trzeba umieścić poza omawianymi wcześniej metodami. Teraz w metodzie draw() można dodać rysowanie kwadratu i zwiększenie położenia jego wyrysowania:

posx = posy++;  
rect(posx, posy, 50, 50);

//Operator ++ oznacza tutaj inkrementację, czyli zwiększanie wartości o jeden.

Całość powinna wyglądać następująco:

int posx = 0, posy = 0; 

void setup() {  
    size(400, 200);  
} 

void draw() {  
    posx = posy++;  
    rect(posx, posy, 50, 50);  
}

Aby wyrysować tylko jedną klatkę lub zatrzymać animację należy skorzystać z metody noLoop(). Jeśli umieści się ją wewnątrz metody setup, program wywoła metodę draw() tylko raz:

void setup() {
    size(400, 200);
    noLoop();
}

Funkcją o działaniu odwrotnym do noLoop() jest funkcja loop(), która jest domyślnie wywoływana przy starcie programu, (jeśli nie zadeklaruje się inaczej). Jeśli do kodu zostanie dopisane wywołanie funkcji loop() na końcu metody draw(), to otrzymany efekt będzie taki, jakby w ogóle nie dodano wywołania pary loop() i noLoop(). Aby powrócić do widoku animacji należy usunąć oba wpisy (loop() oraz noLoop()).
W powyższym przykładzie kwadrat rysowany jest od lewego górnego narożnika, jednak można to zmienić, przez dodanie odpowiedniego ustawienia w metodzie setup(), dla wbudowanych funkcji rysujących kształty, czy ma on być rysowny od narożnika, czy względem środka. Dla metody rect() wygląda to następująco:

rectMode(CENTER);

By powrócić do domyślnego ustawienia, należy skorzystać z metody:

rectMode(CORNER);

Analogiczne metody istnieją dla pozostałych metod rysujących – jest to omówione w dokumentacji programu Processing.
Kolor obrysu i wypełnienia zostały ustawione na wartości domyślne. Zmienić je można przy pomocy następujących metod:

fill(0); 
stroke(255);

W powyższym przykładzie kolor wypełnienia ustawiony jest na czarny, a kolor obrysu na biały. Można także użyć innego koloru, ale zostanie to omówione później. Jeśli powyższe metody zostaną umieszczone w metodzie setup(), będą dotyczyły wszystkich rysowanych obiektów tak długo, póki nie zostaną zmienione. Można je także umieścić wewnątrz funkcji draw(). Wtedy dotyczyć będą obiektów narysowanych po ich wywołaniu. Dlatego można określić Processing jako maszynę stanową – raz ustawiony stan jest używany globalnie, aż do jego zmiany. Jeżeli chce się korzystać jedynie z wypełnienia lub tylko z obrysu, należy skorzystać z jednej z poniższych metod:

noStroke();
noFill();

Wypełnienie i/lub obrys będą wyłączone do ponownego wywołania metody ustawiającej ich kolor (czyli fill() lub stroke()).

int x;
int r;
int krok;

void setup() {
  size(500,500); // Rozmiar okna ustawiony na 500x500 pikseli
  frameRate(24); // Zmiana wyświetlania liczby klatek na sekundę
  r = 100; // Promień kuli
  krok = 5; // Krok o ile porusza się kula na jedną klatkę
  x = width/2; // Pozycja startowa na osi X kuli
  fill(0,0,0);
  background(255,255,255);
}  

void draw() {
  if ( x >= width - r/2 || x <= r/2 ) {
    krok *= -1; // Przy kolizji następuje zmiana znaku zmiennej krok
  }
  background(255,255,255);
  ellipse(x, 200, r, r);
  x += krok;
}

Metoda exit

Ostatnią główną metodą (lecz nie ostatnią dostępną), jest funkcja wyjścia. W niej należy określić wszystkie czynności konieczne do wykonania przed zamknięciem programu. Metoda ta nazywa się exit(). W metodzie tej można wyświetlić komunikat podczas zamykania programu:

void exit() {
    println("Koniec programu");
}

Po uruchomieniu programu komunikat ten jest wyświetlany, ale program nie zostanie zamknięty. Należy samemu obsłużyć zamknięcie okna aplikacji, przez dopisanie na końcu programu, instrukcji:

super.exit();

Spowoduje to wywołanie domyślnej obsługi metody exit(). Metody tej można również użyć w dowolnym miejscu kodu np. w reakcji na działanie użytkownika. Jej wywołanie spowoduje zamknięcie aplikacji. Dla testów można dopisać jej wywołanie np. na końcu metody draw(), która teraz powinna wyglądać następująco:

void draw() {
    background(100);
    posx = posy++;
    rect(posx, posy, 50, 50);
    exit();
}

Aby zapoznać się z efektem działania programu, należy jednak usunąć tę linijkę, gdyż w przypadku jej pozostawienia aplikacja momentalnie zakończy swoje działanie po uruchomieniu.

Własne funkcje i błędy kompilacji

W celu poprawienia czytelności kodu można rysowanie kwadratu przenieść do osobnej funkcji, i jej wywołanie umieścić w metodzie draw():

void draw() {
    background(100);
    posx = posy++;
    rysujKwadrat(posx, posy);
}

void rysujKwadrat(int _x, int _y){
    rect(_x, _y, 50, 50);
}

Należy pamiętać, by plik z kodem źródłowym programu znajdował się w folderze o tej samej nazwie co nazwa pliku (czyli plik „test.pde” powinien znajdować się w folderze „test”) - inaczej otrzyma się błąd. Jeśli chodzi o błędy kompilacji w środowisku Processing, warto wspomnieć o jednej, nie do końca oczywistej, właściwości tego środowiska. By to zobrazować, należy wygenerować celowy błąd, np. poprzez wywołanie nieistniejącej funkcji. Na dole okna pojawia się wtedy treść powstałego błędu oraz dodatkowo numer linii, w której on się pojawił.

RaMNP4qzm4p6j

Ilustracja przedstawia zrzut ekranu na którym widoczny jest bład w środowisku Processing. W górnej części okna znajduje się informacja: The function funkcja $\left(\right)$ does not exist. Niżej znajduje się opis problemu. The function funkcja $\left(\right)$ does not exist. Obok wskazano wartości dla Tab oraz Line.

Należy jednak uważać, bowiem w tym miejscu standardowo pojawia się numer bieżącej linii, w programie. Po kliknięciu gdziekolwiek na kod, zniknie zaznaczenie linii błędu i jej numer. Żeby się dowiedzieć o którą linię chodziło, należy ponownie uruchomić program.

Tryby pracy

Od wersji 2.0 środowisko Processing.org oferuje kilka trybów pracy (a nowe są cały czas tworzone i dodawane). Są to m. in.:

• Standard – podstawowy i domyślny tryb dostępny w Processing'u. Pozwala tworzyć i eksportować aplikacje desktop'owe jednocześnie na różne platformy (Windows, Mac OS, Linux). Umożliwia także zapis projektu jako aplet w środowisku java uruchamiany w przeglądarce (wraz ze wsparciem dla 3D), jednak to rozwiązanie nie jest już rozwijane (zamiast tego zaleca się wykorzystanie trybu JavaScript). Tryb ten zalecany jest jako domyślny podczas nauki i pisania pierwszych programów w środowisku Processing.org.

• Android – zaprezentowany po raz pierwszy w wersji 1.5 środowiska Processing.org, był pierwszym dostępnym, poza standardowym, trybem. Umożliwia tworzenie i uruchamianie projektów na urządzeniach z systemem Android. Począwszy od wersji 2.0 środowiska, wspierane są tylko wersje wyższe niż Android 2.3.3 (Gingerbread, API 10). Zanim napisze się aplikację, należy podłączyć urządzenie wykorzystując kabel USB, następnie w środowisku rozwijamy zakładkę Android, z rozwijanej listy Devices wybieramy nasze urządzenie. Teraz można uruchomić kod w języku Processing na urządzeniu z systemem Android. Dokumentację Processing dla Android znajdziesz pod linkiem: https://android.processing.org/

• p5.js – pozwala tworzyć aplikacje uruchamiane bezpośrednio z przeglądarki. Jest to biblioteka JavaScript do kreatywnego kodowania, dostarcza narzędzia, które upraszczają proces tworzenia interaktywnych wizualizacji z kodem w przeglądarce internetowej.  To rozwiązanie zastępuje aplety znane z wcześniejszych wersji środowiska. Dokumentacja znajduje się pod linkiem: https://p5js.org/

• Python - rozszerzenie do Processing, umożliwiające pisanie programów Processing w języku programowania Python. Dokumentacja znajduje się pod linkiem: https://py.processing.org/

Tryb można zmienić poprzez menu rozwijane w prawym górnym obszarze okna programu.

R1OPxy3ZcwJdp

Ilustracja przedstawia okno zmiany trybu pracy. W górnej części okna znajdują się cztery zakładki: , , , . Aktywna jest druga zakładka od lewej. Poniżej znajduje się lista trybów pracy, od góry: , , , , , , , , , .

Samo środowisko nie ulega znacznej zmianie przy zmianie trybu pracy, lecz należy mieć na uwadze w jakim trybie obecnie pracujemy, gdyż ma to wpływ na to jak powinniśmy pisać kod.

Działanie trybów przeanalizujemy na przykładzie napisanym w różnych trybach pracy. Przykładowy kod stworzy kilka kolorowych kół rysowanych na środku okna, promień koła początkowo ma wartość równą szerokości okna, następnie zmniejsza się, aż osiągnie wartość 0. W kodzie mamy zmienną kroku, która mówi o ile zmniejszany jest promień koła przy każdej iteracji.

Standard

Domyślny tryb pracy w środowisku Processing.

Szkicownik:

int promien;
int krok;

void setup() {
  size(500,500);
  background(0,0,0); // Tło koloru czarnego
  krok = 10; // Krok o jaki zmniejszamy promień
  promien = width; // Promień koła
  noLoop();
}

void draw() {
  while( promien > 0 ) {
    fill( random(256), random(256), random(256) ); // Losowy wybór koloru, funkcja random(256) zwraca liczbę z zakresu od 0 do 255.
    ellipse(width/2, width/2, promien, promien); // Koło rysowane na środku okna z zadanym promieniem.
    promien -= krok; // Zmniejszenie wartości promienia o stały krok.
  }
}

Wynik kodu:

Rk5kHMNT1H3Di

Ilustracja przedstawia kolorowe koła na czarnym tle. Najszersze koło ma promień równy szerokości ilustracji, każde kolejne jest innego koloru niż poprzednie oraz ma zmniejszony promień o pewną stałą wartość.

p5.js

Kod piszemy w języku JavaScript, struktura kodu dalej jest intuicyjna. Należy zauważyć, że chcąc zdefiniować rozmiar naszego „okna”, trzeba skorzystać z metody createCanvas(), jej dwa parametry definiują kolejno szerokość oraz wysokość naszego „okna” w przeglądarce. Należy zwrócić uwagę, że nie powinno się używać width, przed wywołaniem createCanvas(). Przy pracy w trybie p5.js oprócz szkicownika mamy do czynienia jeszcze z plikiem index.html, który jest stroną zawierającą skrypt tworzonego szkicownika. W większości przypadków ten plik powinien pozostać bez zmian.

Szkicownik:

let krok; // Krok o jaki zmniejszamy promień
let promien; // Promień koła

function setup() {
  createCanvas(500,500);
  krok = 10;
  promien = width;
  background(0,0,0); // Tło koloru czarnego
  noLoop();
}


function draw() {
  while( promien > 0 ) {
    fill( random(256), random(256), random(256) ); // Losowy wybór koloru, funkcja random(256) zwraca liczbę z zakresu od 0 do 255.
    ellipse(width/2, width/2, promien, promien); // Koło rysowane na środku okna z zadanym promieniem.
    promien -= krok; // Zmniejszenie wartości promienia o stały krok.
  }
}

Plik index.html:

R116Pot8xEE3u

Ilustracja przedstawia zawartość pliku index.html.

Wynik kodu:

RasqVVei8YQ1h

Ilustracja przedstawia zrzut ekranu obrazka w przeglądarce. Obrazek składa się z kolorowych kół na czarnym tle. Najszersze koło ma promień równy szerokości ilustracji, każde kolejne jest innego koloru niż poprzednie oraz ma zmniejszony promień o pewną stałą wartość.

Python

Kod piszemy w języku Python, struktura dalej pozostaje intuicyjna. Istotne jest, aby nadać zmiennym pewną wartość na początku, w tym przykładzie zmienna promien początkowo ma wartość 0, gdyż nie można do niej przypisać width w tym momencie ( size() nie zostało jeszcze wywołane ). Aby odwołać się do zmiennej lub zmienić jej wartość należy wykorzystać słowo kluczowe global.

Szkicownik:

krok = 10 # Krok o jaki zmniejszamy promień
promien = 0 # Promień koła

def setup():
    size(500,500)
    global promien 
    promien = width
    background(0,0,0) # Tło koloru czarnego
    noLoop()


def draw():
    global krok
    global promien 
    while( promien > 0 ):
        fill( random(256), random(256), random(256) ) # Losowy wybór koloru, funkcja random(256) zwraca liczbę z zakresu od 0 do 255.
        ellipse(width/2, width/2, promien, promien) # Koło rysowane na środku okna z zadanym promieniem.
        promien -= krok # Zmniejszenie wartości promienia o stały krok.

RoMNoIY8ONHQD

Ilustracja przedstawia kolorowe koła na czarnym tle. Najszersze koło ma promień równy szerokości ilustracji, każde kolejne jest innego koloru niż poprzednie oraz ma zmniejszony promień o pewną stałą wartość.

Instalacja zewnętrznych bibliotek

Gdy w API Processing'u nie można znaleźć potrzebnej metody czy klasy, warto poszukać dodatkowych bibliotek. Biblioteki takie znajdują się na stronie środowiska - http://processing.org/reference/libraries/ , a także na wielu innych stronach. Samo środowisko zawiera już kilka przydatnych bibliotek jak np. Video, Network czy PDF Export. Jedyne co trzeba zrobić, by zainstalować pobraną bibliotekę, to przekopiować wszystkie pliki (zachowując strukturę folderów stworzoną przez autora biblioteki) do odpowiedniego folderu. Od wersji 1.0 i wyższej, wszelkie biblioteki potrzebne do wykonania projektu umieszcza się w podfolderze „libraries” w folderze „szkicownika” (czyli jako podfolder folderu sketchbook, którego lokalizacja została ustalona wcześniej podczas konfiguracji). By dodać bibliotekę do projektu, wystarczy, że wykonasz jeden z poniższych kroków:

• skorzystaj z menu Sketch->Import Library wybierając żądaną bibliotekę,

• wpisz na początku programu słowo „import” i po spacji nazwę biblioteki wraz z pakietem, w którym się znajduje.

Niezależnie od wybranego sposobu, otrzymuje się identyczny efekt. Przykładowo, jeśli chcemy zaimportować bibliotekę do obsługi wideo, na początku pliku należy wpisać:

import processing.video.\*;

co pozwoli na korzystanie z klas i metod tej biblioteki.

RKxKZQoCG5vyG

Na zrzucie przedstawiono górny panel programu. W lewym rogu znajdują się polecenia. Kolejno od lewej. File. Edit. Sketch. Debug. Tools. Help. Po prawej stronie znajduje się przycisk Java, wokół którego znajduje się czerwona ramka.

RU1bV8Zgs7KAj

Ilustracja przedstawia okno zmiany biblioteki. W górnej części okna znajdują się cztery zakładki: , , , . Aktywna jest pierwsza zakładka od lewej. Poniżej znajduje się lista bibliotek. Na przykład. $1 Unistroke Recognizer. Niżej. (Weka4P) Weka Machine Learning for Processing. Niżej. Al. For 2D Games. Następnie. AndroidCapture for Processing. Następnie. Ani. Oraz. AP‑SYNC.

Obsługa klawiatury

Za obsługę klawiatury odpowiada kolejna główna metoda, a mianowicie:

void keyPressed() {}

Ustawienie wewnątrz niej obsługi klawiatury zapewnia, że będzie ona wykonywana w każdej klatce. Można jednak pominąć tę metodę i umieścić obsługę w każdej innej metodzie (np. draw()), gdyż nie zawiera ona żadnych parametrów. Zdarzenie klawiatury nie jest przekazywane do metody, a zachowywane w zmiennych globalnych, które zostaną omówione w dalszej części. Ta metoda gwarantuje jednak wywołanie w każdej klatce i estetykę kodu. Zamiast niej można sprawdzać flagę naciśnięcia klawisza o tej samej nazwie co metoda (czyli keyPressed()), w następujący sposób:

if(keyPressed) {
    //tutaj właściwa obsługa klawiatury
}

Zaleca się jednak korzystanie z metody keyPressed(). Aby sprawdzić, który klawisz został wciśnięty, należy użyć zmiennej globalnej key:

switch(key) {
    case 'a': bgColor = 0; break;
    case 's': bgColor = 100; break;
    case 'd': bgColor = 200; break;
}

Można dodać także zmienną bgColor, która będzie odpowiadać za zmianę koloru tła i przekazać ją jako parametr do funkcji background w metodzie rysującej. Dzięki temu, po naciśnięciu klawisza „a” tło zmieni się na czarne, po naciśnięciu klawisza „s” na ciemnoszare, a naciśnięcie klawisza „d” zmieni je na jasnoszare. Co jednak zrobić, gdy jest to klawisz specjalny, jak np. strzałka czy Enter? Należy wówczas skorzystać z kolejnej zmiennej globalnej – keyCode. Zawiera ona kod ASCII klawisza, który został wciśnięty. Aby więc dopisać obsługę zatrzymania i wznowienia animacji przy pomocy strzałek na klawiaturze należy napisać kod:

if (key == CODED) {
    switch(keyCode) {
        case UP: loop(); break;
        case DOWN: noLoop(); break;
    }
}

Powyższy przykład zawiera pewne stałe zdefiniowane w języku Processing. Łącząc oba przypadki poprzez dodanie słowa kluczowego „else” przed obsługą zwykłych klawiszy, otrzymamy kompletną obsługę klawiatury.

//Kod pionka chodzącego po szachownicy, sterowanie strzałkami

int x; // Pozycje pionka
int y;

void setup() {
  size(800,800); // Rozmiar okna 
  x = 25;
  y = 25;
}  

void draw() {
  background(255,255,255);
  // Rysowanie szachownicy
  for(int i = 0; i < width; i = i + 50) {
    for(int j = 0; j < height; j = j + 50) {
      if ((i/50 + j/50) %2 == 0) {
        fill(0, 0, 0);
      }
      else {
        fill(255, 255, 255);
      }
      rect(i, j, 50, 50);
    }
  }
  // Rysowanie pionka
  fill(255, 0, 0);
  ellipse(x, y, 40, 40);
}

void keyPressed() {
  // Obsługa wciskania klawiszy, w tym przypadku strzałek
  if (key == CODED) {
    switch(keyCode) {
      case LEFT: x -= 50; break;
      case RIGHT: x += 50; break;
      case UP: y -= 50; break;
      case DOWN: y += 50; break;
    }
  }
}

Obsługa myszy

Obsługa myszy, tak jak w przypadku klawiatury, możliwa jest na dwa sposoby. Najczęściej wykorzystuje się zmienne globalne (dostępne w każdym miejscu programu) przechowujące położenie kursora myszy: mouseX oraz mouseY. Po zakomentowaniu wywołania utworzonej poprzednio funkcji rysującej kwadrat, można napisać wywołanie rysowania z położeniem kursora myszy jako pozycją tworzonego kwadratu. Dodając do tego poznaną wcześniej metodę, by rysować kwadrat od środka, otrzyma się efekt podążania kwadratu za kursorem myszy (kursor w środku obiektu). Fragment kodu za to odpowiedzialny powinien wglądać następująco:

//rysujKwadrat(posx, posy);
rectMode(CENTER);
rect(mouseX,mouseY,50,50);

Główną metodą, odpowiadającą za obsługę kliknięcia myszy jest mousePressed() bez żadnych parametrów. Jeśli umieści się ją w programie i przeniesie do niej napisane przed chwilą dwie linie rysujące kwadrat, to otrzyma się białe tło i „mignięcie” kwadratu przy kliknięciu przycisku myszy. Dlaczego tak się dzieje? Co należy zmienić w kodzie, by rysowany kwadrat pozostawał widoczny? Trzeba zakomentować (lub usunąć) pierwszą linię w metodzie draw(), czyli wypełnienie tła kolorem. Alternatywnie można ją przenieść do metody setup, dzięki czemu będzie wywołana tylko raz z zadanym kolorem jako parametr. Teraz rysowany na kliknięcie kwadrat powinien pozostawać na obrazie. Dodatkowo można sprawdzić, który przycisk został wciśnięty. Do tego celu służy kolejna globalna zmienna - mouseButton(). Najlepiej zobrazuje to poniższy przykład:

switch(mouseButton) {
    case LEFT: println("Wciśnięto LEWY przycisk"); break;
    case RIGHT: println("Wciśnięto PRAWY przycisk"); break;
    case CENTER: println("Wciśnięto ŚRODKOWY przycisk"); break;
}

Inne przydatne podczas obsługi myszy metody to:

• mouseClicked() - dla obsługi kliknięcia (w przeciwieństwie do naciśnięcia jest to złożenie dwóch akcji – wciśnięcia i puszczenia przycisku myszy),

• mouseDragged() - dla obsługi przeciągania,

• mouseMoved() - dla obsługi ruchu myszą (bez wciśnięcia przycisku myszy),

• mouseReleased() - odwrotne niż mousePressed() - puszczenie przycisku myszy.

// Kod ustawiający kolor tła przy wciskaniu przycisku myszy

int r; // Składowe koloru tła
int g;
int b;

int rect_r; // Składowe koloru kwadratu w lewym górnym rogu okna
int rect_g;
int rect_b;

void setup() {
  size(765,765); // Rozmiar okna 
  r = 255;
  g = 255;
  b = 255;
  rect_r = 255;
  rect_g = 255;
  rect_b = 255;
}  

void draw() {
  background(r,g,b); // Aktualizowanie zmiennych na podstawie nowych wartości
  fill(rect_r, rect_g, rect_b);
  rect(0, 0, 50, 50);
}

void mousePressed() {
  // Kliknięcie myszą powoduje ustawienie koloru z kwadratu na tło
  r = mouseX/3;
  g = mouseY/3;
  b = r - g;
}

void mouseMoved() {
  // Poruszając myszą zmieniamy kolor kwadratu
  rect_r = mouseX/3;
  rect_g = mouseY/3;
  rect_b = r - g;
}

void mouseReleased() {
  // Po puszczeniu przycisku myszy w konsoli wyświetlamy wartości
  print("R: " + r + " G: " + g + " B: " + b + "\n");
}

Operowanie na plikach wektorowych

size(400,400);
rectMode(CENTER); 
pushMatrix(); // Zapisanie początkowego układu współrzędnych

// Przeskalowanie układu współrzędnych
// Wzdłuż osi X o 200%
//scale(2,1);


// Rysowanie prostokąta na dwa sposoby
// W punkcie (100, 200)
rect(100, 200, 50, 50);  // Pierwszy
//translate(100, 200);  // Drugi
//rect(0, 0, 50, 50);   // Drugi


// Rysowanie prostokąta w (100, 200)
// Obrócony o 45 stopni na dwa sposoby
/*
popMatrix(); // Przywrócenie początkowego układu współrzędnych
translate(100, 200);
rotate(PI/4); // Pierwszy
//rotate(radians(45)); // Drugi
rect(0,0,50,50);
*/

Linijka 10‑14

Transformacje w języku Processing działają w taki sposób, że przekształcany jest cały obecny układ współrzędnych. Zatem można narysować przykładowo prostokąt w punkcie (100, 200) na dwa sposoby.

Pierwszy przypadek jest oczywisty, natomiast w drugim najpierw przenosi się cały układ do zadanego punktu, a następnie rysuje obiekt.

Linijka 17‑25

Aby narysować kwadrat również w punkcie (100, 200), ale obrócony o 45 stopni, trzeba skorzystać ze złożenia przekształceń – translacji oraz obrotu. Jako argument metoda rotate() przyjmuje kąt, którego wartość podajemy w radianach. Jeśli kąt obrotu określony jest w stopniach, to należy skorzystać z metody radians(), konwertującej stopnie na radiany.

Linijka 5‑7

Trzecią przydatną transformacją jest skalowanie, czyli operacją zmiany proporcji wymiarów względem początku układu współrzędnych – metoda scale(), której przekazuje się procentowe wartości o ile chcemy przeskalować wzdłuż osi X oraz Y.

Operowanie na obrazach rastrowych.

W dalszej części potrzebny będzie obrazek, możesz wykorzystać własny obrazek lub pobrać przykładowy poniżej.

Aby pracować na poziomie pikseli obrazu, należy wykonać kilka kroków, a mianowicie: załadować piksele, dokonać zmian na nich, zaktualizować piksele na obrazie. Ten proces pokazany jest na przykładzie funkcji zmieniającej wyświetlany obraz na negatyw.

/*
Odwrócenie koloru poprzez odjęcie od maksymalnej wartości (255) 
obecnej wartości koloru w danym pikselu, a następnie ustawienie
nowego koloru piksela.
*/

PImage img;

void setup() {
  size(500, 500);
  img = loadImage("duck.jpg");
  noLoop(); // Chcemy wyświetlić obrazek tylko raz
}

void draw() {
    image(img, 0, 0, width, height);
    //invertColors(); // Odkomentuj, aby przetestować działanie
}

void invertColors() {
  loadPixels(); // Pobranie pikseli obecnego obrazu
  for(int x=0; x < width; x++) {
    for(int y=0; y < height; y++) {
      float R = 255 - red(pixels[x*width + y]); // Nowy kolor czerwony
      float G = 255 - green(pixels[x*width + y]); // Nowy kolor zielony
      float B = 255 - blue(pixels[x*width + y]); // Nowy kolor niebieski
      pixels[x*width + y] = color(R,G,B); // Piksel złożony z wyliczonych składowych
    }
   }
  updatePixels(); // Wyświetlenie nowej tablicy pixels
}

Linijka 7

Będziemy pracować na pikselach wczytanych obrazów. Należy w tym celu utworzyć zmienna globalną, która będzie przechowywała wczytany obraz. Typ PImage to typ danej obrazu.

Linijka 11

Wczytujemy przykładowy obraz do zmiennej o nazwie img. Można użyć dowolnego obrazu (obsługiwane typy plików to .gif, .jpg, .tga, .png). Przy tak podanej ścieżce musi się on znajdować w folderze projektu (tam gdzie plik .pde).

Linijka 16

W ten sposób wskazany obrazek zostanie wyrysowany począwszy od punktu (0, 0). Oprócz położenia, jako kolejne dwa parametry można przekazać do metody image() rozmiar, do jakiego należy przeskalować obrazek, w naszym przypadku jest to szerokość i wysokość okna.

Linijka 20‑31

Metoda loadPixels() służy do załadowania pikseli obrazu (w tym przypadku obrazek z małą kaczką) do tablicy pixels, którą później wykorzystuje się do przeprowadzenia zmian. Jest to tablica jednowymiarowa, a więc można zastosować następującą pętlę:

Jednak częściej trzeba poruszać się po obrazie w dwóch wymiarach. Wymaga to indeksowania tablicy jednowymiarowej tak, jakby była dwuwymiarową.

int [] tablica1 = {1, 2, 3, 4, 5, 6, 7, 8, 9};
int [][] tablica2 = { {1, 2, 3}, 
                      {4, 5, 6}, 
                      {7, 8, 9} };

for(int i=0; i < 3; i++) {
    for(int j=0; j < 3; j++) {
        print("Tablica dwuwymiarowa:",tablica2[i][j],"\n");
        print("Tablica jednowymiarowa:",tablica1[i*3 + j],"\n");
        //Mnożymy i*3, ponieważ tablica2 ma wymiary 3 na 3
        print("\n"); // \n oznacza znak nowego wiersza
    }
}

RwKqhkoqHGiHx

Ilustracja przedstawia okno konsoli w środowisku Processing, na zmianę wypisane są: Tablica jednowymiarowa, wartość, Tablica dwuwymiarowa, wartość. Wartości to liczby od 1 do 9. Są one takie same dla obu tablic przy każdym kolejnym wypisaniu.

Globalne właściwości width oraz height odnoszą się do wymiarów obrazu (są identyczne z wartością ustawioną poprzez size()). Metody red, green oraz blue pozwalają pobrać odpowiednie składowe koloru, by je zmodyfikować. Po dokonaniu zmian (odwróceniu koloru), można zapisać kolor piksela przy wykorzystaniu metody color() z parametrami, odpowiednio – składową czerwoną, zieloną i niebieską koloru. Ostatnim krokiem jest zaktualizowanie pikseli wyświetlanych na ekranie – updatePixels(). By uniknąć nieprzyjemnych efektów zmiany pikseli na obrazie podczas jego wyświetlania, należy je zmodyfikować w osobnym buforze (tablica pixels), po czym zamienić te tablice.

Dodatkowe informacje na temat metody image() można znaleźć w dokumentacji
http://processing.org/reference/image_.html

Wczytywanie i zapis plików

Aby zapisać utworzony plik obrazu stosuje się instrukcję:

saveFrame("output.png");

Zapisanie więcej niż jednego obrazu (jednej klatki) lub serii klatek, można wykonać poprzez odpowiednią konstrukcję nazwy pliku wyjściowego:

saveFrame("output-###.png");

Spowoduje to zapis każdej klatki do pliku z odpowiednią nazwą tj. output-001.png, output-002.png itd. Jednak przed uruchomieniem powyższego przykładu należy dodać w metodzie setup() jeszcze ustawienie liczby klatek na sekundę:

Umieść pobrany plik tekstowy w folderze projektu.

String[] linie;

void setup() {
  // Wczytanie zawartośc poprzez podanie ścieżki pliku
  linie = loadStrings("plik.txt");
  
  // Wczytanie zawartości poprzez wybór pliku 
  // Drugi parametr to nazwa funkcji, która się wykona po wybraniu pliku
  //selectInput("Wybierz plik", "wybierz_plik");
}

void draw() {
  if (linie != null) {
    // Wyświetlamy zawartość raz, ale sprawdzamy czy plik został wybrany
    noLoop(); 
    String[] daneLinii = splitTokens(linie[0], ":" );
    print("Zawartość pliku w tablicy daneLinii (indeks: zawartość):" + "\n");
    for (int i = 0; i < daneLinii.length; i = i + 1) {
      print(i + ": " + daneLinii[i] + "\n");
    }
    
    // Zapis do pliku (domyślnie jeden element na jedną linijkę pliku)
    saveStrings("nowy_plik.txt", daneLinii);
  }
}

void wybierz_plik(File wybrany_plik) {
  if (wybrany_plik == null) {
    print("Okno zostało zamknięte lub użytkownik anulował wybór.");
    super.exit(); // Zakończenie działania programu
  } else {
    print("Użytkownik wybrał: " + wybrany_plik.getAbsolutePath() + "\n");
    linie = loadStrings(wybrany_plik.getName());
  }
}

Linijka 4‑5

W metodzie setup() wczytujemy zawartość tekstową pliku do wcześniej przygotowanej zmiennej poprzez podanie ścieżki do pliku.

Linijka 7‑9

W metodzie setup() wczytujemy zawartość tekstową pliku do wcześniej przygotowanej zmiennej poprzez wybór pliku. Zostaje otworzone okno dialogowe do wyboru pliku, następnie należy sprawdzić, czy plik został wybrany, czy naciśnięto przycisk „anuluj” lub pojawił się inny błąd, co spowodowało, że zmienna jest pusta. Wtedy można wyświetlić stosowny komunikat lub zakończyć działanie programu. Jeśli nie ma błędu, można zacząć pracę z zawartością pliku. W powyższym kodzie tego sprawdzenia dokonuje funkcja wybierz_plik(File wybrany_plik). Wczytywać dane można z wielu innych formatów plików oraz źródeł – wystarczy zajrzeć do dokumentacji lub przejrzeć dodatkowe biblioteki. Często wykorzystywany jest format XML.

Linijka 27‑35

Zanim wybierzemy plik, należy zdefiniować funkcję, która będzie obsługiwać ewentualne błędy przy wczytywaniu oraz będzie decydować jak plik zostanie wykorzystany. W powyższym przykładzie, jeśli wystąpi błąd, kończone jest działanie programu. Ścieżkę w postaci tekstu otrzymujemy wywołując wybrany_plik.getAbsolutePath(), natomiast sam plik wczytujemy podobnie jak w pierwszym sposobie, tutaj dostajemy nazwę pliku wywołując wybrany_plik.getName().

Linijka 13‑15

Zanim wykona się kolejne akcje, należy sprawdzić czy zmienna linie nie jest pusta, jeśli jest oznacza to, że plik nie został jeszcze wczytany. Po przypisaniu wartości zmiennej linie nie ma potrzeby, aby funkcja draw() wykonywała się w nieskończoność. Zastosujemy tu omawianą wcześniej metodę noLoop().

Linijka 16

Kolejne linie pliku zostaną wczytane jako osobne elementy tablicy typu String. Załóżmy, że każda linia zawiera dane oddzielone od siebie pewnym charakterystycznym znakiem, np. „:”. By uzyskać dostęp do poszczególnych treści (czyli rozdzielić linię na fragmenty oddzielone dwukropkami) można się posłużyć metodą splitTokens() podając jako parametr ciąg znaków do podziału oraz znak (lub znaki, bo możemy podać ich kilka naraz) podziału.

Linijka 17‑20

Wyświetlona zostanie zawartość tablicy daneLinii, wraz z odpowiadającymi im indeksami.

Linijka 22‑23

Najpierw należy podać nazwę pliku, który zostanie utworzony (jeśli taki plik już istnieje, zostanie nadpisany), natomiast daneLinii to tablica (tablica String[]), w której każdy element to kolejna linia pliku, który zapisujemy.

Podsumowanie

Doskonalenie umiejętności programowania wymaga czegoś więcej niż tylko przyswajania wiedzy teoretycznej. Dokumentacje i poradniki są doskonałym źródłem informacji, jednak prawdziwą biegłość zdobywa się poprzez praktykę – tworzenie własnych projektów. Proces ten bywa wymagający: pojawiają się problemy, które trzeba rozwiązać, oraz błędy, które należy poprawić. Nie zniechęcaj się jednak, bo każdy dzień poświęcony na praktykę czyni cię lepszym programistą. Dobrym początkiem może być przygotowanie przewodnika multimedialnego, wzbogaconego o obrazy, nagrania wideo i ścieżkę dźwiękową. Więcej szczegółów znajdziesz na następnej stronie, w materiale poświęconym tworzeniu przewodnika po największych miastach Polski.

W poniższym notesie zapisuj notatki lub ważne informacje dotyczące tego materiału.