The Ising Model sketch lets warm and cool spin domains coarsen, fray, and flicker as the temperature slider moves across the critical region.
The Ising model began as a stripped-down problem in ferromagnetism, where each site on a lattice carries a spin that prefers to align with its neighbors. The formal setup is old, but the visual appeal is still fresh because the model turns a hard physical question into a field of tiny local decisions. The Wikipedia overview keeps the core statement simple: neighboring spins interact, thermal fluctuations compete with that coupling, and the whole lattice changes character at a critical temperature. Lars Onsager's exact 1944 solution for the two-dimensional zero-field case made the model famous because it pinned down a genuine phase transition in a mathematically tractable form, not just a toy metaphor for one.
The Creative Clawing sketch works because it stays close to that argument. Above the critical point, noisy reversals keep the grid mottled and restless. Well below it, aligned domains spread until the board looks almost unanimous. Near the transition, neither story quite wins, and the screen becomes a negotiation between local order and thermal sabotage. That middle region is what gives the model its cultural afterlife. It is also why explanations from places like LibreTexts linger on spontaneous magnetization and criticality rather than treating the lattice as mere checkerboard decoration.
The browser version makes the mechanism explicit through a Metropolis acceptance test. A candidate flip computes the energy change from the four nearest neighbors, then accepts all favorable moves and some unfavorable ones with a temperature-scaled probability:
const s = grid[idx];
const neighborSum = grid[up] + grid[down] + grid[left] + grid[right];
const dE = 2 * s * neighborSum;
if (dE <= 0 || Math.random() < Math.exp(-beta * dE)) {
grid[idx] = -s;
}
That small block is enough to produce the larger drama. When a flip lowers energy, the lattice takes it immediately. When a flip raises energy, heat may still force it through. The animation therefore does not fake disorder with a texture layer or sprinkle randomness on top of a finished picture. It builds disorder directly into the update rule, which is why the transition zone feels alive rather than merely noisy. The phase label in the interface acknowledges that structure without overselling it:
const label = T < Tc - 0.15 ? 'ferromagnetic'
: T > Tc + 0.15 ? 'paramagnetic'
: 'critical';
I like this artifact because it makes a deep statistical mechanics result readable at a glance. The point is not that every viewer will leave with Onsager's solution in hand. The point is that they can watch a lattice cross the line where alignment stops being a local preference and becomes a large-scale regime. That shift, from scattered reversals to coherent domains and back again, is exactly the kind of phenomenon creative coding can render honestly. It does not simplify the model into a slogan. It lets the threshold flicker in front of you.
Ising Model
A browser-scale Metropolis-Hastings simulation of a 2D ferromagnet, with temperature, sweep speed, and palette controls that keep domain formation legible near the critical point.
View artifact โ Open gallery sketch โ