### Re: [Flashcoders] Bezier curve arrows

```
Hi Pual,

I just noticed that I had already written something, but it didn't get
sent to the list before the question got answered.

Oh well...anyways:

To find the angle, you have to find the slope of the tangent at that
point of the curve; however, this is really easy because with bezier
curves you already know the tangents for the end points.

the control points for the cage of a bezier are:
A(the beginning point that you will be curving from)
B(the middle)
C(the end point you curved to)

the slope of the line AtoB is the slope of the tangent for point A
the slope of the line BtoC is the slope of the tangent for point C

remember that the slope, m = deltaY/DeltaX, rise over run, (y1-y0)/(x1-x0)

Now that you have the slope for each line segment, and since m = tan
(theta), then arc tan (m) = theta; therefore,
pop in the slope, using Math.atan(m) to get the radian, or Math.atan(m)
* 180 /Math.PI to get the degree.

You could also use atan2 reducing points by offset, but either way you
need to use the ctrl points.

Now that you have the degree, if your arrow head are dynamically
generated you know how what to translate the points by; however, if they
are shapes than with the registration point located at the arrow head
tip, then rotating should be a piece of cake from that point.

Hope that helps,
Anthony

On 3/16/2010 12:02 PM, p...@ipauland.com wrote:

generated curves. I initially thought Triangle pointing to end point, and that
would be a great solution. I can place a MC at the end of the curve, but how can
I get the right angle to point it to?

Paul

___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

```

### Re: [Flashcoders] Bezier curve arrows

```
Oops.  Just noticed how atrocious the writing was.

On 3/18/2010 11:25 AM, Anthony Pace wrote:

Hi Pual,

I just noticed that I had already written something, but it didn't get
sent to the list before the question got answered.

Oh well...anyways:

To find the angle, you have to find the slope of the tangent at that
point of the curve; however, this is really easy because with bezier
curves you already know the tangents for the end points.

the control points for the cage of a bezier are:
A(the beginning point that you will be curving from)
B(the middle)
C(the end point you curved to)

the slope of the line AtoB is the slope of the tangent for point A
the slope of the line BtoC is the slope of the tangent for point C

remember that the slope, m = deltaY/DeltaX, rise over run,
(y1-y0)/(x1-x0)

Now that you have the slope for each line segment, and since m = tan
(theta), then arc tan (m) = theta; therefore,
pop in the slope, using Math.atan(m) to get the radian, or
Math.atan(m) * 180 /Math.PI to get the degree.

You could also use atan2 reducing points by offset, but either way you
need to use the ctrl points.

Now that you have the degree, if your arrow head are dynamically
generated you know how what to translate the points by; however, if
they are shapes than with the registration point located at the arrow
head tip, then rotating should be a piece of cake from that point.

Hope that helps,
Anthony

On 3/16/2010 12:02 PM, p...@ipauland.com wrote:

generated curves. I initially thought Triangle pointing to end
point, and that
would be a great solution. I can place a MC at the end of the curve,
but how can

I get the right angle to point it to?
Paul
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

```

### Re: [Flashcoders] Bezier curve arrows

```Hello Paul,

[...] how can I get the right angle to point it to?

very easy:

getTangentAngle method.

time parameter is 0 for start and 1 for end of bezier.

good luck!

--
iv
http://www.bezier.ru
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

```

### [Flashcoders] Bezier curve arrows

```I was recently asked if I could add some arrowheads to some actionscript
generated curves. I initially thought Triangle pointing to end point, and that
would be a great solution. I can place a MC at the end of the curve, but how can
I get the right angle to point it to?

Paul
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

```

### Re: [Flashcoders] Bezier curve arrows

```Calculate the derivative (the gradient, slope) at the end of the curve.
But i have no idea how to do it is as3. Can we even calculate derivatives in
AS3?
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

```

### Re: [Flashcoders] Bezier curve arrows

```
What is the equation of the curve?
John

Pedro Kostelec wrote:

Calculate the derivative (the gradient, slope) at the end of the curve.
But i have no idea how to do it is as3. Can we even calculate derivatives in
AS3?
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

```

### Re: [Flashcoders] Bezier curve arrows

```Actionscript generated curves are quadratic beziers. The angle is
easy to get at the end points -- the (quadratic) bezier is defined by
three points, one where you start and two that you pass to the curveTo
method. By definition, the line defined by those two points is the
tangent at the end point.
Use Math.atan2 to get the angle, then rotate your clip accordingly.

HTH,
Mark

On Tue, Mar 16, 2010 at 5:02 PM, p...@ipauland.com p...@ipauland.com wrote:
generated curves. I initially thought Triangle pointing to end point, and
that
would be a great solution. I can place a MC at the end of the curve, but how
can
I get the right angle to point it to?

Paul
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

```

### Re: [Flashcoders] Bezier curve arrows

```
p...@ipauland.com wrote:

generated curves. I initially thought Triangle pointing to end point, and that
would be a great solution. I can place a MC at the end of the curve, but how can
I get the right angle to point it to?

Paul

___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

Hi,

If it's a 3 point Flash Quadratic Bezier curve with anchors and your
arrows point like this - your direction will be along the line
from p1-p2 and p2-p3 or something like that?

e.g.

p1---p2--p3

so
graphics.moveTo(p1.x, p1.y);
graphics.curveTo(p2.x, p2.y, p3.x, p3.y);

v1 = p2 - p1;
v2 = p2 - p3;

calculate the angle using atan(v1.y / v1.x) and adjust for the

HTH

Glen
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

```

### Re: [Flashcoders] Bezier curve arrows

```
On 16/03/2010 17:24, Glen Pike wrote:

p...@ipauland.com wrote:

generated curves. I initially thought Triangle pointing to end
point, and that
would be a great solution. I can place a MC at the end of the curve,
but how can

I get the right angle to point it to?

Paul
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

Hi,

If it's a 3 point Flash Quadratic Bezier curve with anchors and your
arrows point like this - your direction will be along the
line from p1-p2 and p2-p3 or something like that?

e.g.

p1---p2--p3

so
graphics.moveTo(p1.x, p1.y);
graphics.curveTo(p2.x, p2.y, p3.x, p3.y);

v1 = p2 - p1;
v2 = p2 - p3;

calculate the angle using atan(v1.y / v1.x) and adjust for the

HTH

Glen
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

Thanks for the suggestions - I shall give it a go.
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

```