▶함께배우는 프로세싱 :: generative design P.2.1 Alignment in a grid.

▶함께배우는 프로세싱 :: generative design P.2.1 Alignment in a grid.

이번 글에서는 generative design에서 제공하고있는 예제중 'Alignment in a grid'를 살펴보려고합니다. 

int tilecount = 20;

int actStrokeCap = ROUND; // 선의 끝부분을 둥글둥글하게 설정합니다.

*

strokeCap()

선의끝부분을 어떻게 처리할지 설정하는 기능입니다. ROUND, SQUARE, PROJECT 이렇게 세 가지 종류가 있습니다. 

[Processing.org > reference > strokeCap 바로가기]

 [사진 : Processing.org ] 

이번에제에서 strokeCap의 설정을 바꾸는것으로 아래사진과 같은 변화를 줄 수 있습니다. 

[strokeCap()설정을 통한 변화 - ROUND, SQUARE, PROJECT]

void setup(){

size(800, 800);

smooth();

}

setup()에서는 특별한 것은 없고, 사이즈만 800x800으로 설정 해 줍니다.

void draw(){

...

strokeCap(actStrokeCap); //첫 부분에서 선의 끝부분 모양설정 했던 것을 여기서 적용합니다.

for(int gridY = 0; gridY < tileCount; gridY++){

for(int gridX = 0; gridX < tileCount; gridX++){

int posX = width / tileCount*gridX;

int posY = height / tileCount*gridY;

int toggle = (int) random(0,2);

if(toggle == 0){

strokeWeight(mouseX/20);

line(posX, posY, posX+widht/ tileCount, posY+height/ tileCount);

}

if(toggle == 1){

strokeWeight(mouseY/20);

line(posX, posY+widht/tilecount, posX+height/tileCount, posY);

}

}

}

}

ⓒwww.generative-gestaltung.de/code

그리드는 for구문을 중첩시켜 그리게됩니다. gridX와 gridY는 앞서 설정한 tileCount만큼 반복합니다. 그리고 tileCount와 gridX, 그리고 너비값을 이용하여 posX, poY값을 얻습니다. 이것을 기준으로 아래에서 선이그려지게 됩니다. 어디쯤, 어떤원리로 posX, posY가 구성되는지 궁금하면 그 위치에 도형을 한번 그려보면 한눈에 알아볼 수 있습니다.

ellipse를 posX, poY를 그려본 사진입니다. 선이 posX, poY지점을 기준으로 그려지는 것을 확인할 수 있습니다.

if(toggle == 0){

strokeWeight(mouseX/20);

line(posX, posY, posX+widht/ tileCount, posY+height/ tileCount);

}

위에서 작성했던 코드인데요, strokeWeight(mouseX/20)에서 마우스 위치값을 통해 선의 굵기를 정하도록 설정하고있는 모습입니다. 실제로 코드를 실행하면 마우스위치에 따라서 화면에 나타

나는 모양이 변하는 모습을 볼 수 있습니다. 짧은 영상을 통해서 확인해보겠습니다.