SketchWave Two-Toned Disk Demo

SWTwoTonedDisk is a SketchWaveJS composite shape made of two 180° half-circles sharing a common diameter. Each half consists of an SWSector (filled, no border) and an SWArc (stroke only, butt caps) that outlines its curved circumference. Sector borders are suppressed because a stroke on the shared diameter would create an unwanted dividing line between the halves.

By default the diameter lies along the x-axis (top half opens upward, bottom half opens downward). The Diameter Angle slider rotates this initial orientation. The Spin animation accumulates additional rotation on top of that static angle.

Animations

• Spin: rotates both halves together about the center (degrees/second; negative = clockwise).
• Breathe: oscillates both radii in unison using an SWSinusoid. Use the Top Radius / Bottom Radius sliders for independent static adjustments.
• Hue Cycling: sweeps the top half through a hue range. The bottom half gets the top hue plus a fixed offset (default 180° = complementary colors). Set the offset to 0 to cycle both halves to the same hue, or to any value for a fixed split.
• All three animations can run simultaneously and independently.

What you can explore in this demo

• Give each half a completely different color to create striking two-toned designs.
• Pull the two radii apart (Top Radius ≠ Bottom Radius) to make asymmetric lune shapes.
• Enable Spin + Breathe + Hue Cycling all at once for a dynamic animated disk.
• Lower the background alpha to leave colorful motion trails.

Quick controls

• Click the canvas to hide/show the grid.
• Drag the center marker to reposition the disk.
• Keyboard: s (spin), b (breathe), h (hue cycle), r (factory reset), q (stop all animations).

SketchWaveJS classes used by this demo

• SWTwoTonedDisk (new) — composed of:
• SWSector Reference
• SWArc Reference
• SWGrid Reference
• SWPoint Reference
• SWColor Reference
• SWSinusoid Reference