~smitop/eigen.fun: initial eigen display

2 files changed, 26 insertions(+), 1 deletions(-)

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

M public/index.html => public/index.html +1 -1

@@ 12,7 12,7 @@
         <link rel="icon" href="/logo.svg">
         <link rel="stylesheet" href="/style.css">
         <!-- TODO: compile JS properly -->
-        <script src="https://unpkg.com/mathjs@9.3.2/lib/browser/math.js"></script>
+        <script src="https://unpkg.com/mathjs@9.4.3/lib/browser/math.js"></script>
         <script src="/script.js"></script>
     </head>
     <body>

M public/script.js => public/script.js +25 -0

@@ 14,6 14,7 @@ let state = {
     selected: null,
     curTransition: null,
     minorLines: true,
+    eigs: true,
     snap: false,
     rendering: {
         dirty: true,


@@ 121,6 122,24 @@ function getInv() {
     };
 }
 
+function getEigs() {
+    let mathEigs;
+    try {
+        mathEigs = math.eigs(matrix(), 1e-10);
+    } catch (e) {
+        return [];
+    }
+    const mathVectors = math.transpose(mathEigs.vectors).toArray(); // FIXME: transpose first?
+    let ret = [];
+    mathEigs.values.toArray().forEach((value, idx) => {
+        ret.push({
+            value,
+            vector: mathVectors[idx],
+        })
+    });
+    return ret;
+}
+
 function renderPoint(renderOpts, point) {
     point = pointToCanvasCoords(renderOpts, transformPoint(point));
     ctx.beginPath();


@@ 297,6 316,12 @@ function render() {
         // draw nothing repersenting the transformation for rank 0
     }
 
+    // eigens
+    let eigs = getEigs();
+    eigs.forEach(({ vector, value }) => {
+        renderLine(renderOpts, "gray", true, [0, 0], vector, ctx, x => x); // i hat
+    });
+
     // unit vectors
     renderLine(renderOpts, "red", true, [0, 0], [1, 0]); // i hat
     renderLine(renderOpts, "blue", true, [0, 0], [0, 1]); // j hat