SWTriDisk Class Demo

This demo showcases the SWTriDisk class (shapeClasses/swTriDisk.js), which encapsulates three collinear SWDisk objects into a single composable unit. The sketch owns one triDisk variable and delegates all geometry management — offset, side-radius scaling, axis rotation, and drawing order — to the class.

The Three Disks

• centerDisk — the main subject, drawn on top.
• leftDisk — the light side; offset in the −axis direction (white by default).
• rightDisk — the shadow side; offset in the +axis direction (black by default).

Drawing order is right → left → center (back to front), so the center always occludes the side disks and the crescent illusion holds regardless of color.

The Geometry

• All three disk centers lie on a single line controlled by Axis Angle.
• The two side disks are offset from the center by Center Offset user-units, one in each direction along the axis.
• Their radius = k × center radius, where k ∈ [0, 1].
• At offset = 0, all three share the same center (fully hidden).
• At offset = center radius, side disk centers lie on the circumference of the center disk (maximum peek).

Controls

• Center Radius — size of the main (green) disk, in grid units.
• Side Disk Size Factor k — side disk radius as a fraction of center radius.
• Center Offset — how far each side disk center is displaced along the axis.
• Axis Angle — direction of the displacement line (0° = horizontal; CCW positive).
• Stroke Thickness — outline weight for all three disks.
• Disk Colors — pick fill and stroke color (linked) for each disk.
• Opacity — per-disk alpha (0 = transparent, 100 = opaque).
• Spin — calls triDisk.rotate() each frame. Negative speed = clockwise.
• Drag the center disk center point to move the entire group.
• Click the canvas (not on center) to toggle the grid.

Keyboard Shortcuts

• s — toggle spin
• r — factory reset
• q — stop spin (keep geometry)

📝 SWTriDisk Class Reference