Clean up some code

html/images/space.svg

@@ -112,6 +112,7 @@
     const degsRegex = /(-?\d*\.{0,1}\d+)deg/g;
     const regex = /(-?\d*\.{0,1}\d+)px/g;
     const bullets = [];
+    const halfPi = Math.PI / 2;
 
     let previous, zero, frameCount = 0;
     let position = [0, 0]; // meters
@@ -146,6 +147,8 @@
     const cornerPt = document.querySelector('svg').createSVGPoint();
     const wall = document.querySelector('#wall');
 
+    const startingTrianglePts = ["-20,20 20,20", "20,20 20,-20", "20,-20 -10,-30"];
+
     const points = wall.getAttribute('points').split(' ').map(coords => {
       const [x, y] = coords.split(',');
       return [+x, +y];
@@ -155,19 +158,15 @@
     const lineContainer = document.querySelector('#lines');
     const trianglePts = points.map((pt, i) => [pt, points[(i + 1) % points.length]]);
 
-
+    function drawEdges(lpts) {
-    function drawEdges() {
+      let edges = lpts.map(e => e.join(' '));
-      const lpts = wall.getAttribute('points').split(' ');
-      let edges = lpts.map((pt, i) => [pt, lpts[(i + 1) % lpts.length]]).map(e => e.join(' '));
-    // console.log(edges);
 
       edges.forEach(e => {
         const [x, y] = e.split(' ');
         const [x1, y1] = x.split(',');
         const [x2, y2] = y.split(',');
         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);
@@ -175,9 +174,8 @@
         lineContainer.appendChild(el)
       });
     }
-    // const edges = lpts.map((pt, i) => [pt.split(','), lpts[(i + 1) % lpts.length].split(',')]);
 
-    drawEdges();
+    drawEdges(trianglePts);
 
     function drawTriangles(container, pts, [positionX, positionY]) {
       pts.forEach(([[x1, y1], [x2, y2]]) => {
@@ -195,7 +193,6 @@
       const delim = ' ';
       const className = 'clockwise-orientation';
       const visible = [];
-      const PI = Math.PI / 2;
 
       triangles.forEach(t => {
         const attr = t.getAttribute('points').split(delim);
@@ -219,10 +216,10 @@
           const dc = distance(ax, ay, bx, by);
 
           // https://en.wikipedia.org/wiki/Law_of_cosines
-          // Solve for angles α and β with inverse cosine (arccosine)
+          // Solve for angles alpha and beta with inverse cosine (arccosine)
-          const α = Math.acos((db ** 2 + dc ** 2 - da ** 2) / (2 * db * dc));
+          const alpha = Math.acos((db ** 2 + dc ** 2 - da ** 2) / (2 * db * dc));
-          const β = Math.acos((da ** 2 + dc ** 2 - db ** 2) / (2 * da * dc));
+          const beta = Math.acos((da ** 2 + dc ** 2 - db ** 2) / (2 * da * dc));
-          isAcute = α < PI && β < PI;
+          isAcute = alpha < halfPi && beta < halfPi;
         }
 
         if (pos !== attr.pop()) {
@@ -252,9 +249,9 @@
     }
 
     function fireBullet(x, y, velocity) {
+      const speed = 200; // meters per second
       const degrees = getRotate(gun);
       const radians = degrees * Math.PI / 180; // toFixed(15)?
-      const speed = 200; // meters per second
       const vx = -Math.sin(radians);
       const vy = Math.cos(radians);
       const bulletTimeout = 5000; // miliseconds
@@ -317,26 +314,8 @@
       });
     }
 
-    function updateLines([positionX, positionY]) {
-      lines.forEach(line => {
-        line.setAttribute('x2', positionX);
-        line.setAttribute('y2', positionY);
-
-        // let slope = (+line.getAttribute('y2') - +line.getAttribute('y1')) / (+line.getAttribute('x2') - +line.getAttribute('x1'));
-        // slope = +slope.toFixed(15);
-        // console.log('slope', slope);
-
-        const firstP = line.getPointAtLength(1);
-        if (polygon.isPointInFill(firstP)) {
-          line.setAttribute('x2', line.getAttribute('x1'));
-          line.setAttribute('y2', line.getAttribute('y1'));
-        }
-      });
-    }
-
     requestAnimationFrame(firstFrame);
 
-
     let start;
     let restart = false;
     function firstFrame(timestamp) {
@@ -350,14 +329,13 @@
       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);
-      // time.innerText = time.inner
       const elapsed = timestamp - previous;
+      const delta = timestamp - zero;
+      let degrees = getRotate(gun);
+
       previous = timestamp;
+      time.innerText = ((timestamp - zeroForTimer) * 0.001).toFixed(3);
 
       if (delta >= 1000) {
         fps.innerText = frameCount;
@@ -374,8 +352,6 @@
         frameCount++;
       }
 
-      let degrees = getRotate(gun);
-
       if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`;
       else if (rotate < 0) gun.style.transform = `rotate(${(+degrees - rotationSpeed * elapsed) % 360}deg)`;
 
@@ -404,18 +380,17 @@
       let [x, y] = getTranslate(hitbox);
       let position = [positionX, positionY] = restart ? [0, 0] : wrapPos(changeX + x, changeY + y);
 
-
       updateBullets(elapsed);
 
       const visibleTriangles = updateTriangles(position);
       const visibleTrianglePoints = [...visibleTriangles].map(p => p.getAttribute("points"));
+
       const mappedEdges = visibleTrianglePoints.map(vt => {
         vt = vt.split(' ');
         vt.pop();
         return vt.join(' ');
       });
 
-      // console.log(mappedEdges);
       [...lineContainer.children].forEach(l => {
         const x1 = l.getAttribute('x1');
         const y1 = l.getAttribute('y1');
@@ -427,16 +402,12 @@
         }
       });
 
-
       if (restart) {
         restart = false;
         [...lineContainer.children].forEach(c => c.remove());;
-        drawEdges();
+        drawEdges(trianglePts);
       }
 
-      // edges = [...edges.filter(e => !mappedEdges.includes(e))]
-
-      // console.log(edges)
       // info.innerText = [...visibleTriangles].map(t => {
       //   const [[ax, ay], [bx, by], [shipx, shipy]] =
       //     t.getAttribute('points').split(' ').map(n => n.split(',').map(n => +n));
@@ -475,7 +446,6 @@
         return shipBody.isPointInFill(cornerPt);
       });
 
-      const PI = Math.PI / 2;
       const shipRadius = 5;
       const sideCollision = [...visibleTriangles].reduce((acc, t) => {
         const [[ax, ay], [bx, by], [shipx, shipy]] =
@@ -488,7 +458,7 @@
         const hc = (2 / dc) * Math.sqrt(s * (s - da) * (s - db) * (s - dc));
         const alpha = Math.acos((db**2 + dc**2 - da**2) / (2 * db * dc));
         const beta = Math.acos((da**2 + dc**2 - db**2) / (2 * da * dc));
-        const acute = alpha < PI && beta < PI;
+        const acute = alpha < halfPi && beta < halfPi;
 
         return acute ? [...acc, hc] : acc;
       }, []).some(h => h <= shipRadius);
@@ -500,8 +470,6 @@
         // restart game
         zeroForTimer = timestamp;
         restart = true;
-        // position = [0, 0];
-        // acceleration = [0, 0];
       }
 
       // if (+y < 200)
@@ -623,59 +591,6 @@
           break;
       }
     });
-
-    // leftTurnButton.addEventListener("mousedown", function (e) {
-    //   acceleration[0] = -force;
-    // });
-    //
-    // leftTurnButton.addEventListener("mouseup", function (e) {
-    //   acceleration[0] = 0;
-    // });
-    //
-    // rightTurnButton.addEventListener("mousedown", function (e) {
-    //   acceleration[0] = force;
-    // });
-    //
-    // rightTurnButton.addEventListener("mouseup", function (e) {
-    //   acceleration[0] = 0;
-    // });
-    //
-    // reverseMoveButton.addEventListener("mousedown", function (e) {
-    //   acceleration[1] = -force;
-    // });
-    //
-    // reverseMoveButton.addEventListener("mouseup", function (e) {
-    //   acceleration[1] = 0;
-    // });
-    //
-    // forwardMoveButton.addEventListener("mousedown", function (e) {
-    //   acceleration[1] = force;
-    // });
-    //
-    // forwardMoveButton.addEventListener("mouseup", function (e) {
-    //   acceleration[1] = 0;
-    // });
-    //
-    // rotateCWButton.addEventListener("mousedown", function (e) {
-    //   rotate = 1;
-    // });
-    //
-    // rotateCWButton.addEventListener("mouseup", function (e) {
-    //   rotate = 0;
-    // });
-    //
-    // rotateCCWButton.addEventListener("mousedown", function (e) {
-    //   rotate = -1;
-    // });
-    //
-    // rotateCCWButton.addEventListener("mouseup", function (e) {
-    //   rotate = 0;
-    // });
-    //
-    // fireButton.addEventListener("click", function (e) {
-    //   const [x, y] = getTranslate(hitbox);
-    //   fireBullet(x, y, velocity);
-    // });
   //]]></script>
 </svg>