SWCharacter Mover 2

SWCharacter Mover 2 places a typographic symbol on an animated canvas and sends it wandering continuously across the grid. Use the right-panel cards to customize the character's appearance, fine-tune how it moves, and layer animations on top.

Quick Start

1. Click anywhere on the canvas to snap a character to the nearest grid cell. It immediately begins moving. Click again to re-place it at a new position.
2. Type a symbol in the Symbol box (any single character), pick a font and drag the Size slider — changes apply instantly, even while the character is moving.
3. Open Fill Color to choose a hue and set opacity. Open Stroke / Border and check Add stroke / border to add an outline.
4. Use the Movement card to control how the character wanders — see the full control descriptions below.
5. Once a character is placed, expand any Animations section to layer Breathe, Spin, or Cycle Hue on top of the movement.
6. Use Clear to remove the character, ⏸ Pause / ▶ Resume to freeze and continue (spacebar works too), or Save Image to download a PNG snapshot. Press G to toggle the grid overlay.

Movement Controls

The character steers by updating a heading angle every frame and stepping forward by Speed user units per second. When it reaches any edge it wraps to the opposite side (pac-man style — no bouncing). The heading is shaped by blending two strategies: Random Walk and Perlin Noise.

• Perlin influence — the master blend control. At 0% the character uses a pure random walk: the heading is nudged randomly each frame, producing busy, unpredictable wandering. At 100% the heading comes entirely from p5.js noise(), producing smooth, flowing organic curves. In between, both behaviors are blended together. Perlin speed is enabled only above 0%; Walk chaos is enabled only below 100%.
• Perlin speed — controls how quickly the noise function advances through its time dimension each frame. Low values (0.001–0.005) produce long, sweeping arcs that turn slowly and gracefully. High values (0.030–0.050) make the path increasingly erratic, almost jittery. Only active when Perlin influence > 0%.
• Walk chaos — the maximum heading turn (in degrees) applied each frame during random-walk phases. 0° = perfectly straight line (try it with a low Speed for a laser-like beam). 6°–11° = gentle, gradual curves. 23°–30° = highly erratic, almost frantic. Only active when Perlin influence < 100%.
• Speed — distance traveled per second in user units (the grid is 600 × 400 units). 0 = completely stationary. 30–80 = a relaxed, readable pace. 150–200 = racing across the grid.
• Trail length — how many past positions the app remembers and draws behind the character. 0 = no trail. 30–60 = a short comet-tail effect. 100–150 = a long history that shows the full recent path.
• Trail style — Dots (fading) renders each past position as a small circle that grows brighter and larger toward the present; the overall effect is a glowing particle cloud. Connected line draws a continuous stroke through all stored points, clearly revealing the shape of the path traveled.

Effect Recipes

Try these starting-point combinations to get distinctive looks:

Effect	Settings to try
Graceful Perlin drift	Perlin 100%, Perlin speed 0.003, Speed 50, Trail 100, Connected line
Erratic Perlin scramble	Perlin 100%, Perlin speed 0.040, Speed 80, Trail 60, Dots
Gentle random wander	Perlin 0%, Walk chaos 6°, Speed 40, Trail 80, Connected line
Frantic random bounce	Perlin 0%, Walk chaos 26°, Speed 150, Trail 30, Dots
Blended organic walk	Perlin 50%, Perlin speed 0.008, Walk chaos 9°, Speed 60, Trail 80
Rainbow comet	Perlin 70%, Speed 60, Trail 120, Dots + Cycle Hue enabled
Spinning ghost	Large symbol, Fill opacity 40–60%, Perlin 80%, Spin enabled (slow), Trail 60, Dots
Breathing path painter	Perlin 60%, Speed 50, Trail 150, Connected line + Breathe enabled

The Three Animations

Animations are enabled once a character is placed. All three work independently and stack freely on top of each other and on top of any movement setting.

• 💓 Breathe — the character's size pulses rhythmically up and down as it travels. Amount controls how many units it expands; Speed controls cycles per second.
• 🔄 Spin — the character rotates continuously around its own center while moving. Slow spin rates (5–30 °/s) read as a lazy roll; high rates (300+ °/s) blur into a wheel.
• 🌈 Cycle Hue — the fill color shifts smoothly through the full color wheel over time. The trail dots or line always match the current fill hue, so the trail becomes a rainbow as it progresses.

Learn More

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