From fa7c623002a02da5e2e6d1061460061cdbda41b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Sat, 16 Nov 2024 12:57:48 -0800
Subject: [PATCH] more rope

---
 demo/event-propagator.html     | 14 ++++++++----
 demo/wiggly.html               | 12 ++++++----
 src/arrows/event-propagator.ts | 12 +++++-----
 src/arrows/fc-rope.ts          | 42 ++++++++++++++--------------------
 4 files changed, 40 insertions(+), 40 deletions(-)
diff --git a/demo/event-propagator.html b/demo/event-propagator.html
index b0927fc..4559f36 100644
--- a/demo/event-propagator.html
+++ b/demo/event-propagator.html
@@ -16,19 +16,23 @@
       }
 
       fc-geometry {
-        border: 1px solid black;
-        border-radius: 3px;
+        background-color: black;
+        border-radius: 5px;
+        color: white;
+        padding: 0px 5px;
+        z-index: 10;
       }
 
       event-propagator {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
+        pointer-events: none;
       }
     </style>
   </head>
   <body>
-    <fc-geometry id="box1" x="100" y="100" width="50" height="50"></fc-geometry>
+    <fc-geometry id="box1" x="100" y="100" width="30" height="30"></fc-geometry>
     <fc-geometry id="box2" x="200" y="300">Hello World</fc-geometry>
     <event-propagator
       source="#box1"
@@ -37,8 +41,8 @@
       expression="$target.textContent += '!'"
     ></event-propagator>
 
-    <fc-geometry id="box3" x="150" y="200" width="50" height="50"></fc-geometry>
-    <fc-geometry id="box4" x="300" y="350" width="50" height="50"></fc-geometry>
+    <fc-geometry id="box3" x="150" y="200" width="30" height="30"></fc-geometry>
+    <fc-geometry id="box4" x="300" y="350" width="30" height="30"></fc-geometry>
     <event-propagator
       source="#box3"
       target="#box4"
