projektowanie parametryczne, parametric design
Home > Processing > Processing – krzywe Beziera

Processing – krzywe Beziera

dach01

W kolejnej lekcji języka programowania Processing (poprzednia jest tutaj), zajmiemy się krzywymi Beziera. Dlaczego ? Ponieważ krzywe te są bardzo często podstawowym środkiem definiowania nie-liniowej geometrii np. fasad lub dachów. Nie są one co prawda tak popularne jak krzywe B-Spline (chociaż są ich najprostszą wersją), lub ich rozszerzona wersja – NURBS, ale od nich wszystko się zaczęło, więc warto przyjrzeć się im z bliska (są na przykład używane w programie Adobe Illustrator).

Na początek omówimy podstawy tworzenia krzywych, i kilka technicznych elementów pomocnych w kreowaniu trójwymiarowych struktur w Processing. Potem stworzymy program rysujący powierzchnię dachu (jak powyżej) i eksportujący ją do pliku.

————————————————————–

Spróbujmy napisać kilka lini kodu rysujących przykładową krzywą Beziera. Aby to zrobić potrzebujemy czterech punktów – początku, czyli tzw. pierwszego punktu zakotwiczenia, dwóch punktów kontrolnych, i drugiego punktu zakotwiczenia, czyli końca krzywej.

Zdefiniujmy zatem łańcuch współrzędnych: cztery współrzędne X (łańcuch będzie miał nazwę ‘px’), i cztery współrzędne Y (łańcuch o nazwie ‘py’)

float px [] = new float[4];
float py [] = new float[4];

w ten sposób zdeklarowaliśmy oba łańcuchy, które są teraz gotowe do użycia. Każdy z nich ma cztery pozycje, w których będzie trzymał jedną współrzędną. Przypiszmy im zatem teraz wartości – współrzędne punktów kontrolnych i skrajnych dla krzywej, w układzie współrzędnych XY (liczonym od lewego górnego rogu okna).

px[0] = 50; py[0] = 50;  //pierwszy punkt kontrolny – początek krzywej
px[1] = 40; py[1] = 170; //drugi punkt kontrolny
px[2] = 270; py[2] = 170; //trzeci
px[3] = 250; py[3] = 250; //czwarty – koniec krzywej

size(300,300); //otwórzmy okno o rozmiarach 300 x 300 pikseli

noFill(); //wyłączmy wypełnianie obiektów (o tym później)

bezier(px[0],py[0],  px[1],py[1],  px[2],py[2],  px[3],py[3]); //i narysujmy krzywą

Po wpisaniu powyższego kodu do edytora i naciśnięciu przycisku start, powinniśmy zobaczyć poniższy obraz :

bezier_1Wygląda ciekawie, ale nadal trochę tajemniczo..  Żeby zrozumieć lepiej, jak działają krzywe beziera, narysujmy punkty kontrolne. Dodajmy na końcu poniższe linie :

fill(255,0,0); //zmieniamy kolor na czerwony (podając kolejno wartości r, g, b)
ellipse(px[0], py[0] ,8,8); //punkt nr 1
ellipse(px[1], py[1] ,8,8); //punkt nr 2
ellipse(px[2], py[2] ,8,8); //punkt nr 3
ellipse(px[3], py[3] ,8,8); //punkt nr 4

a żeby zobaczyć jak wygląda tak zwany ‘control polygon’, połączmy je liniami:

stroke(50,100); //ustawiamy kolor i przezroczystość linii
line(px[0], py[0] ,px[1], py[1]);
line(px[1], py[1] ,px[2], py[2]);
line(px[2], py[2] ,px[3], py[3]);

Po dodaniu powyższych linii, uruchamiamy szkic (przyciskiem run, albo ctrl+R) i widzimy krzywą jak poniżej :

bezier_2

Patrząc na ten przykład, można łatwo zauważyć podstawową właściwość krzywej Beziera : początek i koniec są styczne do linii kontrolnych, a to można sprytnie wykorzystać przy tworzeniu bardziej skomplikowanych geometrii.

Spróbujmy teraz zrobić z tego coś ciekawszego, czyli wykorzystać replikację (poprzez użycie pętli FOR – więcej informacji o tym jak jej używać jest w poprzednim tutorialu). Generalnie najciekawsze efekty daje niewielka modyfikacja współrzędnych punktów kontrolnych, i narysowanie wszystkich tak powstałych krzywych razem obok siebie. Dodajmy zatem :

