如何避免样条曲线与随机 Blobby Circle 重叠

Question

我正在尝试在 canvas 中生成随机斑点形状。我能够这样做，在一个圆中生成点，这些点的值乘以一个随机因子，然后使用基数样条连接它们。它工作正常，但有时样条曲线会自身重叠或点之间的角度太锐利。

如何防止这种情况发生？谢谢！

const random = (min, max) => {
  if (max == null) {
    max = min;
    min = 0
  }
  if (min > max) {
    var tmp = min;
    min = max;
    max = tmp
  }
  return min + (max - min) * Math.random()
}

const randomShape = (x, y, size) => {
  let points = []
  let numPoints = 20
  let slice = (Math.PI * 2) / numPoints
  let minRadius = random(15, size * 0.5)
  let maxRadius = random(15, size * 0.5)
  let startAngle = random(Math.PI * 2)

  for (let i = 0; i < numPoints; i++) {
    let angle = startAngle + i * slice
    points.push(Math.floor(x + Math.cos(angle) * random(minRadius, maxRadius)),
      Math.floor(y + Math.sin(angle) * random(minRadius, maxRadius)))
  }

  return {
    x: x,
    y: y,
    points: points
  }
}

Answer 1

如果你用直线连接你的点，你会发现你的折线会自相交或（几乎）重叠。这意味着样条重叠问题不是由基数样条插值问题引起的，而是您的数据点问题。

如果我们查看您的代码，我们会发现数据点的 X 和 Y 坐标计算为

X= Math.floor(x + Math.cos(angle) * random(minRadius, maxRadius))
Y= Math.floor(y + Math.sin(angle) * random(minRadius, maxRadius))

这也意味着您的 X 和 Y 值是根据不同的“半径”值计算的，这可能是您的数据点出现问题的原因。因此，更改只是对每个点调用 random() 函数 1 次。

如何避免样条曲线与随机 Blobby Circle 重叠

How to Avoid Spline Overlap with Random Blobby Circle

javascript

canvas

curve

spline