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.

Tweet

The original post was in the category: mathematics but I'm still in the process of migrating categories over.