Parametric Curves

Parametric form

A parametric curve in the plane is given by:

x = x(t)
y = y(t)

where t (the parameter) ranges over some interval. Both x and y are functions of t — as t varies, the point (x(t), y(t)) traces a curve.

The parameter t typically represents time in physical applications — t = 0 is the start, t increases through the path. But t can be anything (an angle, an arclength, just a label).

Common parametric curves

Curve	Parametric form	Range	Shape
Line through (a, b)	x = a + ct, y = b + dt	t ∈ ℝ	Straight line, direction (c, d)
Circle radius r	x = r cos t, y = r sin t	t ∈ [0, 2π]	Counterclockwise from (r, 0)
Ellipse	x = a cos t, y = b sin t	t ∈ [0, 2π]	Stretched circle
Parabola y = x²	x = t, y = t²	t ∈ ℝ	Upward parabola
Cycloid	x = r(t − sin t), y = r(1 − cos t)	t ∈ ℝ	Wheel rolling on ground
Astroid	x = cos³t, y = sin³t	t ∈ [0, 2π]	Star-shaped, 4 cusps
Lissajous (1:2)	x = sin(t), y = sin(2t)	t ∈ [0, 2π]	Figure-8
Helix (3D)	x = cos t, y = sin t, z = t	t ∈ ℝ	Spiral up the z-axis

Why parametric instead of y = f(x)?

Functions y = f(x) have limitations:

• Vertical-line test. Each x has one y. Circles, figure-8s, and loops fail this — can't be expressed as y = f(x).
• No motion encoding. A curve like y = x² is a static shape. Parametric forms (x(t), y(t)) encode the path AND the speed/direction of traversal.
• 3D and higher dimensions. Parametric forms generalize naturally — (x(t), y(t), z(t)) for 3D curves. Functions don't.

Velocity and acceleration

The first derivative gives the velocity vector:

v(t) = (x'(t), y'(t))

Its direction is tangent to the curve; its magnitude |v(t)| = √(x'² + y'²) is the speed.

The second derivative gives the acceleration vector:

a(t) = (x''(t), y''(t))

For uniform circular motion (x = cos t, y = sin t):

• v = (−sin t, cos t) — tangent to circle, speed = 1.
• a = (−cos t, −sin t) — points toward origin (centripetal acceleration).

Arc length

The total arc length from t = a to t = b is:

L = ∫[a, b] √((dx/dt)² + (dy/dt)²) dt

The integrand is the speed; integrating speed over time gives distance. For a circle of radius r over t ∈ [0, 2π]:

L = ∫[0, 2π] √(r²sin²t + r²cos²t) dt = ∫[0, 2π] r dt = 2πr ✓

Bézier curves — parametric in graphics

Quadratic Bézier — three control points P₀, P₁, P₂:

B(t) = (1−t)² P₀ + 2(1−t)t P₁ + t² P₂,  t ∈ [0, 1]

Cubic Bézier — four control points:

B(t) = (1−t)³ P₀ + 3(1−t)²t P₁ + 3(1−t)t² P₂ + t³ P₃

The curve starts at P₀ (t=0), ends at P₃ (t=1), and is "pulled" toward intermediate control points P₁ and P₂. The coefficients are Bernstein polynomials (related to Pascal's triangle).

Bézier curves are everywhere — TrueType fonts, Adobe Illustrator paths, animation easing curves (CSS cubic-bezier), CAD design.

JavaScript — parametric curves and animation

// Sample a parametric curve at n points
function sampleCurve(xFunc, yFunc, tMin, tMax, n = 100) {
  const points = [];
  for (let i = 0; i <= n; i++) {
    const t = tMin + (i / n) * (tMax - tMin);
    points.push([xFunc(t), yFunc(t)]);
  }
  return points;
}

// Circle
const circle = sampleCurve(
  t => Math.cos(t),
  t => Math.sin(t),
  0, 2 * Math.PI
);

// Cycloid
const cycloid = sampleCurve(
  t => t - Math.sin(t),
  t => 1 - Math.cos(t),
  0, 4 * Math.PI
);

// Lissajous (3:2 ratio)
const lissajous = sampleCurve(
  t => Math.sin(3 * t),
  t => Math.sin(2 * t),
  0, 2 * Math.PI,
  500  // higher resolution
);

// Quadratic Bézier curve
function quadraticBezier(p0, p1, p2, t) {
  const u = 1 - t;
  return [
    u * u * p0[0] + 2 * u * t * p1[0] + t * t * p2[0],
    u * u * p0[1] + 2 * u * t * p1[1] + t * t * p2[1]
  ];
}

// Cubic Bézier
function cubicBezier(p0, p1, p2, p3, t) {
  const u = 1 - t;
  return [
    u**3 * p0[0] + 3*u*u*t * p1[0] + 3*u*t*t * p2[0] + t**3 * p3[0],
    u**3 * p0[1] + 3*u*u*t * p1[1] + 3*u*t*t * p2[1] + t**3 * p3[1]
  ];
}

// Numerical arc length via discretization
function arcLength(points) {
  let total = 0;
  for (let i = 1; i < points.length; i++) {
    const dx = points[i][0] - points[i-1][0];
    const dy = points[i][1] - points[i-1][1];
    total += Math.sqrt(dx * dx + dy * dy);
  }
  return total;
}

console.log(`Circle circumference: ${arcLength(circle).toFixed(4)}`);  // ~6.28 (= 2π)

Where parametric curves show up

• Computer graphics. Bézier curves, NURBS, splines for fonts, paths, animation. Every CAD package uses parametric curves.
• Physics. Particle trajectories — projectile (parabola), planetary orbit (ellipse), spring oscillation (sinusoid). Velocity and acceleration are derivatives of position.
• Animation easing. CSS cubic-bezier(x1, y1, x2, y2) describes timing curves. Common easings — ease, ease-in, ease-out are specific Bézier curves.
• Robotics. Robot arm trajectories, drone flight paths, autonomous vehicle paths. All parametric, often with time as parameter.
• Engineering — gears and cams. Cycloid teeth, involute curves for gear profiles. Lissajous figures in oscillating mechanisms.
• Signal processing. Lissajous figures show frequency relationships. Polar plots of complex signals.
• Calculus textbooks. Parametric forms test understanding of derivatives, arc length, and motion.

Common mistakes

• Confusing parametric with implicit. Parametric (x(t), y(t)) generates points by varying t. Implicit F(x, y) = 0 describes the locus where F is zero. Same curve can have both forms; they convey different information (parametric encodes traversal).
• Forgetting parameter range. A parametric curve isn't fully defined without specifying t ∈ [a, b]. The same parametric form over different ranges traces different (sub)curves.
• Mistaking parameter for x-coordinate. In y = f(x), parameter is x. In parametric (x(t), y(t)), t is independent of x. Beginners often write x = t and call it "parametric" when they could just use a function.
• Treating different parameterizations as different curves. x = cos t, y = sin t and x = cos(2t), y = sin(2t) trace the same circle (just at different speeds). Reparameterization changes the parameter but not the curve.
• Confusing velocity vector with tangent direction. Velocity (x'(t), y'(t)) is the tangent times speed. To get a unit tangent, normalize — divide by |velocity|. Important for curvature and Frenet frame computations.
• Wrong formula for arc length. ∫ √((dx/dt)² + (dy/dt)²) dt — not √(dx² + dy²) treated as differential. Arc length integrates speed over time.