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:

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:

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₃:

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):

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

Simulation

The interactive simulator is below. Use the controls to explore the concepts described above.

 

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

Method	Behaviour	Best for
Linear	Straight segments between consecutive points	Exact corners; no overshoot
Slerp	Interpolates magnitude and angle separately (shortest arc)	Paths near or crossing the origin; circular motion
Catmull-Rom	Smooth C1 curve through all points; endpoints are their own phantom neighbours	Smooth paths through scattered points
Bézier	Interpolating cubic with auto-computed control points	Smooth curve that still hits every point

Limitations

• Smooth methods overshoot: Catmull-Rom and Bézier can swing outside the convex hull of the points at sharp corners; they are not shape-preserving (monotone).
• Slerp ambiguity near the origin: when a point’s magnitude approaches 0 its argument is ill-defined, so Slerp can pinch or behave unexpectedly; the angle also always takes the shortest arc, which may not match intent.
• Pairwise / segment-local: the spline tangents use only immediate neighbours, so the curve is not a global least-curvature fit and changing one point only affects nearby segments.
• Uniform parameterization: t advances uniformly per segment, not by arc length, so the “in-between” points are not evenly spaced in distance when segments differ in length.