~smitop/eigen.fun

174f83ebb46c2637d0cd0a0eb9b42ae9a0eb0460 — Smitty 7 months ago 9a6025d
Display transform matrix
3 files changed, 34 insertions(+), 2 deletions(-)

M public/index.html
M public/script.js
M public/style.css
M public/index.html => public/index.html +6 -0
@@ 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>

M public/script.js => public/script.js +6 -0
@@ 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");


M public/style.css => public/style.css +22 -2
@@ 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;