# xeogl / API Docs

API Docs for: 1.0.0

# Path

Extends Path
Module: curves
Parent Module: xeogl

A Path is a complex curved path constructed from various Curve subtypes.

## Usage

#### Animation along a SplineCurve

Create a Path containing a CubicBezierCurve, a QuadraticBezierCurve and a SplineCurve, subscribe to updates on its point and tangent properties, then vary its t property over time:

``````var path = new xeogl.Path({
curves: [
new xeogl.CubicBezierCurve({
v0: [-10, 0, 0],
v1: [-5, 15, 0],
v2: [20, 15, 0],
v3: [10, 0, 0]
}),
v0: [10, 0, 0],
v1: [20, 15, 0],
v2: [10, 0, 0]
}),
new xeogl.SplineCurve({
points: [
[10, 0, 0],
[-5, 15, 0],
[20, 15, 0],
[10, 0, 0]
]
})
]
});

path.on("point", function(point) {
this.log("path.point=" + JSON.stringify(point));
});

path.on("tangent", function(tangent) {
this.log("path.tangent=" + JSON.stringify(tangent));
});

path.on("t", function(t) {
this.log("path.t=" + t);
});

path.scene.on("tick", function(e) {
path.t = (e.time - e.startTime) * 0.01;
});
``````

#### Randomly sampling points

Use Path's Path/getPoint:method and Path/getTangent:method methods to sample the point and vector at a given t:

``````path.scene.on("tick", function(e) {

var t = (e.time - e.startTime) * 0.01;

var point = path.getPoint(t);
var tangent = path.getTangent(t);

this.log("t=" + t + ", point=" + JSON.stringify(point) + ", tangent=" + JSON.stringify(tangent));
});
``````

#### Sampling multiple points

Use Path's Path/getPoints:method method to sample a list of equidistant points along it. In the snippet below, we'll build a Geometry that renders a line along the path. Note that we need to flatten the points array for consumption by the Geometry.

``````var geometry = new xeogl.Geometry({
positions: xeogl.math.flatten(path.getPoints(50))
});
``````

## Constructor

### `Path`

(
• `[scene]`
• `[cfg]`
)

#### Parameters:

• `[scene]` Scene optional

Parent Scene.

• `[cfg]` optional

Fly configuration

• `[id]` String optional

Optional ID, unique among all components in the parent Scene, generated automatically when omitted.

• `[meta]` String:Object optional

Optional map of user-defined metadata to attach to this Path.

• `[paths=[]]` #crossLink "path" optional

• `[t=0]` optional

Current position on this Path, in range between 0..1.

## Properties

### `curves`

Array of Spline, Path, QuadraticBezierCurve or CubicBezierCurve

The Curves in this Path.

Fires a curves event on change.

Default: []

### `length`

Number

Length of this Path, which is the cumulative length of all Curves currently in curves.

### `point`

Array of Number

Point on this Path corresponding to the current value of t.

### `t`

Number

Current point of progress along this Path.

Automatically clamps to range [0..1].

Fires a t event on change.

Default: 0

### `type`

String final

JavaScript class name for this Component.

## Events

### `curves`

Fired whenever this Path's curves property changes.

• `value` Object

The property's new value

### `t`

Fired whenever this Path's t property changes.

• `value` Object