SWSpade Reference

♠ Composite Class Design

SWSpade is a composite class. It draws the traditional playing-card spade ♠ using two parts:

• Body — the classic inverted heart, rendered as a closed polygon from a 4-harmonic parametric curve sampled at 200 points. The y-axis is negated to flip the standard heart upward into the spade orientation.
• Stem — SWSpire with halfShape = true and rotationDeg = 180, producing a downward-pointing cusp arch whose base attaches at the lowest point of the body.

The attachment point of the stem is computed each frame by _getBodyMinLy(), which samples the body curve to find the minimum local y (the lowest point of the two lobes). This keeps the stem correctly positioned even as the scale parameter changes during pulse animation.

Draw order: stem is drawn first (behind), then the body on top. The body fill naturally covers the arch base, hiding the seam.

Mathematical Foundation

Body: Inverted Parametric Heart

The body uses the classic 4-harmonic heart parametric equations, with the y component negated to produce the spade orientation (sharp tip pointing up, lobes curving down):

At t = π/2, x = scale · a and y = 0, placing the widest point of the right lobe at the horizontal midline. The sharp upward cusp occurs at t = π/2 (or equivalently t = −π/2 for the top tip) due to the sin³ term collapsing to zero while the y harmonic sum reaches its minimum (most negative).

Coefficient Interpretation

Stem: Half SWSpire Arch

The stem is a half-arch traced from t = 0 to t = π:

With rotationDeg = 180 + total rotation, the arch base lies horizontally at y = 0 in local space and curves down to a cusp at (0, −radiusY). endShape(CLOSE) closes the arch with a flat base.

Stem Placement (Attachment Math)

Let minLy = _getBodyMinLy() (the minimum local-y of the body, a negative number ≈ −5.3 at defaults). After applying total rotation θ:

Because minLy is negative, −minLy is positive, so the formula places the stem below the body at the correct local-y position. The rotation matrix keeps the stem attached during spin.

Constructor

new SWSpade(center, a, b, c, d, e,
           fillColor, strokeColor, thickness, scale,
           stemLength, stemWidth, stemPower, rotationDeg, stemOffset)

Properties

Methods

Drawing

Animation

Setters

Reset & Utility

Code Examples

Basic Setup

let spade;
let grid;

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

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

    const center    = new SWPoint(0, 0);
    const fillCol    = SWColor.fromHex('#22225a', 100, 'fill');
    const strokeCol  = SWColor.fromHex('#1a1a40', 100, 'stroke');

    spade = new SWSpade(center, 16, 13, -5, -2, -1,
                         fillCol, strokeCol, 2, 0.5,
                         2.0, 0.6, 5, 0);
}

function draw() {
    background(240, 10, 95);
    grid.draw();
    spade.drawOnGrid(grid);
}

Spin Animation

let prevT = 0;

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

    background(240, 10, 95);
    grid.draw();
    spade.rotate(45 * deltaT);  // 45 °/sec CCW
    spade.drawOnGrid(grid);
}

Pulse Animation

let pulseBase = 0.5;   // base scale

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

    background(240, 10, 95);
    grid.draw();

    // Oscillate scale ±0.08 at 0.5 Hz — stem follows automatically
    const s = pulseBase + 0.08 * Math.sin(2 * Math.PI * 0.5 * t);
    spade.setScale(Math.max(0.05, s));

    spade.drawOnGrid(grid);
}

Copy & Reset

// Deep copy
const spade2 = SWSpade.copy(spade);
spade2.center.x += 5;   // moved independently

// Restore factory values
spade.reset();

// Inspect
console.log(spade.toString());
// SWSpade(scale=0.50, a=16, b=13, c=-5, d=-2, e=-1, stemLength=2.0, ...)

Source Code

Loading source...