SketchWave Line Demo 3

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 advanced animation methods including breatheAbout(), rotateAbout(), and transformAbout() for endpoint-centric transformations.

About This Demo: Unit Circle & Sine Wave Visualization

This interactive demo visualizes the connection between circular motion and sinusoidal waves. It features:

• lineCR: A radius line from center point C to rotating endpoint R on a unit circle
• ptP (pink): A tracking point on the y-axis that mirrors ptR's vertical position
• Sine Wave Visualization: Spawned points flow horizontally, creating a visual sine wave pattern from ptP's oscillating height
• Dynamic Circle: The unit circle radius breathes along with lineCR's length

Control Panel Features

• 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-5), and max length (1-5). Uses breatheAbout() to keep ptC fixed while ptR oscillates
• Rotation Controls: Toggle rotation on/off, adjust rotation rate (-180 to +180 deg/sec). Uses rotateAbout(ptC) to spin the radius line around the circle's center
• Sine Wave Visualization: Adjust spawn frequency (1-30 frames, lower = denser wave) and velocity (0.01-0.5, controls wave flow speed)

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

• breatheAbout(): Keeps ptC fixed while ptR oscillates toward/away from center, creating a "bungee rope" effect with the circle breathing in sync
• rotateAbout(): Rotates lineCR around ptC (like a clock hand) with persistent state—pause/resume from the same angle
• transformAbout(): When both breathing and rotation are active, this method combines effects smoothly with independent time parameters for each
• Sine Wave Spawning: Points are created at ptP's position and flow right, visualizing the sine wave pattern generated by circular motion
• Point Trails: Enable trails on ptR (1-50 points) to trace the circular path and see the motion history
• Educational Value: Demonstrates how circular motion (unit circle) produces sinusoidal waves—fundamental to trigonometry and periodic functions

Tips for Exploration

• Start with just rotation (90 deg/sec) to see the basic unit circle motion and sine wave formation
• Add breathing to see how the circle's radius affects the wave amplitude
• Adjust spawn frequency (lower values = denser wave) to see more detail in the sine pattern
• Increase spawn velocity to speed up the wave flow across the canvas
• Enable ptR trails with low background opacity (10-30%) to create ghosting effects showing the circular path
• Try negative rotation rates to reverse the direction and observe the wave pattern mirror
• Use keyboard shortcuts (b, s, q, r) for quick animation control during demonstrations

Learn More

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