SketchWave Pie Demo

SWPie is a SketchWaveJS composite shape object that represents a circular disk divided into n equal radial "pizza slice" sectors drawn on an SWGrid. Under the hood it owns an array of SWSector objects — one per slice — each with an equal angular size of 360 / n degrees.

Each slice gets its own fill color from a colors array (cycled if shorter than n). The default 7-slice pie uses the ROYGBIV physics spectrum: Red, Orange, Yellow, Green, Blue, Indigo, and Violet. All slices share a common center, radius, stroke weight, and border color.

Because SWPie uses composition (not inheritance), it can delegate spin and breathing to each SWSector individually while presenting a clean, unified API at the pie level.

Animations

• Spin: continuously rotates all slices together about the center using a configurable speed (degrees/second; negative = clockwise).
• Breathe Radius: oscillates the radius of all slices simultaneously using an SWSinusoid.

What you can explore in this demo

• Slices (n): drag the slider between 2 and 12 to rebuild the pie with a different number of equal slices. Colors cycle through ROYGBIV automatically.
• Radius & border thickness: resize the pie and change how prominent the radial dividers are.
• Start Angle: rotate the orientation of the first slice edge (independent of spin animation).
• Drag the center on the canvas, or use Snap Center to align it to a grid intersection.
• Background trails: lower the background alpha to see ghost trails during spin or breathing.
• Try Spin + Breathe Radius together to observe how both animations compose independently on the same object.

Quick controls

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

SketchWaveJS classes used by this demo

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