Bezier Eğrisi her zaman aynı uzunlukta

Question

HTML5 kanvasındaki bir oyun üzerinde çalışıyorum.

Ben iki nokta arasında bir S-şekilli kübik bezier eğrisi çizmek istiyorum, ama kontrol noktalarının koordinatlarını hesaplamak için bir yol arıyorum, böylece eğrinin kendisi her zaman aynı uzunluk ne olursa olsun aynı uzunlukta olur Noktalar, eğrinin düz bir çizgiye dönüştüğü noktaya ulaşıncaya kadardır.

Answer 1

Bu sayısal olarak çözülebilir. 4 kontrol noktasına sahip bir kübik bezerin olduğunu kabul ediyorum. Her adımda , ilk (P0) ve son (P3) noktalara sahip olursunuz ve toplam uzunluk sabit olacak şekilde P1 ve P2'yi hesaplamak istersiniz. Biz 1 sol zorunda Bu kısıtlamayı ekleme

(4 ile başlayan bitiş noktaları (2) ve sabit bir uzunluğa belirlenen başka -1) belli bir serbestlik derecesine kaldırır. Bu yüzden buna karar vermelisin.

Bezier eğrisi, 0 ile 1 arasında tanımlanan bir polinomdur, öğelerin toplamının kareköküne (2d?) Entegre etmeniz gerekir. kübik bir bezier için, bu, wolfram'ın nasıl çözüleceğini bilmediği 6 derecelik bir polinomun sqrt'u anlamına gelir. tüm diğer kontrol noktaları bilinen (veya başka bir kısıt bir bağımlılık kadar bilinir) varsa Ama bu sınırlama için önceden hesaplanmış değerlerin bir tasarruf tablo olabilir.

Answer 2

Eğrinin bezier eğri olması gerçekten gerekli midir? Toplam uzunluğu sabit olan iki dairesel yayı kullanmak çok daha kolay. Ve her zaman bir S şeklini alacaksınız. iki dairesel yay takılması

:

D uç nokta arasında Öklid mesafe olsun. İstediğimiz sabit uzunluk C olsun. Ben (resimde çizilmiş) b için aşağıdaki ifadeyi var: Birisi farklı bir şey alırsa, bir yorum bırakın bu yüzden doğru olup olmadığını

b = sqrt(D*sin(C/4)/4 - (D^2)/16) 

Kontrol etmedim.

DÜZENLEME: Denklemi çözerken elde ettiğim olumsuz çözümü de dikkate almalı ve hangisinin doğru olduğunu kontrol etmelisiniz. İşte

b = -sqrt(D*sin(C/4)/4 - (D^2)/16) 

Answer 3

düzeltmek için yakın var SVG bir çalışma örneği var:
http://phrogz.net/svg/constant-length-bezier.xhtml

Ben deneysel bitiş noktaları birinin üstüne olduğunda başka kolları olması gerektiğine karar
desiredLength x cos (30 °) 01.238.007 uzak kolları ; bitiş noktaları onların en uzak olduğunda ve (tabii) kolları birbirinin üstünde olmalıdır.Kırmızı çizgi üstünde ideali yaklaşan bir elips iken,

mavi çizgi gerçek İdeal denklem: Bütün İdeal noktaları çizmek elips gibi ait tür görünüyor. Elips için denklemin kullanılması (yukarıdaki örnekte yaptığım gibi), hattın ortada yaklaşık% 9 fazla olmasına izin verir.

// M is the MoveTo command in SVG (the first point on the path) 
// C is the CurveTo command in SVG: 
// C.x is the end point of the path 
// C.x1 is the first control point 
// C.x2 is the second control point 
function makeFixedLengthSCurve(path,length){ 
    var dx = C.x - M.x, dy = C.y - M.y; 
    var len = Math.sqrt(dx*dx+dy*dy); 
    var angle = Math.atan2(dy,dx); 
    if (len >= length){ 
    C.x = M.x + 100 * Math.cos(angle); 
    C.y = M.y + 100 * Math.sin(angle); 
    C.x1 = M.x; C.y1 = M.y; 
    C.x2 = C.x; C.y2 = C.y; 
    }else{ 
    // Ellipse of major axis length and minor axis length*cos(30°) 
    var a = length, b = length*Math.cos(30*Math.PI/180); 
    var handleDistance = Math.sqrt(b*b * (1 - len*len/(a*a))); 
    C.x1 = M.x + handleDistance * Math.sin(angle); 
    C.y1 = M.y - handleDistance * Math.cos(angle); 
    C.x2 = C.x - handleDistance * Math.sin(angle); 
    C.y2 = C.y + handleDistance * Math.cos(angle); 
    } 
}