Pixi.js: Vector class

[gabesmed]

Hey PIXI crew! I'm using PIXI for a project and I'm loving it. The most well-architected free javascript scene-graph & graphics framework out there I think. Kudos!

So I'm using it and I quickly found the need for a basic 2D vector class giving features like dot-product, length, etc. Seems like others might want it. Do you think a vector class has a place in the PIXI Core? If so, happy to make a pull request but I wanted to ask what the best point of integration is you think. Add these methods to the Point class? Or add a new Vector class?

PS this is basically pulled from Three.JS's 2D Vector class: https://github.com/mrdoob/three.js/blob/master/src/math/Vector2.js

/*
 * @class Vector
 * @constructor 
 * @param x {Number} position of the point
 * @param y {Number} position of the point
 */
PIXI.Vector = function(x, y)
{
    /**
     * @property x 
     * @type Number
     * @default 0
     */
    this.x = x || 0;

    /**
     * @property y
     * @type Number
     * @default 0
     */
    this.y = y || 0;
};

/**
 * Creates a clone of this point
 *
 * @method clone
 * @return {Vector} a copy of the point
 */
PIXI.Vector.prototype.clone = function()
{
    return new PIXI.Vector(this.x, this.y);
};

PIXI.Vector.prototype.add = function(v) {
    this.x += v.x;
    this.y += v.y;
    return this;
};

PIXI.Vector.prototype.sub = function(v) {
    this.x -= v.x;
    this.y -= v.y;
    return this;
};

PIXI.Vector.prototype.invert = function(v) {
    this.x *= -1;
    this.y *= -1;
    return this;
};

PIXI.Vector.prototype.multiplyScalar = function(s) {
    this.x *= s;
    this.y *= s;
    return this;
};

PIXI.Vector.prototype.divideScalar = function(s) {
    if(s === 0) {
        this.x = 0;
        this.y = 0;
    } else {
        var invScalar = 1 / s;
        this.x *= invScalar;
        this.y *= invScalar;
    }
    return this;
};

PIXI.Vector.prototype.dot = function(v) {
    return this.x * v.x + this.y * v.y;
};

PIXI.Vector.prototype.length = function(v) {
    return Math.sqrt(this.x * this.x + this.y * this.y);
};

PIXI.Vector.prototype.lengthSq = function() {
    return this.x * this.x + this.y * this.y;
};

PIXI.Vector.prototype.normalize = function() {
    return this.divideScalar(this.length());
};

PIXI.Vector.prototype.distanceTo = function(v) {
    return Math.sqrt(this.distanceToSq(v));
};

PIXI.Vector.prototype.distanceToSq = function(v) {
    var dx = this.x - v.x, dy = this.y - v.y;
    return dx * dx + dy * dy;
};

PIXI.Vector.prototype.set = function(x, y) {
    this.x = x;
    this.y = y;
    return this;
};

PIXI.Vector.prototype.setX = function(x) {
    this.x = x;
    return this;
};

PIXI.Vector.prototype.setY = function(y) {
    this.y = y;
    return this;
};

PIXI.Vector.prototype.setLength = function(l) {
    var oldLength = this.length();
    if(oldLength !== 0 && l !== oldLength) {
        this.multiplyScalar(l / oldLength);
    }
    return this;
};

PIXI.Vector.prototype.invert = function(v) {
    this.x *= -1;
    this.y *= -1;
    return this;
};

PIXI.Vector.prototype.lerp = function(v, alpha) {
    this.x += (v.x - this.x) * alpha;
    this.y += (v.y - this.y) * alpha;
    return this;
};

PIXI.Vector.prototype.rad = function() {
    return Math.atan2(this.x, this.y);
};

PIXI.Vector.prototype.deg = function() {
    return this.rad() * 180 / Math.PI;
};

PIXI.Vector.prototype.equals = function(v) {
    return this.x === v.x && this.y === v.y;
};

PIXI.Vector.prototype.rotate = function(theta) {
    var xtemp = this.x;
    this.x = this.x * Math.cos(theta) - this.y * Math.sin(theta);
    this.y = xtemp * Math.sin(theta) + this.y * Math.cos(theta);
    return this;
};

// constructor
PIXI.Vector.prototype.constructor = PIXI.Vector;

[englercj]

Nah, Pixi really should only contain what pixi needs. Vector is something most people will want their own version of anyway, so most people would have their own version.

If you want to patch pixi to use your Vector class you can do:

PIXI.Point = MyVectorClass;

That way yours is used everywhere. There isn't a need for a full vector class in PIXI (as of yet) so we probably wont put one in there.

[raffomania]

@englercj I would like to do this, but with PIXI 4 it seems that PIXI.Point is only a getter. How would I go about monkey patching it with additional functionality?

[ivanpopelyshev]

You'll have to patch both Point and ObservablePoint, just add some methods in their prototype.

Observable uses "_x" and "_y" instead and has callback for setters.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.