Alex Rivera | Logout

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

Asked 2012-01-19T23:57:10.623
10

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:

enter image description here

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:

enter image description here

actionscript-3 math
Edit
Report

2 Answers

14

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

answered 2012-01-20T00:28:21.777
1

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

answered 2012-01-20T00:48:59.030

Your Answer