SketchWave Cardioid Demo

SWCardioid is a SketchWaveJS shape object representing a polar cardioid — a heart-shaped mathematical curve defined by r = a·(1 + cos(θ)) or r = a·(1 + sin(θ)).

The parameter a controls the overall size — the cardioid extends from a radius of 0 (at the cusp) to a maximum radius of 2a. Unlike the polar rose, the cardioid has no petal-count parameter: it always produces exactly one closed, heart-shaped loop.

The cusp (the inward point) is always located at the pole (the center point). In the cosine form the cardioid opens to the right; in the sine form it opens upward (a 90° CCW rotation).

Controls

• Size (a): controls the overall scale. Max radius = 2a.
• Stroke Thickness: the width of the outline in pixels.
• Stroke Color / Fill Color: click the swatch to open a color picker; the slider controls opacity (0 = invisible, 100 = fully opaque).
• Equation Form: toggle between the cosine form (opens right) and the sine form (rotated 90° CCW, opens upward).

Animations

• Spin: continuously rotates the cardioid about its center (pole). Open the Spin accordion to set speed (°/second). Negative values spin clockwise.
• Pulse: sinusoidally oscillates the size parameter (a), making the cardioid expand and contract like a beating heart. Open the Pulse accordion to set speed (Hz) and depth (Δa). Try 0.8 Hz with depth 2 for a realistic heartbeat rhythm.
• Motion trails: lower the background opacity (in the Background accordion) to create ghostly trails as the cardioid animates.

Interactive features

• Drag the center dot (the pole) on the canvas to reposition the entire cardioid.
• Snap Center rounds the center coordinates to the nearest grid intersection.
• Click anywhere on the canvas (not on the center dot) to hide or show the background grid.
• Keyboard: s (spin toggle), p (pulse toggle), r (factory reset), q (stop all animations).

SketchWaveJS classes used by this demo

• SWCardioid Reference
• SWGrid Reference
• SWPoint Reference
• SWColor Reference