블로그는 귀차니즘

  일전에 Gradient에 대한 기능을 구현하였는데, 최근 몸 상태도 그렇고 마무리되지 않은 다른 부분도 있어 포스팅을 차일피일 미루어 왔습니다. 일단 간단한 Gradient는 색이 차츰차츰 변해가는 그런 것을 지칭하게 되는 데요. 이 기능에 대해서는 여러가지 방법이 존재할 수 있습니다.

  먼저 그리는 방법에 대해서 알아보자면 간단하게 하나의 방향을 향해가면서 색이 점점 변하는 경우를 볼 수 있습니다. 다른 경우는 원형의 경우도 존재할 수 있겠고, 하나의 방향을 향해가면서 절반 정도에 이르러 색이 완전히 다 변하였다 다시 복구 되는 경우도 존재할 수 있겠죠.

  가장 간단한 기울기가 없는 방향성 Gradient를 정리하면 다음과 같습니다.( 예로써 Left 방향을 선택해 보죠. )

Gradient (Language : cpp)

1. 색상1 = Red;
2. 색상2 = Blue;
3. for( int i = 0; i < Width; ++i )  {
4.  
5.    double Percent = static_cast<double>(i) / Width;
6.    
7.    색상Put = RGB( 색상1.Red * ( 1.0 - Percent ) + 색상2.Red * Percent ),
8.                           색상1.Green * ( 1.0 - Percent ) + 색상2.Green * Percent )
9.                           색상1.Blue * ( 1.0 - Percent ) + 색상2.Blue * Percent )
10. }

  와 같이 구현할 수 있습니다. 색상Put는 Width 에 해당하는 i 에 대한 출력 값이 되는 셈이죠. 결국 0 ~ Width를 0% ~ 100%에 대한 Blend 비율로써 생각을 하면 됩니다.

  그럼 기울기가 존재하는 경우를 한 번 생각해 봅시다. 속도를 위해서는 4가지의 경우를 먼저 생각을 해봐야 합니다. 어떤 경우냐면 기울기가 - 인지 + 인지에 따라서 2분류가 먼저 나눠지게 되고, 기울기에 대한 값이 0.5 보다 큰지 작은지에 따라서 각각 또 나눠주어야 합니다.

  왜냐하면 기울기가 한 쪽에 대해서만 처리를 해야 되는 경우를 생각해보면 0.5 이하일때와 0.5 이상일때를 먼저 살펴보도록 하겠습니다. 0.5 이하일때는 선을 하나 그릴 경우 가로로 무척 길게 뻗어나가게 됩니다. Windows GDI 상에서는 화면 좌표의 원점이 좌측 상단이라는 것을 먼저 생각하고 보면,

  위 두 가지의 경우를 살펴보면 (X, 0)좌표에서 (X + 기울기, 높이)로 선을 긋는게 한 쪽에 비효율적이라는 것을 알 수 있습니다. 밑의 경우는 X 좌표를 증가시켜가면서 선을 그려도 많아봐야 2X 만큼의 선을 그리게 되는 반면 위의 경우는 기울기가 0에 가까워 질수록 거의 무한대로 선을 그려야 하기 때문이죠.
  그리하여 위의 경우는 Y 축의 좌표를 증가시켜가며 선을 그리면 됩니다. (0, Y)좌표에서 (너비, Y + 기울기) 처럼 말이죠. 물론 - 기울기의 경우도 동일하게 처리하면 됩니다.

  그리고 저의 경우 MoveToEx 와 LineTo 를 이용하여 Gradient를 구현하였는데, 실제 이 부분에 대해서 처음 고민을 약간 하였습니다. 혹시나 선을 그리는 DDA 알고리즘이 처리하지 못하는 빈 픽셀이 생기면 어떻게 하지 하고 말이죠. 하지만 이 경우도 사실 고민할 경우는 없습니다.
  처음에 기울기에 대해서 먼저 계산을 하여 높이 또는 너비에 대한 X, Y 축 증가량을 미리 구한 뒤 천편일률적으로 목적지에 + 를 하면 되게 됩니다. 왜냐면 선을 그리는 알고리즘에 있어서 기울기가 완전 동일 하다면 위치가 약간 좌우 혹은 상하로 이동했을 뿐 그리는 순서 또한 동일하기 때문입니다.

  그리고 원형 Gradient의 경우도 존재합니다. 이 경우는 상당히 까다로운 경우라고 할 수 있습니다. 피타고라스의 정리를 사용하여 목적지와 원점의 거리를 계산하여 색상을 Blend하면 되긴 하지만 그 것 보다는 원을 그리는 함수로 원을 그리면 됩니다. 물론 Pen에 대해서는 Width가 2로 지정이 되어야 합니다. 1로 지정이 되었을 경우 빈 공간이 차츰차츰 크기가 작아져가면서 그리는 원에 대해서 빈 공간이 사라지고 Gradient가 작성되기 때문이죠.

Radial (Language : cpp)

1. for( int i = 0; i < Radius; ++i )   {
2.    
3.     double Percent = static_cast<double>(i) / Radius;
4.     Ellipse(hDC, i, i, 2*Radius - i, 2*Radius - i);
5. }

  간단하게 적는다면 위와 같은 코드가 작성될 수 있겠군요^^. 타원에 대해서는 Ellipse 함수가 Rect 크기에 대해서 Drawing 이 가능하므로 연구를 개인적으로 하면 가능할 듯 합니다. 실제 구현은 했지만 올리는 것은 금전적 문제의 여지가 많은 듯 합니다^^.

  이 Gradient를 작성하면서 논문을 무척 많이 찾아본것 같습니다. 결국 찾기는 찾았지만 적용은 하지 못하고 그냥 구현하게 되었지만요. 그런 것을 보면서 참 많은 노력이 있었고 그로 인한 속도의 발전이 있지 않았나하는 생각이 많이 들더랍니다. 다른 분야도 마찬가지겠지요. 저도 그런 사람의 하나가 되길 기원하면서 이만 글을 줄이도록 하겠습니다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

  이번 달은 왠지 저녁에도 시간이 나지 않아서 제대로 포스팅을 못하고 있군요. 사실 어떤 곳에서 한 가지 일을 받아 하고 있는 중이라 그렇습니다. 일의 내용은 바로 Gradient와 + @를 작성하는 것인데요. Gradient 가 실질적으로 주목표라고 할 수 있습니다.

  자 Gradient란 무엇인가 하면.. 다들 써보셨으리라고 생각하는 포토샵, 그 포토샵에 보시면 색깔이 점점 변해가면서 색이 섞이는 기능을 써보셨을 것이라 생각합니다. 굳이 그 것이 아니더라도 미술시간에 배우는 구체의 광원 표현등을 컴퓨터에서 표현할 때 Gradient 효과라고 지칭하죠.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.