diff --git a/demo/wiggly.html b/demo/wiggly.html
index 070edfe..d86d583 100644
--- a/demo/wiggly.html
+++ b/demo/wiggly.html
@@ -16,8 +16,8 @@
       }
 
       fc-geometry {
-        border: 1px solid black;
-        border-radius: 3px;
+        background-color: black;
+        border-radius: 10%;
       }
 
       fc-rope {
@@ -29,9 +29,13 @@
     </style>
   </head>
   <body>
-    <fc-geometry id="box1" x="100" y="100" width="50" height="50"></fc-geometry>
-    <fc-geometry id="box2" x="300" y="105">Hello World</fc-geometry>
+    <fc-geometry id="box1" x="100" y="100" width="30" height="30"></fc-geometry>
+    <fc-geometry id="box2" x="300" y="105" width="30" height="30"></fc-geometry>
+    <fc-geometry id="box3" x="200" y="150" width="30" height="30"></fc-geometry>
+    <fc-geometry id="box4" x="400" y="100" width="30" height="30"></fc-geometry>
     <fc-rope source="#box1" target="#box2"></fc-rope>
+    <fc-rope source="#box1" target="#box3"></fc-rope>
+    <fc-rope source="#box1" target="#box4"></fc-rope>
 
     <script type="module">
       import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
diff --git a/src/arrows/event-propagator.ts b/src/arrows/event-propagator.ts
index 280ec91..65dd848 100644
--- a/src/arrows/event-propagator.ts
+++ b/src/arrows/event-propagator.ts
@@ -1,9 +1,9 @@
-import { FolkConnection } from "./fc-connection.ts";
+import { FolkConnection } from './fc-connection.ts';
 
 export class EventPropagator extends FolkConnection {
-  static override tagName = "event-propagator";
+  static override tagName = 'event-propagator';
 
-  #triggers = (this.getAttribute("triggers") || "").split(",");
+  #triggers = (this.getAttribute('triggers') || '').split(',');
   get triggers() {
     return this.#triggers;
   }
@@ -11,20 +11,20 @@ export class EventPropagator extends FolkConnection {
     this.#triggers = triggers;
   }
 
-  #expression = "";
+  #expression = '';
   #function = new Function();
   get expression() {
     return this.#expression;
   }
   set expression(expression) {
     this.#expression = expression;
-    this.#function = new Function("$source", "$target", "$event", expression);
+    this.#function = new Function('$source', '$target', '$event', expression);
   }
 
   constructor() {
     super();
 
-    this.expression = this.getAttribute("expression") || "";
+    this.expression = this.getAttribute('expression') || '';
   }
 
   override observeSource() {
diff --git a/src/arrows/fc-rope.ts b/src/arrows/fc-rope.ts
index 8aca511..bd928e6 100644
--- a/src/arrows/fc-rope.ts
+++ b/src/arrows/fc-rope.ts
@@ -1,11 +1,6 @@
 import { AbstractArrow } from './abstract-arrow.ts';
-import { Vertex } from './utils.ts';
-//A small scaffold specifically to help me design code pen interactions
-
-//Math extensions
-const lerp = (first, second, percentage) => {
-  return first + (second - first) * percentage;
-};
+// This is a direct port from https://github.com/guerrillacontra/html5-es6-physics-rope/blob/master/js/microlib.js
+const lerp = (first, second, percentage) => first + (second - first) * percentage;
 
 class Vector2 {
   static zero() {
@@ -43,8 +38,7 @@ class Vector2 {
 }
 
 class App {
-  constructor(window, canvas, context, updateHandler, drawHandler, frameRate = 60) {
-    this._window = window;
+  constructor(canvas, context, updateHandler, drawHandler, frameRate = 60) {
     this._canvas = canvas;
     this._context = context;
     this._updateHandler = updateHandler;
@@ -59,18 +53,19 @@ class App {
   }
 
   start() {
-    this._lastTime = new Date().getTime();
+    this._lastTime = 0;
     this._currentTime = 0;
     this._deltaTime = 0;
     this._interval = 1000 / this._frameRate;
 
-    this._onRequestAnimationFrame();
+    this._onRequestAnimationFrame(performance.now());
   }
 
-  _onRequestAnimationFrame() {
-    this._window.requestAnimationFrame(this._onRequestAnimationFrame);
+  _onRequestAnimationFrame(timestamp) {
+    requestAnimationFrame(this._onRequestAnimationFrame);
+
+    this._currentTime = timestamp;
 
-    this._currentTime = new Date().getTime();
     this._deltaTime = this._currentTime - this._lastTime;
 
     if (this._deltaTime > this._interval) {
@@ -215,17 +210,14 @@ class Rope {
   }
 
   update(gravity, dt) {
-    for (let i = 0; i < this._points.length; i++) {
-      let point = this._points[i];
-
+    for (const point of this._points) {
       let accel = { ...gravity };
 
       RopePoint.integrate(point, accel, dt, this._prevDelta);
     }
 
     for (let iteration = 0; iteration < this._solverIterations; iteration++)
-      for (let i = 0; i < this._points.length; i++) {
-        let point = this._points[i];
+      for (const point of this._points) {
         RopePoint.constrain(point);
       }
 
@@ -262,7 +254,7 @@ export class FolkRope extends AbstractArrow {
       const args = {
         start: { x: 100, y: this.#canvas.height / 2 },
         end: { x: this.#canvas.width - 100, y: this.#canvas.height / 2 },
-        resolution: 10,
+        resolution: 5,
         mass: 1,
         damping: 0.99,
         gravity: { x: 0, y: 3000 },
@@ -300,17 +292,17 @@ export class FolkRope extends AbstractArrow {
         drawRopePoints(this.#points, args.ropeSize);
       };
 
-      const app = new App(window, this.#canvas, this.#context, tick, draw);
+      const app = new App(this.#canvas, this.#context, tick, draw);
 
       app.start();
     }
 
     const startingPoint = this.#rope.getPoint(0);
-    startingPoint.pos.x = sourceRect.right;
-    startingPoint.pos.y = sourceRect.bottom;
+    startingPoint.pos.x = sourceRect.x + sourceRect.width / 2;
+    startingPoint.pos.y = sourceRect.y + sourceRect.height / 2;
 
     const endingPoint = this.#rope.getPoint(-1);
-    endingPoint.pos.x = targetRect.x;
-    endingPoint.pos.y = targetRect.bottom;
+    endingPoint.pos.x = targetRect.x + targetRect.width / 2;
+    endingPoint.pos.y = targetRect.y + targetRect.height / 2;
   }
 }
