Stop when all edges have been mapped

html/images/space.svg

@@ -350,6 +350,8 @@
       return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
     }
 
+    const startingTrianglePts = ["-20,20 20,20", "20,20 20,-20", "20,-20 -10,-30"];
+
     function animate(timestamp) {
       const delta = timestamp - zero;
       time.innerText = ((timestamp - zeroForTimer) * 0.001).toFixed(3);
@@ -413,17 +415,19 @@
         return vt.join(' ');
       });
 
+      // console.log(mappedEdges);
       [...lineContainer.children].forEach(l => {
         const x1 = l.getAttribute('x1');
         const y1 = l.getAttribute('y1');
         const x2 = l.getAttribute('x2');
         const y2 = l.getAttribute('y2');
         const str = `${x1},${y1} ${x2},${y2}`;
-        if (mappedEdges.includes(str)) {
+        if (mappedEdges.includes(str) && (lineContainer.childElementCount < 4 || !startingTrianglePts.includes(str))) {
           l.remove();
         }
       });
 
+
       if (restart) {
         restart = false;
         [...lineContainer.children].forEach(c => c.remove());;
@@ -502,7 +506,8 @@
 
       // if (+y < 200)
       // if (timestamp < 10000)
-      requestAnimationFrame(t => animate(t));
+      if (lineContainer.childElementCount > 0)
+        requestAnimationFrame(t => animate(t));
     }
 
     let force = 1;