projektowanie parametryczne, parametric design
Home > Processing > Wstęp do Processing

Wstęp do Processing

Fala zainteresowania tematyką algorytmicznego (komputacyjnego) designu nie wydaje się słabnąć, a jako że na polskiej ‘scenie’ designerskiej niewiele jest zasobów poświęconych temu zagadnieniu rozpoczynamy wątek wprowadzający w programowanie w  Processing – otwartej platformie do programowania dla designerów, architektów i grafików.

Po pierwsze – do czego może się Processing przydać w codziennej pracy designera ? Przede wszystkim do automatyzacji powtarzalnych zadań. To jednak brzmi mało zachęcająco, więc dodam, że można z powodzeniem używać Processing do definiowania najbardziej skomplikowanych form geometrycznych, takich jak np. powierzchnie dachów i fasad (z tym spotkałem się najczęściej). Tak naprawdę jednak, najwięcej korzyści przynosi użycie go do dynamicznego, i szybkiego wspomagania procesu projektowania, a szczególnie oceny poszczególnych pomysłów, i ewolucji rozwiązań. Tutaj nie chodzi już o to, żeby wygenerować jakąś formę, lecz bardziej o generowanie jej tyle razy, i w takich wariantach, żeby znaleźć jej nalepsze wcielenie (to podejście niektórzy nazywają ‘projektowaniem ewolucyjnym’, bądź ‘generatywnym’).

pulsing_cubes

przykładowy szkic z pulsującymi sześcianami

Po drugie – Processing daje dużą dozę interaktywności. Przede wszystkim w samym procesie projektowania, gdzie możemy oglądać generowaną formę/obiekt podczas jego ewolucji  i na nią wpływać poprzez np. klawiaturę albo myszkę. Możemy także w stosunkowo prosty sposób tworzyć proste instalacje multimedialne reagujące na widza lub otoczenie (ale to już osobny rozdział).

I wreszcie po trzecie – Processing jest na tyle prosty, że może w nim pracować każdy, kto miał trochę do czynienia z prostą matematyką lub logiką. Ma w sobie sporo stworzonych przez użytkowników bibliotek, które pozwalają na szybkie i łatwe zapisanie efektów pracy w plikach PDF, JPG lub np. DWG (przy eksportowaniu trójwymiarowych modeli). Poza tym styl pisania programów na tej platformie jest bardziej luźny, większość ludzi pisze ‘szkice’, czyli krótkie zlepki kodu generujące ciekawe efekty, zamiast pisać wielkie skomplikowane programy-giganty.

W skrócie, środowisko to nadaje się dla twórców, którzy nie chcą spędzać długich godzin szukając sposobu na narysowanie np. krzywych Beziera, tylko wolą poprostu usiąść i widzieć gotowy efekt w ciągu kilku chwil.

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

Dobrą rzeczą jest też to, że wokół platformy Processingu stworzyła się dość duża społeczność, która wymienia się doświadczeniami, fragmentami kodu i pomysłami.

Najwięcej ciekawych przykładów z kodem źródłowym można znaleźć na http://www.openprocessing.org/ lub na oryginalnej stronie www.processing.org , powstało też kilka ciekawych książek. Można by śmiało rzec, że Processing jest jedną z najlepszych platform edukacyjnych do nauki programowania i projektowania komputatywnego z tych istniejących na dziś dzień w internecie.

Sam program jest do ściągnięcia tutaj na zasadach General Public License (czyli za darmo).

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

Ok, przejdźmy zatem do środowiska :

processing_diagram

Po otwarciu programu ukazuje się nam okno, jak to powyżej. Zintegrowane środowisko programowania, w skrócie IDE (z ang. Integrated Development Environment) jest dość proste, i składa się z kilku przycisków, rozwijalnego menu, okna wprowadzania i edycji kodu, oraz okna komunikatów.

Przyciski (od lewe):

START – służy uruchamianiu kodu, można też zrobić to naciskając CTRL+R, lub wybierając opcję ‘Run’ z górnego menu ‘Sketch’. Powoduje to otwarcie osobnego okna, w którym wyświetla się graficzna manifestacja naszego programu.

