SketchWave Spiral Demo

SWSpiral is a SketchWaveJS shape object representing an Archimedean spiral defined by the polar equation r = k · θ / π in a coordinate system centered at the center point.

In this formula, k controls the spacing between spiral arms. At θ = π (one half-turn), r = k. After n full turns, the outermost radius is r = 2kn.

Controls

• Growth Coefficient (k): controls how far apart the spiral arms are. Larger k = wider spacing.
• Revolutions: how many full 360° turns the spiral makes before stopping. More turns = longer, denser spiral.
• Stroke Thickness: the width of the spiral outline in pixels.
• Stroke Color: click the color swatch to open a color picker; the adjacent slider controls opacity (0 = invisible, 100 = fully opaque).
• Fill Color: the color that fills the interior of the spiral polygon (the area between the arms and back to center). Best experienced with some transparency.
• Winding Direction: toggle the switch to flip between counter-clockwise (default) and clockwise winding.

Animations

• Spin: continuously rotates the spiral about its center at a configurable speed (degrees/second; negative = clockwise rotation). Open the Spin accordion to control the rate.
• Breathe: sinusoidally oscillates the growth coefficient (k) above and below its current slider value, making the spiral expand and contract like a slow breath. Open the Breathe accordion to set the speed (Hz) and depth (Δk). Breathe and Spin can run simultaneously.
• Motion trails: lower the background opacity (in the Background accordion) to leave ghost trails as the spiral animates.

Interactive features

• Drag the center dot on the canvas to reposition the entire spiral.
• Snap Center rounds the center coordinates to the nearest grid intersection.
• Click anywhere on the canvas (not on the center dot) to hide or show the background grid.
• Keyboard: s (spin toggle), b (breathe toggle), r (factory reset), q (stop all animations).

SketchWaveJS classes used by this demo

• SWSpiral Reference
• SWGrid Reference
• SWPoint Reference
• SWColor Reference