7

I have a question regarding formula curving through a control point. As you know, HTML Canvas has quadraticCurveTo(x1, y1, x2, y2) with x1 and x2 being the control point.

However when you try to draw a stroke using it, the stroke will never touch the control point.

So we have this formula:

x1 = xt * 2 - (x0 + x2) / 2;
y1 = yt * 2 - (y0 + y2) / 2;

(xt, yt) = the point you want to curve through. t for tangent as it is 90 degrees perpendicular at that point.

This recalculates the control point position.

I got this formula from a book, however the book doesn't explain how it is been derived. I tried google around but in vain.

Anyone knows how this formula is derived?

Thanks, Venn.

Vennsoh
  • 4,483
  • 5
  • 24
  • 39
  • This is from http://stackoverflow.com/questions/6711707/draw-a-quadratic-bezier-curve-through-three-given-points for anyone wondering – mowwwalker Mar 15 '13 at 03:15

2 Answers2

4

Quadratic Bezier curve is described by equations:

x(t) = x0 * (1-t)^2 + 2 * x1 * t * (1 - t) + x2 * t^2 (and similar for y(t)).

If we apply parameter value t = 1/2 (in some way - middle of the curve), we will get your formula:

x(t=1/2) = xt = x0 * 1/4 + 2 * x1 * 1/4 + x2 * 1/4

then

x1/2 = xt - (x0 + x2)/4

x1 = 2 * xt - (x0 + x2)/2

makdad
  • 6,262
  • 3
  • 29
  • 55
MBo
  • 66,413
  • 3
  • 45
  • 68
0

This is called a Spline. More to the point, it appears that they are using a Bezier Curve.

mindvirus
  • 4,350
  • 4
  • 25
  • 45
  • Thanks but I still don't get it how x1 = xt * 2 - (x0 + x2) / 2; y1 = yt * 2 - (y0 + y2) / 2; is being derived. – Vennsoh Mar 14 '12 at 22:03
  • @Vennsoh: Edited my answer, I believe that they are using a quadratic Bezier Curve. See the derivation in the linked wiki article. – mindvirus Mar 14 '12 at 22:17