如何避免带有随机斑点圆的样条线重叠

问题描述

我正在尝试在画布中生成随机的斑点形状。我能够在圆上生成点，将其值乘以随机因子，然后使用基数样条曲线将它们连接起来。可以，但是有时样条曲线会重叠，或者点之间的角度太锐利。

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

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

解决方法

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

如果查看您的代码，我们会发现数据点的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（）函数进行一次调用。

canvas curve javascript spline