curva di tela JavaScript con lunghezza fissa

Question

voglio disegnare qualsiasi (randomizzato) Curva, con data:

• punto di partenza
• punto finale
• lunghezza della curva

Come posso fare una cosa del genere limitata dai limiti della tela, più la curva non può attraversare. Stavo cercando di trovare qualche soluzione ma non riesco a capirlo. Grazie per il tuo tempo.

Qui è vista più dettagliata di quello che voglio realizzare:

Questo è curva quadratica disegnata su tela. Va tutto bene. La domanda è, come disegnare questo senza tutti i punti, solo con la lunghezza fissa in pixel, i punti casuali, delimitati dalle dimensioni della tela e non attraversati.

Il codice potrebbe essere simile a questa:

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

Prova questo (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(); 

Questo sta usando quadraticCurveTo per disegnare una curva quadratica, dati due punti e calcolare un punto di controllo casuale da 20 a 100 pixel sopra il punto medio della curva.

---

Se si desidera che il quadratica di avere una specifica lunghezza d'arco (che è suona come si potrebbe dalla domanda), allora possiamo do some maths. lunghezza dell'arco di una quadratica (parabola) è:

Abbiamo l'equazione, in modo da calcolare la derivata:

Quindi, se definiamo questo sia u (x) , Wolfram alpha gives us:

Così, per un particolare x1 e x 2, potremmo calcolare i valori equivalenti di u (x), e quindi l'integrale.

Disegnare un quadratico generale utilizzando il punto di controllo comporta la conversione dell'equazione in forma vertice come si può vedere su this tutorial page. La cosa sensata sarebbe quella di ripetere i calcoli con quella equazione per cominciare, e ottenere una nuova equazione per 'u' nei termini giusti.