noFill(); //wyłączamy wypełnianie
for (int i=0;i<20;i++) //uruchamiamy pętlę na 20 powtórzeń
{
px[0] = px[0]+5; //przesuwamy punkt 0 w prawo
py[1] = py[1]+8; // punkt 1 w dół
py[2] = py[2]-4; //punkt 2 w górę
px[3] = px[3]+2; //punkt 3 lekko w prawo
bezier(px[0],py[0],  px[1],py[1],  px[2],py[2],  px[3],py[3]); //i rysujemy krzywą
}

bezier_3

Ciekawą wizualizację krzywych razem z liniami kontrolnymi można uzyskać przenosząc dwie linijki kodu:

for (int i=0;i<20;i++)
{

nad linię z komendą fill(255,0,0); , ponieważ wtedy w pętli znajdzie się procedura rysowania linii i czerwonych kółek. Otrzymamy wtedy obraz pokazujący dokładnie ‘wędrówkę’ punktów kontrolnych :

bezier_4

Przy zabawie parametrami można pójść trochę dalej, i dodając do nich kilka sinusów,  otrzymać geometrię jak poniżej :

bezier_6

Pewnie ktoś z czytelników zapyta.. ‘ok, wporządku, ale do czego można tego teraz użyć’ ? Otóż w parametrycznym modelowaniu często spotykamy się z modelowaniem jakiejś powierzchni (np dachu) przez przeciągnięcie jednego profilu wzdłuż krzywej (tzw. szyny – ‘sweep profile along rail curve’ ), lub zbudowanie z wszystkich krzywych jednej powierzchni (‘loft curves’). Tak też spróbujemy zrobić za kilka chwil.

——————————————————————————-

Najpierw jednak, aby ułatwić nam nieco modelowanie trójwymiarowych obiektów, i ich przestrzenną ocenę, musimy dodać do programu element interaktywny. Inaczej będziemy ciągle w dwuwymiarowym, statycznym świecie. Ta mała dygresja jest raczej konieczna do tego, żeby przejść do kolejnego, bardziej ekscytującego (!) etapu programowania w trzech wymiarach.

W Processing możemy pisać programy na dwa sposoby : liniowy, gdzie zwyczajnie wpisujemy komendy jedna po drugiej, np :

size(300,300,P3D); //ustawiamy okno

translate(150,150); //przesuwamy układ współrzędnych na środek ekranu (połowa szerokości, połowa wysokości)

rotateX(PI/3); //obracamy układ współrzędnych wokół osi X
rotateZ(PI*1.7); //i wokół osi Y

box(50); //i rysujemy sześcian

W ten sposób program wykonuje wszystkie polecenia po kolei, i zatrzymuje się na końcu. Możemy w międzyczasie wykonywać pętle, definiować wiele graficznych elementów i pisać nieskończone ilości instrukcji – ale wszystko zostanie wykonane tylko raz.

Drugi sposób, to sposób nieliniowy, interaktywny i zorientowany zdarzeniowo. To znaczy, że po uruchomieniu programu, instrukcje będą wykonywane w niekończącej się pętli (ok 20-30 razy na sekundę), a program może w tym czasie rysować dowolne rzeczy, wydawać dźwięki, odgrywać video, i co najważniejsze reagować na zdarzenia. Takimi zdarzeniami zazwyczaj są manipulacje myszką i naciskanie klawiszy na klawiaturze, ale może to też być bardziej skomplikowany bodziec, jak na przykład obraz z kamery video, lub dźwięk z mikrofonu.

Program taki wygląda tak:

void setup()
{
println(“ta instrukcja wykona się 1 raz”);
}

void draw()
{
println(“ta instrukcja wykona się wiele razy”);
}

Czyli ma dwie części : setup, i draw. Pierwsza wykonuje się tylko raz, dokonujemy w niej ustawienia okna, początkowych zmiennych, ładujemy czcionki, obrazy i dźwięki. Druga (draw) to część która będzie wykonywać się w nieskończoność, dopóki nie zakończymy programu.

Ten sam program, w wersji interaktywnej będzie wyglądał tak :
void setup()
{
size(300,300,P3D);
//ustawiamy okno (włączamy też tryb pracy w trzech wymiarach)
}

void draw()
{
background(160);
//czyścimy tło przed narysowaniem czegokolwiek

translate(150,150); //przesuwamy układ współrzędnych na środek ekranu (połowa szerokości, połowa wysokości)

rotateX(mouseY*PI/300); //obracamy układ współrzędnych wokół osi X (wykorzystujemy pozycję myszki!)
rotateZ(mouseX*PI/300); //i wokół osi Y

box(50); //i rysujemy kostkę
}

Po uruchomieniu powyższego kodu, zobaczymy radośnie obracający się sześcian :)

