Bézier curve
1. 소개
프랑스의 공학자 피에르 베지에(Pierre Bézier)의 이름을 딴 곡선. 영어식으로 베지어 곡선으로 읽기도 한다. 2개 이상의 점으로 정의되는 매개변수 곡선이며, 점 몇개로 곡선을 특정할 수 있는 성질 때문에 CAD, 컴퓨터 그래픽 등 컴퓨터 환경, 특히 벡터 그래픽에서 곡선을 표현하는 데 널리 쓰인다.2. 이름과 역사
피에르 베지에의 이름을 따기는 했지만 그가 이 곡선을 고안한 것은 아니고, 수학적 기반인 번스타인 다항식[1]은 1912년에 만들어져 있었다. 그것을 곡선 형태로 실제 사용한 것은 프랑스의 수학자인 폴 카스텔조(Paul de Casteljau)[2]로, 1959년 즈음 시트로엥에서 일하면서 현재 형태의 베지에 곡선을 수치적으로 계산해내는 알고리즘[3]을 고안해 컴퓨터를 기반으로 한 설계에 활용했다.피에르 베지에는 1960년대에 르노에서 일하면서 마찬가지로 번스타인 다항식을 기반으로 한 곡선, 그리고 그것을 컴퓨터에서 사용하기 위한 이런저런 아이디어 등을 만들어냈는데, 특허를 내는 등 카스텔조에 비해 자기 성과를 널리 알렸기 때문에 해당 곡선에는 베지에의 이름이 붙게 되었다.
3. 정의
베지에 곡선 하나를 정의하는 데는 2개 이상의 점이 필요한데, 이 점을 control point라 한다. 한국어로는 조절점, 조정점, 제어점 등의 여러 번역어가 있는데 여기서는 조절점을 쓰기로 하자.[math(n)]개의 조절점으로 이루어진 베지에 곡선을 [math(n-1)]차 베지에 곡선이라고 한다. 예를 들어 [math(n)]이 2인, 점 두 개로 이루어진 베지에 곡선은 1차 베지에 곡선이다. 조절점 [math(P_0)]와 [math(P_1)]가 주어졌을 때 1차 베지에 곡선의 매개변수 방정식은 다음과 같다.
[math( \operatorname{B_1}( t ) = \begin{bmatrix} P_0 & P_1 \end{bmatrix} \begin{pmatrix} 1 - t \\ t \end{pmatrix} = (1 - t ) P_0 + t P_1 )]
위의 방정식을 잘 정리하면 직선의 방정식이 된다.3.1. 2차 베지에 곡선
quadratic Bézier curve조절점 [math(P_0)], [math(P_1)]과 [math(P_2)]가 주어졌을 때 2차 베지에 곡선은 [math(P_0)]와 [math(P_1)]로 정의된 1차 베지에 곡선 위의 점과, [math(P_1)]과 [math(P_2)]로 정의한 1차 베지에 곡선 위의 점을 선형 보간한 것으로 생각할 수 있다. 식으로 표현하면 다음과 같다.
[math( \begin{aligned}
\operatorname{B_2}( t )&= \begin{pmatrix} 1 - t & t \end{pmatrix} \begin{bmatrix} P_0 & P_1 \\ P_1 & P_2 \end{bmatrix} \begin{pmatrix} 1 - t \\ t \end{pmatrix} \\
&= \begin{bmatrix} P_0 & P_1 & P_2 \end{bmatrix} \begin{pmatrix} ( 1 - t )^2 \\ 2 ( 1 - t ) t \\ t^2 \end{pmatrix} \\
&= (1-t) [(1-t)P_0 + tP_1] + t [(1-t)P_1 + tP_2] \\
&= (1-t)^2 P_0 + 2(1-t)t P_1 + t^2 P_2
\end{aligned} )]
당연하게도 [math(t)]에 대한 이차식의 형태이다.
3.2. 3차 베지에 곡선
cubic Bézier curve3차 베지어 곡선도 아이디어는 똑같다. 점 4개가 주어졌을 때, 앞의 점 3개를 이용하여 2차 베지에 곡선을 생각하고, 뒤의 점 3개를 이용한 2차 베지에 곡선을 생각해서 선형 보간하면 된다. 물론 1차 베지에 곡선 3개를 생각하여 그것들로부터 2차 베지에 곡선 하나를 생각해도 마찬가지일 것이다. 정리하여 식으로 나타내면 다음과 같다.
[math( \begin{aligned}
\operatorname{B_3}( t )&= \begin{pmatrix} 1 - t & t \end{pmatrix} \begin{bmatrix} P_0 & P_1 & P_2 \\ P_1 & P_2 & P_3 \end{bmatrix} \begin{pmatrix} ( 1 - t )^2 \\ 2 ( 1 - t ) t \\ t^2 \end{pmatrix} \\
&= \begin{bmatrix} P_0 & P_1 & P_2 & P_3 \end{bmatrix} \begin{pmatrix} ( 1 - t )^3 \\ 3 ( 1 - t )^2 t \\ 3 ( 1 - t ) t^2 \\ t^3 \end{pmatrix} \\
&= ( 1 - t )^3 P_0 + 3 ( 1 - t )^2 t P_1 + 3 ( 1 - t ) t^2 P_2 + t^3 P_3
\end{aligned} )]
3.3. n차 베지에 곡선
이제 대충 감이 왔을 것이다. [math(n)]차 베지에 곡선은 [math([( 1 - t ) + t]^n)] 꼴의 [math(n)]차 완전제곱식을 전개한 형태에 각 항마다 조절점을 곱한 형태로 나타내어지는게 보일 것이다. [math(n)]차 베지에 곡선은 [math(n-1)]차 베지에 곡선으로부터 재귀적으로 나타내거나, 아니면 이항계수를 써서 계수를 구하면 된다.4. 성질
- 첫 조절점에서 시작하고 마지막 조절점에서 끝난다.
- 모든 [math(n)]차 베지에 곡선은 [math(n)]보다 큰 [math(m)]차 베지에 곡선으로 나타낼 수 있다.
- 곡선 위의 어떤 점을 기준으로든 새로운 베지에 곡선 둘로 나눌 수 있다.
- 2차 베지에 곡선은 이차곡선이다.
- 베지에 곡선은 항상 조절점에 의해 만들어지는 볼록껍질(convex hull) 내부에 존재한다.
5. 활용
어도비 포토샵, 어도비 일러스트레이터 등 어도비 기반 펜 툴의 베지에 곡선. 펜 툴이 베지에 곡선과 직선들을 만들어 연결하는 도구이다. 그림에서 볼 수 있듯 양 끝점과 '핸들' 두 개를 가지고 있는 3차 베지에 곡선이다. 덕분에 3.5각형을 만들 수 있게 되었다.
GIMP 에서는 경로 도구에서 사용된다. 양 끝 점과 가운데 점에서 두 개의 핸들을 볼 수 있는데 2차 베지에 곡선 두 개가 사용된 거다. 여기에서 체험해 볼 수 있다.
| |
| 잉크스케이프에서 제공하는 베지에 곡선 전용툴(단축키 B)의 그래픽 예시 |
트루타입 폰트는 2차 베지에 곡선을, 포스트스크립트 등은 3차 베지에 곡선으로 글자의 외곽선을 표현하며, 오픈타입의 경우 둘 중 원하는 것을 쓸 수 있다. 베지에 곡선이 비트맵 폰트가 아닌 외곽선 글꼴을 가능하게 한 근간 기술이다.
osu!에서 곡선 슬라이더를 만들 때, 3점은 원호를 사용하고, 4점 이상부터 n차 베지에 곡선을 사용한다. 3점도 임의로 설정하면 베지에 곡선을 사용하도록 설정할 수 있다. 핸들을 사용하는 방식이 아닌, 베지에 곡선의 점을 하나씩 찍는 방식이다.
[1] https://en.wikipedia.org/wiki/Bernstein_polynomial[2] https://en.wikipedia.org/wiki/Paul_de_Casteljau[3] https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm