Interactive 2D Ising Model Simulation
An interactive, real-time web application simulating phase transitions and critical phenomena in the 2D Ising model using TypeScript, HTML 5 Canvas, and Chart.js.
Below is an embed with the deployment. For better viewing, it is recommended instead that you view the deployment directly. Note that the simulation dashboard is neither optimized nor currently designed for mobile viewing.
Overview & Key Features
- Real-time Monte Carlo Simulation: Uses the Metropolis algorithm to simulate spin flips across a 2D square lattice in real time.
- Dynamic Hysteresis Loop Tracing: Features a high-density scatter plot that traces magnetization \(\langle M\rangle\) against an external magnetic field \(H\), complete with a time-fading tail effect to visually indicate sweep direction.
- Color-Vision Deficiency (CVD) Friendly: Built with an accessible color palette featuring slate and teal for high-contrast visibility.
- Responsive Control Panel: Adjust temperature (\(T\)), external magnetic field (\(H\)), spin interaction strength (\(J\)), and speed dynamically, among other parameters.
- And much more!
Technology Stack
- Language: TypeScript
- Rendering: HTML5 Canvas API (Lattice Grid)
- Visualization: Chart.js (Real-time tiem series and scatter plots)
- Build System: Vite
- Hosting & Deployment: GitHub Pages via GitHub Actions
