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