From 245e7ecbb7c64ff102cb0ba48b692f807b0a39b3 Mon Sep 17 00:00:00 2001
From: Quinten Clause <quintenclause@hotmail.com>
Date: Fri, 9 Aug 2024 20:33:25 +0200
Subject: [PATCH] Correct matrices

---
 demos/navbutton/index.js | 14 +++++++++++---
 js/draw/path.js          | 11 ++++++++---
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/demos/navbutton/index.js b/demos/navbutton/index.js
index 6e6542a..79982c9 100644
--- a/demos/navbutton/index.js
+++ b/demos/navbutton/index.js
@@ -3,12 +3,20 @@ import path from '../../js/draw/path.js';
 
 let navbutton = path({
     url: new URL('../../img/nav.svg', import.meta.url),
-    w: 48,
-    h: 48
+    paths: ['M 0 0 L 1024 0 L 1024 1024 L 0 1024 Z'],
+    w: 100,
+    h: 100
 });
 
+gg.on('resize', (e) => {
+    let { vw, vh } = e;
+    navbutton.x = vw / 2;
+    navbutton.y = vh / 2;
+});
+gg.emit('resize', gg.last('resize'));
+
 gg.on('step', (e) => {
-    //navbutton.a = e.t * 0.1;
+    navbutton.a = e.t * 0.1;
 });
 
 gg.on('draw', (e) => {
diff --git a/js/draw/path.js b/js/draw/path.js
index 6c97bbe..440c488 100644
--- a/js/draw/path.js
+++ b/js/draw/path.js
@@ -20,16 +20,21 @@ export default (options = {}) => {
         let rad = a * Math.PI / 180;
         let cx = w / ow;
         let cy = h / oh;
+        // transform matrix
         let m = new DOMMatrix([
             Math.cos(rad) * cx,
             Math.sin(rad) * cx,
             -Math.sin(rad) * cy,
             Math.cos(rad) * cy,
             x, y
-        ]);    
+        ]);
+        // normalize matrix, puts the origin in the center
+        let n = new DOMMatrix([1, 0, 0, 1, -ow / 2, -oh / 2]);
         let p = new Path2D();
-        paths.forEach((path) => {
-            p.addPath(new Path2D(path), m);
+        paths.forEach((path, i) => {
+            let np = new Path2D();
+            np.addPath(new Path2D(path), n);
+            p.addPath(np, m);
         });
         ctx.fill(p);
     };