Nearly 2,000 atoms freeze into crystal grains, melt and boil from one pairwise force.
Every pair of atoms attracts at a distance and repels up close through the Lennard-Jones potential, integrated with velocity Verlet and a uniform cell grid, while a Langevin thermostat sets the temperature. Nothing else is programmed in: a fast quench nucleates many hexagonal crystals at once, warming past about T = 0.4 melts them into a liquid, and hotter still the atoms boil up into a gas. Each atom is colored by its bond-orientational order psi6, so every grain gets a hue from its lattice angle, and atoms with five or seven neighbors, the cores of dislocations and grain boundaries, glow, while atoms outside any crystal take a heat tint from their own kinetic energy, cool lavender to glowing amber. The g(r) inset shows the same story statistically: split crystal peaks, soft liquid ripples, nearly flat gas.
Try it. Drag to heat a spot with a local thermostat and watch it melt and refreeze; right-drag or Shift-drag to chill instead. Drag the thermometer or use the Up and Down arrows to set the temperature, press G to toggle gravity, Space to quench and R to start from a fresh hot liquid. Left alone, it cycles through freezing, melting and boiling.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a 2D molecular dynamics simulation of atoms that freeze, melt and boil, with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window.
- Work in reduced units (sigma = epsilon = mass = 1). Put about 800 atoms in a box roughly 60 by 40 sigma, packed loosely in the bottom half, with small random velocities.
- Every pair closer than 2.5 sigma feels the Lennard-Jones force: with r2 the squared distance, s6 = 1 / r2^3, the force along the separation is 24 * s6 * (2 * s6 - 1) / r2. Add a weak downward gravity and soft walls on all four sides.
- Integrate with velocity Verlet and a time step of 0.005, running several steps per frame.
- Add a thermostat: each step, nudge every velocity toward the target temperature with a little friction plus random kicks (a Langevin thermostat). Let the Up and Down arrow keys change it.
- Draw each atom as a small shaded circle.
Once that works, make it beautiful:
- Speed up the pair search with a uniform grid of cells 2.5 sigma wide, rebuilt every step, so each atom only checks nearby cells.
- For each atom, find its neighbors within 1.5 sigma and compute psi6, the average of cos(6 theta) and sin(6 theta) over its bond angles. Color crystalline atoms by the angle of psi6 (so each crystal grain gets its own hue) and liquid atoms a soft white.
- Make atoms with five or seven neighbors glow: they mark grain boundaries.
- Let the mouse act as a local heater while held down, so you can melt a spot in the crystal and watch it refreeze.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as plotting the radial distribution function g(r), adding a second atom species, or measuring pressure and drawing a phase diagram.
