AllGoMath

베지어 곡선 Bézier Curves

제어점과 de Casteljau 작도로 정의되는 베지어 곡선 시각화.

제어점을 드래그해 곡선 모양을 바꾸고, 매개변수 t를 움직이며 de Casteljau 선형보간이 곡선 위의 한 점을 찾아가는 작도 과정을 단계별로 확인합니다.

베지어 곡선은 제어점들의 가중 블렌드다. 가중치는 t가 0에서 1로 흐르며 매끄럽게 옮겨가는 베른슈타인 다항식이며, 그 합은 항상 1이다. de Casteljau 알고리즘은 이웃끼리 선형보간하고 다시 그 결과끼리 보간하기를 한 점이 남을 때까지 반복해 곡선 위의 점을 찾는다 — 수치적으로 안정적이며 모든 벡터 그래픽 도구의 기반이다. 곡선은 제어점이 이루는 볼록 껍질을 결코 벗어나지 않는다.

시간복잡도 O(n^2) (n = degree)

B(t) = sum_{i=0..n} C(n,i) * (1-t)^(n-i) * t^i * P_i

응용

폰트 렌더링

트루타입·오픈타입 폰트의 글리프 윤곽은 2차·3차 베지어 곡선을 이어 붙인 것이다. 픽셀이 아니라 소수의 제어점으로 정의되기 때문에 어떤 크기로 확대해도 매끄럽다.

CSS 이징 함수

ease-in, ease-out 같은 CSS 이징은 모두 cubic-bezier(x1, y1, x2, y2)다. 제어점 두 개가 시간-진행 곡선의 형태, 곧 애니메이션의 가속감을 결정한다.

드 카스텔조 작도

베지어 곡선은 두 점 사이를 t : 1−t로 내분하는 선형보간을 재귀적으로 반복한 결과다. 보조선이 단계별로 줄어들며 한 점으로 수렴하는 과정이 그 구조를 보여준다.