SketchWave Arrow Demo 1

SWArrow is a SketchWaveJS class that represents a directed arrow between two SWPoint positions. The shaft is a styled line segment; the arrowhead is a V formed by two barb lines extending backward from the tip. All animation methods mirror the SWLine API for ecosystem consistency.

Arrow Anatomy

• ptA (tail) — blunt end of the arrow; shown as an orange dot when Tail Pt is on — drag it to move the arrow
• ptB (tip) — arrowhead end
• Midpoint — center of the shaft; shown as a colored dot when Midpoint is on — drag it to move the arrow
• Tip Angle — half-angle between the shaft and each barb (narrower = pointer, wider = broader head)
• Tip Factor — barb length as a fraction of the total arrow length (0.3 = barbs are 30% of shaft length)

Control Panel Features

• Arrow Shape: Adjust shaft thickness (1–20 px), length (1–18 units), start angle (−180° to +180°, CCW positive), tip angle (5–70°), tip factor (0.05–0.60), arrow color, and background opacity
• Visibility: Toggle arrowhead barbs (Tip), grid, tail endpoint (Tail Pt), and midpoint on/off independently. When Tail Pt or Midpoint is shown, you can drag that dot to reposition the arrow on the canvas.
• Breathing: Toggle length oscillation, adjust period (0.5–10 sec), min and max length
• Spinning: Toggle rotation, adjust rate (−360 to +360 deg/sec), choose pivot: Midpoint or Tail (A)

Keyboard Shortcuts

• B — Toggle (b)reathing
• S — Toggle (s)pinning
• Q — (Q)uit all animations (freeze)
• R — (R)eset to factory settings

Tips for Exploration

• Set tip factor to 0.50+ and tip angle to 60° for a stubby, broad arrowhead
• Use Start Angle to set the arrow's initial orientation; 0° = right, 90° = up, −90° = down, ±180° = left
• Drag the Tail Pt or Midpoint dot to reposition the arrow — even while it is spinning or breathing
• Enable both breathing and spinning simultaneously for complex motion patterns
• Switch spin pivot from Midpoint to Tail while spinning to see the clock-hand effect
• Lower background opacity (10–30%) while spinning to create trailing-arc effects
• Negative rotation rates spin clockwise; positive rates spin counterclockwise