SketchWave Sector Demo

SWSector is a SketchWaveJS shape object that represents a sector — the "pizza-slice" region of a circle — drawn on an SWGrid. A sector has a vertex (an SWPoint at its tip), a radius, an angular size theta (in degrees), and a startAngle that fixes where the first edge sits (CCW from the +x axis). Both fill and stroke styling use SWColor.

By default the first edge lies along the positive x-axis and the sector opens counterclockwise into the first quadrant. Use startAngle to pre-rotate that initial orientation; use rotate() (or the Spin animation) to keep it moving.

Animations

• Spin: continuously increments the rotation about the vertex using a configurable speed (degrees/second; negative = clockwise).
• Breathe Radius: oscillates the radius using an SWSinusoid — the slice grows and shrinks.
• Breathe Theta (θ): oscillates the angular size using an SWSinusoid — the slice opens and closes like a mouth.
• 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

• Sector styling: change fill color + opacity, border thickness, radius, theta, and start angle.
• Sector geometry: drag the vertex on the canvas, or use Snap Vertex to align it to a grid intersection.
• Background trails: lower the background alpha to see ghost trails.

Quick controls

• Click the canvas to hide/show the grid.
• Drag the vertex point to reposition the sector.
• 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

• SWSector Reference
• SWGrid Reference
• SWPoint Reference
• SWColor Reference
• SWSinusoid Reference