The Chromophore
The story behind The Chromophore
Inspired by Green fluorescent protein on Wikipedia
Built with Three.js · InstancedMesh · ShaderMaterial · UnrealBloomPass · EffectComposer
Techniques Poisson Disc Sampling · Merged LineSegments Ghost Wireframes · Instanced Billboard Glow Quads · Fresnel Edge Lighting · Excitation Propagation Cascade · Gaussian Mutation Noise · Photobleaching Decay
Direction A protein doesn’t glow because something is applied to it — it folds itself into fluorescence. Visibility emerges from internal structure.
Result Touch a ghostly barrel and it folds into vivid fluorescent light, propagating to neighbors in a spectral cascade until 90+ unique hues fill the screen — a living Brainbow built from single point mutations
The Story
In 1962, Osamu Shimomura was grinding up jellyfish. Tens of thousands of Aequorea victoria, collected from the waters of Friday Harbor, squeezed into a slurry, purified into a protein that glowed green under ultraviolet light. He called it Green Fluorescent Protein — GFP. It took another three decades before anyone understood what made it remarkable.
GFP is a barrel. Eleven strands of amino acids wrap around in a cylinder, like the staves of a wooden cask. Inside the barrel, three specific amino acids — Ser65, Tyr66, Gly67 — do something extraordinary: they fold into each other, cyclize, oxidize, and form a chromophore. No enzyme helps. No external catalyst. The protein folds itself into fluorescence. The barrel is both the container and the machine. When ultraviolet light hits the chromophore, it absorbs the energy and re-emits it as vivid green — a wavelength shift that makes the invisible visible.
Then Roger Tsien discovered that changing a single amino acid — one point mutation — shifts the emission wavelength across the entire visible spectrum. BFP glows blue. YFP glows yellow. mCherry glows red. The same barrel architecture, the same autocatalytic folding, a completely different color. In 2007, researchers at Harvard put three fluorescent protein variants into mouse neurons and let each cell express its own random ratio. Every neuron chose a different combination. Every neuron glowed a different color. They called it Brainbow — and for the first time, you could see the wiring of a brain in full color.
In 2008, Shimomura, Martin Chalfie, and Tsien shared the Nobel Prize in Chemistry. Not for discovering a protein. For giving biology a way to see itself.
The Take
A dark field. Deep indigo-black — almost the color of deep water. Ninety translucent barrel-shaped cages float in the space, gently breathing, slowly rotating. They are empty scaffolds. Structure without function. You can see through them — thin ghostly lines tracing the eleven strands of the beta-barrel, visible but purposeless.
Touch one. Three residues flash white along the barrel’s height — Ser65, Tyr66, Gly67 finding each other. The strands tighten. Light floods through the gaps between them. The chromophore has formed. The barrel is now a source, not a cage. Vivid fluorescent color — maybe green, maybe blue, maybe cherry-red — radiates outward in a soft halo of bloom.
The glow propagates. Active barrels excite their neighbors within range, building up an invisible excitation potential. When a neighbor reaches threshold, it folds and ignites on its own — choosing its own spectral mutation, a hue shifted from its parent by Gaussian noise. One becomes three. Three becomes twelve. The cascade accelerates. Each barrel expresses a slightly different color, the way each neuron in a Brainbow expresses a different ratio.
At thirty percent activation, text appears: One amino acid. One point mutation. A different color of visible. At seventy-five percent, the Brainbow text fades in — the 2007 experiment, the mouse brain, every neuron a different color. The screen is now dense with overlapping glow halos in 90+ distinct hues, a spectral field that emerged from identical empty cages through the smallest possible molecular changes.
Then photobleaching begins. The oldest barrels — the ones that ignited first — start to dim. Blue dies fastest. Red persists longest. Even fluorescence fades. You can re-excite nearby barrels by clicking on active ones, boosting their blink intensity, but the natural tendency is toward silence. The light was always borrowed from structure, and structure has a half-life.
The Tech
Ghost Wireframes as Merged LineSegments
Ninety barrel cages need to be visible before activation — thin, translucent, obviously structural. Using InstancedMesh with wireframe rendering is unreliable across ShaderMaterial and instancing combinations, so the ghost barrels use a different approach: a single merged BufferGeometry containing all 90 barrel wireframes pre-transformed to their world positions. Each barrel contributes 11 vertical strand segments (8 subdivisions each) plus 22 horizontal ring segments at the top and bottom caps — all packed into one THREE.LineSegments draw call. A custom ShaderMaterial applies per-vertex alpha variation so each cage has slightly different opacity. When a barrel activates, its ghost vertices are collapsed to the origin, effectively hiding it in place. One draw call for all 90 ghost cages.
Instanced Solid Barrels with Fresnel Lighting
Activated barrels render as THREE.InstancedMesh using a custom ShaderMaterial. Each of the 11 strands is a thin quad strip running the barrel’s height with a slight bulge at the midpoint (6% radial sine modulation). The fragment shader computes a camera-facing dot product for Fresnel-like edge lighting — edges glow brighter than faces, giving the barrel a translucent, internally-lit quality. Three per-instance attributes drive the visuals: aState (chromophore intensity, 0-1), aColor (the barrel’s mutation color), and aFold (fold animation progress). During the 0.8-second fold, three horizontal bands at y=0.33, 0.50, and 0.67 flash white — the three amino acids cyclizing — using narrow smoothstep bands modulated by a sine pulse.
Billboard Glow Quads
Each barrel also has an instanced billboard quad for its fluorescent halo. The glow vertex shader extracts the instance position from the instance matrix, discards its rotation, and reconstructs the quad using camera-right and camera-up vectors — so the glow always faces the viewer regardless of barrel orientation. The fragment shader combines two exponential falloffs: a wide atmospheric glow (exp(-d * 5.0)) and a tight bright core (exp(-d * 18.0) at 1.8x intensity). Additive blending with depthTest: false ensures halos stack and overlap into the dense luminous field of the Brainbow stage.
Poisson Disc Distribution
Barrel positions are generated by Poisson disc sampling across a 26x14 unit field with a minimum separation of 1.65 units (2.0 on mobile with 55 barrels instead of 90). The algorithm uses a grid-accelerated dart-throwing approach with 30 rejection samples per active point. This produces an organic, non-uniform distribution — barrels feel scattered but never clumped or grid-aligned — which matters for propagation: the irregular spacing creates unpredictable cascade paths rather than uniform wavefronts.
Propagation Cascade
Active barrels excite inactive neighbors every frame. Each active barrel adds EXCITE_RATE * dt * (1 - distance/PROP_RANGE) to the excitation accumulator of every inactive barrel within PROP_RANGE (4.0 units). When excitation reaches 1.0, the barrel activates, inheriting its parent’s hue plus Gaussian noise (Box-Muller transform, sigma=15 degrees). Mouse proximity also contributes — hovering near a ghost barrel slowly fills its excitation. The cascade is not instant; it builds pressure over frames, so the propagation has rhythm. Multiple simultaneous touch points create interfering wavefronts.
Spectral Mutations and Photobleaching
Each barrel is assigned to one of four mutation classes (BFP at 240 degrees, GFP at 110, YFP at 66, mCherry at 345) with Gaussian noise applied to the base hue. Saturation varies between 0.85-1.0, producing 90+ perceptually distinct colors from four base classes — the same mechanism that gives Brainbow its richness. After 60 seconds of activation, photobleaching kicks in: the chromophore intensity decays multiplicatively each frame. Blue-shifted barrels (hue < 72 degrees) bleach fastest (0.997x per frame), red-shifted barrels bleach slowest (0.999x). This mirrors real fluorescent protein behavior — short wavelengths photobleach more aggressively because higher-energy photons cause more photochemical damage.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.