画布"随机"曲线形状

Question

我想在画布上绘制随机看起来弯曲的斑点,但我似乎无法想出一个算法来做到这一点.我试过像这样创建随机贝塞尔曲线:

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)。