Bézier Curve Calculator
Sürüklenebilir kontrol noktaları ve eğri uzunluğu ile etkileşimli kübik Bézier eğri hesaplayıcısı.
t'deki nokta: (200.0, 200.0) | Eğri Uzunluğu: ~0px
P0
P1
P2
P3
Parametrik Denklem
B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3
Eğrinin şeklini ayarlamak için kontrol noktalarını tuval üzerinde sürükleyin
Bu araç hakkında
Bézier eğrisi hesaplayıcı, grafik tasarım, animasyon, web geliştirme ve mühendislikte yaygın olarak kullanılan kübik Bézier eğrilerini görselleştirmek ve değiştirmek için etkileşimli bir araçtır. Tuval üzerine dört kontrol noktası yerleştirerek, logolar, UI animasyonları, yazı tipi konturları ve bilgisayar destekli tasarımda karmaşık yolların temeli olan düz eğriler şekillendirebilirsiniz. Kontrol noktalarının eğri şeklini nasıl etkilediğini anlamak, vektör grafikleri veya hareket tasarımı ile çalışan herkes için gereklidir.
Aracı kullanmak için, tuvalin merkezindeki iki kontrol noktasını (P1 ve P2) sürükleyerek başlarsınız; uç noktalar (P0 ve P3) eğrinin başlangıcını ve sonunu sabitler. Kontrol noktalarını hareket ettirirken eğri gerçek zamanlı olarak güncellenir ve araç eğri uzunluğunu göstererek, animasyon zamanlaması veya yol planlaması için mesafeleri tahmin etmenize yardımcı olur. Kesin kontrol gerekiyorsa sayısal koordinatları doğrudan girebilirsiniz; bu da hem görsel tasarım hem de teknik hesaplamalar için faydalı hale getirir.
Bu araç, animasyon easing fonksiyonlarını ince ayar yapan grafik tasarımcılar, SVG yolları veya CSS animasyon zamanlaması uygulayan geliştiriciler ve simülasyonlarda düz geçişleri modelleyen mühendisler için çok değerlidir. Gerçek zamanlı uzunluk hesaplaması, özellikle strok animasyonlarını planlarken veya hareket grafikleri içinde seyahat mesafesini tahmin ederken yararlıdır. Kübik Bézier eğrileriyle sınırlı olsa da (ikinci dereceden veya daha yüksek dereceli eğriler değil), bu tasarım ve animasyon kullanım durumlarının büyük çoğunluğunu kapsar.
Sıkça Sorulan Sorular
Kod Uygulaması
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.