Draw edges

html/images/space.svg

@@ -37,27 +37,31 @@
       font-family: courier;
     }
 
-    #lines {
+    #triangles {
       opacity: 0.5;
     }
 
-    #lines line {
+    #triangles line {
       stroke: limegreen;
       stroke-width: 0.5px;
     }
 
-    #lines polygon {
+    #triangles polygon {
       fill-opacity: 0.2;
       stroke-width: 0.5px;
       fill: none;
       stroke: none;
     }
 
-    #lines polygon.clockwise-orientation {
+    #triangles polygon.clockwise-orientation {
       fill: white;
       stroke: red;
     }
 
+    #lines line {
+      stroke: gold;
+    }
+
     #legs {
       display: none;
     }
@@ -79,6 +83,8 @@
 
     <polygon id="wall" points="-10,-30 -10,-40 30,-50 60,-30 80,0 150,0 150,10 60,50 -10,40 -20,20 20,20 20,-20" />
     <!-- <rect id="rect1" x="30" y="30" width="20" height="20"/> -->
+    <g id="triangles">
+    </g>
     <g id="lines">
     </g>
 
@@ -145,8 +151,23 @@
       return [+x, +y];
     });
 
-    const triangleContainer = document.querySelector('#lines');
+    const triangleContainer = document.querySelector('#triangles');
+    const lineContainer = document.querySelector('#lines');
     const trianglePts = points.map((pt, i) => [pt, points[(i + 1) % points.length]]);
+    const lpts = wall.getAttribute('points').split(' ');
+    const edges = lpts.map((pt, i) => [pt.split(','), lpts[(i + 1) % lpts.length].split(',')]);
+    // console.log(edges);
+
+    edges.forEach(([[x1, y1], [x2, y2]]) => {
+      const el = document.createElementNS(namespaceURIsvg, 'line');
+      // const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}`
+      // const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}`
+      el.setAttribute('x1', x1);
+      el.setAttribute('y1', y1);
+      el.setAttribute('x2', x2);
+      el.setAttribute('y2', y2);
+      lineContainer.appendChild(el)
+    });
 
     function drawTriangles(container, pts, [positionX, positionY]) {
       pts.forEach(([[x1, y1], [x2, y2]]) => {
@@ -376,6 +397,8 @@
       // updateLines(position);
       const visibleTriangles = updateTriangles(position);
 
+      // console.log(visibleTriangles);
+
       // info.innerText = [...visibleTriangles].map(t => {
       //   const [[ax, ay], [bx, by], [shipx, shipy]] =
       //     t.getAttribute('points').split(' ').map(n => n.split(',').map(n => +n));