SketchWave Line Demo 2

SWLine is a SketchWaveJS class that represents a line segment between two SWPoint objects. An SWLine has endpoints (ptA and ptB), a calculated midpoint, length, slope, thickness, and stroke color. This demo showcases animated breathing (length oscillation) and rotation effects that can work independently or simultaneously.

About This Demo

This interactive demo displays an animated line segment with two endpoints (A and B) and a midpoint (M). You can control breathing (length oscillation), rotation (spinning), appearance, and visual effects through an extensive control panel with accordion sections for organized controls.

Control Panel Features

• Active Points Table: View real-time coordinates and change colors for endpoints A, B, and midpoint M (midpoint color controls both midpoint and segment)
• Visibility Toggles: Show/hide endpoints, midpoint, segment, and grid
• Size & Background FX: Control endpoint size (4-30), segment thickness (2-20), background opacity (0-100%), and point trails (0-50)
• Breathing Controls: Toggle breathing on/off, adjust period (0.5-10s), min length (1-20), and max length (1-30)
• Rotation Controls: Toggle rotation on/off, adjust rotation rate (-180 to +180 deg/sec for bidirectional spinning)

Keyboard Shortcuts

• B - Toggle (b)reathing animation
• S - Toggle (s)pin/rotation animation
• Q - (Q)uit all actions - freeze in current position
• R - (R)eset to factory settings - restore original position and all default values

Advanced Animation Features

• Breathing: Uses SWSinusoid to oscillate line length while keeping midpoint fixed
• Rotation: Spins line about its midpoint with persistent state (pause/resume from same position)
• Combined Mode: When both breathing and rotation are active, the transform() method combines effects smoothly
• Point Trails: Enable trails (1-50 points) to visualize endpoint and midpoint motion paths
• Bidirectional Rotation: Positive values rotate counterclockwise, negative values rotate clockwise

Tips for Exploration

• Start breathing with default values, then adjust min/max length to see the oscillation range change
• Enable rotation and use negative rotation rates to reverse spin direction
• Turn on both breathing and rotation simultaneously for complex motion patterns
• Enable point trails with low background opacity (10-30%) to create ghosting effects and visualize motion
• Use keyboard shortcuts (b, s, q, r) for quick animation control during demonstrations

Learn More

For complete documentation including all methods (breathe(), rotateAboutMidPoint(), transform()), properties, and code examples, see the Full SWLine Reference Guide.