1What Is a Parametric Equation?
You've graphed equations like y = 2x + 3 or y = x² plenty of times. In those, x is the boss: you pick an x-value, plug it in, and you immediately know y.
A parametric equation introduces a third variable — usually called t (short for parameter, often thought of as time). Instead of y depending on x directly, both x and y are driven by t independently:
y(t) = a different formula involving t
As t increases from a start value to an end value, x and y both change, and the point (x, y) traces a path on the graph. That path is the curve.
Imagine a bug crawling across a piece of graph paper. You're watching a clock (t = the time on the clock). At every moment, the bug has some x-position and some y-position. You could write two functions — one that tells you the bug's x at any time, and one that tells you its y. Together, those two functions are a parametric equation. Track every point the bug visited, and you get the curve it walked.
In a computer program like p5.js, t is literally a number you increase in a loop. That's exactly how SWHeart (and every other SketchWaveJS shape) is drawn: sample the equations at 200 values of t, collect 200 (x, y) points, draw a polygon through them.
2Example: A Straight Line (Familiar Territory)
Let's start with something boring on purpose — to show that parametric equations work the same as regular equations in the simplest case. Suppose:
y(t) = 2t + 1
Let t run from 0 to 4 in steps of 1. Here's what we get:
| t | x(t) = t | y(t) = 2t + 1 | Point (x, y) |
|---|---|---|---|
| 0 | 0 | 1 | (0, 1) |
| 1 | 1 | 3 | (1, 3) |
| 2 | 2 | 5 | (2, 5) |
| 3 | 3 | 7 | (3, 7) |
| 4 | 4 | 9 | (4, 9) |
No surprises — all those points lie on y = 2x + 1.
When x(t) = t, the parametric form is just another way to write
an ordinary equation. The power shows up when x(t) is something more
interesting than plain t. Keep reading…
3Example: The Unit Circle — Where It Gets Interesting
Here's the first genuinely useful parametric curve. Let t go from 0 to 2π:
y(t) = sin(t)
t runs from 0 to 2π (≈ 6.28)
Live: unit circle traced by t (yellow dot = current point)
Watch the sketch on the left. The yellow dot is the current point (x, y) for a given t. As t increases:
- cos(t) gives the x-coordinate (horizontal)
- sin(t) gives the y-coordinate (vertical)
The dot traces a perfect circle! This is the unit circle from trigonometry — the parametric equations are literally the definitions of cosine and sine.
| t (radians) | x = cos(t) | y = sin(t) | Position |
|---|---|---|---|
| 0 | 1 | 0 | → Right |
| π/2 ≈ 1.57 | 0 | 1 | ↑ Top |
| π ≈ 3.14 | −1 | 0 | ← Left |
| 3π/2 ≈ 4.71 | 0 | −1 | ↓ Bottom |
| 2π ≈ 6.28 | 1 | 0 | ↻ Back to start! |
A circle fails the vertical line test: for most x-values there are two y-values (one on top of the circle, one on the bottom). A regular function y = f(x) can only give one y per x. Parametric equations have no such restriction — x and y each just do their own thing as t changes.
4Example: The Ellipse — Just Stretch the Circle
What if we scale x and y by different amounts? Introduce constants a and b:
y(t) = b · sin(t)
equal scaling in both directions
x stretched 3× wider than y
y stretched 3× taller than x
An ellipse is just a stretched circle. The SketchWaveJS SWEllipse class uses exactly this math internally, and so does every other drawing library that needs to put oval shapes on screen.
Johannes Kepler discovered in 1609 that planets orbit the Sun in ellipses, not circles. NASA still writes spacecraft trajectories as parametric equations today — the same math you just read, only in 3D with z(t) added.
5Example: Lissajous Figures — Pure Math Eye Candy
What happens when x and y oscillate at different frequencies? Jules Antoine Lissajous (a French physicist, 1822–1880) studied this question and discovered a whole zoo of beautiful curves:
y(t) = sin(b · t) // b = vertical frequency
Live: cycling through Lissajous frequency ratios
The shape depends entirely on the ratio a : b. Watch the sketch cycle through several ratios automatically:
| Ratio a:b | Shape you get |
|---|---|
| 1:2 | Figure-8 / parabola (classic ∞-like shape) |
| 1:3 | Three-lobed curve |
| 2:3 | Pretzel / braided knot |
| 3:4 | More complex four-loop braid |
| 3:5 | Intricate five-loop star-like figure |
Before digital synthesizers existed, electrical engineers used oscilloscopes to display Lissajous figures. They'd tune two audio frequencies until the curve "locked" into a stable shape — which told them the ratio was a clean fraction like 2:3. Same equations you just learned, used in real labs every day.
Notice that a ratio of 1:1 with no phase offset (δ=0) gives a straight diagonal line — both oscillations are perfectly in sync. Add a phase offset of π/2 and it becomes a circle. Change the ratio to 1:2 and you get the figure-8. One equation, infinite shapes, just by tweaking two numbers.
6Example: Spirals — Growing as You Go
A spiral grows outward as it rotates. The Archimedean spiral (named after Archimedes, ~250 BC) is one of the simplest:
y(t) = t · sin(t)
t runs from 0 to 4π (two full turns) — then scaled to fit the canvas
The trick is the t · multiplier out front. Without it, cos(t) and sin(t) alone give a unit circle (constant radius = 1). Multiplying by t makes the radius grow as t increases — the further along the spiral, the bigger the distance from center. The cos/sin part handles the direction of rotation; t handles the size.
The SWSpiral class in this library
is an Archimedean spiral described by the polar equation
r = k · θ/π.
Polar coordinates are another form of parametric equations
where t = angle and r = radius.
Nautilus shells, sunflower seed patterns, pinecone bracts, hurricane arms, and entire galaxies all follow spiral math. The golden spiral (based on the Fibonacci sequence) appears throughout nature — and is describable as a parametric curve with an exponentially growing radius.
7❤️ Example: The Heart Curve — Our SWHeart Class
Now for the reason you're probably here. The heart curve is a beautiful parametric equation — and it is impossible to write as a simple y = f(x) because the curve crosses itself and loops back:
y(t) = b·cos(t) + c·cos(2t) + d·cos(3t) + e·cos(4t)
t runs from 0 to 2π | SWHeart defaults: a=16, b=13, c=−5, d=−2, e=−1, scale=0.5
Live: parametric heart with beat + gentle spin
Let's break down what each piece does — because every number is doing a specific job:
-
x = a · sin³(t) —
Cubing sin(t) distorts the regular sine wave: values near ±1
get exaggerated while values near 0 get squished. This creates the
heart's broad lobes on the sides and the pinched
waist at top center. (Try
a · sin(t)instead in the demo — you'll get an ellipse, not a heart.) - y = b · cos(t) — The primary vertical shape. At t=0: y peaks (top center notch). At t=π: y bottoms out (the sharp tip at the bottom).
- c · cos(2t) (c = −5) — Adds the cleft between the two lobes. Without this term, the top would be a smooth dome. The negative value dips the top center down, creating the heart's characteristic V-notch.
- d · cos(3t) (d = −2) — Sharpens the bottom tip. Without it, the bottom is rounder.
- e · cos(4t) (e = −1) — Fine-tune the curvature of the lobes and shoulders.
The base shape from sin³(t) and cos(t) is a rough heart outline. Each extra cosine term is a sculptor's tool that reshapes one specific feature — deepening the cleft, sharpening the tip, smoothing the shoulders. You control each tool by changing its coefficient. Experiment in the SWHeart Demo!
Why sin³(t) for the x-term?
sin(t) is symmetric and smooth. Paired with cos(t) for y, it would trace an ellipse — not a heart. The curve would have no pinch at the top, no lobes.
Cubing preserves the sign (negative stays negative) but stretches large values and shrinks small ones. This compression near t=0 creates the waist at the top, while the stretch near t=π/2 widens the lobes.
The Multiple Cosines in y — A Glimpse at Fourier Series
Adding cosines (and sines) at different frequencies is called a Fourier series, named after Joseph Fourier (1768–1830). His big idea: almost any curve or signal can be built by adding up enough waves at different frequencies. The heart uses 4 cosine terms — enough to capture the complex shape with just five numbers.
SWHeart loops t from 0 to 2π in 200 steps, computes
(x, y) at each step, then draws a polygon through all 200 points.
The drawing uses p5.js's beginShape() / endShape(CLOSE)
with a fill pass and a stroke pass to give the heart clean fill and border colors.
Scale and rotation are applied before converting to screen coordinates.
8Why Use Parametric Equations at All?
At this point you might be wondering: "OK, but when would I actually need this outside of SketchWaveJS?" Great question. Here's when parametric equations are the right tool:
🔁 The curve loops or crosses itself
A circle, a figure-8, a heart — these all fail the vertical line test. y = f(x) can't describe them. Parametric equations can, because x and y change independently.
💻 You want smooth animation
In a program, t is a loop variable or timer. Increment t each frame, compute (x, y), draw the point — and you have smooth animation. It's exactly how the live sketches on this page work.
🌌 Describing motion through space
A ball's arc, a planet's orbit, a roller coaster's path — all naturally described as (x(t), y(t)). Physics uses parametric equations constantly because time is the natural parameter.
🧵 Scaling to 3D is trivial
Just add z(t): three functions, one parameter. That's how 3D game engines, movie CGI, and robot arm path-planning all work. The math you've learned here scales directly.
9Summary: Parametric Curves at a Glance
| Curve | x(t) | y(t) | t range | Appears in… |
|---|---|---|---|---|
| Straight line | t |
m t + b |
any | Basics, motion |
| Circle | r cos(t) |
r sin(t) |
[0, 2π] | Gears, clocks, orbits, SWDisk |
| Ellipse | a cos(t) |
b sin(t) |
[0, 2π] | Planetary orbits, SWEllipse |
| Lissajous | sin(at + δ) |
sin(bt) |
[0, 2π] | Oscilloscopes, signal analysis, art |
| Archimedean spiral | t cos(t) |
t sin(t) |
[0, n·2π] | SWSpiral, nautilus shells, watchsprings |
| Heart curve | a sin³(t) |
b cos(t) + c cos(2t) + … |
[0, 2π] | SWHeart, art, math visualization |
10Try It Yourself
SWHeart Demo
Drag the coefficient sliders (a through e) and watch the heart reshape in real time. Enable Spin and Beat to see the animations.
Open DemoSWLissajous Demo
Adjust frequency ratios, phase, and amplitudes to explore the whole zoo of Lissajous shapes. Enable Spin or Phase Drift for mesmerizing real-time morphing.
Open DemoSWHeart Reference
Full class documentation — constructor, all setters, code examples for static hearts, spinning hearts, and beat animation, plus the complete source.
View ReferenceAll SketchWaveJS Classes
See the full library of parametric and geometric classes — SWSpiral, SWStar, SWEllipse, and more — all built on the same mathematical foundations.
Browse Classes