Add Jacobian demo (not directly FDSP related), but useful in 1-1 RV transforms

jmshea · jmshea · commit 5b4f26aad843 · 2024-10-11T18:53:55.000-04:00
diff --git a/redirects/jacobian.html b/redirects/jacobian.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Jacobian Visualizer</title>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <style>
+        .container {
+            display: flex;
+        }
+        .plot {
+            width: 45%;
+            margin: 2%;
+        }
+        .input-group {
+            margin-bottom: 10px;
+        }
+    </style>
+</head>
+<body>
+
+    <H1> Jacobian Visualizer </H1>
+
+    <p>Input two functions (in Javascript syntax). Specify an input region in terms of an x and y coordinate and x and y deltas. The input and output regions will be shown. Start with linear transforms. What do you observe. Now consider some nonlinear transforms -- note that for nonlinear transforms, the ratio of the areas can depend on the (x,y) coordinates. Set the delta values to something very small. What do you observe about the output areas. Compare the ratio of the input and output areas to the Jacobian when the delta values are small. </p>
+
+<div>
+    <div class="input-group">
+        <label for="g">Function g(x, y): </label>
+        <input type="text" id="g" value="x + y">
+    </div>
+    <div class="input-group">
+        <label for="h">Function h(x, y): </label>
+        <input type="text" id="h" value="x - y">
+    </div>
+    <div class="input-group">
+        <label for="x">Location x: </label>
+        <input type="number" id="x" value="0">
+    </div>
+    <div class="input-group">
+        <label for="y">Location y: </label>
+        <input type="number" id="y" value="0">
+    </div>
+    <div class="input-group">
+        <label for="deltaX">Offset deltaX: </label>
+        <input type="number" id="deltaX" value="1">
+    </div>
+    <div class="input-group">
+        <label for="deltaY">Offset deltaY: </label>
+        <input type="number" id="deltaY" value="1">
+    </div>
+</div>
+
+<div class="container">
+    <div class="plot" id="original"></div>
+    <div class="plot" id="transformed"></div>
+</div>
+
+<div>
+    <p>Input area: <span id="input-area"></span></p>
+    <p>Estimate of output area: <span id="output-area"></span></p>
+    <p></p>
+    <p>Output area/Input area: <span id="area-ratio"></span></p>
+</div>
+
+<script>
+document.querySelectorAll('input').forEach(input => {
+    input.addEventListener('input', updatePlots);
+});
+
+function evaluateFunctions(g, h, x, y) {
+    try {
+        const gx = new Function('x', 'y', `return ${g}`);
+        const hy = new Function('x', 'y', `return ${h}`);
+        return [gx(x, y), hy(x, y)];
+    } catch (error) {
+        console.error('Error evaluating functions:', error);
+        return [NaN, NaN];
+    }
+}
+
+function sampleEdge(x1, y1, x2, y2, numPoints) {
+    const points = [];
+    for (let i = 0; i <= numPoints; i++) {
+        const t = i / numPoints;
+        points.push([x1 + t * (x2 - x1), y1 + t * (y2 - y1)]);
+    }
+    return points;
+}
+
+function polygonArea(vertices) {
+     const n = vertices.length;
+     if (n < 3) return 0; // A polygon must have at least 3 vertices
+
+     let area = 0;
+
+     // Calculate the area using the Shoelace formula
+     for (let i = 0; i < n; i++) {
+         let j = (i + 1) % n; // Wrap around to the first vertex for the last edge
+         area += vertices[i][0] * vertices[j][1];
+         area -= vertices[j][0] * vertices[i][1];
+     }
+
+     return Math.abs(area) / 2;
+}
+
+function polygonAreaEdges(edges) {
+     var vertices = [];
+     for (i=0; i < edges.length; i++) {
+         vertices = vertices.concat(edges[i]);
+     }
+
+     const n = vertices.length;
+     if (n < 3) return 0; // A polygon must have at least 3 vertices
+
+     let area = 0;
+
+     // Calculate the area using the Shoelace formula
+     for (let i = 0; i < n; i++) {
+         let j = (i + 1) % n; // Wrap around to the first vertex for the last edge
+         area += vertices[i][0] * vertices[j][1];
+         area -= vertices[j][0] * vertices[i][1];
+     }
+
+     return Math.abs(area) / 2;
+ }
+
+
+function updatePlots() {
+    const g = document.getElementById('g').value;
+    const h = document.getElementById('h').value;
+    const x = parseFloat(document.getElementById('x').value);
+    const y = parseFloat(document.getElementById('y').value);
+    const deltaX = parseFloat(document.getElementById('deltaX').value);
+    const deltaY = parseFloat(document.getElementById('deltaY').value);
+    const numPoints = 100;  // Number of sample points per edge
+
+    // Define the rectangle vertices
+    const rectEdges = [
+        sampleEdge(x, y, x + deltaX, y, numPoints),
+        sampleEdge(x + deltaX, y, x + deltaX, y + deltaY, numPoints),
+        sampleEdge(x + deltaX, y + deltaY, x, y + deltaY, numPoints),
+        sampleEdge(x, y + deltaY, x, y, numPoints)
+    ];
+
+    // Print the areas
+     const inputArea = polygonArea([ [x,y], [x,y + deltaY], [x+deltaX, y+deltaY], [x+deltaX, y]]);
+     document.getElementById("input-area").textContent  = inputArea.toPrecision(3);
+
+    // Flatten the array of edges
+    const rectPoints = rectEdges.flat();
+
+    // Apply transformation
+    const transformedPoints = rectPoints.map(([xi, yi]) => evaluateFunctions(g, h, xi, yi));
+
+     const outputArea = polygonArea(transformedPoints);
+    document.getElementById("output-area").textContent  = outputArea.toPrecision(3);
+
+    document.getElementById("area-ratio").textContent  = (outputArea/inputArea).toPrecision(3);
+
+    // Define the edges colors
+    const colors = ['red', 'green', 'blue', 'orange'];
+
+    // Plot the original rectangle
+    const originalPlot = {
+        data: rectEdges.map((edge, i) => ({
+            x: edge.map(p => p[0]),
+            y: edge.map(p => p[1]),
+            type: 'scatter',
+            mode: 'lines+markers',
+            marker: { color: colors[i] },
+            line: { color: colors[i] }
+        })),
+        layout: {
+            title: 'Original Rectangle',
+            xaxis: { title: 'x' },
+            yaxis: { title: 'y', scaleanchor: 'x' },
+            hovermode: 'closest'
+        }
+    };
+
+    // Plot the transformed shape
+    const transformedPlot = {
+        data: rectEdges.map((edge, i) => {
+            const transformedEdge = edge.map(([xi, yi]) => evaluateFunctions(g, h, xi, yi));
+            return {
+                x: transformedEdge.map(p => p[0]),
+                y: transformedEdge.map(p => p[1]),
+                type: 'scatter',
+                mode: 'lines+markers',
+                marker: { color: colors[i] },
+                line: { color: colors[i] }
+            }
+        }),
+        layout: {
+            title: 'Transformed Shape',
+            xaxis: { title: 'g(x, y)' },
+            yaxis: { title: 'h(x, y)', scaleanchor: 'x' },
+            hovermode: 'closest'
+        }
+    };
+
+    Plotly.newPlot('original', originalPlot.data, originalPlot.layout);
+    Plotly.newPlot('transformed', transformedPlot.data, transformedPlot.layout);
+
+    // Add hover event listeners to link the plots
+    const originalPlotElement = document.getElementById('original');
+    const transformedPlotElement = document.getElementById('transformed');
+
+    originalPlotElement.on('plotly_hover', function(data) {
+        const pointIndex = data.points[0].pointIndex;
+        Plotly.Fx.hover('transformed', [
+            { curveNumber: data.points[0].curveNumber, pointIndex: pointIndex }
+        ]);
+    });
+
+    transformedPlotElement.on('plotly_hover', function(data) {
+        const pointIndex = data.points[0].pointIndex;
+        Plotly.Fx.hover('original', [
+            { curveNumber: data.points[0].curveNumber, pointIndex: pointIndex }
+        ]);
+    });
+
+    originalPlotElement.on('plotly_unhover', function(data) {
+        Plotly.Fx.unhover('transformed');
+    });
+
+    transformedPlotElement.on('plotly_unhover', function(data) {
+        Plotly.Fx.unhover('original');
+    });
+}
+
+updatePlots();  // Initial plot
+</script>
+
+</body>
+</html>
