API Docs for:

Path

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

Overview

Examples

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 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

      IDs or instances of }{{/crossLink}} subtypes to add to this Path.

    • [t=0] optional

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

Index

Properties

Events

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

Events

curves

Fired whenever this Path's curves property changes.

Event Payload:

  • value Object

    The property's new value

t

Fired whenever this Path's t property changes.

Event Payload:

  • value Object

    The property's new value