帆布“随机”弯曲的形状

Question

我想绘制一个随机的曲面blob在画布上，但我似乎无法想出一个算法来做到这一点。我试图创建这样的随机贝塞尔曲线：

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; 
} 

（这是一种简化...我加约束的线位在画面内等） 的问题，这是得到了头回到起点，并且不仅仅是制造大量的尴尬角落。有没有人知道有一个更好的算法来做到这一点，或者可以想出一个呢？

编辑：我已经取得了一些进展。我再次开始，用直线工作（我想我知道该做点什么才能让他们顺利进入Beziers）。我已经设置了它，以便在绘制每个点之前，它会计算出距离前一个点的距离和角度。如果距离小于一定量，则关闭曲线。否则，根据迭代次数，可能的角度变窄，最大线长度是到起点的距离。所以这是一些代码。

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

我现在已经得到的问题是，该形状的轮廓往往跨越本身，它看起来是错误的。我能想到解决这个问题的唯一方法是跟踪边界框，并且每个新点都应始终走出边界框。这很棘手，因为计算可用角度会增加整个复杂度。

Answer 1

一种可能性是使用极坐标，并且半径是角度的函数。对于光滑斑点你想要的半径要光滑，并有在0到2 * pi相同的值，可以使用三角多项式来完成：

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

其中系数是“随机”。要控制半径的大小，可以搜索半径函数的最大值和最小值，然后适当地移位和缩放系数（例如，如果您想要rlo < = r < = rhi，并找到最小值和最大值，然后替换每个系数​​a + b * original，其中b =（rhi-rlo）/（max-min）和a = rlo-b * min）。