title: Avoid crossing of geometries
body: <p>I would like to work with this code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let vertices = [];
  
  function setup() {
    createCanvas(windowWidth, windowHeight);
    let numberOfVertices = random(3, 11); //pick the number of points
    for (let i = 0; i &lt; numberOfVertices; i++) {
      vertices.push(createVector(random(width), random(height))); //add a point to the list of points
    }
  }
  
  function draw() {
    background(220);
    fill(255, 0, 0);
    noStroke();
    beginShape();
    for (let i = 0; i &lt; vertices.length; i++) {
      vertex(vertices[i].x, vertices[i].y);//place each vertex
    }
    endShape();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  margin: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Unfortunately, the geometries sometimes cross. How is it possible to avoid that?</p>
  <p>Would be very thankful for help!</p>