From Focus and Directrix to Bézier Curve Parameters

For reasons that will become clear in a couple of posts, I wanted to be able to calculate quadratic Bézier curve parameters from a focus and horizontal directrix.

A focus and directrix are enough to define a parabola (in fact a parabola is the locus of points equidistance from a point, the focus, and a line, the directrix).

A quadratic Bézier curve is a section of a parabola and is defined by three points, according to the formula:

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

Here's how I came to my result...

Given the directrix is horizontal,

• P₁ must have the same x-coordinate as focus
• P₁ must have an x-coordinate midway between P₀ and P₂

and by definition:

• the parabola's low point is midway between the focus and directrix

Now even though somewhat arbitrary and assuming the directrix is below the focus,

• P₀ and P₂ can have a y-coordinate of 0

So,

• the parabola's low point's y-coordinate is midway between P₀y and P₁y
• ⇒ the y-coordinate midway between focus and directrix is midway between P₀y and P₁y
• ⇒ the y-coordinate midway between focus and directrix is half P₁y

Therefore,

• P₀ = (Fx - α, 0)
• P₁ = (Fx, Fy + Dy)
• P₂ = (Fx + α, 0)

for some α where (Fx, Fy) is focus and Dy is y-coordinate of directrix.

By definition,

• P₀ must be equidistant between focus and directrix
• P₂ must be equidistant between focus and directrix

But, given P₀ and P₂ have a y-coordinate of 0 and directrix is horizontal,

• distance between P₀ and focus = Dy
• distance between P₂ and focus = Dy

Therefore,

• (P₀x - Fx)² + (P₀y - Fy)² = Dy²
• ⇒ ((Fx-α) - Fx)² + (0 - Fy)² = Dy²
• ⇒ (-α)² + (-Fy)² = Dy²
• ⇒ α² + Fy² = Dy²
• ⇒ α = √(Dy²-Fy²)

And so, assuming the directrix is horizontal and below the focus, the following Bézier curve parameters can also be used to create the parabola:

• α = √(Dy²-Fy²)
• P₀ = (Fx - α, 0)
• P₁ = (Fx, Fy + Dy)
• P₂ = (Fx + α, 0)

UPDATE (2008-11-29): Now see Voronoi Canvas Tutorial, Part III for the motivation for wanting to do this as well as an implementation in Javascript for drawing parabolae in a canvas element.