카드 게임의 안내선 - 베지에 곡선이란?

슬더스의 안내선

게임(특히 카드게임)을 하다보면 이런 안내선을 자주 볼 수 있다.
보면서 항상 저건 도대체 어떤 방식으로 만든건가... 싶었는데 이번에 카드게임을 만들어 보며 알게된 베지에 곡선을 설명하기 위해 글을 써본다.

사실 베지에라는건 코딩을 처음 배울 당시, 옆자리 형이 베지에로 막 멋있게 총알을 발사하는걸 보고 멋있어서 나도 해보려고 나무위키를 슬쩍 봤지만....

뭐 이런걸 보고 바로 껏던 기억이 있는데 ㅋㅋㅋㅋㅋㅋ
생각보다 너무 쉬워서 나처럼 저거 보고 바로 뒤도는 사람들이 더이상 없길 바라며 글로 남겨보려 한다.

참고로 코드도 세줄밖에 없다....

베지에 곡선의 탄생 배경

이전부터 존재하던 곡선을 그리는 방식이지만, 자동차 제조사 르노사의 기술자인 피에르 베지에가 1962년 자동차 몸체 디자인에 사용하면서부터 널리 알려졌다.

작동 원리 설명 (그림)

백문불여일견 일단 먼저.. 보자.

글로 보면 복잡해보이던데, 사실 눈으로 보면 누구나 쉽게 이해할 수 있다.
그림으로 먼저 보고 이후에 글로 설명을 보는걸 추천함

붉은 선이 내가 그려낸 곡선이다!

2차 베지어 곡선(3점)

3차 베지어 곡선(4점)

4차 베지어 곡선(5점)

5차 베지어 곡선(6점)

(gif 출처: 위키백과)

원리 설명

가장 간단한 2차 베지에 곡선을 보면, 붉은 선이 그려지는 검은 점은 녹색 선을 이동하며 그려지는걸 볼 수 있다.
참고로 검은 점은 1초동안 그려지는 선이라면, 0초에는 0%지점. 1초에는 100%지점. 0.2초에는 20%지점에 있다.

그럼 이제 저 녹색 선이 어떻게 만들어 지는지가 문제인데, 녹색선도 유사한 방식으로 만들어진다.
P0->P1을 잇는 선과, P1->P2를 잇는 선에 위에 점을 찍는 방식과 같은 방식으로 진행도에 따라 직선의 특정 부분에서 점을 찍어 그 두 점을 이었을 뿐이다.

잘 보면 녹색 선의 왼쪽 점은 P0->P1을 쭉 이동하며, 오른쪽 점은 P1->P2를 쭉 이동한다!


3차..4차.. 방식도 모두 동일하다.
다만 이제 녹색 선이 차수-1개 만큼(3차에선 2개) 있고, 그 녹색 선들에서 점을 찍어서 새로운 선을 만들고...
그렇게 선을 만들었는데 그 선의 갯수가 여러개면 그 작업을 반복한 후,
단 하나의 선이 남는다면 그 선을 기준으로 곡선을 그린다.

 

C# 코드

var line1 = Vector2.Lerp(startPos, point, t);
var line2 = Vector2.Lerp(point, endPos, t);
                
var targetPoint = Vector2.Lerp(line1, line2, t);

 

실제 적용한 모습. 특정 경로로 진행하는 점이 아니라, 경로를 한번에 보여주기 위해 반복문이 아니라 한번에 10번 돌려서 점을 찍었다.

+참고로 점 P1의 위치는 기본적으로는 한 점의x, 다른 한 점의 y로 잡으면 되지만, 너가 원하는 곳으로 적당히 잡으면 된다.
위 사진의 경우는 좀 더 극적인 커브를 보여주기 위해 의도적으로 y값에 매직넘버를 더해주어 P1을 높게 잡았다.

매직넘버 전 후