make entry part of the sim

TentpoleCC · Sep 27, 2024 · 0bff779 · 0bff779
1 parent 0c87c71
commit 0bff779
Showing 1 changed file with 36 additions and 8 deletions.
diff --git a/tent.html b/tent.html
@@ -23,7 +23,7 @@
         pointer-events: none;
       }
       .link {
-        stroke: #000;
+        stroke: black;
         stroke-width: 2.5px;
       }
       .node {
@@ -32,26 +32,29 @@
         stroke: white;
         stroke-width: 2px;
       }
+      .entry {
+        stroke: black;
+        stroke-width: 2;
+        stroke-dasharray: 6 6;
+      }
     </style>
   </head>
   <body>
     <main>
-      <div id="ground">
-        <svg width="96" height="96" viewBox="0 0 221 221" fill="none" xmlns="http://www.w3.org/2000/svg" id="entry">
-          <path d="M219 220.519C219 160.586 170.423 2 110.5 2C50.5771 2 2 160.586 2 220.519" stroke="black" stroke-width="4" stroke-dasharray="12 12"/>
-        </svg>
-      </div>
+      <div id="ground"></div>
     </main>
   </body>
   <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
   <script type="module">
     const ground = document.getElementById("ground");
-    const entry = document.getElementById("entry");
     const width = window.innerWidth;
     const centerX = width / 2;
     const height = 500;
     const bottom = height - 100;
     const tentHeight = 130;
+    const entryXOffset = 50;
+    const entryYOffset = 30;
+    const lineOffset = 5;
 
     let nodes = [
       { id: "bfl", fx: centerX - 100, fy: bottom},
@@ -70,7 +73,13 @@
       { source: "bbl", target: "t"},
       { source: "bbr", target: "t"}
     ];
+    let entryPoints = [
+      [centerX - 100 + entryXOffset, bottom],
+      [centerX, bottom - tentHeight + entryYOffset],
+      [centerX + 100 - entryXOffset, bottom]
+    ];
 
+    const entryCurve = d3.line().curve(d3.curveNatural);
     const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
 
     const link = svg
@@ -86,6 +95,11 @@
       .attr("r", 6)
       .classed("node", true);
 
+    const entry = svg.append('path')
+      .attr('d', entryCurve(entryPoints))
+      .attr('fill', 'none')
+      .classed("entry", true);
+
     function tick(x) {
       link
         .attr("x1", d => d.source.x)
@@ -115,7 +129,8 @@
           let sway = Math.sin(t * 0.0005);
           node.fx = centerX - sway * 15;
           node.fy = bottom - tentHeight - sway * 3;
-          entry.style.transform = `translateX(-50%) skewX(${14 * sway}deg)`;
+          entryPoints[1] = [centerX - sway * 15, bottom - tentHeight + entryYOffset - sway * 3];
+          entry.attr('d', entryCurve(entryPoints));
         }
         simulation.alpha(1).restart();
         return node;
@@ -127,8 +142,21 @@
     function dragged(event, d) {
       d.fx = clamp(event.x, 0, width);
       d.fy = clamp(event.y, 0, height);
+      if (d.id === "t") {
+        entryPoints[1] = [d.fx, d.fy + entryYOffset];
+      }
+      if (d.id === "bfl") {
+        entryPoints[0] = [
+          d.fx + entryXOffset, d.fy - lineOffset];
+      }
+      if (d.id === "bfr") {
+        entryPoints[2] = [
+          d.fx - entryXOffset, d.fy - lineOffset];
+      }
+      entry.attr('d', entryCurve(entryPoints));
       simulation.alpha(1).restart();
     }
+
     const drag = d3.drag().on("drag", dragged);
     node.call(drag);
     ground.append(svg.node());