WIP: firing arc cone

index.js

@@ -37,8 +37,6 @@ rect.addEventListener('mousemove', e => {
   let aim = document.querySelector('.firing-arc.active');
   let p = document.querySelector('polyline.firing-arc.active');
 
-  console.log(p);
-
   // TODO: handle horizontal and vertical lines
 
   if (aim || p) {
@@ -100,7 +98,23 @@ rect.addEventListener('mousemove', e => {
       }
     }
 
-    p.setAttributeNS(null, 'points', `${newX},${newY} ${x1px},${y1px} ${newX},${newY}`);
+
+    let slope = (y2px - y1px) / (x2px - x1px);
+    let inverseSlope = -1 / slope;
+
+    console.log('slope', slope);
+    console.log('inverse slope', inverseSlope);
+
+    let smlArcAngle = Math.atan(pointDistanceInInches / (6 * calcY)) * 2;
+    let distance = Math.sqrt((x2px - x1px)**2 + (y2px - y1px)**2);
+    let newY1 = y2px + distance * Math.atan(smlArcAngle / 2);
+    let newY2 = y2px - distance * Math.atan(smlArcAngle / 2);
+
+    // p.setAttributeNS(null, 'points', `${newX},${newY} ${x1px},${y1px} ${newX},${newY}`);
+    // p.setAttributeNS(null, 'points', `${x2px},${y2px} ${x1px},${y1px} ${x2px},${y2px}`);
+    p.setAttributeNS(null, 'points', `${x2px},${newY1} ${x1px},${y1px} ${x2px},${newY2}`);
+
+    console.log(p);
 
     if (x2 - x1 > 0 && y2 - y1 > 0) {
       let yWhenXisMax = yIntercept(maxX);

style.css

@@ -45,6 +45,7 @@ line.firing-arc {
 polyline.firing-arc {
   stroke: black;
   stroke-width: 5px;
+  fill: none;
 }
 
 image#img1 {