title: How to Avoid Spline Overlap with Random Blobby Circle
body: <p>I'm trying to generate random blob shapes in canvas. I am able to do so generating points in a circle whose values are multiplied by a random factor then using a cardinal spline to connect them. It works okay, but sometimes the spline will overlap itself or the angle between the points will be too acute.
  <a href="https://i.stack.imgur.com/EVRX2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EVRX2.jpg" alt="enter image description here" /></a></p>
  <p>How can I prevent this from occurring? Thank you!</p>
  <pre class="lang-js prettyprint-override"><code>const random = (min, max) =&gt; {
    if (max == null) {
      max = min;
      min = 0
    }
    if (min &gt; max) {
      var tmp = min;
      min = max;
      max = tmp
    }
    return min + (max - min) * Math.random()
  }
  
  const randomShape = (x, y, size) =&gt; {
    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 &lt; 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
    }
  }
  </code></pre>