▶함께배우는 프로세싱 :: generative design P.1 Color

▶함께배우는 프로세싱 :: generative design P.1 Color

이번 글에서는 generative design에서 제공하고있는 예제를 살펴보려고합니다. 

P.1..0

 Hello, color

참고사항 :  noCursor, mouseX, mouseY, colorMode

사용자가 마우스포지션 값(x,y)를 이용하여 도형의 크기와 배경 및 도형의 색상을 변화시킬 수 있는 예제이다.

우리는 색상인식을 할때, 인접 컬러 및 배경 색상의 변화비율에 의해 영향을 받는다

void setup(){

size(displayWidth/2, displayHeight/2);

noCursor();

}

void draw(){

...
colorMode(HSB, 360, 100, 100);

rectMode(CENTER);

noStroke();

background(mouseY/2, 100, 100);

fill(360-mouseY/2, 100, 100);

rect(360, 360, mouseX+1, mouseX+1);

...

}

ⓒ http://www.generative-gestaltung.de

mouse position x : size of rectangle

mouse position y : hue value

마우스포지션X 값 :  사각형의 크기를 변화시킨다.

마우스포지션Y 값 :  배경색과, 사각형의 hue 값을 변화시킨다.

HSB란?

컴퓨터 그래픽스(CG)에서 색을 기술하는 데 사용되는 색 모델의 하나인 색상·채도·명도 모델. H는 색원상의 색인 색상(Hue)를 뜻하는데, 0도에 적색, 60도에 황색, 120도에 녹색, 180도에 시안(청록색), 240도에 청색, 300도에 마젠타(적보라색)가 있다. s는 채도를(Saturation)뜻하는데, 어떤 특정 색상의 색의 양으로 보통 0~100%의 백분율로 나타낸다. 채도가 높을수록 색은 강렬해진다. 예를들면, 소반차의 적색은 고채도의 색이고 분홍색은 고채도가 아니다. B는 명도(brightness)를 뜻하는데, 어떤 색 중 백색의 양으로 0%이면 흑이고 100%이면 백이다.  HSB모델을 HLS, 즉 색상-명도-채도 모델이라고도한다.

[자료 : IT용어사전, "HSB", 한국정보통신기술협회]

P.1.1.1

Color spectrum in a grid

이 스펙트럼은 색상이 입혀진 사각형의 타일로 구성되어 있다. 각 타일은 수평과 수직으로 포화 값에 색상을 할당한다. 색상의 해상도는 스펙트럼의 원색이 명확해지도록 사각형을 확대함으로써 조절할 수 있다.

int stepX;

int stepY;

void setup(){

size(800, 400);

background(0);

}

void draw(){

...

colorMode(HSB, width, height, 100);

stepX = mouseX+2;

stepY = mouseY+2;

for(int gridY = 0; gridY < height; gridY += stepY){

for(int gridX = 0; gridX < width; gridX += stepX){

fill(gridX, height-gridY, 100);

rect(gridX, gridY, stepX, stepY);

}

}

...

}

ⓒ http://www.generative-gestaltung.de

이 예제의 HSB범위는 0~360이 아닌 0~800이다.(width값)

stepX, stepY 값에 mouseX+2, mouseY+2를 적용한 것은 너무 작은 값이 설정되지 않기 위함이다.

for반복구문을 두 개 겹쳐 사용함으로써, 모든 그리드의 위치가 바로 처리되어 화면에 보여진다. 이 경우, 값은 내부 루프가 처리 된 경우에만 증가하며, 사각형의 y위치값은 바깥쪽 루프에 이의해 정의되는 것이다.

P.1.1.2

Color spectrum in a circle

void draw(){

...

colorMode(HSB, 360, width, height);

background(360);

float angleStep = 360/segment; // 각도의 증가는 얼마나 많은 segment가 그려지는지에 달려 있다.(segmentCount)

beginsShape(TRIANGLE_FAN);

vertex(width/2, height/2); // 첫 번째 vertext는 화면의 중심에 지정했다. 

for(float angle = 0; angle <=360; angle += angleStep){

float vx  = width/2 + cos(radians(angle)) * radius; // 다른 vertices들은 degree(0-360)에서 radian(0-2∏)로 변경하였다. 이것은 cos()와 sin()안에서 이런 값을 요구하기 때문.

float vy  = height/2 + sin(radians(angle)) * radius;

vertex(vx, vy);

fill(angle, mouseX, mouseY);

}

endShape();

...

}

void keyRealesed(){

...

switch(key){

case '1':

segmentCount = 360;

break;

case '2' :

segmentCount = 45;

break;

case '3' :

segmentCount = 24;

break;

case '4' :

segmentCount= 12;

break;

case '5' :

segmentCount = 6;

break;

}

}

ⓒ http://www.generative-gestaltung.de

각각의 정점은 코사인과 해당 각도의 사인 값으로부터 계산된다. switch기능을 활용하여 여러가지 모드를 설정 한 후, 변경함으로써 segment숫자를 변경해가며 확인할 수 있다.