SketchWave Club Demo

Control Panel for SWClub Customization — Stage

...loading...

Control Panel

Club Parameters ♣

(Drag the center dot to reposition the figure)

Scale: 1.00×

Small (0.25×) Large (2.0×)

Body Radius: 3.0

Tiny Large

Stem Length: 2.5

Short Long

Stem Width: 0.80

Narrow Wide

Stem Power (cusp sharpness): 5

Round (1) Sharp (9)

Rotation (°): 0

0° 360°

Stroke Thickness: 2

Stroke Color & Opacity

Opacity: 100

Fill Color & Opacity

Opacity: 100

Center Dot

Show center dot

Center = (0.0, 0.0)

Opacity (Alpha): 100

Transparent — enables motion trails

Speed (°/sec, −720 to 720): 45

CW (−) CCW (+)

Oscillates the body radius sinusoidally. The body and stem stay in sync. Try combining Breathe + Spin with low Background opacity for trailing effects!

Speed (Hz): 0.5

Slow (0.1 Hz) Fast (2.0 Hz)

Amount (grid units): 1.0

Subtle Dramatic

How SWClub Is Built

SWClub is a composite class that assembles two existing SketchWaveJS shapes:

Body — SWClover with numPetals = 3 and a 270° rotation offset so the top lobe always points up. This epicycloid naturally produces the club♣ silhouette.
Stem — SWSpire with halfShape = true and rotationDeg = 0, producing a downward-pointing cusp arch below the body.

The Body: Epicycloid with numPetals = 3

n = 4,   a = bodyRadius / 3

x(t) = a · (4·cos(t) − cos(4t))
y(t) = a · (4·sin(t) − sin(4t))

t ∈ [0, 2π)

With the 270° rotation offset, the three cusp tips appear at:
• Top: (0, +bodyRadius)
• Lower-left: (−bodyRadius·√3/2, −bodyRadius/2)
• Lower-right: (+bodyRadius·√3/2, −bodyRadius/2)

The Stem: Half SWSpire Arch

The stem centre is placed at local point (0, −bodyRadius/2) — the midpoint between the two lower cusps. With halfShape = true and rotationDeg = 0, the SWSpire draws a half-arch whose cusp points downward, completing the club handle below the body.

Rotation

When SWClub rotates, _syncInternals() updates both the body orientation and the stem centre position using a 2D rotation matrix, keeping the whole figure rigidly connected.

The Breathe Animation

Breathe oscillates bodyRadius sinusoidally. The stem attachment point recomputes each frame, so the stem stays locked to the body as it expands and contracts.

Why This Design? SWClover + SWSpire

An earlier design for SWClub used three overlapping SWDisk circles arranged at the vertices of an equilateral triangle, plus a trapezoid stem. While that approach works, the parametric design offers several advantages:

Single continuous curve — SWClover draws the entire three-lobe body as one parametric path, avoiding seams and overlap artefacts from three separate circles.
Uniform scaling — changing bodyRadius scales the whole body naturally. The disk design requires recomputing each disk centre and adjusting the trapezoid every frame.
Consistent aesthetic — SWClub now mirrors the structure of SWSpade (parametric body + SWSpire stem), making the two suits part of a unified design language.
Rotation & animation — rotating a single parametric curve is one transform; rotating three disks and a trapezoid requires repositioning five objects independently.

The original three-disk design is preserved as swClubDemo0 for comparison.

Using the Controls

Scale — uniform multiplier applied to body radius, stem length, and stem width together. Resize the whole club at once while preserving the proportions set by the individual sliders.
Body Radius — overall size of the three-lobe body (at scale 1×).
Stem Length — depth of the pointed cusp below the body.
Stem Width — half-width of the arch base (should be ≤ bodyRadius/2 for a clean join).
Stem Power — exponent controlling cusp sharpness. 1 = smooth arch; 9 = very sharp spike.
Rotation — static base rotation in degrees (CCW positive).
Breathe (accordion) — oscillates bodyRadius. Stem adapts automatically.
Spin (accordion) — continuous rotation. Combine with Breathe and low background opacity for patterns.
Drag the center dot to reposition the figure.
Click the canvas to toggle the grid on/off.

Keyboard Shortcuts

s — Toggle spin
b — Toggle breathe
r — Factory reset
q — Stop all animations

📐 New to parametric equations? Take the guided tour →