box01

——————————————————————————-

Po tej małej dygresji zacznijmy więc nowy szkic (wybierając z menu File >> New). Na początek, tak jak poprzednio, deklarujemy współrzędnych punktów kontrolnych

float px [] = new float[4];
float py [] = new float[4];

I przejdźmy do trybu 3D – robi się to poprzez deklarację size(szerokość, wysokość, tryb).  Tryb może być wyrażony przez P3D – standardowy silnik Javy (działa w oknie przeglądarki stron www), albo przez OPENGL – szybszy i dużo lepszy graficznie silnik, ale działający tylko w oknie Processingu albo po skompilowaniu szkicu do pliku .exe.

void setup()
{
size(600,400,P3D);
//tworzymy okno (tym razem trochę większe!)
}

i zaczynamy część ‘dynamiczną’

void draw()
{

background(160); //czyścimy tło
translate(300,200);//przesuwamy układ współrzędnych na środek

rotateX(mouseY*PI/300); //i obracamy go wokół osi X
rotateZ(mouseX*PI/300); //i osi Z

noFill(); //bez wypełniania
stroke(250,160); //rysujemy białym, lekko przezroczystym kolorem

Współrzędne punktów będą teraz trochę inne, a nasza krzywa będzie przypominać odwróconą literę ‘U’. Narysujemy ją 120 razy, przesuwając ją stopniowo  (użyjemy znowu pętli FOR). Zauważ, że zamieniliśmy współrzędną Y ze współrzędną Z (gdzie współrzędna Y przesuwa się od -60 do 60).

for (int i=-60;i<60;i++)
{
px[0] = -100; py[0] = -50;
px[1] = -80;     py[1] = 150;
px[2] = 80;      py[2] = 150;
px[3] = 100;    py[3] = -50;

bezier(px[0],  i*2,  py[0],   //współrzędne pierwszego punktu (początku krzywej)
px[1 ],  i*2,  py[1],    //współrzędne drugiego punktu
px[2],  i*2,  py[2],   // trzeciego
px[3],  i*2,  py[3]);
//i czwartego (koniec)
}

}

Po uruchomieniu programu, widzimy naszą pierwszą prawdziwie trójwymiarową powierzchnię :

bezier_07

W tym momencie nasz ‘dach’ jest poprostu zwyczajną powierzchnią ‘translacyjną’, czyli powstałą poprzez translację (przesunięcie) profilu w przestrzeni. Prawdziwa zabawa zacznie się jednak dopiero, gdy zaczniemy modulować profil podczas przesuwania. Jak to zrobić ? Wystarczy przy każdym przebiegu pętli zmienić lekko współrzędne punktów kontrolnych. Dobrze jest użyć do tego funkcji Sinus lub Cosinus, ponieważ łatwo nią sterować za pomocą amplitudy i okresu. Na przykład jeśli w naszej pętli zmienna i przechodzi od wartości -60 do 60, to dodając do którejś współrzędnej wyrażenie sin(i/60 * PI) * 50 , wartość wyrażenia przejdzie płynnie od sin(-PI)*50 do sin(PI)*50, czyli od -50 do 50, oczywiście płynnym ruchem, jak na sinusoidzie.

Dodając kilka takich kombinacji można uzyskać poniższy efekt :

bezier_08

A kod generujący krzywiznę wygląda tak :

