Create posts about the harmonic oscillator

Author: yunseo-kim

_includes/quantum-harmonic-oscillator.html

@@ -0,0 +1,223 @@
+<meta charset="UTF-8">
+<!-- Include Plotly.js from CDN -->
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+<!-- Include Math.js library for mathematical computations -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.5.0/math.min.js"></script>
+<style>
+    #container {
+        width: 110%;
+        margin: auto;
+        padding: 20px;
+        transform: translateX(-5%); /* This helps center the wider container */
+    }
+    #title {
+        text-align: center;
+    }
+    #slider-container {
+        width: 80%;
+        margin: auto;
+        padding: 20px;
+        text-align: center;
+    }
+    #plot {
+        width: 100%;
+        height: 600px;
+    }
+    #n-display {
+        font-weight: bold;
+    }
+</style>
+
+<div id="container">
+    <div id="slider-container">
+        <label for="n-slider">Energy Level (n): <span id="n-display">0</span></label>
+        <input type="range" id="n-slider" min="0" max="100" value="0" step="1" style="width: 80%;">
+    </div>
+    <div id="plot"></div>
+</div>
+
+<script>
+// Constants
+const N_POINTS = 1000;
+const RANGE_FACTOR = 1.2;
+
+// Hermite Polynomial Function
+function hermite(n, x) {
+    if (n === 0) {
+        return x.map(() => 1.0);
+    } else if (n === 1) {
+        return x.map(xi => 2 * xi);
+    } else {
+        let h_prev = x.map(() => 1.0); // H_0
+        let h_curr = x.map(xi => 2 * xi); // H_1
+        let h_next = [];
+
+        for (let i = 2; i <= n; i++) {
+            h_next = x.map((xi, idx) => 2 * xi * h_curr[idx] - 2 * (i - 1) * h_prev[idx]);
+            h_prev = h_curr;
+            h_curr = h_next;
+        }
+        return h_curr;
+    }
+}
+
+// Wavefunction ψₙ(x)
+function wavefunction(n, x) {
+    // Normalization constant
+    const normalization = 1.0 / (Math.sqrt(Math.pow(2, n) * math.factorial(n) * Math.sqrt(Math.PI)));
+    const hermite_n = hermite(n, x);
+    return x.map((xi, idx) => normalization * hermite_n[idx] * Math.exp(-xi * xi / 2));
+}
+
+// Classical Position Distribution ρₙ(x)
+function classical_distribution(n, x) {
+    const energy = n + 0.5;
+    const result = x.map(() => 0);
+    const mask = x.map(xi => xi * xi < 2 * energy);
+    const denominator = x.map(xi => Math.PI * Math.sqrt(2 * energy - xi * xi));
+
+    return result.map((val, idx) => mask[idx] ? 1 / denominator[idx] : 0);
+}
+
+// Get x-axis range
+function get_x_range(n) {
+    const turning_point = Math.sqrt(2 * n + 1);
+    const x_max = RANGE_FACTOR * turning_point;
+    return [-x_max, x_max];
+}
+
+// Get y-axis max value
+function get_y_max(probability) {
+    return Math.max(...probability);
+}
+
+// Update the plot
+function updatePlot(n) {
+    const [xmin, xmax] = get_x_range(n);
+    const x = Array.from({length: N_POINTS}, (_, i) => xmin + i * (xmax - xmin) / (N_POINTS - 1));
+
+    // Quantum probability
+    const psi = wavefunction(n, x);
+    const probability = psi.map(psi_i => psi_i * psi_i);
+
+    // Classical probability
+    const classical_prob = classical_distribution(n, x);
+
+    // Y-axis range
+    const y_max = get_y_max(probability);
+    const y_range_max = y_max * RANGE_FACTOR;
+
+    // Classical turning point
+    const turning_point = Math.sqrt(2 * n + 1);
+
+    const data = [
+        {
+            x: x,
+            y: probability,
+            type: 'scatter',
+            name: 'Quantum |ψₙ(x)|²',
+            line: {color: 'blue', width: 2}
+        },
+        {
+            x: x,
+            y: classical_prob,
+            type: 'scatter',
+            name: 'Classical ρₙ(x)',
+            line: {color: 'red', width: 2, dash: 'dot'}
+        }
+    ];
+
+    const layout = {
+        title: `Quantum vs Classical Probability Distribution for n = ${n}`,
+        xaxis: {
+            title: 'Position (x)',
+            range: [xmin, xmax],
+            showgrid: true,
+            gridwidth: 1,
+            gridcolor: 'LightGray',
+            zeroline: false,
+            showticklabels: false // Hide x-axis numerical values
+        },
+        yaxis: {
+            title: 'Probability Density',
+            range: [0, y_range_max],
+            showgrid: true,
+            gridwidth: 1,
+            gridcolor: 'LightGray'
+        },
+        showlegend: true,
+        hovermode: 'x',
+        plot_bgcolor: 'white',
+        margin: {
+            l: 50,  // left margin
+            r: 20,  // right margin
+            t: 40,  // top margin
+            b: 40   // bottom margin
+        },
+        shapes: [
+            {
+                type: 'line',
+                x0: turning_point,
+                y0: 0,
+                x1: turning_point,
+                y1: y_range_max,
+                line: {
+                    color: 'gray',
+                    width: 1,
+                    dash: 'dash'
+                }
+            },
+            {
+                type: 'line',
+                x0: -turning_point,
+                y0: 0,
+                x1: -turning_point,
+                y1: y_range_max,
+                line: {
+                    color: 'gray',
+                    width: 1,
+                    dash: 'dash'
+                }
+            }
+        ],
+        annotations: [
+            {
+                x: turning_point,
+                y: y_range_max * 0.95,
+                xref: 'x',
+                yref: 'y',
+                text: 'Turning point',
+                showarrow: false,
+                xanchor: 'left',
+                font: {
+                    color: 'gray'
+                }
+            },
+            {
+                x: -turning_point,
+                y: y_range_max * 0.95,
+                xref: 'x',
+                yref: 'y',
+                text: 'Turning point',
+                showarrow: false,
+                xanchor: 'right',
+                font: {
+                    color: 'gray'
+                }
+            }
+        ]
+    };
+
+    Plotly.newPlot('plot', data, layout);
+}
+
+// Initialize the plot
+updatePlot(0);
+
+// Event listener for slider
+document.getElementById('n-slider').addEventListener('input', function() {
+    const n = parseInt(this.value);
+    document.getElementById('n-display').innerText = n;
+    updatePlot(n);
+});
+</script>