SWCharacter Saga

The SWCharacter Saga builds an animated typographic character from the ground up using core SketchWaveJS classes — one stage at a time. Each stage adds or refines exactly one idea, keeping the code small and the concept visible, until the final stages produce a word whose letters scatter across the canvas and steer themselves home on demand.

The Building Blocks

• SWCharacter — The central class. Wraps a single typographic symbol with fill color, stroke, font, base size, and three independent animations: Breathe (sine-wave size pulsing), Spin (continuous rotation), and Cycle Hue (hue shifting around the color wheel). Its update(dt) / draw(grid) loop integrates neatly into any p5.js draw() function.
• SWBug — Carries the character's position. Handles movement modes (Random Walk, Perlin Noise, assemble steering), speed, and boundary behavior (Bounce, Wrap). The character renders wherever its bug currently sits, so movement and appearance are fully decoupled.
• SWGrid — Provides the coordinate system and rendering surface. userToScreen() maps a bug's user-space position to canvas pixels at draw time; the character scales its font size by grid.xScale so it always looks the same regardless of canvas resolution.
• SWColor — HSB color wrapper (hue 0–360, saturation, brightness, alpha, all 0–100). The Cycle Hue animation increments fillColor.h each frame and rebuilds the SWColor to refresh the internal p5.js color object.

---

🎨 SWCharacter Designer — Single-Character Playground

The SWCharacter Designer is the destination of the Stage 1 design series. It takes Stage 1c’s accordion panel, converts spin speed to degrees/second for student accessibility, and reframes the entire interface for end-user use rather than incremental development comparison. It is the tool you would hand a student who simply wants to place, style, and animate a character — with no knowledge of the stages that built it.

---

🏃 SWCharacter Mover 2 — Movement Playground

SWCharacter Mover 2 puts a single character in continuous motion with a full set of interactive controls. The Perlin Influence slider blends between pure random walk and pure Perlin noise; Perlin Speed governs how quickly the noise field evolves; Walk Chaos (expressed in degrees for student accessibility) sets the maximum turn per frame during random-walk phases. Trails can be rendered as fading dots or a connected line — the connected line includes automatic wrap-break logic so diagonal scratches never appear when the character crosses a canvas edge. A Pause button (also mapped to the spacebar) freezes all motion without clearing the canvas. The three Stage 1 animations — Breathe, Spin, and Cycle Hue — remain fully active on top of the movement, and the interactive info modal includes preset “Effect Recipes” that guide students toward interesting combinations.

---

🌀 Chaos Theory — Word Animation Playground

Chaos Theory elevates the Stage 5a word-animation engine into a polished, focused tool. Type any word (up to 12 characters), choose a font, and press Launch to scatter the letters. Each letter receives a random speed, spin direction, and breathing rhythm at launch. The Perlin Blend slider transitions smoothly between erratic random-walk wandering and organic Perlin-noise curves; per-letter noise seeds ensure paths diverge gracefully rather than moving in lockstep. Optional letter trails (polylines) and canvas echoes (motion blur) add visual depth. Pressing Assemble sends every letter home on a smooth homing arc; when the last letter snaps into place all breathing phases reset and equalize — producing a single synchronized pulse. Playback buttons (Launch, Stop, Assemble, Reset, Save) live under the canvas, keeping the right panel focused on three clean cards: Environment, Word, and Movement.

---

🔐 Beale Cipher Series (BC3–BC5 + GenBC2) — Digit Pile & Explosion

A Beale cipher (more precisely a book cipher) uses a shared text as a codebook. Each word in the text is numbered sequentially from 1. To encode a letter, the encoder picks any word whose first letter matches and records that word's number — so the same plaintext letter can produce a different number every time, defeating simple frequency analysis.

What makes the BC series visually distinctive is the digit-particle animation: each cipher number (e.g. 1432) is split into its individual digits (1, 4, 3, 2), which rain down one by one into a pile at the letter’s home position while the letter fades away. Once all digits land, the entire canvas explodes into a flying number cloud. Pressing Assemble steers every digit home; when all digits for a given letter return, that letter materialises with a brilliant scale-pop burst.