for (int i=-60;i<60;i++)
{
px[0] = -100;                   py[0] = -50+sin(i*PI/60.0)*25;
px[1] =  -80+sin(i*PI/45.0)*50; py[1] = 50;
px[2] =   80;                   py[2] = 50;
px[3] =  100+sin(i*PI/60.0)*25; py[3] = -50+sin(i*PI/40.0)*15;
bezier(px[0],  i*2,  py[0],
px[1],  i*2+sin(i*PI/120.0)*150,  py[1],
px[2],  i*2,  py[2],
px[3],  i*2,  py[3]);
}

for (int i=-60;i<60;i++)
{
px[0] = -100;                                             py[0] = -50+sin(i*PI/60.0)*25;
px[1] =  -80+sin(i*PI/45.0)*50;   py[1] = 50;
px[2] =   80;                                                py[2] = 50;
px[3] =  100+sin(i*PI/60.0)*25;  py[3] = -50+sin(i*PI/40.0)*15;

bezier(px[0],    i*2,     py[0],
px[1 ],    i*2+sin(i*PI/120.0)*150,  py[1],
px[2],    i*2,     py[2],
px[3],    i*2,     py[3]);
}

Oczywiście jest to arbitralna zabawa liczbami i wyrażeniami matematycznymi, więc można dodawać i odejmować różne części wyrażeń, żeby uzyskać podobny, lub zupełnie inny efekt (np pionową fasadę zamiast poziomego dachu) – ale to już zależy od inwencji designera.

Aby zapisać tak wygenerowany ‘dach’ musimy użyć biblioteki do eksportowania geometrii do plików DXF. Tak samo jak w poprzednim odcinku, zadeklarujemy użycie tej biblioteki na samym początku programu poprzez dodanie linii

import processing.dxf.*;

Aby rozpocząć ‘łapanie’ geometrii przeznaczonej do zapisania na dysku, dodajemy linię
beginRaw(DXF, “dach.dxf”);
zaraz po linii
void draw()
{

a na samym końcu programu dodajemy endRaw(); (tuż przed nawiasem kończącym program)
}

Działający w przeglądarce powyższy przykład wraz z pełnym kodem można obejrzeć tutaj (wymagana zainstalowana Java).

Geometria zostanie zapisana w pliku ‘dach.dxf’ w tym samym folderze, w którym znajduje się nasz szkic (dobrze jest go najpierw zapisać poprzez File >> Save w głównym menu).

Należy pamiętać, żeby używać funkcji beginRaw(..) i endRaw() tylko wtedy kiedy chcemy zapisać geometrię, inaczej będzie ona spowalniać niepotrzebnie nasz program. Poza tym warto zapisywać geometrię bez żadnych obrotów – najlepiej poprostu włączyć i wyłączyć program trzymając kursor myszki poza oknem, wtedy dach będzie leżał poziomo na płaszczyźnie XY.  Można też zamienić linie obracające układ współrzędnych na rotateX(0); rotateZ(0); , lub zupełnie je wyłączyć/skomentować za pomocą symbolu //   (początek komentarza – tekst następujący po tym symbolu jest ignorowany).

Po wyeksportowaniu geometrii do pliku, możemy otworzyć go w programie CAD i zrobić z nim co nam się żywnie podoba :)

————————————————————————————


dach02dach03

Categories: Processing Tags: , , ,
  1. July 9th, 2014 at 03:00 | #1

    Excellent blog you have here but I was wanting
    to know if you knew of any discussion boards that
    cover the same topics discussed here? I’d really like to
    be a part of community where I can get feedback from other knowledgeable individuals that share
    the same interest. If you have any suggestions, please let me know.

    Appreciate it!

  2. December 22nd, 2014 at 20:01 | #2

    Niezwykle odlotowy post, badawcze wpisy polecam wszystkim literaturę

  3. December 25th, 2015 at 19:01 | #3

    We see a dress in our favorite colour and never once will we forestall and say – is the
    lower and shape of this dress flattering to my figure. Sir
    Bob Geldof had a less glamorous begin in life, doing the job as a pea canner.
    Selena Gomez performs at the 2011 Teen Choice Awards. No, it’s not a Halloween trick – the rumors are true.
    Her last name is Armenian and means “son of a stonemason.

  4. April 9th, 2016 at 13:26 | #4

    I blog often and I truly appreciate your information. The article has really peaked
    my interest. I am going to bookmark your site and keep checking for new details about once per week.
    I subscribed to your Feed too.

  1. March 8th, 2010 at 00:49 | #1