SketchWave Circle Segment Demo

SWCircleSegment is a SketchWaveJS shape object that represents a circular segment — the region between a chord and its subtended arc — drawn on an SWGrid. Unlike a sector (pizza slice), a segment does not connect to the center of the generating circle. Instead, the two arc endpoints are joined directly by a straight chord, using p5's native CHORD arc mode.

A segment is defined by a center (an SWPoint at the center of the generating circle), a radius, a central angle theta (in degrees), and a startAngle that fixes where the arc begins (CCW from the +x axis). Both fill and stroke styling use SWColor.

Geometric properties computed automatically: chordLength, sagitta (height of the segment), arcLength, and area (true segment area, not sector area).

Animations

• Spin: continuously increments the rotation about the center using a configurable speed (degrees/second; negative = clockwise).
• Breathe Radius: oscillates the radius using an SWSinusoid — the segment grows and shrinks, with the chord rising and falling.
• Breathe Theta (θ): oscillates the central angle using an SWSinusoid — the segment sweeps open and closed.
• Hue Cycling: oscillates the fill color hue using an SWSinusoid.
• All four animations can run simultaneously and independently.

What you can explore in this demo

• Segment styling: change fill color + opacity, border thickness, radius, theta, and start angle.
• Segment geometry: drag the center point on the canvas, or use Snap Center to align it to a grid intersection.
• Background trails: lower the background alpha to see ghost trails.
• Geometric Properties: open the Geometric Properties accordion panel to watch arc length, chord length, and sagitta update live as you change radius, theta, or run breathing animations.
• Notice how thin theta values produce slivers, while values near 360° nearly close into a full circle — with a tiny gap where the chord remains.

Quick controls

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

SketchWaveJS classes used by this demo

• SWCircleSegment Reference
• SWGrid Reference
• SWPoint Reference
• SWColor Reference
• SWSinusoid Reference