Convert a quadratic bezier to a cubic one

Question

What is the algorithm to convert a quadratic bezier (with 3 points) to a cubic one (with 4 points)?

Solution 1

From https://fontforge.org/docs/techref/bezier.html#converting-truetype-to-postscript:

Any quadratic spline can be expressed as a cubic (where the cubic term is zero). The end points of the cubic will be the same as the quadratic's.

CP₀ = QP₀
CP₃ = QP₂

The two control points for the cubic are:

CP₁ = QP₀ + 2/3 *(QP₁-QP₀)
CP₂ = QP₂ + 2/3 *(QP₁-QP₂)

...There is a slight error introduced due to rounding, but it is unlikely to be noticeable.

Solution 2

Just giving a proof for the accepted answer.

A quadratic Bezier is expressed as:

Q(t) = Q₀ (1-t)² + 2 Q₁ (1-t) t + Q₂ t²

A cubic Bezier is expressed as:

C(t) = C₀ (1-t)³ + 3 C₁ (1-t)² t + 3 C₂ (1-t) t² + C₃ t³

For those two polynomials to be equals, all their polynomial coefficients must be equal. The polynomial coefficents are obtained by developing the expressions (example: (1-t)² = 1 - 2t + t²), then factorizing all terms in 1, t, t², and t³:

Q(t) = Q₀ + (-2Q₀ + 2Q₁) t + (Q₀ - 2Q₁ + Q₂) t²

C(t) = C₀ + (-3C₀ + 3C₁) t + (3C₀ - 6C₁ + 3C₂) t² + (-C₀ + 3C₁ -3C₂ + C₃) t³

Therefore, we get the following 4 equations:

C₀ = Q₀

-3C₀ + 3C₁ = -2Q₀ + 2Q₁

3C₀ - 6C₁ + 3C₂ = Q₀ - 2Q₁ + Q₂

-C₀ + 3C₁ -3C₂ + C₃ = 0

We can solve for C₁ by simply substituting C₀ by Q₀ in the 2nd row, which gives:

C₁ = Q₀ + (2/3) (Q₁ - Q₀)

Then, we can either continue to substitute to solve for C₂ then C₃, or more elegantly notice the symmetry in the original equations under the change of variable t' = 1-t, and conclude:

C₀ = Q₀

C₁ = Q₀ + (2/3) (Q₁ - Q₀)

C₂ = Q₂ + (2/3) (Q₁ - Q₂)

C₃ = Q₂

Solution 3

For reference, I implemented addQuadCurve for NSBezierPath (macOS Swift 4) based on Owen's answer above.

extension NSBezierPath {
    public func addQuadCurve(to qp2: CGPoint, controlPoint qp1: CGPoint) {
        let qp0 = self.currentPoint
        self.curve(to: qp2,
            controlPoint1: qp0 + (2.0/3.0)*(qp1 - qp0),
            controlPoint2: qp2 + (2.0/3.0)*(qp1 - qp2))
    }
}

extension CGPoint {
    // Vector math
    public static func +(left: CGPoint, right: CGPoint) -> CGPoint {
        return CGPoint(x: left.x + right.x, y: left.y + right.y)
    }
    public static func -(left: CGPoint, right: CGPoint) -> CGPoint {
        return CGPoint(x: left.x - right.x, y: left.y - right.y)
    }
    public static func *(left: CGFloat, right: CGPoint) -> CGPoint {
        return CGPoint(x: left * right.x, y: left * right.y)
    }
}

Comments

[Owen S.]

Flavius has proposed CP2 = CP1 + 1/3*(QP1-QP2) instead. But from my math, that seems to give a different result. (Take points QP0=(0,0), QP1=(1,2), and QP2=(3,0); I get CP2=(5/3, 4/3) for my formula and CP2=(0,2) for Flavius's.) I verified my formulas by setting the cubic coefficient to 0 and solving for the rest. Flavius, where did your formula come from?

[WDUK]

Is QP2 the handle/anchor of the quadratic or is QP1 the handle/anchor of the quadratic ? People change the order of these every where i read up about bezier's it's a pain to keep track when people don't specify.

[Robin Stewart]

QP1 is the control point in the middle and QP2 is the end point.