Created
November 12, 2025 11:39
-
-
Save marl0ny/edc8de631afa751545fb6b179bee3520 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <html> | |
| <head> | |
| <title>Pyodide Example</title> | |
| <script src="https://cdn.jsdelivr.net/pyodide/v0.29.0/full/pyodide.js"></script> | |
| </head> | |
| <style> | |
| * { | |
| background-color: hsla(0, 80%, 80%, 1); | |
| font-family: Arial, Helvetica, sans-serif; | |
| color: hsla(180, 20%, 20%, 1); | |
| text-align: center; | |
| } | |
| .user-canvas { | |
| width: 80vh; | |
| height: 80vh; | |
| border-width: 1px; | |
| border-radius: 5vh; | |
| border-style: solid; | |
| border-color: hsla(0, 0, 0, 1); | |
| } | |
| .user-canvas:hover { | |
| /* background-color: white;*/ | |
| box-shadow: 10px, 10px, black; | |
| } | |
| </style> | |
| <body> | |
| <h1>Eigenstates</h1> | |
| <canvas class="user-canvas" id="user-canvas" width="100" height="100"> | |
| </canvas> | |
| <p>Click to switch to a different eigenstate.</p> | |
| <script> | |
| let canvas = document.getElementById("user-canvas"); | |
| let ctx = canvas.getContext("2d"); | |
| ctx.font = "8px"; | |
| ctx.fillText("Loading Pyodide", 10, 10); | |
| const PYTHON_SCRIPT = ` | |
| import numpy as np | |
| from scipy import sparse | |
| from scipy.sparse.linalg import eigsh | |
| N, L = 100, 1.0 | |
| HBAR, M_E = 1.0, 1.0 | |
| X, Y = np.meshgrid(*2*[np.linspace(0.0, L - L/N, N)]) | |
| def get_laplacian_3pt_2nd_or_laplacian_scaled(scale_val, n, dx): | |
| diags = np.array( | |
| [np.ones([n]), -2.0*np.ones([n]), np.ones([n])]) | |
| return scale_val*sparse.spdiags( | |
| diags, np.array([-1, 0, 1]), n, n) | |
| T = sparse.kronsum( | |
| get_laplacian_3pt_2nd_or_laplacian_scaled(-HBAR**2/(2.0*M_E), N, L/N), | |
| get_laplacian_3pt_2nd_or_laplacian_scaled(-HBAR**2/(2.0*M_E), N, L/N) | |
| ) | |
| V = 10.0*((X - L/2.0)**2 + (Y - L/2.0)**2) | |
| U = sparse.diags((V.reshape([N*N]))) | |
| H = T + U | |
| ENERGIES, EIGENSTATES = eigsh(H, k=10, which='LM', sigma=0.0) | |
| print(ENERGIES) | |
| RESULT = EIGENSTATES.T | |
| `; | |
| let gPyodide; | |
| let gIndex = 0; | |
| async function main() { | |
| gPyodide = await loadPyodide(); | |
| await gPyodide.loadPackage( | |
| ["numpy", "sympy", "scipy", "micropip"]); | |
| gPyodide.runPython(PYTHON_SCRIPT); | |
| } | |
| main().then( | |
| () => { | |
| let canvas = document.getElementById("user-canvas"); | |
| let ctx = canvas.getContext("2d"); | |
| let arr = gPyodide.globals.get('RESULT').toJs(); | |
| let f = new Uint8ClampedArray(100*100*4); | |
| for (let i = 0; i < 10000; i++) { | |
| f[4*i] = 30*arr[gIndex][i]*255.0; | |
| f[4*i + 1] = 0.0; | |
| f[4*i + 2] = -30*arr[gIndex][i]*255.0; | |
| f[4*i + 3] = 255; | |
| } | |
| let imData = new ImageData(f, 100, 100); | |
| ctx.putImageData(imData, 0, 0); | |
| } | |
| ); | |
| document.addEventListener('mouseup', () => { | |
| gIndex++; | |
| gIndex = gIndex % 10; | |
| let canvas = document.getElementById("user-canvas"); | |
| let ctx = canvas.getContext("2d"); | |
| let arr = gPyodide.globals.get('RESULT').toJs(); | |
| let f = new Uint8ClampedArray(100*100*4); | |
| for (let i = 0; i < 10000; i++) { | |
| f[4*i] = 30*arr[gIndex][i]*255.0; | |
| f[4*i + 1] = 0.0; | |
| f[4*i + 2] = -30*arr[gIndex][i]*255.0; | |
| f[4*i + 3] = 255; | |
| } | |
| let imData = new ImageData(f, 100, 100); | |
| ctx.putImageData(imData, 0, 0); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment