How can I convert curveTo() to a list of Points?

Question

Take the following AS3 that will draw a curved line using curveTo():

var line:Shape = new Shape();

line.x = line.y = 20;
line.graphics.lineStyle(2, 0xFF0000);
line.graphics.curveTo(200, 200, 200, 0);

addChild(line);

The resulting visual is:

Now I want something to be able to follow this path; how can I convert this visual into a list of coordinates? I struggle with any advanced mathematics, but I'm assuming there's an obvious (to some) formula that curveTo() uses to create the above that I can replicate and amend to create my desired list.

The result may end up looking like this (assuming an offset of about 5px between points).

Vector.<Point> = [
    new Point(20, 20),
    new Point(23, 23),
    new Point(27, 28),
    new Point(33, 32),
    new Point(40, 37)
    /* ...etc... */
];

The result will be used for things such as creating a rain of projectiles that follow the following paths, for example:

Answer 1

From reading the actionscript documentation, I understand that the curveTo method in action script generates a quadratic Bezier curve.

The curve consists of three "control points" that you specified in your code:

control point 1 (p1) = (20,20)
control point 2 (p2) = (200,200)
control point 3 (p3) = (200,0)

To interpolate a value along the curve at value u ranging from 0 to 1 (with 0 being the start point and 1 being the ending point) you can use what are called Bernstein polynomials. For a quadratic curve (your case) the polynomials are:

B1 = (1 - u) * (1 - u)
B2 = 2 * u * (1 - u)
B3 = u * u

Simply calculate these numbers for parameter value u and add together the control points multiplied by their corresponding Bernstein polynomials.

point on curve at parameter *u* = p1 * B1 + p2 * b2 + p3 * B3

So, for example, if you want to get 5 points along the curve, you calculate the points along the curve at parameter values 0, 0.25, 0.5, 0.75, and 1.0

Answer 2

curveTo() is used to draw a quadratic bezier curve, where a bezier curve is calculated between two endpoints and in relation to two anchor points, and a quadratic bezier curve is one where both anchor points have the same coordinates.

Bezier curves are calculated by a number of equations that allow you to find x and y coordinates for a point that is reached at a given time along the path, so this already fits your needs quite well. You can find general information about bezier curves on this page.

All you need to do to get the coordinate points is translate these equations to ActionScript. And luckily, Paul Tondeur has a nice blog post showing how to do this. His solution is used to draw cubic bezier curves, but you can easily change the code to return coordinates for what you're trying to do.

Answer 3

A Bezier curve is a parametric function. A quadratic Bezier curve (i.e. three control points) can be expressed as: F(t) = A(1 - t)^2 + B(1 - t)t + Ct^2 where A, B and C are points and t goes from zero to one.

This will give you two equations:

x = a(1 - t)^2 + b(1 - t)t + ct^2

y = d(1 - t)^2 + e(1 - t)t + ft^2

If you add for instance the line equation (y = kx + m) to that, you'll end up with three equations and three unknowns (x, y and t).

from: How to find the mathematical function defining a bezier curve

using this equation, you can create an array of x and y coordinates