The angle of a given point on a Bezier curve?

Question

I created this class in actionscript, it returns the given bezier point. And what I'm trying to achieve is getting the angle of the current point. I searched on the Internet, but I could not find much. How can i do this?

public static function quadraticBezierPoint(u:Number, anchor1:Point, anchor2:Point, control:Point):Point { var uc:Number = 1 - u; var posx:Number = Math.pow(uc, 2) * anchor1.x + 2 * uc * u * control.x + Math.pow(u, 2) * anchor2.x; var posy:Number = Math.pow(uc, 2) * anchor1.y + 2 * uc * u * control.y + Math.pow(u, 2) * anchor2.y; return new Point(posx, posy); } 

Answer 1

Given:

• control points p0, p1, p2
• time t

point B is a point on the quadratic Bezier curve described by p0, p1 and p2 at time t.
q0 is the point on the linear bezier curve described by p0 and p1 at time t.
q1 is the point on the linear bezier curve described by p1 and p2 at time t.
The line segment between q0 and q1 touches your quadratic Bezier curve at point B.

Therefore, the angle of the Bezier curve at time t is equal to the slope of the line segment between q0 and q1.

Wikipedia has a great gif demonstrating this. The black dot is point B, and the end points of the green line segment are q0 and q1.

The principle is identical for higher bezier curves. To find the angle of a point on an N-degree Bezier curve, find q0 and q1, which are points of N-1 degree Bezier curves for the control points [p0, p1, ..., p (N-1)] and [p1, p2, ..., pN]. The angle is equal to the slope of the line segment q0-q1.

In pseudo code:

 def bezierCurve(controlPoints, t): if len(controlPoints) == 1: return controlPoints[0] else: allControlPointsButTheLastOne = controlPoints[:-1] allControlPointsButTheFirstOne = controlPoints[1:] q0 = bezierCurve(allControlPointsButTheLatOne, t) q1 = bezierCurve(allControlPointsButTheFirstOne, t) return (1-t) * q0 + t * q1 def bezierAngle(controlPoints, t): q0 = bezierCurve(controlPoints[:-1], t) q1 = bezierCurve(controlPoints[1:], t) return math.atan2(q1.y - q0.y, q1.x - q0.x) 

Answer 2

Following Kevin's explanation, I made a dynamic but simple decision:

 public static function quadraticBezierAngle(u:Number, anchor1:Point, anchor2:Point, control:Point):Number { var uc:Number = 1 - u; var dx:Number = (uc * control.x + u * anchor2.x) - (uc * anchor1.x + u * control.x); var dy:Number = (uc * control.y + u * anchor2.y) - (uc * anchor1.y + u * control.y); return Math.atan2(dy, dx); }