• BC3 — A Sound of Thunder (Ray Bradbury): The foundational version of the digit-pile engine. Teal/green palette; the classic butterfly-effect story provides the codebook.
• BC4 — We Didn’t Start the Fire (Billy Joel): Fire-themed palette of reds, oranges, and yellows against a deep red-black canvas. The song’s dense vocabulary of historical names gives a rich word index for every letter of the alphabet.
• BC5 — Declaration of Independence: Patriotic red, white, and blue against a deep navy background — using the authentic historical key text of the original Beale legend. The second Beale cipher was actually cracked using exactly this document. Try encoding LIBERTY or WE THE PEOPLE.
• GenBC2 — Generalized Cipher v2 (all three key texts): Select any of the three key texts from a dropdown and the app switches colour palette, background, and default word automatically. Dial in Perlin noise flow and animation speed to compare particle behaviours across all three themes.

---

↓ The Development Path — How the Polished Tools Were Built

Below the divider on the index page you’ll find the twelve development stages that produced the tools above. Each stage adds or refines exactly one idea — so the diff between any two consecutive stages is the clearest possible illustration of that concept.

The Saga in Stages

1. Stage 1 — One Character, One Click: Click the canvas to drop a single SWCharacter snapped to the nearest grid cell. A right-panel control panel exposes every attribute (symbol, font, size, fill, stroke, all three animations) and updates the character in real time. This is the full feature set — every later stage in the 1.x series is a UI refactoring, not a feature addition.
2. Stage 1a — Color Wells: Replaces individual H/S/B sliders with browser color-well pickers plus a single alpha slider per color. The conversion helper SWColor.fromHex() bridges the browser’s hex string to the HSB color model that SWCharacter uses internally.
3. Stage 1b — UI Polish: Moves Clear and Save Image from a right-panel card to below the canvas, where canvas-acting controls naturally belong. Removes the now-empty Actions card. One small layout change — but it matters for spatial memory.
4. Stage 1c — Character Accordion: Introduces a Bootstrap accordion inside the Character card. Fill Color, Stroke / Border, and Placement Display collapse independently; Symbol / Font / Size stay always visible. The panel is shorter at a glance and the Animations card is reachable without scrolling.
5. Stage 1d — Full-Panel Accordion: Wraps the three top-level cards into a second, outer accordion. Character starts open; Animations is disabled until a character is placed; Environment starts collapsed. Two-level nesting — same data, different visual hierarchy.
6. Stage 2 — Character Movement: Unlocks SWBug movement. The character wanders continuously in Random Walk or Perlin Noise mode with user-controlled speed, and bounces or wraps at the canvas edge. The three in-place animations still run on top of the movement.
7. Stage 2a — Angular Velocity Model: Refactors movement steering from “lerp toward a target angle” to an angular velocity model. Eliminates open-field jitter and ledge-skimming. All controls are unchanged — only the physics change.
8. Stage 3 — Word Display: Scales to a full word (default: CHAOS). Each letter gets its own SWCharacter and SWBug, positioned at home in a centered row. Start launches all letters simultaneously on independent trajectories; Stop freezes them; Reset snaps them home.
9. Stage 3a — Refined Word Animation: Polishes Stage 3 for visual quality: grid hidden by default, always wrap, pure random walk. Breathing slows to 5–12 s cycles per letter, creating a parallax depth illusion. A color picker and randomize switch are added.
10. Stage 4 — Bug Trails: Each letter’s bug now draws its recent path as a colored polyline. A checkbox shows/hides trails; a slider controls trail length (10–200 positions). The canvas becomes a visual record of each character’s trajectory.
11. Stage 5 — Assemble: Adds an Assemble button. While letters are in motion, clicking Assemble steers each letter back to its home position on a smooth arc. Once all letters are home, they breathe in unison.
12. Stage 5a — Drift Fix: Fixes assembled-letter drift: once all letters are home, their bug positions are frozen. Only SWCharacter.update() (breathing) continues. One line of fix — a clear example of what “done” actually requires.

What to Watch For

• How SWCharacter and SWBug are independent layers — position is owned by the bug; appearance and animation are owned by the character.
• How the Stage 1 series refactors the same data into progressively more compact UIs without changing any behavior.
• How the Stage 2 angular velocity fix eliminates noise artifacts by changing the physics model, not the noise parameters.
• How Stage 3’s word is just an array of Stage 2a characters — no new class; just a loop.
• How Stage 3a’s depth illusion emerges from a single parameter change: making breath cycles long enough that the eye reads size variation as distance.
• How Stage 5a’s bug drift could have gone unnoticed — and why “visually correct” is not the same as “logically correct.”