4

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

Derek Ewing
  • 223
  • 2
  • 8

1 Answers1

7

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)

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
  • Thank you Mike, I was reading your primer (http://pomax.github.io/bezierinfo/) trying to figure out what to do. Is it possible to calculate the intersection of a cubic path and a straight line give by y = mx + c ? – Derek Ewing Feb 28 '15 at 13:25
  • it is: rotated the curve so that its x axis is aligned with that line, and then perform root finding on the curve (see http://pomax.github.io/bezierinfo/#intersections) – Mike 'Pomax' Kamermans Feb 28 '15 at 17:33
  • given that I know: 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³ and I have the three values of t, taken from your article (0.315, 0.041 and 0.932) and I know that y = 0 as we have aligned the straight line to the axis. Can I reuse the angle, ca, sa, ox and 0y variable from the align function to find the intersection xy coordinates ? I do not need to draw the curve and was hoping not have have to find all XY values of the curve if i didn't need to. – Derek Ewing Mar 02 '15 at 15:08
  • sorry I forgot to mentioned I have changed the values of p0 - p4 and the two points of the straight line to match the ones shown in your article. i.e. straight line:- (100,20) , (195,255) cubic curve:- (150,125),(40,30),(270,115),(145,200 – Derek Ewing Mar 02 '15 at 16:07
  • you can't, but you can run what is known as [Cardano's algorithm](http://stackoverflow.com/questions/26823024/cubic-bezier-reverse-getpoint-equation-float-for-vector-vector-for-float) for always finding the three roots for the aligned curve (although some could be complex, so we reject those) – Mike 'Pomax' Kamermans Mar 02 '15 at 17:06