♠ SWSpade Reference

♠ Spade Mathematics

The Inverted Heart Formula

SWSpade draws the classic playing-card spade (♠) using the same parametric formula as SWHeart, but with the y-component negated. This flips the curve vertically: the sharp point moves to the top and the two rounded lobes fall to the bottom, giving the spade silhouette.

Parametric Equations (Local Space)

The y-negation (compared to the heart) is the key transformation that creates the spade shape.

Default Coefficients & Geometry

With the default parameters (a=16, b=13, c=−5, d=−2, e=−1, scale=0.5):

Y-Negation: Heart → Spade

The original heart formula (SWHeart) places the rounded lobes at the top and the sharp point at the bottom. Negating y (multiplying the entire y-formula by −1) produces a vertical mirror image: now the sharp tip is at top and lobes are at bottom — the spade.

Stem Attachment

The stem is a filled trapezoid. Its attachment y-coordinate is found by iterating all 200 body sample points in local space and taking the minimum y (≈ −5.3 for defaults). This ensures the stem always connects flush to the bottom of the body regardless of parameter changes.

• Neck width = stemWidth × 0.22
• Foot width = stemWidth (wider base)
• Height = stemLength (extends downward from attachment point)

Constructor

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

// Minimal construction (all defaults)
const center = new SWPoint(0, 0, undefined, 8,
    new SWColor(240, 80, 80, 100));
const fill   = SWColor.fromHex('#22225a', 100, 'fill');
const stroke = SWColor.fromHex('#1a1a40', 100, 'stroke');
const spade  = new SWSpade(center, 16, 13, -5, -2, -1,
                             fill, stroke, 2, 0.5, 2.0, 5.5, 0);
spade.drawOnGrid(grid);

Properties

Live Properties

Static Property

Methods

Drawing

Animation

Setters

Reset & Utility

Code Examples

1. Basic Setup (p5.js global mode)

let grid, spade;

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, undefined, 8,
        new SWColor(240, 80, 80, 100));
    const fill   = SWColor.fromHex('#22225a', 100, 'fill');
    const stroke = SWColor.fromHex('#1a1a40', 100, 'stroke');
    spade = new SWSpade(center, 16, 13, -5, -2, -1,
                         fill, stroke, 2, 0.5, 2.0, 5.5, 0);
}

function draw() {
    background(0, 0, 93);
    grid.draw();
    spade.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();
    spade.rotate(SPIN_SPEED * deltaT);
    spade.drawOnGrid(grid);
    grid.updateScreenBounds();
}

3. Pulse Animation (Scale Oscillation)

const BASE_SCALE    = 0.5;
const PULSE_SPEED   = 0.5;   // Hz
const PULSE_AMOUNT  = 0.08;  // scale units

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

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

    const s = BASE_SCALE + PULSE_AMOUNT * Math.sin(2 * Math.PI * PULSE_SPEED * t);
    spade.setScale(Math.max(0.05, s));

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

4. Ghostly Trail Effect

// In setup(): create a semi-transparent background color
// bgColor = new SWColor(0, 0, 93, 15, 'bg').col;  // 15% opacity background

// In draw():
background(bgColor);   // semi-transparent clear → old frames fade slowly
spade.rotate(2);        // fast spin creates a ghostly star trail
spade.drawOnGrid(grid);

Source Code

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