Javascript Leinwand Kurve mit fester Länge

Question

Ich mag jede (randomisiert) Kurve zeichnen, mit gegeben:

• Startpunkt
• Endpunkt
• Kurvenlänge

Wie kann ich tun so etwas wird durch die Grenzen der Leinwand begrenzt, und die Kurve kann nicht kreuzen. Ich habe versucht, eine Lösung zu finden, aber ich kann das nicht herausfinden. Vielen Dank für Ihre Zeit.

Hier detailliertere Ansicht von dem, was ich erreichen will:

Diese quadratische Kurve auf Leinwand gezogen wird. Alles ist gut. Die Frage ist, wie man dies ohne alle Punkte zeichnet, nur mit der festen Länge in Pixeln, zufälligen Punkten, begrenzt durch Leinwandgröße und nicht überkreuzend.

function fixedCurve(A, B, length){ 
    for(int i = A; i < B; i++){ 
     //Calculate random point with propper distance to get first base point, random direction could be calculated before loop. 
     //Basicly this loop should calculate integrate of the curve and draw it each step. 
    } 
} 

Answer 1

testen (fiddle):

function draw() { 
    var ctx = document.getElementById('canvas').getContext('2d'); 

    ctx.fillStyle = "red"; 

    ctx.beginPath(); 
    var start = [20, 100]; 
    var end = [120, 100]; 
    var above = Math.random()*80+20; 
    // find the mid point between the ends, and subtract distance above 
    // from y value (y increases downwards); 
    var control = [0.5*(start[0]+end[0]), 0.5*(start[1]+end[1])-above];  
    ctx.moveTo(start[0], start[1]); 

    ctx.quadraticCurveTo(control[0], control[1], end[0], end[1]); 
    ctx.stroke(); 
} 

draw(); 

Dies wird unter Verwendung einer quadratischen Kurve, da zwei Punkte quadraticCurveTo zu zeichnen

Der Code wie folgt aussehen könnte und Berechnen eines zufälligen Kontrollpunkts 20 bis 100 Pixel über dem Mittelpunkt der Kurve.

---

Wenn Sie die quadratische wollen eine bestimmte Bogenlänge haben (was klingt, ist, wie Sie von der Frage könnte), dann können wir do some maths. Bogenlänge einer quadratischen (Parabel) ist:

wir die Gleichung haben, so funktionieren die Ableitung:

Also, wenn wir definieren diese u (x) Wolfram alpha gives us,:

So für eine bestimmte x1 und x 2, könnten wir die äquivalenten Werte von u (x) ausrechnen, und dann das Integral.

Das Zeichnen eines allgemeinen Quadrats mit dem Kontrollpunkt beinhaltet das Konvertieren der Gleichung in die Scheitelpunktform, wie Sie auf this tutorial page sehen können. Die vernünftige Sache wäre, die Mathematik mit dieser Gleichung zu wiederholen, um damit zu beginnen, und eine neue Gleichung für 'u' in den richtigen Begriffen zu bekommen.