# Path

## Introduction¶

Path in curves, built-in object of phaser.

• Author: Richard Davey

## Usage¶

### Add path object¶

``````var path = scene.add.path();
// var path = scene.add.path(x, y);  // curve start from (x, y)
``````

or

``````var path = new Phaser.Curves.Path();
// var path = new Phaser.Curves.Path(x, y);  // curve start from (x, y)
``````

#### Add path object with curves¶

Curves in JSON

``````var path = scene.add.path(json);
``````
or
``````var path = new Phaser.Curves.Path(json);
``````

#### Line¶

• Add line object
1. Create line object
``````var curve = new Phaser.Curves.Line({x: x0, y: y0}, {x: x1, y: y1});
``````
or
``````var curve = new Phaser.Curves.Line([x0, y0, x1, y1]);
``````
2. Add to path
``````path.add(curve);
``````
• Add line started from previous end point to next point
``````path.lineTo(endX, endY);
``````
or
``````path.lineTo(new Phaser.Math.Vector2({x, y}));
``````

Properties:

• `curve.p0` : The first endpoint.
• `curve.p0.x`, `curve.p0.y`
• `curve.p1` : The second endpoint.
• `curve.p1.x`, `curve.p1.y`

#### Circle/ellipse/arc¶

• Add circle/ellipse/arc object
1. Create circle/ellipse/arc object
• Circle
``````var curve = new Phaser.Curves.Ellipse(x, y, radius);
``````
• Ellipse
``````var curve = new Phaser.Curves.Ellipse(x, y, xRadius, yRadius);
``````
• Arc
``````var curve = new Phaser.Curves.Ellipse(x, y, xRadius, yRadius, startAngle, endAngle, clockwise,     rotation);
``````
2. Add to path
``````path.add(curve);
``````
• Add circle/ellipse/arc started from previous end point to next point
• Circle
``````path.circleTo(radius);
``````
• Ellipse
``````path.ellipseTo(xRadius, yRadius);
``````
• Arc
``````path.ellipseTo(xRadius, yRadius, startAngle, endAngle, clockwise, rotation);
``````

Properties:

• `curve.p0` : Center point.
• `curve.p0.x`, `curve.p0.y`
• `curve.xRadius`, `curve.yRadius` : Horizontal/vertical radiuse.
• `curve.startAngle`, `curve.endAngle` : Start/end angle, in degrees.
• `curve.clockwise` : `true` if Clockwise, `false` if anti-clockwise.
• `curve.angle` : Rotation, in degrees.
• `curve.rotation` : Rotation, in radians.

#### Spline¶

• Add spline object
1. Create spline object
``````var curve = new Phaser.Curves.Spline([
p0,            // {x, y}, or [x, y]
p1,            // {x, y}, or [x, y]
// ...
]);
``````
or
``````var curve = new Phaser.Curves.Spline([
x0, y0,
x1, y1,
// ...
]);
``````
2. Add to path
``````path.add(curve);
``````
• Add spline started from previous end point to next point
``````var points = ;
path.splineTo([
p0,            // {x, y}, or [x, y]
p1,            // {x, y}, or [x, y]
// ...
]);
``````
or
``````path.splineTo([
x0, y0,
x1, y1,
// ...
]);
``````
##### Append point¶
``````var point = curve.addPoint(x, y);
``````

#### Quadratic bezier curve¶

1. Create quadratic bezier curve object
``````var curve = new Phaser.Curves.QuadraticBezier(startPoint, controlPoint, endPoint); // point: {x, y}
``````
or
``````var points = [
x0, y0,     // start point
x1, y1,     // control point
x2, y2      // end point
];
var curve = new Phaser.Curves.QuadraticBezier(points);
``````
2. Add to path
``````path.add(curve);
``````

Add quadratic bezier curve started from previous end point to next point

``````path.quadraticBezierTo(endX, endY, controlX, controlY);
``````
or
``````path.quadraticBezierTo(endPoint, controlPoint);  // point : Phaser.Math.Vector2
``````

#### Cubic bezier curve¶

1. Create quadratic bezier curve object
``````var curve = new Phaser.Curves.CubicBezier(startPoint, controlPoint1, controlPoint2, endPoint); // point: {x, y}
``````
or
``````var points = [
x0, y0,     // start point
x1, y1,     // control point1
x2, y2,     // control point2
x3, y3      // end point
];
var curve = new Phaser.Curves.CubicBezier(points);
``````
2. Add to path
``````path.add(curve);
``````

