Lewati ke konten
🛠️ToolsShed

Bézier Curve Calculator

Kalkulator kurva Bézier kubik interaktif dengan titik kontrol yang dapat diseret dan panjang kurva.

Titik pada t: (200.0, 200.0)  |  Panjang Kurva: ~0px

P0

x
y

P1

x
y

P2

x
y

P3

x
y

Persamaan Parametrik

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

Seret titik kontrol pada kanvas untuk menyesuaikan bentuk kurva

Tentang alat ini

Kalkulator kurva Bézier adalah alat interaktif untuk memvisualisasikan dan memanipulasi kurva Bézier kubik, yang banyak digunakan dalam desain grafis, animasi, pengembangan web, dan teknik. Dengan memposisikan empat titik kontrol pada kanvas, Anda dapat membentuk kurva halus yang menjadi fondasi logo, animasi UI, garis besar font, dan jalur kompleks dalam desain berbantuan komputer. Memahami bagaimana titik kontrol mempengaruhi bentuk kurva sangat penting bagi siapa pun yang bekerja dengan grafis vektor atau desain gerakan.

Untuk menggunakan alat, Anda mulai dengan menyeret dua titik kontrol (P1 dan P2) di tengah kanvas sementara titik akhir (P0 dan P3) menahan awal dan akhir kurva. Saat Anda memindahkan titik kontrol, kurva diperbarui secara real-time dan alat menampilkan panjang kurva, membantu Anda memperkirakan jarak untuk timing animasi atau perencanaan jalur. Anda juga dapat memasukkan koordinat numerik langsung jika memerlukan kontrol yang tepat, menjadikannya berguna untuk desain visual dan perhitungan teknis.

Alat ini sangat berharga bagi desainer grafis yang menyempurnakan fungsi easing animasi, pengembang yang mengimplementasikan jalur SVG atau timing animasi CSS, dan insinyur yang memodelkan transisi halus dalam simulasi. Perhitungan panjang real-time sangat membantu saat merencanakan animasi goresan atau memperkirakan jarak perjalanan dalam grafis gerakan. Meskipun terbatas pada kurva Bézier kubik (bukan kuadrat atau orde lebih tinggi), ini mencakup sebagian besar kasus penggunaan desain dan animasi.

Pertanyaan yang Sering Diajukan

Implementasi Kode

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.