Chaos Theory

Chaos Theory sends a word's letters scattering across the canvas — each spinning and breathing with its own random rhythm — then lets them navigate home. When the last letter snaps into place, all breathing equalizes into a single synchronized pulse. Order emerging from chaos.

Quick Start

1. Press 🚀 Launch to scatter the letters. Each gets a random speed, spin direction, and breathing rhythm.
2. Use the Word card to change the text (press Enter to apply), choose a font, and set letter colors. Changes take effect at the next Launch or Reset.
3. Use the Movement card to blend between random wandering (0%) and smooth Perlin curves (100%), and to adjust the speed range.
4. Enable Letter trails in the Movement card or Canvas echoes in Environment for visual effects while letters move.
5. Press 🏠 Assemble — each letter steers home in a smooth arc and snaps into place. When all letters arrive, they breathe together in perfect unison.
6. Press ⏹ Stop to freeze motion, ↺ Reset to return letters to home positions, or Space to toggle Launch / Stop. 💾 Save Image downloads a PNG at any time. Press G to toggle the grid overlay.

Word Controls

• Word or phrase — type up to 12 characters and press Enter (or click away). Letters are centered on the canvas, spaced evenly up to a maximum of 60 units apart. Spaces count as letters.
• Font family — changes apply to all letters immediately, even while they are moving.
• Random vivid colors — when checked, each letter is assigned a unique vivid hue at Launch. Uncheck to use a single uniform color from the color picker below.

Movement Controls

• Perlin blend — the master steering control. 0% (Random Walk): the heading is nudged randomly each frame, producing quick, erratic wandering. 100% (Pure Perlin): the heading comes from p5.js noise(), producing smooth, flowing organic arcs. Each letter uses its own noise seed, so paths diverge gracefully.
• Min / Max speed — the range from which each letter's speed is randomly drawn at Launch. A wide range (e.g., 20–200) gives dramatic variation; a narrow range (e.g., 60–80) keeps all letters moving at roughly the same pace. The canvas grid is 600 × 400 user units.
• Letter trails — draws a color-matched polyline tracing each letter's recent path. Trail length controls how many past positions are retained. Trails are cleared during the Assembly approach and removed when a letter snaps home.

The Assembly

When you press 🏠 Assemble, each letter switches from free wandering to homing mode:

• It steers toward its home position using an exponential angle blend — no sudden snapping.
• Speed is proportional to distance: fast when far, slowing as it closes in.
• Canvas-wrapping is disabled during assembly — each letter travels in a direct arc.
• When close enough, the letter snaps precisely home, stops spinning, and locks in place.
• Once all letters are home, their breathing phases reset to zero and speeds equalize to the group average — producing synchronized pulsing in unison.

Automatic Animations

Spin and breathing are applied automatically at Launch — no controls needed. Each letter receives a random spin direction and rate, and a random deep breathing cycle. This gives the word a lively, organic quality as letters wander. The Assembly finale equalizes the breathing for the moment of synchronized rest.

Effect Ideas

Effect	Settings to Try
Graceful Perlin drift	Perlin 100%, Min 25, Max 60, Letter trails 80 pts
Frantic scatter	Perlin 0%, Min 80, Max 220, Canvas echoes (fade 30)
Cosmic slow drift	Perlin 100%, Min 15, Max 40, Letter trails 120 pts
Motion blur painting	Perlin 50%, Canvas echoes (fade 12), speeds 40–100
Slow breathing parade	Perlin 30%, Min 20, Max 50 — enjoy the scatter, then Assemble

Learn More

See the SWCharacter Class Reference for full documentation of the SWCharacter API and the SketchWaveJS class library.