Devlog #41 – Wave 21: Cell Biology, Crystal Structures & Space Simulations

Platform Stats after Wave 21

Wave 21 Blog Posts

Cell Biology Simulations

The two new molecular-biology simulations model the physics of living cells at complementary scales: osmosis operates on the thermodynamic driving force across a semi-permeable membrane, while mitosis traces the choreography of chromosome segregation during cell division.

Osmosis — Plant Cell Model

The osmosis simulation models a plant cell in a solution with adjustable external concentration (0–600 mΟsm). The driving force follows the van ’t Hoff equation:

π = iMRT          (van 't Hoff, dilute limit)
π_osmotic = (c_int − c_ext) × R × T       [Pa]
drivingForce = (π_osmotic − ψ_turgor) / RT_norm
dV/dt = L_p × A × drivingForce    (L_p = hydraulic conductivity)

Two canvases run side by side: the left (360×320) shows the cell wall, plasma membrane, central vacuole, 50 animated water molecules (Brownian motion + membrane-crossing events), and coloured solute dots. The right (320×320) plots the vacuole volume over time. Five presets cover isotonic, hypotonic, hypertonic, lysis, and plasmolysis states. The turgor pressure slider (0–10 bar) lets users probe the interplay between osmotic and pressure potentials that governs stomatal opening and cell elongation in real plants.

Mitosis & Meiosis

The mitosis simulation animates both major modes of eukaryotic cell division on a single canvas. Mitosis runs through seven named phases (interphase → prophase → prometaphase → metaphase → anaphase → telophase → cytokinesis); meiosis extends to ten (including meiosis I and II with crossing-over). At each phase the canvas renders:

• Four coloured chromosomes (homologous pairs highlighted)
• Nuclear envelope (assembled/dissolved per phase)
• Mitotic spindle fibres reaching kinetochores
• Cleavage furrow (cytokinesis) as a pinching cyan arc

Phase chips at the top let users jump to any phase. Play/pause and single-step buttons allow frame-by-frame inspection, while a speed slider controls the animation tempo. An info panel below the canvas describes the biological events occurring at the current phase.

Crystal Structure 3D Viewer

The crystal structures simulation renders six Bravais lattice types in an interactive 3D projection built entirely on Canvas 2D using a painter’s algorithm (back-to-front depth sort). The approach avoids WebGL, making it maximally compatible across devices while still producing visually rich output with per-atom radial gradient shading, bond cylinders, and a 2×2×2 supercell mode.

Simple Cubic (SC)    — coordination number 6,   APF = 0.524
Body-Centred (BCC)   — coordination number 8,   APF = 0.680
Face-Centred (FCC)   — coordination number 12,  APF = 0.740
Hexagonal Close-Pack (HCP) — c/a = 1.633, APF = 0.740
Diamond Cubic        — coordination number 4,   APF = 0.340
Rock Salt (NaCl)     — Na+ (blue) / Cl- (green), CN = 6

The renderer projects 3D atom positions onto a 2D canvas via a configurable rotation matrix (draggable) and perspective divide, then sorts all primitives (atom spheres + bond cylinders) by projected depth before drawing. Shading uses a fixed light direction to compute a specular highlight offset on each radial gradient. Controls include: drag-to-rotate, scroll-to-zoom, toggles for unit cell boundary / bonds / atom labels / supercell, and a statistics panel showing coordination number, packing efficiency, and real-world examples.

Special Relativity Simulations

The relativity category now covers five interactive simulations spanning time dilation, Lorentz contraction, spacetime diagrams, length measurement, and the classic twin paradox.

Twin Paradox

The twin paradox simulation renders an animated Minkowski spacetime diagram with the Earth twin’s vertical worldline and the rocket twin’s V-shaped path (outbound at velocity β, turnaround, return). Proper-time tick marks are drawn directly on the rocket worldline using the Lorentz factor γ = (1−β²)−½. A six-second animation plays out the mission in four phases: outbound (2 s), turnaround deceleration (0.4 s), return (2 s), reunion (0.2 s). Live age panels show Earth twin, rocket twin, and Δage updating in real time.

Lorentz Contraction

The Lorentz contraction simulator shows a purple ‘contracted’ ruler alongside a grey proper-length silhouette. A β-slider (0→0.999) updates the visual length L = L₀√(1−β²) and shows that the transverse green ruler is unchanged. Five presets include everyday objects (car at 100 km/h, particle-beam protons) and relativistic benchmarks (β = 0.6, 0.9, 0.99).

Space & Astronomy Simulations

Exoplanet Transit Method

The exoplanet transit simulation implements the Mandel–Agol (2002) quadratic limb-darkening transit model — the same equations used by NASA’s Kepler and TESS missions to detect planets via the fractional dip in stellar flux as a planet crosses the stellar disc. The top canvas animates the star (with a physically correct limb-darkening gradient), the orbital path, and the planet disc. The bottom canvas plots the live light curve updating at each frame.

Moon Phases

The moon phases simulation displays all eight classical lunar phases as interactive chips, with a day slider (0–29.5) controlling the geometry. An orbital canvas renders the Earth–Moon–Sun system with star field. The phase algorithm computes the illuminated fraction using the Sun–Moon angle and blends a crescent/gibbous mask using two overlapping circle clips, while the orbital canvas renders the correct geometry at each day.

Mathematics Simulations

Möbius Strip

The Möbius strip simulation renders a parametric surface (120×16 quads) with Phong lighting and a hue-gradient colour scheme on a Canvas 2D. Depth-sorted quads are painted back-to-front to simulate occlusion. An ant animates along the surface, tracing the single-sided topology over a full 4π parameter traversal — the ant returns to its start facing the opposite direction. A twist-count slider (1–5) demonstrates that odd twists produce non-orientable surfaces while even twists recover a standard cylinder. Edge-count and side-count statistics update live.

Matrix Transforms Visualiser

The matrix transforms visualiser shows how 2×2 real matrices act on the plane. Four sliders control the entries a, b, c, d (−3 to +3). Layers toggle independently: unit grid, basis vectors, eigenvectors (when real), unit circle (showing how it maps to an ellipse), and a continuous animation keyframing α ∈ [0,1] between the identity and the current matrix. The info panel shows trace, determinant, eigenvalues λ₁/λ₂, and matrix type (rotation / shear / stretch / projection / reflection / singular).

Fibonacci Spiral

The Fibonacci spiral simulation offers three display modes: spiral (Archimedean polar plot of the golden angle 137.507°), sunflower (2D phyllotaxis seed head with configurable seed count up to 1000), and squares (recursive Fibonacci rectangles). Four colour palettes (golden, rainbow, monochrome, ocean) and a golden-angle slider (±5° around 137.5°) let users explore why the irrational golden angle φ = (3−√5)π is optimal for packing. A PNG export button rounds out the feature set.

Engineering Note: Canvas 2D 3D Rendering

The crystal structures and Möbius strip simulations share a Canvas 2D 3D rendering approach that avoids the setup complexity of WebGL while still producing depth-correct output. The core technique is the painter’s algorithm: compute all primitives with their projected depth, sort descending (furthest first), then draw in order so near objects occlude far ones.

// Project 3D position to 2D canvas with perspective divide
function project(x, y, z, rotMatrix, fov, cx, cy) {
  const [rx, ry, rz] = applyRotation(rotMatrix, x, y, z);
  const scale = fov / (fov + rz);           // perspective
  return { sx: cx + rx * scale, sy: cy + ry * scale, depth: rz };
}

// Sort all drawable primitives by depth (back to front)
primitives.sort((a, b) => b.depth - a.depth);

// Draw each primitive; later draws occlude earlier ones
for (const prim of primitives) {
  if (prim.type === 'sphere') drawAtomCircle(ctx, prim);
  if (prim.type === 'bond')   drawBondLine(ctx, prim);
}

The approach works well for convex objects (atom spheres, bond cylinders) because depth comparisons per primitive produce correct occlusion without per-pixel depth tests. For the crystal supercell (up to ~200 atoms + ~600 bonds) on a modern GPU-accelerated Canvas, the sort + draw loop completes within the 16 ms frame budget at 60 fps.

What’s Next — Wave 22

Wave 22 will expand coverage in two areas. First, signal processing and communications: a Fourier-transform image filter (spatial frequencies, low-pass / high-pass / band-pass), a wavelet transform visualiser (multi-resolution decomposition, CWT scalograms), and a convolutional neural network layer explorer that shows feature maps in real time. Second, thermodynamics and phase transitions: an Ising model critical point explorer (Metropolis algorithm, heat capacity peak, correlation length divergence) and a phase diagram simulator for binary alloy systems.