Jelly Cells

Jelly Cells (Biology Studies No. 010)

Cells as soft bodies. Grab them, stretch them, give them a nudge, and cut them open with a knife to see what is inside. Twelve specimens are in the dropdown: ten cells and two viruses.

Teaching aids:

• Labels that ride with the jelly; toggle them with the Labels button or L. Click one for a card with its real size, what it does, a real micrograph of the structure (EM, fluorescence or light, from Wikimedia Commons, credited with author and licence; src/teach/micrographs.ts) and a link to the Wikipedia article (src/teach/wiki.ts).

• Clickable key: click to hide an organelle, shift-click to show only that one, hover to highlight it.

• "The cut passed through": after each cut, a report of what the blade crossed, with sizes and profile counts.

• Scale bar in µm that follows the zoom.

• Stage slider, one per cell. Press ▶ (or P) and the cell morphs through its stages: the jelly itself grows the bud, pulls in its processes or regrows its axon while it keeps wobbling. Dragging the slider scrubs the morph. The stages are:

  • Budding yeast, cell cycle: G1 → S → G2/M → anaphase → telophase → cytokinesis. The bud grows, the nucleus migrates into the neck with its spindle, stretches through it and splits, the septin ring divides in two, the myosin ring contracts between the halves, and the daughter leaves.
  • Fission yeast, cell cycle: birth → NETO → late G2 → metaphase → anaphase B → septation → fission. The rod grows from 7 to 14 µm (first at one tip, then at both), divides its nucleus inside an intact envelope, closes a septum behind its contractile ring and splits into two cells.
  • E. coli, cell cycle (32 min in rich medium): newborn → end of replication → elongation → constriction → division. The nucleoid is copied and segregated while the rod doubles in length, the Z ring forms, and the cell pinches in two.
  • Microglia, activation: surveilling → primed → reactive → amoeboid. Processes retract and thicken, the soma swells, lysosomes multiply.
  • Neuron, injury response: healthy → axotomy (retraction bulb, piled-up mitochondria) → chromatolysis (swollen soma, eccentric nucleus, dispersed Nissl bodies) → regeneration (sprout and growth cone).
  • Red blood cell, shape change: discocyte → echinocyte I → echinocyte III → spherocyte, at nearly constant volume.
  • Fibroblast, wound response: rounded → spreading → migrating (nucleus to the rear, Golgi and centrosome facing the wound) → myofibroblast (thick α-SMA fibres, supermature adhesions).

  A cell that reaches the end of its cycle really divides: the two daughters become separate soft bodies. Growth laws, sizes and timings of the three dividing cells come from published measurements (src/cells/cycle/, with sources in docs/cell-cycles-organelles.md).

• Stress lab (budding yeast only; its panel appears with that cell). Two stresses, each with its own fluorescent reporter view and a table of your runs. One second on screen is one minute. What is measured and what is drawn is listed in docs/stress-lab.md.

  • Salt: add NaCl, 0.1 to 1.0 M. The cell shrinks and the kinase Hog1 moves into the nucleus (Hog1-GFP view). The stronger the shock, the later the signal peaks (3, 5, 6, 15, 25 min), as measured by Babazadeh et al. 2013.
  • Heat: move the cell from 30 °C to 42 or 46 °C (Pab1-GFP view). At 46 °C stress granules appear within minutes. At 42 °C Pab1 assembles too, but into particles too small to see (Wallace et al. 2015; Riback et al. 2017). Back at 30 °C everything dissolves within the hour.
  • A live graph at the bottom of the stage follows the reporter over time, with earlier runs kept as faint lines.

• Views: Anatomy or Deformation (mechanical strain: Green–Lagrange strain from 0 to 30 %+, so you see where a pull or a squeeze goes). Deformation colours the knife faces too, so a cut shows it inside.

?cell=neuron (or rbc, fibroblast, microglia, yeast, pombe, ecoli, animal, plant, aspergillus, phage, coronavirus) opens a specific specimen.

It is a static site: WebGPU for rendering and TypeScript XPBD physics on the CPU. There are no runtime dependencies.

Live: https://feldaher.github.io/jelly-cells/

Run

npm install
npm run dev        # http://localhost:5173/jelly-cells/
npm test           # Gherkin scenarios + unit tests (vitest)
npm run build      # static site in dist/

It needs a browser with WebGPU: current Chrome or Edge, Safari 18+, or Firefox with WebGPU enabled.

The soft-body engine (meshing, XPBD, contact, cutting) is the shared package cell-engine, pinned to a tag in package.json. To work on both at once, clone it next to this project (projects/cell-engine/engine) and run CELL_ENGINE=local npm run dev.

Controls

How it works

