3 files changed, 34 insertions(+), 2 deletions(-)

M public/index.html
M public/script.js
M public/style.css

@@ 58,6 58,12 @@
         </nav>
         <canvas id="transform-canvas"></canvas>
         <canvas id="grid-canvas"></canvas>
+        <div id="transform-matrix">
+            <table class="matrix">
+                <tr><td id="transform-matrix-a">1</td><td id="transform-matrix-c">0</td></tr>
+                <tr><td id="transform-matrix-b">0</td><td id="transform-matrix-d">1</td></tr>
+            </table>
+        </div>
         <noscript>
             eigen.fun requires JavaScript (it's an interactive matrix visualizer implemented entirely in JS)
         </noscript>

@@ 332,6 332,12 @@ function render() {
     state.points.forEach(point => {
         renderPoint(renderOpts, point);
     });
+
+    // matrix
+    document.getElementById("transform-matrix-a").textContent = state.ihat[0].toFixed(1);
+    document.getElementById("transform-matrix-b").textContent = state.ihat[1].toFixed(1);
+    document.getElementById("transform-matrix-c").textContent = state.jhat[0].toFixed(1);
+    document.getElementById("transform-matrix-d").textContent = state.jhat[1].toFixed(1);
     
     console.assert(!state.rendering.dirty, "rendering should not mutate state");
 

@@ 1,8 1,8 @@
 /*
     z-index values:
     0-9: bottom
-    10-29: canvases
-    30: right on top of canvases
+    10-20: canvases
+    28-: right on top of canvases
 */
 body {
     margin: 0;


@@ 127,6 127,26 @@ nav .action .shortcut, nav .action .name {
     line-height: 11px;
     color: hsl(0, 0%, 80%);
 }
+#transform-matrix {
+    position: absolute;
+    top: 5rem;
+    left: 0;
+    width: 100%;
+    z-index: 28;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.matrix {
+    border-left: 5px solid black;
+    border-right: 5px solid black;
+    border-radius: 10px;
+}
+.matrix td {
+    height: 1rem;
+    width: 2rem;
+    font-family: monospace;
+}
 @media (max-width: 700px) {
     h1 {
         display: none;