From 48b7119e37099e07a4f1389352459dfc3ee95287 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Sun, 1 Dec 2024 20:28:26 -0800
Subject: [PATCH] more sdf perf

---
 demo/distance-perf.html | 24 ++++++++++++------------
 src/distance-field.ts   |  5 +++--
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/demo/distance-perf.html b/demo/distance-perf.html
index c0c572d..ad9e68f 100644
--- a/demo/distance-perf.html
+++ b/demo/distance-perf.html
@@ -41,8 +41,8 @@
       for (let i = 0; i < 20; i++) {
         for (let j = 0; j < 20; j++) {
           const geo = document.createElement('fc-geometry');
-          geo.x = 50 * i + Math.floor(Math.random() * 45);
-          geo.y = 50 * j + Math.floor(Math.random() * 45);
+          geo.x = 100 * i + Math.floor(Math.random() * 45);
+          geo.y = 100 * j + Math.floor(Math.random() * 45);
           geo.width = geo.height = 45;
           geometries.push(geo);
           d.append(geo);
@@ -52,18 +52,18 @@
 
       DistanceField.define();
 
-      // function tick() {
-      //   window.requestAnimationFrame(tick);
+      function tick() {
+        window.requestAnimationFrame(tick);
 
-      //   for (let i = 0; i < 10; i++) {
-      //     const g = geometries[Math.floor(Math.random() * geometries.length)];
-      //     const max = 15;
-      //     g.x += Math.floor(Math.random() * max - max / 2);
-      //     g.y += Math.floor(Math.random() * max - max / 2);
-      //   }
-      // }
+        for (let i = 0; i < 10; i++) {
+          const g = geometries[Math.floor(Math.random() * geometries.length)];
+          const max = 50;
+          g.x += Math.floor(Math.random() * max - max / 2);
+          g.y += Math.floor(Math.random() * max - max / 2);
+        }
+      }
 
-      // tick();
+      tick();
     </script>
   </body>
 </html>
diff --git a/src/distance-field.ts b/src/distance-field.ts
index ac354b9..3fe3fab 100644
--- a/src/distance-field.ts
+++ b/src/distance-field.ts
@@ -153,12 +153,13 @@ export class DistanceField extends HTMLElement {
     const gl = this.glContext;
     const positions: number[] = [];
 
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+
     // Collect positions and assign unique IDs to all shapes
     this.shapes.forEach((geometry, index) => {
       const rect = geometry.getClientRect();
 
-      const windowWidth = window.innerWidth;
-      const windowHeight = window.innerHeight;
       // Convert DOM coordinates to Normalized Device Coordinates (NDC)
       const x1 = (rect.left / windowWidth) * 2 - 1;
       const y1 = -((rect.top / windowHeight) * 2 - 1);