Butterfly wing cells are hexagonal. Each cell reads a chemical gradient to determine its pigmentation. Turing described this mechanism in 1952: two chemicals—activator and inhibitor—interact through reaction-diffusion to produce stable spatial patterns.
The Flutterby mark recreates this biological mechanism. A hexagonal grid is tessellated over the wing silhouette. Each cell samples the underlying pattern and fills with a grayscale value representing the morphogenesis gradient—the reaction-diffusion front where pigmented wing meets unpigmented background.
This is deterministic. The generative future—where reaction-diffusion dynamics mutate the boundary, where each mark is unique but recognisably Flutterby—begins from this ground truth.
A provenance audit revealed that five of ten design decisions in the initial study were post-hoc rationalisations of implementation convenience. The cell boundary was drawn as a stroke because SVG polygons have a stroke attribute. The rationale—“chitin walls between biological cells”—was attached after the fact.
Three independent evidence lines converge on a different answer. Biology: cells are distinct through fill variation and thin absence (2–4nm membrane gap), not drawn walls. Mathematics: the hex grid is a degenerate Voronoi tessellation—gaps simulate the inter-cell space that Voronoi naturally produces. Design: the mosaic tradition uses grout as both separator and compositional element.
The mark’s source colour (#070505) carries warm-black chromaticity—OKLCH C=0.005, H=17.9—shared with the Ampersand ground. Mapping through perceptually uniform OKLCH lightness, not linear RGB, ensures the morphogenesis gradient—the thesis of the mark—is perceived as the mathematics intends.
180px
pass
512px
pass
| Parameter | Value | Grade | Derivation |
|---|---|---|---|
| Cell boundary | Gap (95% radius) | A | Biology + Voronoi + mosaic tradition converge. Verified at 4 scales |
| Colour space | OKLCH lightness | A | Perceptual uniformity. Coherent with portfolio palette architecture |
| Chromaticity | C=0.005, H=17.9 | A | Measured from #070505. Warm-black shared with Ampersand ground |
| Lightness range | L=0.119 – 0.97 | A | Measured endpoints. Near-black to substrate (not void) |
| Micro-variation | ±0.04 L | B | JND-based at L≈0.12. Sub-perceptual at arm’s length |
| Background | L=0.99 | A | Gap colour. The ground the cells sit on |
| Exterior cells | L=0.95 | A | 0.04 L delta from background = JND threshold. 864-cell field visible |
The deterministic mark samples an existing pattern. The generative mark creates a new one. Gray-Scott reaction-diffusion—Turing’s 1952 morphogenesis model—runs on a fine grid (256×256), producing labyrinthine patterns that are then sampled onto the hex display grid.
The wing silhouette is the boundary condition, not just a mask. Dirichlet confinement holds the exterior at rest state while morphogenesis runs inside the wing tissue. The wing shape constrains what patterns can form—wide body allows labyrinths, narrow tip compresses patterns, boundary is the reaction front.
This is in progress. The simulation architecture is confirmed. Parameter tuning within confined geometry is the open research question—the F/k values that produce patterns on open grids don’t trigger instability in confined regions. The wing’s shape influences its own morphogenesis.
12,000 particles need to know exactly where to be. Random sampling produces uneven coverage—clumps and gaps that destroy fine detail. Weighted Voronoi Stippling (Secord 2002) solves this: iteratively relax particle positions so each one sits at the brightness-weighted centroid of its Voronoi cell. Dark regions attract more particles. Light channels repel. The algorithm guarantees even spacing within each density zone.
Each wing is independently stippled—its own 12,000 optimised positions capturing its unique vein structure, spots, and margins. Spatial sorting by Morton code ensures particle i occupies the same canvas region across all four wings, enabling smooth morphing by direct index mapping.
The transition breathes. An asymmetric ease—quintic Hermite—lingers on the release and resolves crisply on the arrival. During the morph, shimmer amplitude surges from 1px to 9px: particles visibly drift outward from the dissolving pattern before the next wing crystallises. The out-breath is an exhale. The in-breath is a settling.
183 lines · zero dependencies · Canvas 2D · additive blending
Voronoi stippling (Secord 2002) · Morton spatial sorting · coherent breathing tempo
Quintic Hermite ease · sinusoidal shimmer surge · touch-as-warmth