[홍정모의 그래픽스 새싹코스 Part1] 무게중심좌표계 (Barycentric coordinates)

앞서

이 포스팅은 홍정모의 그래픽스 Part1을 수강하고 작성한 내용입니다.

강의의 세부 코드는 첨부하지 않고, 결과와 이론 위주로 포스팅했습니다.

 

개요

 

삼각형에 색깔을 넣고자 한다. 현재에는 파란색으로만 색칠되어 있는데, 왼쪽 아래부터 꼭짓점부터 시계 방향으로 각각 빨간색, 초록색, 파란색으로 설정한 뒤 그 사이는 색깔들을 보간해서 나타내고자 한다.

 

그렇다면 빨간색 꼭지점에 가깝다면 빨간색의 비율이 높을 것이고, 파란색 꼭짓점에 가깝다면 파란색 비율이 높을 것이란 추측을 할 수 있는데, 삼각형 내부 P의 색깔은 어떻게 결정해줘야 할까?

무게 중심 좌표계(Barycentric coordinates)

 

삼각형의 각 꼭지점에서 내부의 점 P에 선을 그으면 작은 삼각형 3개를 만들 수 있다.

위 그림에서 A1을 빨간색 (RGB : 1 / 0 / 0), A2를 초록색(RGB : 0 / 1 / 0), A3를 파란색 (RGB : 0 / 0 / 1)라고 한다면

P에서 각각의 R, G, B 색상은 삼각형 t1, t2, t3의 넓이에 비례한다.

예를 들어 P가 A1에 가까워질수록 t1의 넓이가 커지면서 빨간색 비율이 늘어나다가, P가 A1에 위치하게 되면 t2, t3의 넓이는 0이 되고 t1의 넓이가 원래 삼각형의 넓이와 같아지기 때문에 색상이 빨간색으로 결정된다.

 

다른 예시로 P가 Q에 가까워질수록, t2와 t3의 넓이가 커지고 t1의 넓이는 줄어든다. 그러다가 P가 Q에 위치하게 되면 t1의 넓이는 0이 되고, t2와 t3만 넓이를 가진다. 즉, RGB 색상은 R이 0이 되고, Q가 A2와 A3중 어디에 가까운지에 따라 G와 B의 비율이 결정된다. (R이 0이기 때문에, G + B는 Q가 A2와 A3 선 위에 있다면, 그 선 어디에 있든 1이 된다.)

 

한편, 삼각형의 넓이는 선분의 외적을 통해 구할 수 있다. 따라서 각각의 작은 삼각형의 넓이가 큰 삼각형의 넓이에 대해 얼마만큼 비를 가지냐에 따라 색상을 결정해주면 된다.

결과

 

개요에서 말한 조건에 맞게 삼각형의 각 꼭지점이 빨간색, 초록색, 파란색으로 칠해지고

그 사이는 꼭지점의 위치에 따라 보간 되어 색상이 결정되는 것을 볼 수 있다.

그림 출처

https://mathworld.wolfram.com/BarycentricCoordinates.html