windy rope

folk-systems · Dec 4, 2024 · 4e2ece8 · 4e2ece8
1 parent a7421f9
commit 4e2ece8
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 0 deletions.
diff --git a/demo/sticky-html-rope.html b/demo/sticky-html-rope.html
@@ -26,9 +26,17 @@
         inset: 0 0 0 0;
         pointer-events: none;
       }
+
+      button {
+        margin: 1rem;
+        background-color: black;
+        font-size: 2rem;
+        border-radius: 5px;
+      }
     </style>
   </head>
   <body>
+    <button id="wind">☁️</button>
     <folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape>
     <folk-shape id="box2" x="300" y="105" width="30" height="30"></folk-shape>
     <folk-shape id="box3" x="200" y="150" width="30" height="30"></folk-shape>
@@ -40,6 +48,29 @@
     <script type="module">
       import '../src/standalone/folk-shape.ts';
       import '../src/standalone/folk-rope.ts';
+
+      let timeout = -1;
+      let isBlowing = false;
+      const ropes = document.querySelectorAll('folk-rope');
+      const randomInt = (multiplier, adjust = 0) => Math.floor(Math.random() * multiplier) + adjust;
+      const updateGravity = (gravity) => ropes.forEach((rope) => (rope.gravity = gravity));
+
+      function simulateWind() {
+        updateGravity({ x: randomInt(5000), y: randomInt(5000) });
+        timeout = setTimeout(simulateWind, randomInt(1000, 200));
+      }
+
+      wind.addEventListener('click', () => {
+        if (isBlowing) {
+          clearTimeout(timeout);
+          updateGravity({ x: 0, y: 3000 });
+          wind.textContent = '☁️';
+        } else {
+          simulateWind();
+          wind.textContent = '🌬️';
+        }
+        isBlowing = !isBlowing;
+      });
     </script>
   </body>
 </html>
diff --git a/src/folk-rope.ts b/src/folk-rope.ts
@@ -42,6 +42,14 @@ export class FolkRope extends FolkBaseConnection {
     return this.#points;
   }
 
+  get gravity() {
+    return this.#gravity;
+  }
+
+  set gravity(gravity) {
+    this.#gravity = gravity;
+  }
+
   #stroke = '';
   get stroke() {
     return this.#stroke;