• Engine (cell-engine): the cell is meshed and simulated as an engine Shape (src/anatomy/shape.ts builds it from the anatomy: its SDF, cut planes and a material per point); the organelles ride along as passengers. src/mesh, src/physics and src/cut keep their old interfaces as thin adapters over the engine.
• Cell types (src/cells): each is a CellType (see src/contracts.ts). It provides a body (ellipsoids, tori and tapered tubes combined by smooth union or subtraction; organelles can also be flat discs and curved sheets, the latter for Golgi cisternae and ER), organelles, labels, key, stiffness per material, camera and µm-per-unit scale.
• Cycle laws (src/cells/cycle): the measured quantities of each dividing cell (lengths, growth law, nuclear volume fraction, replication periods) as constants with their sources, and pure functions of the cycle phase. The cell files build their stages from these.
• Organelle motion and detail (src/cells/cycle/dynamics.ts, render/shaders/organelle.wgsl): fission yeast microtubules grow to the tip, pause and collapse; the E. coli nucleoid breathes and FtsZ clusters travel around the Z ring; mitochondria ride along the axon. The rates are measured ones, sped up by a factor given on each label, and reach the shader from the same table the tests check. Yeast nuclei carry the measured number of pores; the Golgi is stacks of seven cisternae.
• Fission (World.divide): the last stage of a dividing cell carries a fission plane; when a morph lands on it the cell is split along that plane with the cutting machinery, no knife involved.
• Stress (src/cells/stress, src/teach/runs.ts, src/ui/stress.ts): the measured response to a change of medium as constants with their sources and pure functions of dose and time. The world keeps the medium and a cell clock and sets the relative volume of the rest shape (SimParams.volume), so the soft body itself shrinks; the reporter view is a palette lit by the nuclear enrichment.
• Anatomy (src/anatomy): the signed distance fields. The same functions exist in TypeScript and WGSL (render/shaders/common.wgsl).
• Teaching (src/teach, src/ui/teach.ts): section measurement, scale bar, label layout, Wikipedia links, micrographs and the overlay UI. The physics notes and their equations open in a modal (Inside the experiment).
• Mesh (src/mesh): a BCC tetrahedral lattice clipped to the piece's SDF, with boundary nodes snapped onto the surface. Each tet takes the material at its centroid. The render skin is a surface-nets isosurface; organelles are analytic meshes. Both are embedded in the tets by barycentric weights.
• Physics (src/physics): XPBD at a fixed 60 Hz step with 12 substeps. Each tet has a co-rotational shape constraint and a volume constraint on either side of it, and its stiffness is scaled by material (wall ×4, nucleus ×2, vacuole ×0.7). The rest are edge-relative damping, floor contact with friction, a soft grab, and contact between pieces. Pieces are solid to each other: a surface particle found inside another piece's tetrahedra is pushed back out along that piece's depth field (distance below its surface, carried through the deformed tet), with Coulomb friction, on top of a short-range particle cushion.
• Cutting (src/cut): the stroke defines a vertical world plane. It is carried into each piece's rest space through a best-fit rotation. Each side becomes a new piece (the SDF ∩ its half-spaces), built in a Web Worker while the knife presses its groove. The new pieces then inherit position and velocity from the flesh they came from.
• Morphing (src/anatomy/morph.ts, src/app/morph.ts): between stages the body's SDF is blended, d = (1 − t)·d_i + t·d_i+1, so new flesh appears first next to the old surface. Organelles are matched one to one; an unmatched one grows out of its nearest relative, and nothing is placed outside the blended body. A worker keeps re-meshing the cell a little further along. Each new particle starts at the old flesh it pulls back to (X − (d_s − d_s′)∇d_s), so the new mesh begins in the old shape and its own elasticity carries it into the new one. Design notes: docs/morph-micrographs-physics-modal.md, docs/cell-cycles-organelles.md.
• Rendering (src/render): shadow map and a bottom-up contact map, then the opaque scene. Then, per piece from back to front, a back-face thickness pass and the jelly front faces: refraction, Beer–Lambert absorption, milky scattering and Fresnel/GGX. Knife faces show exact organelle sections by evaluating the SDFs at each fragment's rest position.

The types every layer agrees on live in src/contracts.ts. Behaviour is specified in features/*.feature.

Deploy to GitHub Pages

1. Create an empty repository feldaher/jelly-cells on GitHub.
2. git remote add origin git@github.com:feldaher/jelly-cells.git && git push -u origin main
3. In the repo, go to Settings → Pages → Build and deployment → Source: GitHub Actions.

.github/workflows/pages.yml runs the tests, builds, and publishes on every push to main. The Vite base is /jelly-cells/. If you rename the repo, change base in vite.config.ts to match.

Scale

Each specimen maps sim units to µm (coronavirus 0.018, bacteriophage 0.02, E. coli 0.35, yeast 1, Aspergillus 1, fission yeast 1.25, RBC 1.25, microglia 1.5, neuron 2, animal cell 3, fibroblast 4, plant cell 6), so labels, the scale bar, the cut report and the mass are in real units. The specimens therefore all look about the same size on screen while spanning a factor of 500: watch the scale bar. The dynamics are illustrative: every cell moves as if it were a few centimetres of gelatin. At true size a cell lives at very low Reynolds number and would never visibly wobble.

Sources

Every measured value in the app, with the paper it comes from and how far it was checked (A = read at the source … D = our own drawing choice), is listed in docs/sources/.

Image credits

The label-card micrographs are from Wikimedia Commons. They are public domain, CC0, CC BY or CC BY-SA; each card names the author and licence and links the file page. They are served as 640 px copies from public/micrographs/. Where Commons has no image of the right organism, the caption says what is shown instead (e.g. HeLa mitochondria on the yeast card).