Interestingly, I’ve received three inquiries on this problem in the last month; how do you draw a quadratic Beizer with arrows at each endpoint (pointing in the direction of the Bezier curve)? Drawing an arrow is pretty simple and everyone interested in this problem posed it as an issue with computing rotation angles.
The problem could be solved with trig, but trigonometry often overcomplicates a problem involving simple vector math. Suppose you wanted to draw an arrow (equilateral triangle) pointing in the direction of the x axis. That’s a pretty easy problem. Suppose you wanted to draw a similar arrow pointing in the direction of the y axis or the negative y axis? Those are also easy problems.
You are actually drawing an arrow in the direction of a unit vector, using a normal to that unit vector to draw the base. The base is drawn half the length of a side in the direction of both the positive and negative normal directions. The tip is drawn at full length in the direction of the primary unit vector. In the first case, the vector (1,0) serves as a unit vector in the direction of the x axis and (0,1) is the normal vector.
This method could be extended to draw arrows in any arbitrary direction provided you have a unit and normal vector as a frame of reference. A unit vector is created by normalizing a direction vector and the direction vectors of a quadratic Bezier are easily obtained from its control points. If the vectors P0, P1, and P2 are the control points of a quadratic Bezier, then one end of the Bezier ‘points’ in the direction of P0-P1 and the other end ‘points’ in the direction of P2-P1. The normal of a unit vector is trivial given the unit vector x- and y-components since the rotation angle is Π/2.
These concepts are embodied in a very simple demo that was hacked together from some old Degrafa code. The original person asking this question was using Flex 3, so the primary components in this demo extend Canvas. It’s a pretty crummy demo as demos go, but I don’t have any more time to put into it. The demo does, however, illustrate this concept of creating unit and normal vectors that can be very useful in a wide variety of applications.
Here are some screen shots.
The red box is not a true bounding box for the quad. Bezier. It’s used to create a middle control point and have some control over the shape of the Bezier without having an interactive ‘handle’ at the endpoints (which would obscure the arrows).
Like I said, it’s a pretty sucky demo, but I hope you find the concept of creating arbitrary frames of reference via direction vectors and normals useful in some future context.
Download a .zip of the FXP file here and have fun!
The Algorithmist 