The Fujiwhara
The story behind The Fujiwhara
Inspired by Fujiwhara effect on Wikipedia
Built with Three.js · ShaderMaterial · EffectComposer · AfterimagePass · Spring Physics
Techniques Orbital Mechanics · Tidal Perturbation · Particle Transfer · Logarithmic Spirals · Additive Blending
Direction Two forces of nature, neither in control, locked in an orbital dance with three possible endings
Result A living binary vortex system you shape by moving — watch cyclones absorb, merge, or escape
The Story
In 1921, Japanese meteorologist Sakuhei Fujiwhara published a paper describing what happens when two tropical cyclones drift within roughly 1,400 kilometres of each other. Neither simply wins. They begin orbiting their combined centre of mass — a gravitational waltz driven by each storm’s circulation field pulling at the other.
The dance has three endings. If one cyclone is significantly larger, it absorbs the smaller. If they’re roughly equal and close enough, they merge into a single, larger storm. And sometimes, after orbiting for days, they fling each other apart and continue alone. The outcome depends on two variables: distance and the ratio of their masses.
That dual-variable dependence maps perfectly to a cursor — X for separation, Y for the balance of power.
The Take
The experience opens with two particle vortices — one warm (crimson to gold), one cool (cyan to violet) — far apart against deep indigo. Without interaction, they slowly approach over twelve seconds, triggering phase-based narrative text as they draw closer.
Your cursor controls the physics directly. Horizontal position maps to separation: left keeps them distant, right pulls them together. Vertical position controls the mass ratio: top makes the warm vortex dominant, bottom favours the cool one, centre keeps them equal. Move right far enough and you enter the critical phase, where the vertical position determines the outcome — absorption, merger, or escape.
The key visual moment is the merger: both systems collapse into a single white-hot nucleus wrapped in mixed purple spirals, particles from both vortices now orbiting the same centre. The AfterimagePass creates luminous trail arcs that trace the orbital history of each particle, making the spiral structure tangible.
The Tech
Particle Simulation: 12,000 Particles in Two Vortex Systems
Each vortex contains 6,000 particles distributed across three logarithmic spiral arms. Particle radius follows a power distribution (exponent 0.5) concentrated near the core. Angular velocity is Keplerian — proportional to 1/r^0.65 — so inner particles orbit faster, naturally maintaining spiral arm structure through differential rotation. The two vortices rotate in opposite directions (cyclonic/anticyclonic).
Vortex centres orbit the barycenter using separation and mass ratio from the spring-damped cursor input. Orbital speed scales as 1/separation^0.75, so close vortices orbit rapidly — creating the frantic energy of the dancing phase.
Tidal Perturbation and Particle Transfer
When separation drops below 0.45, a tidal force pulls particles toward the opposing vortex centre. The force follows an inverse-square law, strongest on the near side of each vortex. This creates the characteristic bridge structure — streams of particles stretching between the two systems.
Particles that cross the gravitational boundary (closer to the other centre by 55%) have a small probability (0.08% per frame) of transferring allegiance. On transfer, the particle recalculates its orbital radius and angle relative to the new parent, and its angular velocity reverses sign. This mechanic creates the visual exchange of matter between systems — warm particles entering the cool vortex, and vice versa — that makes the merger feel physical rather than cosmetic.
Spring-Damped Interaction
Cursor position drives target values for separation and mass ratio. A critically-damped second-order spring (omega=4.5, zeta=1.0) interpolates the actual values, following the formula acceleration = -omega^2 * displacement - 2 * zeta * omega * velocity. This prevents snapping while keeping the response quick enough to feel direct. The physics feel like dragging something heavy through a medium — appropriate for cyclones.
Post-Processing: Afterimage + Bloom + Vignette
The AfterimagePass (damp=0.93) is the secret ingredient. Each frame blends 7% of the new render with 93% of the accumulated buffer. The result: every particle leaves a luminous trail that persists for roughly one second, turning the discrete point cloud into continuous spiral arcs. The pass sits before bloom in the chain so that only the clean render feeds back — preventing bloom-on-bloom accumulation.
UnrealBloomPass (strength 1.3, radius 0.5, threshold 0.2) makes the dense vortex cores glow. Core particles receive a 3x brightness boost (colors above 1.0 in linear space), ensuring they punch through the bloom threshold. A custom vignette shader darkens the edges, framing the vortex pair.
Narrative Phase System
Separation value determines the phase: distant (>0.55), approaching (0.3–0.55), dancing (0.1–0.3), critical (<0.1). Phase transitions trigger narrative text at the bottom of the viewport. In the critical phase, after 2.5 seconds, the mass ratio determines which outcome text appears. Text opacity is spring-interpolated, fading in over ~0.3s and out after 4 seconds.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.