tent sim wip

TentpoleCC · Sep 27, 2024 · 0c87c71 · 0c87c71
1 parent 7558299
commit 0c87c71
Showing 1 changed file with 136 additions and 0 deletions.
diff --git a/tent.html b/tent.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>⛺</title>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        font-family: Arial, sans-serif;
+      }
+      #ground {
+        position: relative;
+        height: 500px;
+      }
+      #entry {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 105px;
+        pointer-events: none;
+      }
+      .link {
+        stroke: #000;
+        stroke-width: 2.5px;
+      }
+      .node {
+        cursor: move;
+        fill: black;
+        stroke: white;
+        stroke-width: 2px;
+      }
+    </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>
+    </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;
+
+    let nodes = [
+      { id: "bfl", fx: centerX - 100, fy: bottom},
+      { id: "bfr", fx: centerX + 100, fy: bottom},
+      { id: "bbl", fx: centerX - 25, fy: bottom - 45},
+      { id: "bbr", fx: centerX + 25, fy: bottom - 45},
+      { id: "t", fx: centerX, fy: bottom - tentHeight}
+    ];
+    let links = [
+      { source: "bfl", target: "bfr"},
+      { source: "bbl", target: "bbr"},
+      { source: "bfl", target: "bbl"},
+      { source: "bfr", target: "bbr"},
+      { source: "bfl", target: "t"},
+      { source: "bfr", target: "t"},
+      { source: "bbl", target: "t"},
+      { source: "bbr", target: "t"}
+    ];
+
+    const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
+
+    const link = svg
+      .selectAll(".link")
+      .data(links)
+      .join("line")
+      .classed("link", true);
+
+    const node = svg
+      .selectAll(".node")
+      .data(nodes)
+      .join("circle")
+      .attr("r", 6)
+      .classed("node", true);
+
+    function tick(x) {
+      link
+        .attr("x1", d => d.source.x)
+        .attr("y1", d => d.source.y)
+        .attr("x2", d => d.target.x)
+        .attr("y2", d => d.target.y);
+      node
+        .attr("cx", d => d.x)
+        .attr("cy", d => d.y);
+    }
+
+    const simulation = d3
+      .forceSimulation()
+      .nodes(nodes)
+      .force("charge", d3.forceManyBody())
+      .force("center", d3.forceCenter(width / 2, height / 2))
+      .force("link", d3.forceLink(links).id(d => d.id))
+      .on("tick", tick);
+
+    function clamp(x, lo, hi) {
+      return x < lo ? lo : x > hi ? hi : x;
+    }
+
+    function sway(t) {
+      nodes = nodes.map(function(node) {
+        if (node.id === "t") {
+          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)`;
+        }
+        simulation.alpha(1).restart();
+        return node;
+      });
+      requestAnimationFrame(sway);
+    }
+    sway(performance.now());
+
+    function dragged(event, d) {
+      d.fx = clamp(event.x, 0, width);
+      d.fy = clamp(event.y, 0, height);
+      simulation.alpha(1).restart();
+    }
+    const drag = d3.drag().on("drag", dragged);
+    node.call(drag);
+    ground.append(svg.node());
+  </script>
+</html>