❤ SWCardioid Reference

Overview

The SWCardioid class draws a polar cardioid as a closed polygon. The curve is defined in polar coordinates as:

r = a · (1 + cos(θ))    (cosine form, default; cusp at left, opens right)
r = a · (1 + sin(θ))    (sine form; 90° CCW rotation; cusp at bottom, opens upward)

Non-negative Radius

Because 1 + cos(θ) and 1 + sin(θ) are always ≥ 0, the cardioid never produces a negative r value. This makes SWCardioid simpler than SWRose — no negative-radius handling is needed. The formula x = r·cos(θ), y = r·sin(θ) works cleanly throughout.

Cosine vs Sine Form

The cosine form opens to the right (in standard math-space orientation). The sine form is a pure 90° CCW rotation of the cosine form — unlike the rose curve where the rotation was 90/n degrees, for the cardioid it is always exactly 90°. Both forms produce identical shapes; only the orientation differs.

Limaçon Family

The cardioid is the special case of the limaçon r = b + a·cos(θ) where b = a. When b > a you get a convex limaçon; when b < a you get an inner loop. The cardioid (b = a) is the boundary between these two regimes and produces exactly one cusp at the pole.

Rotation

SWCardioid supports two layers of rotation, both applied about the center point:

• rotationDeg — Static base rotation set by setRotation(). Persists across frames; survives reset().
• rotation — Accumulated rotation incremented by rotate(). Starts at 0; cleared by reset().

Effective rotation = rotationDeg + rotation. All angles are CCW positive (user-space convention).

Key Capabilities

• Polar Cardioid Curves: Both r=a·(1+cosθ) and r=a·(1+sinθ) with a single boolean toggle
• Spin Animation: Rotate continuously about the center using rotate()
• Pulse Animation: Oscillate the size parameter (a) sinusoidally using setA() from the sketch layer — like a beating heart
• Fill & Stroke Colors: Independent color pickers and alpha channels
• Draggable Center: Move the entire cardioid by repositioning the center SWPoint (the pole)
• Dual Coordinate Systems: draw() (screen pixels) or drawOnGrid() (grid user coordinates)

Constructor

// Default cardioid, crimson stroke, semi-transparent fill
const stroke = SWColor.fromHex('#880044', 100, 'cardStroke');
const fill   = SWColor.fromHex('#cc2266',  55, 'cardFill');
let c = new SWCardioid(new SWPoint(0, 0), 7, stroke, fill, 3);

// Cardioid with sine form (opens upward)
let cu = new SWCardioid(new SWPoint(0, 0), 6, stroke, fill, 3, false);

// Cardioid pre-rotated 45°
let cr = new SWCardioid(new SWPoint(0, 0), 8, stroke, fill, 2, true, 45);

// Stroke only (no fill)
const dark = new SWColor(0, 0, 20, 100, "dark");
let co = new SWCardioid(new SWPoint(0, 0), 5, dark);

Properties

Methods

Drawing Methods

function draw() {
    background(220);
    cardioid.draw();
}

function draw() {
    background(220);
    grid.draw();
    cardioid.drawOnGrid(grid);
    grid.updateScreenBounds();
}

Rotation Animation

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

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

    background(240);
    grid.draw();
    cardioid.rotate(SPIN_SPEED * deltaT);   // spin BEFORE drawing
    cardioid.drawOnGrid(grid);
    grid.updateScreenBounds();
}

Pulse Animation

const PULSE_SPEED = 0.8; // Hz — approximate heartbeat rhythm
const PULSE_DEPTH = 2.0; // Δa (grid units)
let baseA = 7;

function draw() {
    const t       = millis() / 1000;
    const pulsedA = baseA + PULSE_DEPTH * sin(TWO_PI * PULSE_SPEED * t);
    cardioid.setA(max(0.1, pulsedA));
    cardioid.drawOnGrid(grid);
}

Setter Methods

Reset & Utility Methods

Code Examples

Minimal sketch (cardioid on a grid)

let grid, cardioid;

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 stroke = SWColor.fromHex('#880044', 100, 's');
    const fill   = SWColor.fromHex('#cc2266',  55, 'f');
    cardioid = new SWCardioid(new SWPoint(0, 0), 7, stroke, fill, 3);
}

function draw() {
    background(240);
    grid.draw();
    cardioid.drawOnGrid(grid);
    grid.updateScreenBounds();
}

Spinning cardioid

let prevT = 0;
const SPIN_SPEED = 60; // degrees per second

function setup() { /* ... create grid and cardioid ... */ }

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

    background(240);
    grid.draw();
    cardioid.rotate(SPIN_SPEED * deltaT);   // spin BEFORE drawing
    cardioid.drawOnGrid(grid);
    grid.updateScreenBounds();
}

Pulsing heartbeat

const PULSE_SPEED = 0.8; // Hz (~heartbeat rhythm)
const PULSE_DEPTH = 2.0; // Δa
let baseA = 7;

function draw() {
    const t = millis() / 1000;
    const pulsedA = baseA + PULSE_DEPTH * sin(TWO_PI * PULSE_SPEED * t);
    cardioid.setA(max(0.1, pulsedA));
    cardioid.drawOnGrid(grid);
}

Using a color picker with SWColor.fromHex()

const picker = document.getElementById('strokePicker');
const alpha  = document.getElementById('alphaSlider');

picker.addEventListener('input', () => {
    const col = SWColor.fromHex(picker.value, Number(alpha.value), 'cardStroke');
    cardioid.setStrokeColor(col);
});

alpha.addEventListener('input', () => {
    const col = SWColor.fromHex(picker.value, Number(alpha.value), 'cardStroke');
    cardioid.setStrokeColor(col);
});

Required script tags (in dependency order)

<script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.js"></script>

<!-- SketchWaveJS classes in dependency order -->
<script src="../shapeClasses/swColor.js"></script>
<script src="../shapeClasses/swPoint.js"></script>
<script src="../shapeClasses/swGrid.js"></script>
<script src="../shapeClasses/swCardioid.js"></script>

<!-- Your sketch -->
<script src="../sketches/yourSketch.js"></script>

Design Notes

• r is always non-negative: Unlike the polar rose, SWCardioid never produces a negative r value because 1 + cos(θ) is always ≥ 0. This simplifies the implementation and avoids the "opposite-petal" behavior of the rose.
• Exact 90° rotation between forms: For the cardioid, switching from cosine to sine form always rotates the entire figure exactly 90° CCW — there is no n-dependent factor as in the rose curve.
• Cusp is always at the center point (pole): The cusp occurs at r = 0, which corresponds to the center SWPoint. Dragging the center moves the cusp with it.
• SAMPLE_COUNT = 360 gives a smooth curve: The cardioid has no sharp corners (except the single cusp at θ = π). 360 samples produces a smooth result at normal canvas sizes.
• reset() does not move the center: Consistent with all SketchWaveJS polar classes; dragging and repositioning the shape is preserved across resets.
• Area = (3/2)πa²: For example, a cardioid with a = 7 encloses an area of (3/2)π·49 ≈ 230.9 square grid units.
• The cardioid is the pedal curve of a circle: Geometrically, a cardioid is the path traced by a point on a circle rolling around another circle of equal radius. This is the "epitrochoid" interpretation.

Source Code

The complete SWCardioid class implementation:

// Loading source code...