STOP – zatrzymuje uruchomiony szkic, i zamyka jego osobne okno

NEW – tworzy nowy (pusty) szkic

OPEN – otwiera istniejący szkic zapisany na dysku

SAVE – zapisuje bieżący szkic

EXPORT – przydatna funkcja eksportująca nasz szkic jako stronę .html z appletem Javy, który uruchamia się po jej otwarciu. Oznacza to, że można bardzo prosto udostępnić DZIAŁAJĄCY szkic internetowej publice, do oglądania w zwykłej przeglądarce internetowej (!).  Dzieje się to oczywiście po zapisaniu tak wyeksportowanego szkicu na jakimś serwerze, lub dołączeniu go do istniejącej strony internetowej.

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

Pierwszy kod

Standardowo, każdy szkic uruchamia się w oknie, które ma 100 na 100 pikseli. Aby to zmienić, należy na początku programu napisać :

size(500,500);

Co powoduje zwiększenie wymiaru okna do 500 na 500 pikseli, co możemy zobaczyć po naciśnięciu przycisku START.

Zmiany koloru tła dokonujemy za pomocą polecenia

background(255,255,255);

gdzie trzy liczby w nawiasie to kolejno wartość czerwieni, zielonego i niebieskiego (Red Green Blue), w zakresie 0-255, czyli 255,255,255 da nam kolor biały.

aby narysować koło piszemy

ellipse(250,250,200,200);

gdzie pierwsze dwie liczby to współrzędne X i Y środka, a dwie następne to średnica X i średnica Y (jako, że rysujemy tak naprawdę elipsę – ale podając dwie jednakowe liczby dostajemy koło).

Należy tutaj nadmienić, że w większości języków programowania współrzędne pikseli na ekranie liczy się od lewego górnego rogu (0,0) do prawego dolnego (szerokość, wysokość). Do zmiany i przesunięcia układu współrzędnych służą polecenia translate(), scale() i rotate(), ale o tym później.

Tak więc nasz program powinien wyglądać mniej więcej tak :

size(500,500);

background(255,255,255);

ellipse(250,250,200,200);

Po naciśnięciu START ukaże nam się taki obraz :

cwiczenie01

Nic szczególnego tak naprawdę, ale czego można się spodziewać po trzech liniach kodu :)

Aby dodać trochę złożoności naszemu prostemu szkicowi, musimy posłużyć się pętlą FOR , oraz sinusoidą. Pętla jest to pewien fragment kodu, który jest wykonywany wielokrotnie (dość ciekawy opis można znaleźć tutaj).  Typowa pętla wygląda tak :

for (int i=0;i<100;i++)  { … tutaj jest kod … }

i jest nazwą używanej zmiennej (może to być k, j, m, a lub b, lub jakakolwiek nazwa, np. mojaZmienna ). 100 to ilość powtórzeń pętli, i++ to operacja wykonywana na zmiennej, ‘++’ znaczy zwiększenie wartości o jeden po każdym przebiegu, analogicznie ‘–’ powodowałoby jej zmniejszenie.

Int to typ zmiennej używanej w pętli, określający ją jako zmienną typu ‘integer’, czyli przyjmującą tylko całkowite wartości. W naszych szkicach będziemy narazie zamiennie używać tylko zmiennych int oraz float (zmiennoprzecinkowych, o większej precyzji).

Funkcję sinusoidalną możemy wykorzystać używając składnię sin(argument), gdzie argument to liczba z dowolnego zakresu, a wynik to liczba z zakresu od -1 do 1.

sin (0) = 0, sin(PI/2) = 1 itp. Podobnie używamy funkcji cos().

Przydadzą się też inne zmienne, np :

float kat = 0; (deklaracja zmiennej ‘kąt’ i nadanie jej wartości zero). Przy każdym kolejnym użyciu nie trzeba już deklarować typu zmiennej, wystarczy napisać po prostu kat = wartość;

