forme curve "casuali"

Question

Voglio disegnare blob ricurvi dall'aspetto casuale su una tela, ma non riesco a trovare un algoritmo per farlo. Ho provato la creazione di curve di Bezier casuali come questo:

context.beginPath(); 
// Each shape should be made up of between three and six curves 
var i = random(3, 6); 
var startPos = { 
    x : random(0, canvas.width), 
    y : random(0, canvas.height) 
}; 
context.moveTo(startPos.x, startPos.y); 
while (i--) { 
    angle = random(0, 360); 
    // each line shouldn't be too long 
    length = random(0, canvas.width/5); 
    endPos = getLineEndPoint(startPos, length, angle); 
    bezier1Angle = random(angle - 90, angle + 90) % 360; 
    bezier2Angle = (180 + random(angle - 90, angle + 90)) % 360; 
    bezier1Length = random(0, length/2); 
    bezier2Length = random(0, length/2); 
    bezier1Pos = getLineEndPoint(startPos, bezier1Length, bezier1Angle); 
    bezier2Pos = getLineEndPoint(endPos, bezier2Length, bezier2Angle); 
    context.bezierCurveTo(
     bezier1Pos.x, bezier1Pos.y 
     bezier2Pos.x, bezier2Pos.y 
     endPos.x, endPos.y 
    ); 
    startPos = endPos; 
} 

(questa è una semplificazione ... Ho aggiunto bit vincolanti le linee per all'interno della tela, ecc) Il problema di questo è ottenerlo a testa torna al punto di partenza, e anche non solo facendo un sacco di angoli imbarazzanti. Qualcuno sa di un algoritmo migliore per farlo o può pensarne uno?

Modifica: Ho fatto dei progressi. Ho ricominciato, lavorando con linee rette (penso di sapere cosa fare per renderle più fluide con Beziers, una volta che ho lavorato a questo bit). L'ho impostato in modo che prima di disegnare ogni punto, esso elabori la distanza e l'angolo all'inizio dal punto precedente. Se la distanza è inferiore a una certa quantità, chiude la curva. Altrimenti l'angolo possibile si restringe in base al numero di iterazioni e la lunghezza massima della linea è la distanza dall'inizio. Quindi ecco un codice.

start = { 
    // start somewhere within the canvas element 
    x: random(canvas.width), 
    y: random(canvas.height) 
}; 
context.moveTo(start.x, start.y); 
prev = {}; 
prev.length = random(minLineLength, maxLineLength); 
prev.angle = random(360); 
prev.x = start.x + prev.length * Math.cos(prev.angle); 
prev.y = start.y + prev.length * Math.sin(prev.angle); 

j = 1; 

keepGoing = true; 
while (keepGoing) { 
    j++; 
    distanceBackToStart = Math.round(
     Math.sqrt(Math.pow(prev.x - start.x, 2) + Math.pow(prev.y - start.y, 2))); 
    angleBackToStart = (Math.atan((prev.y - start.y)/(prev.x - start.x)) * 180/Math.pi) % 360; 
    if (isNaN(angleBackToStart)) { 
     angleBackToStart = random(360); 
    } 
    current = {}; 
    if (distanceBackToStart > minLineLength) { 
     current.length = random(minLineLength, distanceBackToStart); 
     current.angle = random(angleBackToStart - 90/j, angleBackToStart + 90/j) % 360; 
     current.x = prev.x + current.length * Math.cos(current.angle); 
     current.y = prev.y + current.length * Math.sin(current.angle); 
     prev = current; 
    } else { 
     // if there's only a short distance back to the start, join up the curve 
     current.length = distanceBackToStart; 
     current.angle = angleBackToStart; 
     current.x = start.x; 
     current.y = start.y; 
     keepGoing = false; 
    } 
    context.lineTo(current.x, current.y); 
} 
console.log('Shape complexity: ' + j); 
context.closePath(); 
context.fillStyle = 'black'; 
context.shadowColor = 'black'; 
context.shadowOffsetX = -xOffset; 
context.shadowOffsetY = -yOffset; 
context.shadowBlur = 50; 
context.fill(); 

Il problema che ho ora è che il contorno della forma spesso attraversa se stesso, il che sembra sbagliato. L'unico modo che posso pensare per risolvere questo è tenere traccia di un riquadro di delimitazione, e ogni nuovo punto dovrebbe sempre uscire dal riquadro di delimitazione. È difficile perché il calcolo dell'angolo disponibile aggiunge un intero livello di complessità.

Answer 1

Una possibilità sarebbe utilizzare le coordinate polari e il raggio deve essere una funzione dell'angolo. Per blobs regolare volete la distanza per essere liscia, e hanno lo stesso valore a 0 e 2 * pi, che può essere fatto utilizzando un polinomio trigonometrico:

radius(theta) = a_0 + a_1*sin(theta) + a_2*sin(2*theta) + ... + b_1*cos(theta) + ... 

dove i coefficienti sono "random". Per controllare quanto grande e piccolo il raggio si ottiene, è possibile cercare il massimo e il minimo della funzione del raggio, quindi spostare e ridimensionare opportunamente i coefficienti (ad esempio se si desidera rlo < = r < = rhi e trovato min e max, quindi sostituire ogni coefficiente a + b * originale, dove b = (rhi-rlo)/(max-min) e a = rlo-b * min).