Add cubic bezier curve started from previous end point to next point

``````path.cubicBezierTo(endX, endY, control1X, control1Y, control2X, control2Y);
``````
or
``````path.cubicBezierTo(endPoint, controlPoint1, controlPoint2);  // point : Phaser.Math.Vector2
``````

#### Move to point¶

``````path.moveTo(x, y);
``````

#### Add curves from JSON¶

``````path.fromJSON(json);
``````

### Get curves¶

``````var curves = path.curves;
``````

#### Get curve at t¶

``````var curve = path.getCurveAt(t);
``````
• `t` : The normalized location on the Path. Between `0` and `1`

### Draw on graphics¶

``````path.draw(graphics);
// path.draw(graphics, pointsTotal);
``````
• `pointsTotal` : The number of points to draw for each Curve.

or

``````curve.draw(graphics);
// curve.draw(graphics, pointsTotal);
``````
• `pointsTotal` : The resolution of the curve.

### Point¶

• Get point
``````var out = path.getPoint(t);  // t: 0 ~ 1
// var out = path.getPoint(t, out);  // modify out
``````
or
``````var out = curve.getPoint(t);  // t: 0 ~ 1
// var out = curve.getPoint(t, out);  // modify out
``````
Distance of path from start point to target point (out) might not linear with t.
• Get random point
``````var out = path.getRandomPoint();
// var out = path.getRandomPoint(out);  // modify out
``````
or
``````var out = curve.getRandomPoint();
// var out = curve.getRandomPoint(out);  // modify out
``````
• Get n points
• Path
``````var points = path.getPoints(divisions);
``````
• `divisions` : The number of divisions per resolution per curve.
• Curve
``````var points = curve.getPoints(divisions);
// var points = curve.getPoints(divisions, undefined, out);
``````
or
``````var points = curve.getPoints(undefined, stepRate);
// var points = curve.getPoints(undefined, stepRate, out);
``````
• `divisions` : The number of divisions in this curve.
1. `divisions`, if `divisions > 0`, else
2. `this.getLength / stepRate`, if `stepRate > 0`, else
3. `defaultDivisions`
• `points` : Return `1 + divisions` points.
• Get (n+1) points equally spaced out along the curve
``````var points = path.getSpacedPoints(n);
``````
or
``````var points = curve.getSpacedPoints(n);
// var points = curve.getSpacedPoints(undefined, stepRate);
// var points = curve.getSpacedPoints(divisions, stepRate, out);
``````
• Get points spaced out n distance pixels apart
``````var points = curve.getDistancePoints(n)
``````
The smaller the distance, the larger the array will be.
Path object does NOT support this feature yet.
• Get start point
``````var out = path.getStartPoint();
// var out = path.getStartPoint(out);  // modify out
``````
or
``````var out = curve.getStartPoint();
// var out = curve.getStartPoint(out);  // modify out
``````
• Get end point
``````var out = path.getEndPoint();
// var out = path.getEndPoint(out);  // modify out
``````
or
``````var out = curve.getEndPoint();
// var out = curve.getEndPoint(out);  // modify out
``````
• Get t (0~1) from distance
``````var t = curve.getTFromDistance(d);
``````
Path object does NOT support this feature yet.
• Get tangent
``````var out = path.getTangent(t);  // t: 0~1
// var out = path.getTangent(t, out);  // modify out
``````
or
``````var out = curve.getTangent(t);  // t: 0~1
// var out = curve.getTangent(t, out);  // modify out
``````

### Length of path¶

``````var l = path.getLength();
``````
or
``````var l = curve.getLength();
``````

Length of path/curve will be cached.

#### Update length¶

``````path.updateArcLengths();
``````
or
``````curve.updateArcLengths();
``````

### Curves to JSON¶

``````var json = path.toJSON();
``````
or
``````var json = curve.toJSON();
``````

### Bounds¶

Get bounds

``````var out = path.getBounds();    // accuracy = 16
// var out = path.getBounds(out);
// var out = path.getBounds(out, accuracy);
``````
or
``````var out = curve.getBounds();    // accuracy = 16
// var out = curve.getBounds(out);
// var out = curve.getBounds(out, accuracy);
``````

### Destroy¶

``````path.destroy();
``````