Flutterby

Generative Wing Mark · Deterministic Study
Session 01 · 2026-04-05 · Morphogenesis × Hex Grid × Identity

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.

01 · Source · Right Wing Extraction

Four silhouette variants, isolated and cropped to 512px

Variant A
Variant A Folk / Decorative
Variant B
Variant B Monarch / Vein
Variant C
Variant C Organic / Flowing
Variant D
Variant D Bold / Textural

02 · Tessellation · Hex Grid Morphogenesis Sampling

Pointy-top hexagonal grid, area-averaged multi-point sampling

Hex Mark A
Variant A 190 cells / 864 grid
Hex Mark B
Variant B 232 cells / 864 grid
Hex Mark C
Variant C 314 cells / 864 grid
Hex Mark D
Variant D 271 cells / 864 grid

03 · Parameters

Deterministic configuration for this study

Cell Radius
12px
Hex width 20.8px. ~25 columns. Balances pattern capture against hex legibility at 512px.
Sample Points
19
Centre + 6 vertices + 6 edge midpoints + 6 inner ring. Area-averaged for smooth boundary gradient.
Orientation
Pointy-top
Biological convention. Honeycomb natural. 6-fold rotational symmetry matching wing cell geometry.

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.

04 · Evolution · Derived Cell Expression

Gap + OKLCH lightness + warm-black chromaticity (Variant B)

V1: Stroke-based
V1: Stroke Linear RGB, no gap, no substrate
V2: Gap-based
V2: Derived OKLCH, 95% gap, warm-black, substrate

05 · Verification · Scale Legibility

Gap is scale-adaptive: invisible at 29px, visible at 512px

29px 29px pass
180px 180px pass
512px 512px pass

06 · Derivation · Every Parameter Grounded

Provenance grades per design decision

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

07 · Confirmation · All Variants Under Derived Parameters

Same dynamics, different seeds, different outcomes

V2 Variant A
A 3% interior · 19% boundary
V2 Variant B
B 6% interior · 20% boundary
V2 Variant C
C 10% interior · 27% boundary
V2 Variant D
D 17% interior · 14% boundary

08 · Palette · Geographic Chromatic Identity

Darkness and chroma are biologically coupled: melanin determines both

Desert Warm
Desert Warm H=82 · Egypt
Canal Twilight
Canal Twilight H=230 · Venice
Tropical Lush
Tropical Lush H=145 · Future
Urban Classical
Urban Classical H=35 · Rome

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.

09 · Morphogenesis · Reaction-Diffusion Engine

Turing patterns confirmed at fine resolution, wing confinement preserves shape

Turing pattern (open grid)
Open Grid 128×128 · Labyrinths confirmed
Wing-confined Turing pattern
Wing Confined 256×256 · Solid boundary · Patterns form
Generative desert-warm
Desert Warm Generative · F=0.037 k=0.06
Generative canal-twilight
Canal Twilight Generative · F=0.037 k=0.06

10 · Parameter Space · F/k Sweep Across Pearson Classes

Same wing, same boundary, different morphogenesis

Gamma: branching stripes
γ Stripes F=0.022 k=0.051
Delta: hexagonal spots
δ Spots F=0.030 k=0.055
Theta: concentric bands
θ Bands F=0.030 k=0.057
Labyrinths
Labyrinths F=0.037 k=0.060

11 · Production · 1024×1024 Vectorised R-D

The wing shapes its own morphogenesis through spatially varying parameters

Source wing
Source Original silhouette
Gamma stripes
γ Stripes Uniform F=0.022 k=0.051
Delta spots
δ Spots Uniform F=0.030 k=0.055
Style-mapped
Style Map Wing veins shape the R-D parameters

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.

12 · Voronoi · Stippled Position Maps

12,000 optimised positions per wing, density proportional to darkness

Stipple A
A Stippled 12,000 particles · Folk
Stipple B
B Stippled 12,000 particles · Monarch
Stipple C
C Stippled 12,000 particles · Organic
Stipple D
D Stippled 12,000 particles · Bold

13 · Live · Particle Morphogenesis

12,000 Voronoi-stippled particles. Four wings. One breath.

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


14 · Icons · Variant A · Bone / Warm-Black

10% padding standard, 20% maskable. Dark default for PWA.

512px dark
512 Dark PWA default
512px light
512 Light Light theme
512px maskable dark
512 Maskable 20% safe zone
192px dark
192 Dark Android home