본문으로 건너뛰기
🛠️ToolsShed

Bézier Curve Calculator

끌어서 이동 가능한 제어점과 곡선 길이가 포함된 상호작용형 3차 Bézier 곡선 계산기입니다.

t에서의 점: (200.0, 200.0)  |  곡선 길이: ~0px

P0

x
y

P1

x
y

P2

x
y

P3

x
y

매개변수 방정식

B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3

캔버스의 제어점을 드래그하여 곡선 형태를 조정하세요

이 도구 소개

베지에 곡선 계산기는 그래픽 디자인, 애니메이션, 웹 개발, 공학 등 다양한 분야에서 널리 사용되는 3차 베지에 곡선을 시각화하고 조작하는 대화형 도구입니다. 캔버스 위에 4개의 제어점을 배치하면 로고, UI 애니메이션, 글꼴 윤곽, CAD의 복잡한 경로의 기초가 되는 부드러운 곡선을 만들 수 있습니다. 제어점이 곡선 모양에 미치는 영향을 이해하는 것은 벡터 그래픽이나 모션 디자인을 다루는 모든 사람에게 필수적인 기술입니다.

이 도구를 사용하려면 캔버스 중앙의 두 제어점(P1과 P2)을 드래그하여 조작합니다. 한편 끝점(P0과 P3)은 곡선의 시작점과 끝점을 고정합니다. 제어점을 이동하면 곡선이 실시간으로 업데이트되고, 도구는 곡선의 길이를 표시하여 애니메이션 타이밍이나 경로 계획의 거리 추정에 도움을 줍니다. 정밀한 제어가 필요한 경우 숫자 좌표를 직접 입력할 수도 있으므로 시각적 디자인과 기술적 계산 모두에 활용할 수 있습니다.

이 도구는 애니메이션의 이징 함수를 미세 조정하는 그래픽 디자이너, SVG 경로나 CSS 애니메이션 타이밍을 구현하는 개발자, 시뮬레이션에서 부드러운 전환을 모델링하는 엔지니어에게 매우 유용합니다. 실시간 길이 계산은 특히 스트로크 애니메이션을 계획하거나 모션 그래픽의 이동 거리를 추정할 때 도움이 됩니다. 3차 베지에 곡선으로만 제한되지만(2차나 고차 곡선 아님), 이는 대부분의 디자인 및 애니메이션 사용 사례를 충분히 커버합니다.

자주 묻는 질문

코드 구현

def cubic_bezier(p0, p1, p2, p3, t):
    """Evaluate a cubic Bézier curve at parameter t (0..1)."""
    u = 1 - t
    return (
        u**3 * p0[0] + 3*u**2*t * p1[0] + 3*u*t**2 * p2[0] + t**3 * p3[0],
        u**3 * p0[1] + 3*u**2*t * p1[1] + 3*u*t**2 * p2[1] + t**3 * p3[1],
    )

def bezier_length(p0, p1, p2, p3, steps=200):
    """Approximate curve length via numerical integration."""
    length = 0.0
    prev = cubic_bezier(p0, p1, p2, p3, 0)
    for i in range(1, steps + 1):
        curr = cubic_bezier(p0, p1, p2, p3, i / steps)
        dx, dy = curr[0] - prev[0], curr[1] - prev[1]
        length += (dx**2 + dy**2) ** 0.5
        prev = curr
    return length

def bezier_tangent(p0, p1, p2, p3, t):
    """Calculate the tangent direction at parameter t."""
    u = 1 - t
    dx = 3*u**2*(p1[0]-p0[0]) + 6*u*t*(p2[0]-p1[0]) + 3*t**2*(p3[0]-p2[0])
    dy = 3*u**2*(p1[1]-p0[1]) + 6*u*t*(p2[1]-p1[1]) + 3*t**2*(p3[1]-p2[1])
    return (dx, dy)

# Example: S-curve
p0, p1, p2, p3 = (0, 0), (0.5, 1), (0.5, -1), (1, 0)
length = bezier_length(p0, p1, p2, p3)
print(f"Curve length: {length:.4f}")
print(f"Point at t=0.5: {cubic_bezier(p0, p1, p2, p3, 0.5)}")

# Sample 10 points
for i in range(11):
    t = i / 10
    pt = cubic_bezier(p0, p1, p2, p3, t)
    print(f"t={t:.1f}: ({pt[0]:.3f}, {pt[1]:.3f})")

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.