SWCharacter Mover

SWCharacter Mover places a typographic symbol on an animated canvas and sends it wandering continuously across the grid. Click anywhere on the canvas to place your character, then use the right-panel controls to customize its appearance, movement behavior, and animations.

How to Use

1. Click the canvas to snap a character to the nearest grid cell. The character immediately begins moving. Click again anywhere to re-place it at a new starting position.
2. Adjust the symbol by typing a single character into the Symbol box, then choosing a font and dragging the Size slider. Changes apply immediately.
3. Open Fill Color to pick a hue and set opacity.
4. Open Stroke / Border and check Add stroke / border to reveal color and weight controls for an outline around the symbol.
5. Use the Movement card to control how the character wanders — see the Movement section below.
6. Place a character, then expand any animation section to layer visual effects on top of the movement.
7. Use Clear to remove the character, or Save Image to download a PNG of the canvas. Press G to toggle the grid.

Movement

The character moves by updating a heading angle each frame and stepping forward by Speed user units per second. When it crosses a grid edge it wraps to the opposite side (pac-man style).

• Perlin influence — at 0% the character uses a pure random walk: the heading is nudged by a small random amount each frame, producing busy, unpredictable wandering. At 100% the heading is derived entirely from p5.js noise(), producing smooth, flowing organic curves. Values in between blend the two behaviors.
• Speed — distance traveled per second in user units. 0 = stationary; 200 = racing across the grid.
• Trail length — the number of past positions remembered and drawn as fading dots behind the character. 0 = no trail. The trail dots match the character's current fill hue.

The Three Animations

All three animations work independently of each other and of movement — you can run any combination.

• 💓 Breathe — the character's size pulses up and down as it travels.
• 🔄 Spin — the character rotates continuously around its center anchor while moving.
• 🌈 Cycle Hue — the fill color shifts smoothly through the color wheel; the trail dots follow the current hue.

Learn More

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