SWCharacter Saga

Creating a Character — Stage

...loading...

🌐 Environment

Show grid G

Background Color BG Opacity: 100

🔤 Word

Word

Enter or blur to apply

Font family

🏃 Movement

Perlin noise: 50 0 = random walk | 100 = pure Perlin Min speed: 40 u/s Max speed: 150 u/s Speed range applied at each Start

Wrap around edges

Unchecked = bounce off walls

▶ Playback

Each letter gets random speed, spin, and breathe values when Start is pressed. Press Reset to restore the original positions and re-randomize on the next Start. Space toggles Start / Stop.

Stage 3 moves from a single placed character to a whole word — and from manual placement to a structured animation lifecycle: display → Start → wander → Stop → Reset.

What's New vs. Stage 2a

Word display — a configurable word (default CHAOS) is automatically centered on the grid. Each letter receives a random vivid fill color drawn evenly from across the hue wheel.
Per-letter independence — every letter has its own movement angle, Perlin noise seed, speed, spin rate, breathe amount, and breathe speed. All are re-randomized each time Start is pressed.
Start / Stop / Reset — letters start at their home positions and sit still until Start is pressed. Stop freezes all letters in place. Reset returns them to the original centered layout and clears the animation state. Space toggles Start / Stop.
Custom word — type any word (up to 12 characters) in the Word field and press Enter or click away. The layout rebuilds immediately with fresh random colors.

Layout

Letters are spaced evenly across 80% of the grid width, centered vertically and horizontally. Spacing is proportional so short words and long words both look balanced. Each letter's base size is randomized between 55 and 75 user units at Start, so the word has a natural, varied texture.

Colors

At display time each letter is assigned a color by spreading hues evenly around the color wheel (360° / number of letters), offset by a random starting hue. Saturation and brightness are randomized in the vivid range (S 75–100, B 80–100). Colors are re-randomized every time the word is rebuilt (Reset or new word entry).

Movement (Angular Velocity Model)

Each letter uses the same angular velocity model introduced in Stage 2a. The heading angle is updated per frame:

noiseT    += 0.005;
randomNudge = random(-0.3, 0.3) × (1 - perlinStrength);
perlinNudge = (noise(seed + t) - 0.5) × perlinStrength × MAX_TURN × 20;
angle      += randomNudge + perlinNudge;

Each letter has an independent noiseSeed and noiseT, so their trajectories diverge immediately and never synchronize. Speed (u/s) is randomized between 20 and 80 per letter.

Spin and Breathe

Spin speed is chosen randomly between 0.5 and 4.0 rad/s, with a 50% chance of clockwise vs anti-clockwise rotation per letter.
Breathe amount (amplitude) is random 2–12 user units; breathe speed is random 0.5–3.0 cyc/s. Both features are off at display time and enabled at Start.

Boundary Behavior

Same options as Stage 2a: Bounce (default, signed-component reflection + hard clamp + wall kick) or Wrap (Pac-Man torus). The Perlin noise slider controls the blend between random walk and pure Perlin flow for all letters equally.

Background

The default background is a deep navy (#1a1a2e), chosen so the vivid letter colors pop against it. Change it any time with the Background Color picker.