Path
A Path is a complex curved path constructed from various Curve subtypes.
Overview
- A Path can be constructed from these Curve subtypes: SplineCurve, CubicBezierCurve and QuadraticBezierCurve.
- You can sample a point and a tangent vector on a Path for any given value of t in the range [0..1].
- When you set t on a Path, its point and tangent properties will update accordingly.
Examples
- CubicBezierCurve example
- Tweening position along a QuadraticBezierCurve
- Tweening color along a QuadraticBezierCurve
- SplineCurve example
- Path example
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]
}),
new xeogl.QuadraticBezierCurve({
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 optionalParent Scene.
-
[cfg]optionalFly configuration
-
[id]String optionalOptional ID, unique among all components in the parent Scene, generated automatically when omitted.
-
[meta]String:Object optionalOptional map of user-defined metadata to attach to this Path.
-
[paths=[]#crossLink "path" optionalIDs or instances of }{{/crossLink}} subtypes to add to this Path.
-
[t=0]optionalCurrent position on this Path, in range between 0..1.
-
Properties
curves
Array of Spline, Path, QuadraticBezierCurve or CubicBezierCurve
Default: []
length
Number
t
Number
Current point of progress along this Path.
Automatically clamps to range [0..1].
Fires a t event on change.
Default: 0