SketchWave Heart Demo

SWHeart is a SketchWaveJS shape object representing a heart defined by the parametric equations:

x(t) = a · sin³(t)
y(t) = b·cos(t) + c·cos(2t) + d·cos(3t) + e·cos(4t)

for t ∈ [0, 2π], scaled by scale and offset by center. The default coefficients (a=16, b=13, c=−5, d=−2, e=−1) produce a classic heart shape: two smooth lobes at the top and a sharp tip at the bottom.

📐 New to parametric equations? Take the guided tour →

Coefficient sliders

• a — controls the width of the heart via the sin³(t) term. Larger a = wider heart.
• b — the primary cosine coefficient; shapes the height of the top lobes.
• c — the second cosine coefficient; deepens the cleft between the two lobes when negative.
• d — the third cosine coefficient; sharpens or rounds the bottom tip when negative.
• e — the fourth cosine coefficient; adds fine-detail sculpting.
• Scale — maps parametric coordinates to grid units. Default 0.5 fits the heart within the [−10, 10] grid.
• Rotation — sets the static base orientation of the heart (0–360°, CCW). Spin accumulates on top of this base angle each frame. Factory Reset returns it to 0°.

Animations

• Spin: continuously rotates the heart about its center at a configurable speed (degrees/second; negative = clockwise rotation). Open the Spin accordion to control the rate.
• Beat: sinusoidally oscillates the scale above and below its current slider value, making the heart grow and shrink like a heartbeat. Default speed 1.2 Hz ≈ 72 BPM. Open the Beat accordion to set speed (Hz) and depth (Δscale). Beat and Spin can run simultaneously.
• Motion trails: lower the background opacity (in the Background accordion) to leave ghost trails as the heart animates.

Interactive features

• Drag the center dot on the canvas to reposition the entire heart.
• 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), b (beat toggle), r (factory reset), q (stop all animations).

SketchWaveJS classes used by this demo

• SWHeart Reference
• SWGrid Reference
• SWPoint Reference
• SWColor Reference