Interakcje wizualno-muzyczne Processing w programowaniu obrazu Piotr Welk 18 20 marca 2011
Processing jest środowiskiem programowania dla ludzi tworzących obrazy, animacje, wizualne i interaktywne eksperymenty. Stworzony był z myślą o zastosowaniach edukacyjnych, miał służyć poznawaniu podstaw programowania i budowania obrazu. Rozwinął się i stał się narzędziem w pełni profesjonalnym a przy tym wystarczająco łatwym do opanowania. Posługują się nim nie tylko ludzie z przygotowaniem informatycznym, ale także artyści, studenci. Za jego pomocą powstało szereg niezwykle interesujących prac, które pokazywane są w galeriach i muzeach na całym świecie. Moullinex Catalina by Luis Clara Gomes, Luis Calçada http://moullinex.tumblr.com/ Strata by Quayola http://www.quayola.com/index.php?/strata-3-bordeaux/ Barbarian Group - http://www.flight404.com/blog/?p=99 1
Instalacja programu Processing jest oprogramowaniem typu open source. Dostępne jest na platformy Windows, Linux i Mac OSX. Możemy pobrać je ze strony autorów: http://www.processing.org/download/ na stronie tej możemy znaleźć przykłady programów, materiały i pomoc do samodzielnej nauki programowania, oraz pełen opis dostępnych w processingu funkcji. http://www.processing.org/reference/ http://www.processing.org/learning/ http://www.processing.org/exhibition/ na stronie też podane są linki do bibliotek programistycznych rozszerzających w znacznym stopniu możliwości dostępne w processingu http://www.processing.org/reference/libraries/ Interfejs programu Processing Processing jest gotowy do pracy zaraz po zainstalowaniu. Wymaga zainstalowania środowiska Java na komputerze, na którym pracuje. W większości przypadków jest ono zainstalowane w systemie. Interfejs programu podzielony jest na wyraźne sekcje, od góry: Pasek narzędzi, zakładki klas programu. Okno edytora tekstowego. Pasek komunikatów zwracanych w trakcie kompilowania programu. Konsola służąca do odbierania komunikatów podczas uruchomienia programu. 2
Struktura kodu Przykład 1 size(400,400); nostroke(); fill(0); rect(width/4, height/4, width/2, height/2); Najprostszy układ programu w procesingu - kod instrukcji wpisywany linia po linii w kolejności jakiej mają one zostać wykonane. Pierwsza linia programu określa wielkość ekranu wykonawczego programu. Następna odpowiada za kolor tła. Potem wyłączone jest rysowanie konturu kształtu i nadanie koloru wypełnienia. Ostatnia linia rysuje kwadrat o określonych wymiarach. Jest to najprostszy sposób tworzenia programu. Prosty kod składający się z 5 linii bez widocznie zaznaczonej struktury. Trudno jest sobie wyobrazić pisanie bardziej skomplikowanego zadania w ten sposób, bo większa ilość instrukcji powodowałaby ogromne trudności w odczytywaniu i interpretacji kodu, powodowałaby także konieczność wielokrotnego przepisywania elementów kodu w trakcie wykonywania np. animacji. Oczywiście można w ten sposób pisać programy, wiele elementów programowania pokazanych dalej będzie korzystać z tej metody. Przykład 2 size(400,400); nostroke(); rect(width/4, height/4, width/2, height/2); fill(0); Prawie identyczny program, jednak wynikiem jego działania jest puste okno wynikowe. Dzieje się tak dlatego że zmieniając kolejność linii programu w tym przypadku, tworzymy kwadrat zanim zadeklarujemy jego wypełnienie fill(0);, które odpowiada za nadanie mu koloru czarnego. Kwadrat zostaje narysowany, ale ma kolor tła, więc nie jest dla nas widoczny. 3
Przykład 3 void setup() { size(400,400); nostroke(); float mycolor = getrandomcolor(); fill(mycolor); rect(width/4, height/4, width/2, height/2); float getrandomcolor() { return random(255); kolejna modyfikacja ze zmienioną strukturą kodu, poniżej przykładowe wyniki jego działania. Program nadal generuje kwadrat na białym tle, ale jest nieco bardziej skomplikowany. Pojawiają się nawiasy klamrowe po nazwach funkcji, służą one do grupowania linii kodu potrzebne do wykonania określonej funkcji programu. Program został wyraźnie podzielony na dwie części: void setup(){ float getrandomcolor(){. Przed nawiasami klamrowymi po nazwie funkcji pojawiły się także nawiasy normalne. Świadczą one zawsze że mamy odczynienia z funkcją. W tym przypadku są one puste ponieważ nie zawsze wymagają one parametrów, ale mogą także zawierać liczby lub zmienne. Zawsze jednak po nazwie funkcji muszą się one pojawić, gdyż wymaga tego składnia programu. Jedna z linii kodu wygląda nieco inaczej float mycolor = ; - jest to zmienna. Zmienna jest to przechowywana w pamięci komputera wartość o określonej konstrukcji do której program może wielokrotnie się odwoływać. Nawet kiedy zmieniają się wartości przechowywane przez zmienną, jest ona w każdym momencie dostępna dla programu poprzez wywołanie jej nazwy. Float to określenie typy zmiennej numerycznej, mycolor jest nazwą tej zmiennej. float mycolor = getrandomcolor(); powyższa linia kodu przypisuje zmiennej mycolor wartość jaką zwraca wywoływana funkcja getrandomcolor();. 4
Linie kodu z zadeklarowane w funkcji setup są wykonywane kolejno ale wywołane jest przypisanie do zmiennej getrandomcolor();, zanim wykonana zostanie następna linia program wykonuje instrukcje zawarte w deklaracji tej funkcji. Na moment przeskakuje więc do kolejnej części kodu by wykonać tam zawarte instrukcje. float getrandomcolor() { return random(255); return random(255) zwraca losową wartość numeryczną z przedziału od 0 do 255. Wynik działania programu będzie więc za każdym jego uruchomieniem różnił się szarością jaką wypełniony jest kwadrat. Przykład 4 void setup() { size(400,400); nostroke(); float mycolor = getrandomcolor(); fill(mycolor); rect(width/4, height/4, width/2, height/2); fill(getrandomcolor()); rect(width/3, height/3, width/3, height/3); fill(getrandomcolor()); rect(width/2.5, height/2.5, width/5, height/5); float getrandomcolor() { return random(255); Kolejna modyfikacja programu pokazuje możliwość bezpośredniego przypisania wartość zwracanej przez funkcję getrandomcolor() jako parametru dla funkcji fill(); 5
Pierwszy program w środowisku Processing Przykład 5 void setup() { //deklarujemy wielkość okna wykonawczego size(400,400); // kolor tla //linia o początku w punkcie (0,0) i końcu w punkcie (400, 400) line(0,0,400,400); // - znak ten oznacza jedną linie komentarza (szary kolor w oknie edytora kodu) Większą ilość linii komentarza wymaga użycia następującej składni: /** komentarz */. lub /** komentarz */ Komentarze są pomijane podczas kompilacji programu. Kod używany w processingu jest zwykłym plikiem tekstowym dlatego wszystkie przykłady pochodzące z tego skryptu mogą być skopiowane do okna edytora tekstowego i uruchomione. Organizacja przestrzeni dwu i trójwymiarowej w środowisku Processing. W oknie wykonawczym przestrzeń określają osie x i y a ich punkt 0,0 znajduje się w lewym górnym rogu. 6
PFont font; void setup() { size(400,400); fill(255); ellipsemode(center); void draw() { background(155); for (float i=0; i<400; i=i+20) { for (float j=0; j<400; j=j+20) { strokeweight(1); stroke(120); line(0,i,width,i); line(i,0,i,height); strokeweight(2); stroke(255,0,0); nofill(); ellipse(0,0,10,10); fill(255,0,0); text("x = 0; y = 0", 20, 20); stroke(0,0,255); nofill(); ellipse(100,100,10,10); fill(0,0,255); text("x = 100; y = 100", 120, 120); stroke(0,255,0); nofill(); ellipse(mousex,mousey,10,10); fill(0,255,0); text("x = "+mousex+"; y = "+mousey, mousex+20, mousey+20); Program ten demonstruje w jaki jest układ przestrzeni w processingu. 7
Kształty Najprostsze figury geometryczne dostępne w processingu to: point(x,y); line(x1, y1, x2, y2); triangle(x1, y1, x2, y2,x3,y3); quad (x1, y1, x2, y2,x3,y3,x4,y4); rect(x,y,width,height); ellipse(x,y,width,height); bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2); Znając dostępne figury jakimi dysponujemy w programie możemy przejść do wykonania pierwszego rysunku. 8
Przykład 6 void setup() { size(400,400); fill(255,255,0); ellipse(200, 200, 200, 200); bezier(120,200, 120, 300, 280, 300, 280, 200); fill(255); ellipse(160, 180, 30, 30); ellipse(240, 180, 30, 30); fill(255,0,0); ellipse(200, 220, 50, 50); Kolor Monitory komputerowe, projektory generują światło, wykorzystując addytywny sposób mieszania kolorów (światło widzialne). Kolor biały uzyskiwany jest przez zmieszanie ze sobą kolorów czerwonego, niebieskiego i zielonego, odpowiednio RGB. Im większe wartość tym jaśniejsze uzyskujemy kolory. Wartości jakie przyjmują R G i B mieszczą się w przedziale od 0 do 255. Równomierne proporcje pomiędzy poszczególnymi barwami daje nam odcień szary (w zależności od wartości bliżej koloru białego lub czarnego). Jeśli w funkcjach które związane są z generowaniem koloru pojawia się tylko jedna wartość, procesinng będzie interpretował je jako odcień szarości, bo dla każdego ze składowych koloru przypisze tą samą wartość. background(0); background(125); będzie równoważne z: background(0,0,0); background(125, 125, 125); background(255, 255,255); 9
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 background(255,0,0); background(0,255,0); background(0,0,255); Oprócz wartości RGB stosowana jest też czwarta określająca przezroczystość koloru alpha A Każda z funkji odpowiedzialna za kolor może przyjmować więc wartości (R, G, B, A); Przykład 7 size(200, 200); fill(100,120); rect(0,10,43,43); fill(100,60); rect(33,20,43,43); fill(100,10); rect(66,30,43,43); Funkcja związane z kolorem to np.: Background(); - określa kolor tła okna wykonawczego Fill (); - kolor wypełnienia generowanych kształtów Stroke(); - kolor krawędzi generowanych kształtów 10
Pętle Przy budowaniu bardziej skomplikowanych obrazów często musimy wykonywać kilkakrotnie tę samo instrukcję. Przykład 8 size(400, 400); rect(0,0,10,10); rect(0,20,10,10); rect(0,40,10,10); rect(0,60,10,10); rect(0,80,10,10); rect(0,100,10,10); rect(0,120,10,10); rect(0,140,10,10); rect(0,160,10,10); rect(0,180,10,10); rect(0,200,10,10); rect(0,220,10,10); rect(0,240,10,10); rect(0,260,10,10); rect(0,280,10,10); rect(0,300,10,10); rect(0,320,10,10); rect(0,340,10,10); rect(0,360,10,10); rect(0,380,10,10); Wielokrotnie powtarzamy tą samą instrukcję zmieniając tylko jedna z wartości. Pętle są funkcjami, które znacznie przyspieszają tego rodzaju operacje, skracając także ilość kodu jaki musimy zapisać. 11
Przykład 9 == Przykład 8 Użyjemy w tym przykładzie pętli: składnia for (init; test; update) { statements Init deklaruje początkową wartość zmiennej Test sprawdza czy prawdziwy jest warunek zadeklarowany dla niej Update zmienia po wykonaniu operacji w nawiasie klamrowym wartość przypisana dla zmiennej size(400, 400); for(int i = 0; i<400; i = i+20) { rect(0,i,10,10); utworzyliśmy program wykonujący dokładnie taki sam rysunek ale znacznie skracając zapis. Przykład 10 Pętle mogą być także osadzone jedna w drugiej Jeśli dodamy do naszego programu następująca zmianę size(400, 400); //pierwsza pętla określająca przesunięcie w osi y for(int i = 0; i<400; i = i+20) { // druga pętla określająca przesunięcie w osi x for(int j=0; j<400; j = j + 20) { rect(j,i,10,10); 12
Powtarzalna struktura kodu Do tej pory widzieliśmy prostą strukturę kodu wykonywanego linia po linii, a program kończył swoje działanie wraz z ostatnią wykonana instrukcją. Innym rodzajem struktury programowej jest powtarzanie kodu. void setup(){ void draw(){ funkcja draw() będzie wykonywana ciągle zaraz po wykonaniu instrukcji setup(), do czasu kiedy przerwiemy wykonywanie programu lub uruchomimy inną instrukcją np.: nolooop() która przerywa powtarzanie kodu zawartego w funkcji draw(). W ten sposób możemy w processingu uzyskać efekt ruchu. Przykład 11 float i = 0; void setup() { size(400, 400); framerate(5); void draw() { background(0); if(i < 400) { rect(200,i,10,10); i = i+10; else { i=0; efektem działania programu jest poruszający się z góry na dół kwadrat. 13
Jak działa taki program: Na początku deklarujemy wartość zmiennej i float i = 0; następnie funkcję setup() która ustawia nam wielkość okna programu. framerate(5); pozwala wymusić przerysowywania okna z prędkością 5 ramek na sek. Pominięcie tej linii spowoduje że processing będzie przerysowywał zawartość okna z maksymalną możliwą dla systemu prędkością. Następna linia to wywołanie funkcji draw() tę część kodu procesing będzie wykonywał ciągle powtarzając ja po każdym jej zakończeniu. Background ustawia wartość tła za każdym razem przed wykonaniem kolejnej instrukcji, za każdym razem zasłaniając poprzednio narysowane układy. If(warunek){ sprawdza czy prawdziwy jest parametr funkcji; jeśli tak, to wykonywane jest rysowanie kwadratu rect (200, i, 10,10); o wartości dla x = 200 - w tym przypadku w połowie szerokości okna programu - położenie kwadratu w osi y przyjmuje wartość zmiennej i dlatego po wykonaniu kolejnej instrukcji i = i + 10 realizowane jest przesunięcie białego kwadratu o 10 pikseli w pionie else{ jest dalszą częścią funkcji if(). W momencie, kiedy po sprawdzeniu warunku zwracana jest wartość false, wykonywane jest przypisanie nowej wartości zmiennej i = 0, dzięki czemu kwadrat rysowany jest znowu z punktu początkowego. Najprostsze operacje matematyczne Kiedy wykonywana była instrukcja i = i +10 do wartości zmiennej dodawaliśmy inną. Poza prostym dodawaniem, na zmiennych i liczbach możemy wykonywać także inne działania matematyczne + dodawanie - odejmowanie * mnożenie / dzielenie = przypisywanie (= nie oznacza wyniku działania a przypisanie nowej wartości) < mniejszy niż > większy niż 14
Animacje i interakcje W Przykładzie 11 poznaliśmy sposób jak dzięki powtarzalności kodu otrzymujemy efekt ruchu w środowisku Processing. Dzięki wykonywaniu powtórzeń mogliśmy zmieniać wartości położenia rysowanego kwadratu. Ale także dzięki tej własności możemy wprowadzić do programu elementy interakcji. Najprostszym tego przykładem jest sprawdzanie położenia wskaźnika myszki na oknie wykonawczym za każdym powtórzeniem wykonywanego kodu. Przykład 12 float i = 0; void setup() { size(400, 400); void draw() { float i = norm(mousex,0,400); fill(i*255); rect(20,20,360,360); Program rysuje kwadrat którego kolor wypełnienia zależny jest od położenia myszki w osi x. mousex zwraca położenie kursora myszy względem osi x okna wykonawczego mousey zwraca położenie kursora myszy względem osi y okna wykonawczego nowością jest wartość przypisana zmiennej i norm(wartość, min, max); pozwala zamienić dowolna wartość z przedziału min, max na wartość pomiędzy 0 a 1. Dzięki tej funkcji znana nam wielkość okna (w tym przypadku szerokość 400), i pozycja myszy w osi X mousex zwraca wartości pomiędzy 0 a 400. Aby zamienić tą liczbę na wartość koloru, która mieści się w przedziale 0 255 dokonujemy jej normalizacji. Otrzymana wartość z przedziału 0 i 1, dalej wystarczy przemnożyć poprzez maksymalna wartość jaką przyjmuje kolor czyli 255 stąd: float i = norm(mousex,0,400); W ten sposób możemy dokonywać prostej konwersji różniących się wartości, tak by poruszać się w ich maksymalnych zakresach. 15
Ruch po okręgu trygonometria Przykład 13 size(400,400,p2d); smooth(); for(float i = 0; i<width; ++i) { point(i, sin(radians(i))*100+height/2); Przykład 14 size(400,400,p2d); smooth(); background(25); for(float i = 0; i<width; ++i) { //wykres funkcji sinus - kolor czerony stroke(255,0,0); point(i, sin(radians(i))*100+height/2); //wykres funkcji sinus - kolor zielony stroke(0,255,0); point(i, cos(radians(i))*100+height/2); wykres funkcji sinus wygenerowany przez program powyżej Wykresy są identyczne dla obu funkcji ale przesunięte w fazie. 16
Wykorzystajmy to modyfikując program tak by jedna z funkcji określała wartość x druga y rysowanego punktu. Przykład 15 size(400,400,p2d); smooth(); background(25); for(float i = 0; i<width; ++i) { //wykres funkcji sinus - kolor czerony stroke(255,0,0); point(cos(radians(i))*100+height/2, sin(radians(i))*100+height/2); dla wartości x = cos(kąt w radianach) y = sin(kąt w radianach) 17
Przykład 16 size(400,400,p2d); smooth(); background(25); for(float i = 0; i<4000; ++i) { //wykres funkcji sinus - kolor czerwony stroke(255,0,0); point(cos(radians(i))*i/10+height/2, sin(radians(i))*i/10+height/2); Efekty drobnych modyfikacji zmiennych w Przykładzie 16. Ruch w przyrodzie jest bardziej skomplikowany, ale każdy można rozłożyć na proste elementy. Translation: zmiany położenia przestrzeni Punkt 0,0 dla osi X i Y w processingu położony jest w lewym górnym rogu okna wykonawczego. Aby uzyskać rysunek kwadratu w innym miejscu przestrzeni musimy zmienić parametry jego położenia. 18
szary kwadrat rect(20,20, 40,40) przesunięty w położenie zaznaczone kolorem czarnym przyjmie wartości rect(20 + 60, 20 + 80, 40, 40) (przemieszczenie pokazuje czerwona strzałka). Processing oferuje jeszcze jeden sposób przekształcenia tego rodzaju. Jest to zmiana położenia przestrzeni, tak jakbyśmy dokonywali przesunięcia całego okna wynikowego. Po dokonaniu takiej zmiany punkt 0,0 czyli cala nasza oś zostaje przesunięta a razem z nią wszystkie rysowane elementy w przestrzeni. Przykład 17 void setup() { size(200, 200); nostroke(); // rysujemy szary kwadrat w położeniu początkowym fill(192); rect(20, 20, 40, 40); // rysujemy czerwony kwadrat zmieniając jego położenie na osi X i Y fill(255, 0, 0, 128); rect(20 + 60, 20 + 80, 40, 40); // rysujemy półprzezroczysty niebieski kwadrat po dokonaniu przemieszczenia fill(0, 0, 255, 128); pushmatrix(); 19
translate(60, 80); rect(20, 20, 40, 40); popmatrix(); W Przykładzie 17 pojawiają się trzy nowe funkcje: pushmatrix(); jest funkcją wbudowaną i pozwala na zapamiętanie oryginalnego położenia przestrzeni w processingu. translate(60, 80); która przesuwa położenie osi X i Y programu o wartości wpisane w parametrach popmatrix(); przywraca zapamiętane przez funkcje pushmatrix() koordynaty przestrzeni. Dlatego rysowany kwadrat w trzeciej części programu, pomimo wartości identycznych jak początkowy w kolorze szarym, zmienia swoje położenie. Dzięki funkcjom push i popmatrix wracamy do przestrzeni wyjściowej. Bez ich użycia cały czas pozostalibyśmy w przestrzeni przekształconej. Tego typu przekształcenia dotyczą także obrotów. Przekształcenie wokół osi zapewnia funkcja rotate(kąt w radianach); Kąty w processingu podawane są w radianach ale istnieją proste i szybkie funkcje zamiany radianów w stopnie i odwrotnie. Przykład 18 void setup() { size(200, 200); nostroke(); // rysujemy szary kwadrat w położeniu początkowym fill(192); 20
rect(20, 20, 40, 40); // rysujemy półprzezroczysty niebieski kwadrat po dokonaniu obrotu fill(0, 0, 255, 128); pushmatrix(); rotate(radians(45)); rect(20, 20, 40, 40); popmatrix(); Przykład 18 jest modyfikacją poprzedniego i pokazuje w jaki sposób dokonywany jest obrót osi X, Y. Wprowadzenie do programowania obiektowego Najbliższe idei programowania obiektowego jest pojęcie zmiennej. Jest ona przechowywana w pamięci komputera i do jej wywołania potrzebna nam jest znajomość nazwy pod jaką została zadeklarowana. Podobnie jest z obiektami. Mogą one posiadać cechy i własności różnego rodzaju, wykonywać określone zadania, ale by je wywołać należy znać ich nazwę. Jest to oczywiście znaczne uproszczenie ale wystarczające by zrozumieć w jaki sposób działają. Funkcje Przykład 19 void setup() { size(400, 400); void draw() { buzia(); void buzia() { fill(255,255,0); ellipse(200, 200, 200, 200); bezier(120,200, 120, 300, 280, 300, 280, 200); fill(255); 21
ellipse(160, 180, 30, 30); ellipse(240, 180, 30, 30); fill(255,0,0); ellipse(200, 220, 50, 50); W programie powyżej kod z Przykładu 6 został zawarty w utworzonej funkcji buzia(); Każde wywołanie takiej funkcji powoduje uruchomienie kodu zawartego w jej definicji. Kiedy tworzymy klasę o określonej nazwie, zmiany właściwości tego obiektu wywoływane mogą być poprzez wywołanie obiektu o określonej nazwie. Dzięki programowaniu obiektowemu zmiany parametrów mogą dotyczyć obiektu o konkretnej nazwie. Możemy w naszym programie posiadać wiele obiektów typu buzia a każdy może zmieniać swoje cechy w indywidualny sposób. Przykład 20 Buzia klown; float px1=0, py1=0; void setup() { size(400, 400); void draw() { klown = new Buzia(px1, py1, color(255,255,0), color(255,0,0)); px1 = mousex; py1 = mousey; klown.display(); // bez względu na ilość tworzonych obiektów typu buzia potrzebana nam jest jedna definicja klasy class Buzia { float x1, y1; color kolortwarzy; color kolornosa; Buzia(float x, float y, color t,color n) { x1 = x; y1 = y; kolortwarzy = t; kolornosa = n; 22
void display() { pushmatrix(); translate(x1-200,y1-200); fill(kolortwarzy); ellipse(200, 200, 200, 200); bezier(120,200, 120, 300, 280, 300, 280, 200); fill(color(norm(mousex,0,400)*255)); ellipse(160, 180, 30, 30); ellipse(240, 180, 30, 30); fill(kolornosa); ellipse(200, 220, mousex/4, mousey/4); popmatrix(); Typowa konstrukcja klasy Zainicjowanie zmiennej globalnej Buzia klown; Deklarujemy zmienną globalną klown typ przyjmuje nazwę klasy. void draw(){ klown = new Buzia(px1, py1, color(255,255,0), color(255,0,0)); Inicjalizuje obiekt Buzia o nazwie klown z parametrami. void draw(){ klown.display(); wykonuje instrukcje zawarte w definicji klasy. 23
Wykorzystano materiały ze strony www.processing.org następujących autorów: Ira Greenberg - http://www.processing.org/learning/trig/ Daniel Shiffman - http://www.processing.org/learning/objects/ J. David Eisenberg - http://www.processing.org/learning/transform2d/ http://www.processing.org/reference/environment/ Bibliografia: Processing: A Programming Handbook for Visual Designers and Artists Processing: Creative Coding and Computational Art 24