Get normal of bezier curve in 2D

Question

I'm trying to wrap text in bezier curve and following tutorial from this link, http://www.planetclegg.com/projects/WarpingTextToSplines.html

I get Derivative by this code:

function Derivative(x0,x1,x2,t)
{
   var mt = 1-t;
   var a = mt * mt; 
   var b = mt * t * 2; 
   var c = t * t; 
   var result=a * x0 + b * x1 + c * x2;
   return result;
}

So i calcu Normal with this code:

function Normal(x0,x1,x2,y0,y1,y2,t) 
{      
  var dx = Derivative(x0,x1,x2,t);     
  var dy = Derivative(y0,y1,y2,t);  

  var q = Math.sqrt(dx*dx + dy*dy)
  return { x: -dy/q, y: dx/q };
};

So this is result: somthing wrong but i don't know where.

Thanks you all!

Answer 1

The "what I want" image looks a lot like my bezierjs documentation, so: you have the right idea (take the derivative to get the tangent vector, then rotate to get the normal), but make sure to get those derivatives right.

If you're using quadratic Bezier curves, consisting of three 2d points P1, P2 and P3, then the Bezier function is:

P1 * (1-t)² + P2 * 2 * (1-t)t + P3 * t²

and the derivative (written in but one of many ways) is:

P1 * (2t-2) + (2*P3-4*P2) * t + 2 * P2

The code you show as derivative computation is actually the regular quadratic Bezier function, so that's going to give you rather wrong results. Update the code to the correct derivative, and you should be fine.