An object with properties matching those from the objects in the `values`

array, with an array assigned to each property populated with an object for each Bezier. The Bezier objects will contain `a, b, c`

(and `d`

if `quadratic`

is not `true`

) properties for the anchors and control points.

## GreenSock Docs (HTML5/JS)

# BezierPlugin.bezierThrough()

[static] Takes an array that contains objects (could be Points, could be generic objects with any number of properties but they should all match in terms of the names of properties like [{x:0, y:0, scaleX:0.5}, {x:100, y:-200, scaleX:1.2}, {x:300, y:20, scaleX:0.8}]) and plots Bezier segments THROUGH those values and returns an array containing a generic object for each Bezier segment.

### Parameters

## values: Array

An array containing generic objects with matching properties (or Point instances) through which the Beziers should be plotted, like `[{x:0, y:0, scaleX:0.5}, {x:100, y:-200, scaleX:1.2}, {x:300, y:20, scaleX:0.8}]`

## curviness: Number

(default = `1`

)` — A number (default: 1) that controls the strength of the curves that are plotted through the values. A curviness of 0 would be result in straight lines, 1 is normal curviness, and 2 would be extreme curves. Use any value.`

## quadratic: Boolean

(default = `false`

)` — if `

`true`

, quadratic Bezier information will be returned instead of cubic Bezier data, thus each object in the returned array will only contain a, b, and c properties where b is the control point.

## correlate: String

(default =`x, y, z, left, top, right, bottom, marginLeft, marginTop, marginRight, marginBottom, paddingLeft, paddingTop, paddingRight, paddingBottom`

)` — a comma-delimited list of property names whose relative distances should be correlated with each other when calculating the curvature of the Bezier through the values (the default is`

`"x, y, z, left, top, right, bottom, marginLeft, marginTop, marginRight, marginBottom, paddingLeft, paddingTop, paddingRight, paddingBottom"`

because those are almost always properties that should be correlated).

## prepend: Object

(default = `null`

)` — [optional] an object to treat as though it is the first element in the `

`values`

array (typically only used internally for adding a tween’s starting values)

## calcDifs: Boolean

(default = `false`

)` — if `

`true`

, `da, ca,`

and `ba`

properties will be added to each bezier segment indicating (d – a), (c – a), and (b – a) which is typically only useful for improving animation performance slightly by precalculating those values instead of doing it each time the tween updates.

### Returns : Object

#### Details

Takes an array that contains objects (could be Points, could be generic objects with any number of properties but they should all match in terms of the names of properties like `[{x:0, y:0, scaleX:0.5}, {x:100, y:-200, scaleX:1.2}, {x:300, y:20, scaleX:0.8}]`

) and plots Bezier segments THROUGH those values and returns an array containing a generic object for each Bezier segment. By default Cubic Beziers (which use 2 control points per segment) are used but you can optionally request Quadratic Beziers (1 control point per segment) instead using the `quadratic`

parameter.

For Cubic Beziers (the default), each segment object will have `a, b, c,`

and `d`

properties:

**a**- the starting anchor value of the Cubic Bezier segment. For example,`bezierThrough([{x:0, y:0, scaleX:0.5}, {x:100, y:-200, scaleX:1.2}, {x:300, y:20, scaleX:0.8}]);`

would return an object with "x", "y", and "scaleX" properties, each containing an array of objects, one per Bezier segment and you could access the first Bezier's initial anchor values like:`myReturnedObject.x[0].a, myReturnedObject.y[0].a`

, and`myReturnedObject.scaleX[0].a`

**b**- the first control point value of the Cubic Bezier segment. For example,`bezierThrough([{x:0, y:0, scaleX:0.5}, {x:100, y:-200, scaleX:1.2}, {x:300, y:20, scaleX:0.8}]);`

would return an object with "x", "y", and "scaleX" properties, each containing an array of objects, one per Bezier segment and you could access the first Bezier's first control point values like:`myReturnedObject.x[0].b, myReturnedObject.y[0].b`

, and`myReturnedObject.scaleX[0].b`

**c**- the second control point value of the Cubic Bezier segment. For example,`bezierThrough([{x:0, y:0, scaleX:0.5}, {x:100, y:-200, scaleX:1.2}, {x:300, y:20, scaleX:0.8}]);`

would return an object with "x", "y", and "scaleX" properties, each containing an array of objects, one per Bezier segment and you could access the first Bezier's second control point values like:`myReturnedObject.x[0].c, myReturnedObject.y[0].c`

, and`myReturnedObject.scaleX[0].c`

**d**- the final anchor value of the Cubic Bezier segment. For example,`bezierThrough([{x:0, y:0, scaleX:0.5}, {x:100, y:-200, scaleX:1.2}, {x:300, y:20, scaleX:0.8}]);`

would return an object with "x", "y", and "scaleX" properties, each containing an array of objects, one per Bezier segment and you could access the first Bezier's final anchor values like:`myReturnedObject.x[0].d, myReturnedObject.y[0].d`

, and`myReturnedObject.scaleX[0].d`

If you set the `quadratic`

parameter to `true`

, all of the Bezier segments will contain `a, b,`

and `c`

properties (**NOT** `d`

) where `b`

is the only control point. This can be very useful because some drawing APIs only understand Quadratic Beziers. There are 4 times as many Quadratic Beziers returned as Cubic Beziers, though, due to the fact that the internal algorithm uses Cubic Beziers to plot the points (they're much more flexible) and then splits each into 4 Quadratic ones.

//input:

var beziers = BezierPlugin.bezierThrough([{x:0, y:0}, {x:250, y:400}, {x:500, y:0}]);

//output:

{

x:[{a:0, b:0, c:125, d:250}, {a:250, b:375, c:500, d:500}],

y:[{a:0, b:0, c:400, d:400}, {a:400, b:400, c:0, d:0}]

}

//get quadratic beziers so that we can use the canvas's drawing API...

var beziers = BezierPlugin.bezierThrough([{x:0, y:0}, {x:250, y:400}, {x:500, y:0}], 1, true);

var bx = beziers.x; //the "x" Beziers

var by = beziers.y; //the "y" Beziers