A Cellular Potts tissue unmixes itself by differential adhesion, on a stained slide.
Each cell is a set of lattice sites sharing an id, so it can take any shape. The energy charges an adhesion cost J for every pair of neighboring sites in different cells, depending on the two cell types, plus an elastic penalty for straying from a target area; Metropolis Monte Carlo then proposes hundreds of thousands of membrane protrusions a second, accepting each with probability exp(-dH/T), while a local connectivity test keeps cells in one piece and a persistent polarity lets them crawl. Starting from a random mix, the cohesive dark cells gather into a core wrapped by light cells, exactly the sphere-in-sphere Steinberg predicted from surface tensions, which the side panel computes live along with a log-time sorting curve. Membranes are traced by marching squares over a 3x3 mode filtered copy of the lattice and smoothed with quadratic corner cutting, then stained in eosin pinks with oriented hematoxylin nuclei.
Try it. Drag across the tissue to stir it and watch it heal. Click a cell to flip its type. Pick a preset (Sort, Checkerboard, Split, Inverted, Disperse) or drag any value in the adhesion matrix to invent your own; the panel predicts the outcome. Arrow keys change the temperature, 1 to 5 choose presets and R remixes.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a Cellular Potts Model of cell sorting 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 120x80 grid of integers. Each site holds the id of the cell covering it, and 0 means empty medium. Fill a disc in the middle with about 100 cells by giving every site the id of its nearest random seed point, and make each cell randomly 'dark' or 'light'.
- Define adhesion energies J for each pair of types (dark-dark, light-light, dark-light, cell-medium). Use dark-dark 6, light-light 16, dark-light 19, dark-medium 26, light-medium 18. Lower means stickier.
- The energy is the sum of J over every pair of neighboring sites (8 neighbors) that belong to different cells, plus lambda * (area - targetArea)^2 for each cell, with a target area of about 40 sites.
- Each frame, make a few hundred thousand Metropolis attempts: pick a random site and a random neighbor with a different id, compute the energy change of copying the neighbor's id into the site, and accept it if the energy drops or with probability exp(-dH / T), using T around 12.
- Draw each site as a scaled-up square colored by its cell type, with darker pixels where neighbors differ, so you can see the membranes.
Once that works, make it beautiful:
- Reject copies that would split a cell in two by checking that the cell's sites around the chosen site form a single arc.
- Use a stained-slide palette: pink and magenta cytoplasm, deep purple nuclei drawn at each cell's centroid, and a pale glass background.
- Add buttons for a few adhesion presets (sorting, checkerboard mixing, dispersal) and let me drag the mouse to stir the tissue.
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 smoothing the membranes with marching squares, adding cell motility with a polarity vector, or growing and dividing cells.