oraz float promien; która zdefiniuje promień każdego z kółek.

spróbujmy zatem zamienić linę rysującą kółko na :

for (int i=0; i<50;i++)
{
float kat = i*PI/25.0;
float promien = sin(kat*2)*20+20;
ellipse(250+sin(kat)*200,250+cos(kat)*200,promien,promien);
}

Dla i rosnącego od 0 do 50, kąt przyjmuje wartość od 0 do 2*PI, czyli wykonuje pełny obrót. Promień zaś, arbitralnie zwiększa się i zmniejsza w zależności od zmian kąta – warto poeksperymentować tutaj wpisując różne wartości, można w bardzo łatwy sposób uzyskać bardzo ciekawe efekty graficzne !

Po naciśnięciu START naszym oczom powinna się ukazać następująca grafika :

cwiczenie02

Zaś aby trochę ją ożywić, możemy dodać też polecenie fill() zmieniające wypełnienie każdego indywidualnego kółka w pętli. Tak samo jak w background() , podajemy kolejno wartości koloru czerwonego, zielonego i niebieskiego (0-255)

fill(i*5,128+i*2.5,255-i*5);

tak więc cały kod powinien teraz wyglądać tak :

size(500,500);
background(255,255,255);

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

float kat = i*PI/25.0;
float promien = sin(kat*2)*20+20;
fill(i*5,128+i*2.5,255-i*5);
ellipse(250+sin(kat)*200,250+cos(kat)*200,promien,promien);

}

a efekt tak :

cwiczenie03

Grafikę taką można zapisać jako bitmapę za pomocą polecenia saveFrame() , lub jako grafikę wektorową z użyciem biblioteki do eksportu PDF. W tym celu należy dodać deklarację użycia biblioteki :

import processing.pdf.*;

oraz dać znać szkicowi od którego momentu powinien ‘nagrywać’ grafikę i zapisywać ją w pliku PDF – robi się to za pomocą polecenia

beginRecord(PDF, “kolka.pdf”);

a kończy poleceniem

endRecord();

tak więc cały kod wygląda teraz tak :

import processing.pdf.*;

size(500,500);
background(255,255,255);

beginRecord(PDF, “kolka.pdf”);

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

float kat = i*PI/25.0;
float promien = sin(kat*2)*20+20;
fill(i*5,128+i*2.5,255-i*5);
ellipse(250+sin(kat)*200,250+cos(kat)*200,promien,promien);

}

endRecord();

wygenerowany plik PDF można obejrzeć tutaj

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

Trzeba pamiętać, że kod zaprezentowany powyżej jest tylko jednym z dwóch sposobów pisania programów w Processing, gdyż do pisania aplikacji interaktywnych bardziej stosowny będzie układ zapętlony, gdzie program rysuje/tworzy grafikę lub trójwymiarowy model wiele razy na sekundę, pozwalając nam na interakcję.

