Archive

Posts Tagged ‘design’

Modular Light Cloud – workshops at ASK Summer School in Warsaw

July 28th, 2014 216 comments

poster_02

SUMMER IS HERE – TIME FOR NEW WORKSHOPS !
ASK Summer School is an initiative to gather students, architects and artists for a two-week
learning-working session. During the workshop we will be facing the aspect of modularity in
architectural design using the most contemporary design tools. The module we will be working
with is LED tube light. The goal is to use the tube light both as a structural and responsive
element to create a working structure.

PARTICIPANTS
Everybody who wants to learn about new tools in design process or enhance their knowledge
and apply it in real project. The program is mainly aimed at students of Architecture, Fine Art,
Design, etc., but everybody interested in architecture, parametric design, fabrication and
interactive installations is welcome. The number of participants is limited.

KNOWLEDGE REQUIRED
Knowledge of architectural or artistic installation design along with basic knowledge of any 3d
modeling software is required.

KNOWLEDGE GAINED
Every participant will be introduced to parametric design tools, fabrication technology and
open-source electronics prototyping. The software covered (in different levels) is: McNeel’s
Rhinoceros 3d, Grasshopper 3d and Arduino.

CERTIFICATION
Participants will receive an official certificate for successful completion of the workshop
acknowledging the software use and digital fabrication experience.

ORGANIZATION
ASK (Architecture for Society of Knowledge) is a master program organized by the Architecture
and Urbanism department at Warsaw University of Technology. It’s dedicated to those who wish
to extend their practical understanding of contemporary architecture and urban planning. The
program addresses digital media in design, prototyping with computer controlled machines,
distributed design collaboration, and agendas for sustainable, intelligent building.

DATES
1.07.2014 Program announcement
8.08.2014 Application deadline
18.08.2014 Beginning of the workshop
29.08.2014 End of the workshop

 

All program avaible here: curriculum

Wstęp do Processing

September 4th, 2009 38 comments

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.