♣ SWClub Reference

♣ Club Mathematics

Three-Circle Construction

SWClub draws the playing-card club symbol (♣) by compositing three overlapping circles (the “lobes”) arranged at the vertices of an equilateral triangle, plus a filled trapezoid stem at the bottom. This is a purely geometric construction — no parametric curves are used.

Lobe Center Positions (Local Space)

The three centers form an equilateral triangle. Each vertex is at distance spread from the origin, and they are separated by 120° in angle.

Overlap Geometry

Two adjacent lobe centers are separated by distance: d = spread × √3. The circles overlap when d < 2 × radius, i.e., when:

With defaults (radius=2.5, spread=2.0): adjacent centers are ≈ 3.46 apart, while the sum of radii = 5.0, giving ≈ 1.54 units of overlap — enough to create the traditional solid silhouette.

Vertical Extent (Local Space)

Stem Geometry

The stem is a filled trapezoid with:

• Attachment y = −spread/2 − radius (bottom of lower lobes) — analytically computed, no iteration needed
• Neck width = stemWidth × 0.22 (narrow top)
• Foot width = stemWidth (wider base)
• Height = stemLength (extends downward)

Rotation

All three lobe centers + the stem are rotated together around center using a 2D rotation matrix. Both rotationDeg (static base) and rotation (accumulated spin) contribute to the total effective rotation.

Constructor

new SWClub(center, radius, spread, stemLength, stemWidth, fillColor, strokeColor, thickness, rotationDeg)

// Minimal construction (all defaults)
const center = new SWPoint(0, 0, undefined, 8,
    new SWColor(120, 60, 25, 100));
const fill   = SWColor.fromHex('#2a5a2a', 100, 'fill');
const stroke = SWColor.fromHex('#1a3a1a', 100, 'stroke');
const club   = new SWClub(center, 2.5, 2.0, 2.0, 3.5,
                            fill, stroke, 2, 0);
club.drawOnGrid(grid);

Properties

Live Properties

Static Constant

Methods

Drawing

Animation

Setters

Reset & Utility

Code Examples

1. Basic Setup (p5.js global mode)

let grid, club;

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, undefined, 8,
        new SWColor(120, 60, 25, 100));
    const fill   = SWColor.fromHex('#2a5a2a', 100, 'fill');
    const stroke = SWColor.fromHex('#1a3a1a', 100, 'stroke');
    club = new SWClub(center, 2.5, 2.0, 2.0, 3.5, fill, stroke, 2, 0);
}

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

2. Spin Animation

let prevT = 0;
const SPIN_SPEED = 45; // degrees per second (CCW)

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

    background(0, 0, 93);
    grid.draw();
    club.rotate(SPIN_SPEED * deltaT);
    club.drawOnGrid(grid);
    grid.updateScreenBounds();
}

3. Breathe Animation (Radius Oscillation)

const BASE_RADIUS     = 2.5;
const BREATHE_SPEED   = 0.5;   // Hz
const BREATHE_AMOUNT  = 0.5;   // grid units of radius oscillation

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

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

    // When radius < spread/√3, circles separate — watch them re-merge!
    const r = BASE_RADIUS + BREATHE_AMOUNT * Math.sin(2 * Math.PI * BREATHE_SPEED * t);
    club.setRadius(Math.max(0.1, r));

    club.drawOnGrid(grid);
    grid.updateScreenBounds();
}

4. Tighten Overlap for Filled Silhouette

// Tighter spread — circles heavily overlap → solid club silhouette
club.setSpread(1.5);    // spread < radius × 1.155 = 2.89
club.setRadius(2.5);

// Wider spread — circles just touching → clover-like shape
club.setSpread(2.9);    // near the critical overlap boundary

5. Copy and Reset

// Deep copy
const copy = SWClub.copy(club);

// Reset to constructor values
club.reset();
// center preserved; radius, spread, rotation are restored

Source Code

// Source will be loaded here — see shapeClasses/swClub.js