This interactive tutorial visualizes complex number interpolation on the complex plane. By treating complex numbers as 2D vectors, we can apply various curves to see how smoothly a path transitions through the plane. Each point z = x + j y is represented as (x, y) with the real axis horizontal and the imaginary axis vertical. A polar subplot in the top-right corner shows the path in (r, θ) space; hovering reveals the Euler form r·e^jθ.

Mathematical Foundation

1. Linear Interpolation (Lerp)

Between two complex numbers z₀ and z₁, linear interpolation is:

z(t) = (1 − t)z₀ + t z₁,   t ∈ [0, 1]

This draws a straight line segment. In Cartesian form: x(t) = (1−t)x₀ + tx₁ and similarly for y.

2. Spherical Linear Interpolation (Slerp)

Slerp interpolates the magnitude and argument (angle) separately for a more “circular” transition:

r(t) = (1 − t)r₀ + t r₁,   θ(t) = (1 − t)θ₀ + t θ₁

with z(t) = r(t) exp(j θ(t)). The angle uses the shortest path (wrapping at ±π).

3. Catmull-Rom Spline

A cubic spline that passes through all control points with C1 continuity. For each segment between P₁ and P₂, using neighbors P₀ and P₃:

P(t) = 0.5 · [(2P₁) + (−P₀ + P₂)t + (2P₀ − 5P₁ + 4P₂ − P₃)t² + (−P₀ + 3P₁ − 3P₂ + P₃)t³]

The first and last points are used as their own phantom neighbours, so the curve passes through every point including the endpoints. Works with 2+ points.

4. Cubic Bézier

Uses the same cubic Bernstein basis but with automatically computed inner control points derived from each point’s neighbours (Catmull-Rom tangent → Bezier handle conversion):

cp₁ = P_i + (P_i+1 − P_i−1)/6,   cp₂ = P_i+1 − (P_i+2 − P_i)/6

B(t) = (1−t)³P_i + 3(1−t)²t cp₁ + 3(1−t)t² cp₂ + t³P_i+1

The curve passes through every data point for any number of points (2+).

 

Usage

Use the simulation to explore complex number interpolation:

1. Preset: Load a pre-defined point configuration. Each preset is designed to expose a specific behaviour or failure mode (see Preset Notes below).
2. Method: Select the interpolation type — Linear, Slerp, Catmull-Rom, or Bézier. Compare how each curve connects the points.
3. In between points: Drag the slider to show 1–10 evenly-spaced intermediate points (orange dots) on each segment.
4. Add points: Click on empty space in the complex plane to add a control point.
5. Delete points: Right-click a point to remove it.
6. Move points: Click and drag a point to reposition it.
7. Clear All: Removes all points so you can start fresh.
8. Reset to Default: Restores the spiral preset.
9. Polar subplot: The small plot in the top-right shows the path in polar coordinates (r, θ). Hover over the main canvas or the subplot to highlight a point and see its Euler form r·e^jθ.

Preset Notes

• Spiral: General-purpose starting configuration.
• Regular circle: Baseline — every method should trace the circle smoothly. Use it to confirm correctness.
• Sharp zigzag: Consecutive points alternate sharply between large positive and negative imaginary parts. Catmull-Rom and Bézier will overshoot the corners; Linear stays exact.
• Slerp phase wrap (>180° steps): The angular gap between every consecutive pair is 200° > 180°. Slerp resolves each gap to the shorter arc of −160° (CW), so the slerp curve winds clockwise even though the control points are arranged counter-clockwise. Linear, Catmull-Rom and Bézier simply connect the Cartesian positions and are unaffected.
• Radial spokes: Points alternate between an outer ring (r = 3.5) and an inner ring (r = 1). Slerp arcs visibly in angle while its magnitude oscillates; Linear cuts straight chords across the rings.
• Near-origin path: One point is placed at |z| ≈ 0.17. Slerp magnitude collapses to near-zero there, producing a distinctive pinch; other methods extrapolate smoothly through.
• Spiral (4 rounds): 28 points winding 4 full rotations from inner to outer radius. Compare how each interpolation method follows the long spiral path.

Coordinate System & Visualizations

• The canvas center is the complex origin (0, 0). The horizontal axis is the real part; the vertical axis is the imaginary part.
• The path uses a green gradient to show the direction of interpolation (start → end).
• Polar subplot: The overlay in the top-right corner shows the path in polar coordinates. Each point is plotted at radius |z| and angle arg(z). Hover over the main canvas or the subplot to highlight the corresponding point and display its Euler form r·e^jθ at the bottom of the subplot.

Method Notes

• Linear: Straight segments between consecutive points. Works with 2+ points.
• Slerp: Interpolates magnitude and angle separately. Good for paths near the origin or crossing it.
• Catmull-Rom: Smooth C1 curve through all points. Endpoint tangents use the boundary point as its own phantom neighbour. Works with 2+ points.
• Bézier: Interpolating cubic curve with auto-computed control points. Passes through every point for any count (2+).