find the equation of a line from bezier curve control points

3
votes

I would like to find the equation of a curve in the form y = ax2 + bx + c

from the following svg path:

<path id="curve1"  d="M100,200 C100,100 400,100 400,200" />

this gives me 4 points that can be seen on the attached image.

  • 100,200 (start point in purple)
  • 100,100 (control point 1 in red)
  • 400,100 (control point 2 in green)
  • 400,200 (end point in blue)

wikipedia has a great article explaining bezier curves however I am not sure how to apply the maths shown there to get equation of the curve. http://en.wikipedia.org/wiki/B%C3%A9zier_curve

plotted curve, click to see image

1
svgbezier

1 Answers

6
votes

You can't.

The SVG you're showing uses a cubic path, which uses a third order parametric curve, meaning it has the form:

fx(t) = x1 * (1-t)³ + x2 * 3 * (1-t)²t + x3 * 3 * (1-t)t² + x4 * t³
fy(t) = y1 * (1-t)³ + y2 * 3 * (1-t)²t + y3 * 3 * (1-t)t² + y4 * t³

(which is plotted for t going from 0, inclusive, to 1, inclusive).

So there are two reasons why you can't express that curve as a form y=ax²+b:

  1. you'd need, at the very least, a form ax³+bx²+c instead, and
  2. this is a parametric curve, not a simple function graph; for Bezier curves it is not the case that y is expressed in terms of x at all, but instead both the x and y values are controlled by a "master parameter" t.

We know that second degree functions like y=ax²+b can only model parabola, and looking at the image we can see that the plotted curve looks nothing like one of those (not even a squashed parabola) so we can't even "kind of sort of" approximate the curve with a second degree function in this case.

(sometimes you can get away with that, but definitely not in this case)