How an arc
finds its way.

The visualizer takes two geographic coordinates, places them on a sphere and joins them with a quadratic Bézier curve whose control point is lifted off the surface. Three steps, each small enough to read in one sitting.

Project

φ is latitude, λ is longitude, both in radians. r = 20 in scene units.

From degrees to space

Each point is converted from spherical coordinates into Cartesian x, y, z, with y pointing to the north pole. Inputs are clamped to ±90° and ±180°, and the form flags anything that isn’t a number.

x = r · cos φ · cos λ y = r · sin φ z = −r · cos φ · sin λ

The minus sign on z keeps east on the right when you look at the globe from outside, so routes read the way they do on a map.

Lift

The further apart the points, the higher the arc has to rise to stay visible.

A control point above the surface

A quadratic Bézier has three points: the two ends P₀ and P₂ on the sphere, and a control point P₁ that pulls the curve towards it. P₁ sits on the line through the midpoint of the chord, pushed out by a factor k.

B(t) = (1−t)² P₀ + 2(1−t)t P₁ + t² P₂ , 0 ≤ t ≤ 1 P₁ = M̂ · r · k , M̂ = normalize(P₀ + P₂) k = 1 / cos(θ/2) + 0.7 · sin(θ/2)

θ is the angle between the two points. With k = 1 / cos(θ/2) alone the curve would leave the surface tangentially and hug it; the extra 0.7 · sin(θ/2) lifts it clear, and more so for longer routes. Above 2.2, k is eased towards 3 so near-antipodal arcs stay on screen; they dip just under the surface at their ends, because a single quadratic can’t leave opposite points tangentially. Antipodal points have no midpoint, so the arc bows towards the pole instead.

(a)

(b)

Fig. 3 — (a) Paris to Tokyo with its control polygon P₀ P₁ P₂; hidden segments dashed. (b) Height of the arc’s apex against the angular distance between the two points.

Render

The tube is drawn on over about a second, led by a small pen.

Stack

Three.js: r128 — scene, PerspectiveCamera, Lambert material
OrbitControls: drag to orbit, scroll to zoom
TubeGeometry: 96 segments × configurable radius, revealed with setDrawRange
jQuery: 3.6 — form events and DOM
localStorage: settings, saved routes, panel state

Try it in the visualizer →