O tym jednak w następnym odcinku.

  1. Witek
    March 17th, 2010 at 17:48 | #1

    Ładny poradnik :)
    Ale dużo błędów w pisowni (orty itd.) :D

  2. Ju
    March 17th, 2010 at 19:46 | #2

    hmm, nie widzę tu żadnych błędów ort. owszem, 2 wyrazy są napisane łącznie, a nie powinny, w jednym miejscu zdanie nie do końca zrozumiałe (styl), no i jest trochę błędów interpunkcyjnych. pomijając te szczegóły wszystko jest ok.
    poza tym to nie konkurs literacki, ale strona architekta, który stara się podzielić swoją wiedzą, więc nie widzę powodu, aby go tak ‘filtrować’.

    pozdrawiam

  3. March 17th, 2010 at 22:07 | #3

    haha, dzięki za wnikliwość ! :-) już poprawione!
    pozdrawiam
    Przemek

  4. Łukasz
    August 24th, 2010 at 12:05 | #4

    Wielkie dzięki za tutki. Dzięki tobie złapałem zajawkę na projektowanie parametryczne i generatywne.Wspaniale, że dzielisz się z nami swoją wiedzą. ;-)

  5. August 24th, 2010 at 13:01 | #5

    Fajnie, cieszę się , że się przydaje :-)
    Na jesień 2010 zapraszam na wydział architektury PWr na kurs wybieralny z projektowania parametrycznego! (narazie głównie GC, ale później kto wie..)
    pozdro

  6. September 28th, 2010 at 15:41 | #6

    Świetny tutorial. Dodałbym jeszcze do tego listingu funkcję smooth() dla lepszej jakości obrazu w przypadku generowania bitmapy.

  7. Pawel
    October 14th, 2010 at 20:59 | #7

    Witam,
    Po wklepaniu linijek z eksportem do pdf’a – pojawia się co prawda pdf w folderze ale jest uszkodzony i nie daje się go otworzyć. Anyway dzięki za tutoriale – informacji o tym cudeńku w PL nigdy dość ;)

  8. October 28th, 2013 at 12:30 | #8

    The modeling portfolio is updated regularly and periodically.
    Promotional models craft a more expensive impression.
    Last but not least, at Smashbox, the girls needed to be athletic’.

  9. May 27th, 2014 at 13:28 | #9

    Dobry wpis, treściwy i dzięki temu można wiele się z niego dowiedzieć :)

  10. September 23rd, 2014 at 10:25 | #10

    I am regular visitor, how are you everybody? This post posted at this web
    site is genuinely good.

  11. September 25th, 2014 at 13:15 | #11

    I know this if off topic but I’m looking into starting my
    own blog and was wondering what all is needed to get setup?

    I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very internet smart so I’m not 100%
    positive. Any recommendations or advice would be greatly appreciated.
    Thank you

  12. October 17th, 2014 at 03:46 | #12

    Yes! Finally something about voyance.

  13. October 26th, 2014 at 21:28 | #13

    Znakomity tekst, czytałam go z uśmiechniętą twarzą

  14. November 5th, 2014 at 14:51 | #14

    I quite like reading through an article that will make men and women think.

    Also, thank you for allowing for me to comment!

  15. November 27th, 2014 at 04:00 | #15

    It’s hard tto find educated people in this particular subject, however, you sound like you know what you’re talking about!
    Thanks

  16. December 31st, 2014 at 07:11 | #16

    Interesujące spojrzenie na sprawę, każdy powinien rozczytać także zapoznać się z
    tematem.

  17. January 27th, 2015 at 13:17 | #17

    whoah this blog is excellent i love reading your articles.
    Keep up the good work! You realize, many persons are searching
    round for this information, you could help them greatly.

  18. February 13th, 2015 at 20:51 | #18

    What’s up, after reading this amazing post i am also cheerful to share my
    familiarity here with colleagues.

  19. March 6th, 2015 at 03:08 | #19

    I sincerely hope that you will be elaborating a little more on this theme. I am used to a little more information.

  20. March 19th, 2015 at 07:58 | #20

    Yes! Finally something about realash.

  21. May 4th, 2015 at 23:26 | #21

    Hi there to every body, it’s my first go to see of
    this weblog; this website includes remarkable
    and actually fine material in support of readers.

  22. November 13th, 2015 at 22:02 | #22

    So, you have been looking into Global Verge being a company.

    In fact it can be muchh easier than you may be thinking.
    Companies similar to this are often quite affordable.

  23. November 16th, 2015 at 10:55 | #23

    Good blog you have got here.. It’s difficult to find
    high-quality writing like yours these days. I honestly appreciate individuals like you!
    Take care!!

  24. January 9th, 2016 at 11:09 | #24

    this blog has all sorts of information available about it and
    various things that you are able to do. When you would like to achieve success,
    though, go after just one approach. Every person’s needs are different so don’t
    be to rigid in the approach that you select for
    yourself. But make certain that you don’t attempt to do too much at the same time,
    it just makes everything really confusing. Dispersing your actions over
    a lot of different things makes it really hard to figure out what is really
    working and what isn’t. Start little and then,
    as you gain self-assurance, move on to the things which will be more advanced.
    When you need help with the speed of your progress as well as your motivation levels, you
    can find all kinds of helpful information at us.

  25. January 12th, 2016 at 13:26 | #25

    It might be really difficult to keep yourself on track when it comes to this blog, what with all the details there are to think about.

    If you still have not mastered your approach, why not get started planning
    your attack on it today? The trick is to give some thought to where you would like to go
    and then select the path of least resistance for getting there.
    Each individual has their own reaction to this blog.
    Luckily there are lots of steps you can take to help
    yourself out. To get some more help with this, I advise you to click on us and spend
    some time looking over the information you are going
    to find there.

  26. January 23rd, 2016 at 18:32 | #26

    magnificent points altogether, you simply gained a emblem new reader.

    What would you recommend in regards to your publish that you just made a few
    days ago? Any positive?

  27. February 17th, 2016 at 23:05 | #27

    Just waqnt to saay your article is as astonishing.
    The clearness in your publish is simply spectacular and i can suuppose you’re an expert in this subject.
    Well along wit your permission allow me to grab your feed to stay updated with forthcoming post.
    Thank yoou 1,000,000 and please continue the grtifying
    work.

  28. February 23rd, 2016 at 08:50 | #28

    If the nose job should be accomplished in a hospital as a substitute
    of an outpatient surgery heart or workplace, the fee shall be higher.

  29. February 25th, 2016 at 04:04 | #29

    Thank you for the good writeup. It actually used to be a
    leisure account it. Glance advanced to far added agreeable from you!
    However, how can we communicate?

  30. March 3rd, 2016 at 12:53 | #30

    You can leave the upper shelves for some books or some other
    gadgets you need around you when you work on your lap top.
    Everyone wants to enjoy as much as they can in this limited
    time. And while you might make the mistake of assuming metal would be a good option for strength
    and durability, metal actually corrodes and weakens over time.

  31. March 8th, 2016 at 14:46 | #31

    Extraordinary useful resource. Where could I get
    in contact with the author? Any particular social network?

  32. March 23rd, 2016 at 21:59 | #32

    Unlike some unison league cheats other players.
    Gaming now includes mobile gaming on the phone.

    How to Install Software in Ubuntu, and here are perseverance and
    patience. This is actually pure luck. As per a recent listing
    of on the board.

  33. April 8th, 2016 at 10:08 | #33

    There is no point in joining a poker room where the
    members play poker only when you are sleeping;
    you get up only to find that there are no players for you
    to play poker with. Since most Casino Games are based on luck, you
    should consider learning Poker and Texas Hold’em Poker where the need of luck is reduced by the skills and strategies of the
    Poker Players. More information on the topic of poker can be found here:.
    However, this creates more opportunities to get hooked on the game.

  34. April 13th, 2016 at 20:54 | #34

    Good way of telling, and good post to take information on the topic
    of my presentation topic, which i am going to
    convey in institution of higher education.

  35. June 16th, 2016 at 11:03 | #35

    I think the dmin of this web site is truly working hard for his web site,
    since here every stuff is quality based information.

  36. July 18th, 2016 at 13:39 | #36

    First off I would like to say terrific blog! I had a quick question which I’d
    like to ask if you do not mind. I was curious to know how you center yourself and clear your
    mind before writing. I have had a hard time clearing my
    thoughts in getting my thoughts out there. I truly do enjoy writing
    however it just seems like the first 10 to 15 minutes tend to be
    wasted just trying to figure out how to begin. Any recommendations or hints?

    Thanks!

  37. May 15th, 2017 at 03:01 | #37

    bedroom from sexveido
    I asked, kicking off to sense disturbed.

  38. June 12th, 2017 at 06:07 | #38

    Excellent blog here! Additionally your site lots
    up fast! What host are you using? Can I get
    your affiliate link to your host? I want my website loaded up as fast as yours lol

  1. November 14th, 2009 at 20:20 | #1