find the equation of a line from bezier curve control points
bezier, svg
Solution
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`:
- you'd need, at the very least, a form `ax³+bx²+c` instead, and
- 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)
Problem
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