cubic bezier path editing

이번에는 cubic bezier입니다.

벡터 편집기에서 곡선을 다루려면 언젠가 이 친구를 만나게 됩니다. cubic bezier는 시작점, 끝점, 그리고 두 control point로 곡선을 만듭니다.

처음엔 control point가 곡선 위에 있지 않아서 조금 얄밉게 느껴질 수 있습니다. 하지만 이 점들이 tangent 방향과 곡률을 조절합니다.

네 점으로 곡선을 만든다

B(t) = (1-t)^3 P0 + 3(1-t)^2 t P1 + 3(1-t)t^2 P2 + t^3 P3
tangent at start = P1 - P0
tangent at end = P3 - P2

cubic bezier의 control point는 곡선 위 점이 아니라 tangent를 조절하는 손잡이입니다. 핸들을 움직이면 시작/끝 방향이 바뀝니다.

P0는 시작점, P3는 끝점입니다. P1, P2는 control point입니다. path editor에서 보이는 handle이 바로 이 control point를 조작합니다.

시작 tangent는 P1 - P0, 끝 tangent는 P3 - P2입니다. 그래서 handle 방향을 바꾸면 곡선이 시작하거나 끝나는 방향이 바뀝니다.

SVG에서는 C 명령으로 cubic bezier를 씁니다.

M P0.x P0.y C P1.x P1.y, P2.x P2.y, P3.x P3.y

control handle을 움직이면 path d 문자열의 C 명령을 갱신합니다.

de Casteljau 알고리즘은 곡선 위의 점을 시각적으로 설명하기 좋고, 곡선을 split할 때도 쓸 수 있습니다. smooth point는 양쪽 tangent를 같은 직선 위에 두는 제약입니다.

데모에서는 control point를 움직이며 tangent 방향과 곡선 시작/끝 방향이 어떻게 연결되는지 확인합니다.

오늘의 핵심은 bezier handle이 장식이 아니라 tangent를 조절하는 수학적 도구라는 점입니다. 곡선은 감성적으로 보이지만, 안쪽은 꽤 정확합니다.