phaser/src/curves/CubicBezierCurve.js

222 lines
6.2 KiB
JavaScript
Raw Normal View History

2018-02-12 16:01:20 +00:00
/**
* @author Richard Davey <rich@photonstorm.com>
2022-02-28 14:29:51 +00:00
* @copyright 2022 Photon Storm Ltd.
2019-05-10 15:15:04 +00:00
* @license {@link https://opensource.org/licenses/MIT|MIT License}
2018-02-12 16:01:20 +00:00
*/
// Based on the three.js Curve classes created by [zz85](http://www.lab4games.net/zz85/blog)
2018-02-13 00:40:51 +00:00
var Class = require('../utils/Class');
var CubicBezier = require('../math/interpolation/CubicBezierInterpolation');
var Curve = require('./Curve');
var Vector2 = require('../math/Vector2');
2018-02-07 15:27:21 +00:00
/**
* @classdesc
2018-09-27 14:29:32 +00:00
* A higher-order Bézier curve constructed of four points.
2018-02-07 15:27:21 +00:00
*
2018-05-23 14:04:54 +00:00
* @class CubicBezier
2018-02-07 15:27:21 +00:00
* @extends Phaser.Curves.Curve
2018-10-10 09:49:13 +00:00
* @memberof Phaser.Curves
2018-02-07 15:27:21 +00:00
* @constructor
* @since 3.0.0
*
2018-03-20 14:58:02 +00:00
* @param {(Phaser.Math.Vector2|Phaser.Math.Vector2[])} p0 - Start point, or an array of point pairs.
2018-02-13 00:40:51 +00:00
* @param {Phaser.Math.Vector2} p1 - Control Point 1.
* @param {Phaser.Math.Vector2} p2 - Control Point 2.
* @param {Phaser.Math.Vector2} p3 - End Point.
2018-02-07 15:27:21 +00:00
*/
var CubicBezierCurve = new Class({
Extends: Curve,
initialize:
function CubicBezierCurve (p0, p1, p2, p3)
{
Curve.call(this, 'CubicBezierCurve');
if (Array.isArray(p0))
{
p3 = new Vector2(p0[6], p0[7]);
p2 = new Vector2(p0[4], p0[5]);
p1 = new Vector2(p0[2], p0[3]);
p0 = new Vector2(p0[0], p0[1]);
}
2018-01-25 05:26:13 +00:00
/**
2018-09-27 14:29:32 +00:00
* The start point of this curve.
2018-01-25 05:26:13 +00:00
*
2018-05-23 22:09:31 +00:00
* @name Phaser.Curves.CubicBezier#p0
2018-02-13 00:40:51 +00:00
* @type {Phaser.Math.Vector2}
2018-01-25 05:26:13 +00:00
* @since 3.0.0
*/
this.p0 = p0;
2018-01-25 05:26:13 +00:00
/**
2018-09-27 14:29:32 +00:00
* The first control point of this curve.
2018-01-25 05:26:13 +00:00
*
2018-05-23 22:09:31 +00:00
* @name Phaser.Curves.CubicBezier#p1
2018-02-13 00:40:51 +00:00
* @type {Phaser.Math.Vector2}
2018-01-25 05:26:13 +00:00
* @since 3.0.0
*/
this.p1 = p1;
2018-01-25 05:26:13 +00:00
/**
2018-09-27 14:29:32 +00:00
* The second control point of this curve.
2018-01-25 05:26:13 +00:00
*
2018-05-23 22:09:31 +00:00
* @name Phaser.Curves.CubicBezier#p2
2018-02-13 00:40:51 +00:00
* @type {Phaser.Math.Vector2}
2018-01-25 05:26:13 +00:00
* @since 3.0.0
*/
this.p2 = p2;
2018-01-25 05:26:13 +00:00
/**
2018-09-27 14:29:32 +00:00
* The end point of this curve.
2018-01-25 05:26:13 +00:00
*
2018-05-23 22:09:31 +00:00
* @name Phaser.Curves.CubicBezier#p3
2018-02-13 00:40:51 +00:00
* @type {Phaser.Math.Vector2}
2018-01-25 05:26:13 +00:00
* @since 3.0.0
*/
this.p3 = p3;
},
2018-01-25 05:26:13 +00:00
/**
2018-03-18 13:43:37 +00:00
* Gets the starting point on the curve.
2018-01-25 05:26:13 +00:00
*
2018-05-23 22:09:31 +00:00
* @method Phaser.Curves.CubicBezier#getStartPoint
2018-01-25 05:26:13 +00:00
* @since 3.0.0
*
2018-03-27 12:06:24 +00:00
* @generic {Phaser.Math.Vector2} O - [out,$return]
*
2018-03-18 13:43:37 +00:00
* @param {Phaser.Math.Vector2} [out] - A Vector2 object to store the result in. If not given will be created.
2018-01-25 05:26:13 +00:00
*
2018-03-18 13:43:37 +00:00
* @return {Phaser.Math.Vector2} The coordinates of the point on the curve. If an `out` object was given this will be returned.
2018-01-25 05:26:13 +00:00
*/
getStartPoint: function (out)
{
if (out === undefined) { out = new Vector2(); }
return out.copy(this.p0);
},
2018-01-25 05:26:13 +00:00
/**
2018-09-27 14:29:32 +00:00
* Returns the resolution of this curve.
2018-01-25 05:26:13 +00:00
*
2018-05-23 22:09:31 +00:00
* @method Phaser.Curves.CubicBezier#getResolution
2018-01-25 05:26:13 +00:00
* @since 3.0.0
*
2018-03-18 13:43:37 +00:00
* @param {number} divisions - The amount of divisions used by this curve.
2018-01-25 05:26:13 +00:00
*
2018-03-18 13:43:37 +00:00
* @return {number} The resolution of the curve.
2018-01-25 05:26:13 +00:00
*/
2017-09-21 16:12:16 +00:00
getResolution: function (divisions)
{
return divisions;
},
2018-01-25 05:26:13 +00:00
/**
2018-03-18 13:43:37 +00:00
* Get point at relative position in curve according to length.
2018-01-25 05:26:13 +00:00
*
2018-05-23 22:09:31 +00:00
* @method Phaser.Curves.CubicBezier#getPoint
2018-01-25 05:26:13 +00:00
* @since 3.0.0
*
2018-03-27 12:06:24 +00:00
* @generic {Phaser.Math.Vector2} O - [out,$return]
*
* @param {number} t - The position along the curve to return. Where 0 is the start and 1 is the end.
2018-03-18 13:43:37 +00:00
* @param {Phaser.Math.Vector2} [out] - A Vector2 object to store the result in. If not given will be created.
2018-01-25 05:26:13 +00:00
*
2018-03-18 13:43:37 +00:00
* @return {Phaser.Math.Vector2} The coordinates of the point on the curve. If an `out` object was given this will be returned.
2018-01-25 05:26:13 +00:00
*/
getPoint: function (t, out)
{
if (out === undefined) { out = new Vector2(); }
var p0 = this.p0;
var p1 = this.p1;
var p2 = this.p2;
var p3 = this.p3;
return out.set(CubicBezier(t, p0.x, p1.x, p2.x, p3.x), CubicBezier(t, p0.y, p1.y, p2.y, p3.y));
},
2018-01-25 05:26:13 +00:00
/**
2018-09-27 14:29:32 +00:00
* Draws this curve to the specified graphics object.
2018-01-25 05:26:13 +00:00
*
2018-05-23 22:09:31 +00:00
* @method Phaser.Curves.CubicBezier#draw
2018-01-25 05:26:13 +00:00
* @since 3.0.0
*
2018-04-18 12:39:55 +00:00
* @generic {Phaser.GameObjects.Graphics} G - [graphics,$return]
2018-03-27 12:06:24 +00:00
*
2018-09-27 14:29:32 +00:00
* @param {Phaser.GameObjects.Graphics} graphics - The graphics object this curve should be drawn to.
2020-11-23 10:22:13 +00:00
* @param {number} [pointsTotal=32] - The number of intermediary points that make up this curve. A higher number of points will result in a smoother curve.
2018-01-25 05:26:13 +00:00
*
2018-09-27 14:29:32 +00:00
* @return {Phaser.GameObjects.Graphics} The graphics object this curve was drawn to. Useful for method chaining.
2018-01-25 05:26:13 +00:00
*/
draw: function (graphics, pointsTotal)
{
if (pointsTotal === undefined) { pointsTotal = 32; }
var points = this.getPoints(pointsTotal);
graphics.beginPath();
graphics.moveTo(this.p0.x, this.p0.y);
for (var i = 1; i < points.length; i++)
{
graphics.lineTo(points[i].x, points[i].y);
}
graphics.strokePath();
// So you can chain graphics calls
return graphics;
},
2018-01-25 05:26:13 +00:00
/**
2018-09-27 14:29:32 +00:00
* Returns a JSON object that describes this curve.
2018-01-25 05:26:13 +00:00
*
2018-05-23 22:09:31 +00:00
* @method Phaser.Curves.CubicBezier#toJSON
2018-01-25 05:26:13 +00:00
* @since 3.0.0
*
2019-05-09 10:52:07 +00:00
* @return {Phaser.Types.Curves.JSONCurve} The JSON object containing this curve data.
2018-01-25 05:26:13 +00:00
*/
toJSON: function ()
{
return {
type: this.type,
points: [
this.p0.x, this.p0.y,
this.p1.x, this.p1.y,
this.p2.x, this.p2.y,
this.p3.x, this.p3.y
]
};
}
});
2018-03-18 13:43:37 +00:00
/**
2018-09-27 14:29:32 +00:00
* Generates a curve from a JSON object.
2018-03-18 13:43:37 +00:00
*
2018-05-23 22:09:31 +00:00
* @function Phaser.Curves.CubicBezier.fromJSON
2018-03-18 13:43:37 +00:00
* @since 3.0.0
*
2019-05-09 10:52:07 +00:00
* @param {Phaser.Types.Curves.JSONCurve} data - The JSON object containing this curve data.
2018-03-18 13:43:37 +00:00
*
2018-09-27 14:29:32 +00:00
* @return {Phaser.Curves.CubicBezier} The curve generated from the JSON object.
2018-03-18 13:43:37 +00:00
*/
CubicBezierCurve.fromJSON = function (data)
{
var points = data.points;
var p0 = new Vector2(points[0], points[1]);
var p1 = new Vector2(points[2], points[3]);
var p2 = new Vector2(points[4], points[5]);
var p3 = new Vector2(points[6], points[7]);
return new CubicBezierCurve(p0, p1, p2, p3);
};
module.exports = CubicBezierCurve;