SWClub Reference

♣ Composite Class Design

SWClub is a composite class. It does not draw directly to the canvas itself — instead it assembles and synchronises two internal SketchWaveJS shapes:

• Body — SWClover with numPetals = 3 (fixed) and a 90° CCW offset so the top lobe always points up. This 3-cusp epicycloid produces the classic playing-card club ♣ silhouette.
• Stem — SWSpire with halfShape = true and base rotationDeg = 180, creating a downward-pointing cusp arch that emerges from the two lower cusps of the body.

The user interacts only with SWClub's own API. The internal SWClover and SWSpire are implementation details and are reconstructed/synchronised on every draw call via _syncInternals().

Draw order: stem is drawn first (behind), then body on top. This ensures the arch base is naturally concealed under the body fill.

Mathematical Foundation

Body: 3-Petal Epicycloid

The body is an epicycloid with n = 4 (numPetals + 1) and scale factor a = bodyRadius / 3:

With the 90° CCW offset, the three cusp tips (at zero total rotation) land at:

• Top: (0, +bodyRadius)
• Lower-left: (−bodyRadius·√3/2, −bodyRadius/2)
• Lower-right: (+bodyRadius·√3/2, −bodyRadius/2)

Stem: Half SWSpire Arch

The SWSpire half arch is traced from t = 0 to t = π:

With rotationDeg = 180 + total rotation, the arch curves downward from the base at (±radiusX, 0) to a cusp at (0, −radiusY). endShape(CLOSE) draws the flat base between the two arch endpoints.

Stem Placement (Rotation Math)

The stem is attached at local-space point (0, −bodyRadius/2) — the midpoint between the two lower cusps. After applying the total rotation angle θ (CCW), the stem centre in world space is:

This is a standard 2D rotation of the local offset vector (0, −r/2) by angle θ.

Constructor

new SWClub(center, bodyRadius, stemLength, stemWidth, stemPower,
           fillColor, strokeColor, thickness, rotationDeg)

Properties

Methods

Drawing

Animation

Setters

Reset & Utility

Code Examples

Basic Setup

let club;
let grid;

function setup() {
    createCanvas(400, 400);
    colorMode(HSB, 360, 100, 100, 100);
    initializeSWColors();

    grid = new SWGrid({ UL: new SWPoint(-8, 8), LR: new SWPoint(8, -8) });

    const center   = new SWPoint(0, 0);
    const fillCol   = SWColor.fromHex('#2a5a2a', 100, 'fill');
    const strokeCol = SWColor.fromHex('#1a3a1a', 100, 'stroke');

    club = new SWClub(center, 3, 2.5, 0.8, 5, fillCol, strokeCol, 2, 0);
}

function draw() {
    background(0, 0, 93);
    grid.draw();
    club.drawOnGrid(grid);
}

Spin Animation

let prevT = 0;

function draw() {
    const t      = millis() / 1000;
    const deltaT = (prevT > 0) ? (t - prevT) : 0;
    prevT = t;

    background(0, 0, 93);
    grid.draw();
    club.rotate(45 * deltaT);  // 45 °/sec CCW
    club.drawOnGrid(grid);
}

Breathe Animation

let breatheBase = 3.0;   // base bodyRadius

function draw() {
    const t = millis() / 1000;

    background(0, 0, 93);
    grid.draw();

    // Oscillate bodyRadius ±1.0 at 0.5 Hz
    const r = breatheBase + 1.0 * Math.sin(2 * Math.PI * 0.5 * t);
    club.setBodyRadius(Math.max(0.5, r));

    club.drawOnGrid(grid);
}

Copy & Reset

// Deep copy
const club2 = SWClub.copy(club);
club2.center.x += 4;   // moved independently

// Restore factory values
club.reset();

// Inspect
console.log(club.toString());
// SWClub(bodyRadius=3.00, stemLength=2.50, stemWidth=0.80, stemPower=5.0, ...)

Source Code

Loading source...