Skip to content

Instantly share code, notes, and snippets.

@Dalimil
Created July 11, 2016 15:56
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save Dalimil/3daf2a0c531d7d030deb37a7bfeff454 to your computer and use it in GitHub Desktop.
Save Dalimil/3daf2a0c531d7d030deb37a7bfeff454 to your computer and use it in GitHub Desktop.
Basic Vector2 JavaScript Math Helper Class
function Vector2(x, y) {
this.x = (x === undefined) ? 0 : x;
this.y = (y === undefined) ? 0 : y;
}
Vector2.prototype = {
set: function(x, y) {
this.x = x || 0;
this.y = y || 0;
},
clone: function() {
return new Vector2(this.x, this.y)
},
add: function(vector) {
return new Vector2(this.x + vector.x, this.y + vector.y);
},
subtract: function(vector) {
return new Vector2(this.x - vector.x, this.y - vector.y);
},
scale: function(scalar) {
return new Vector2(this.x * scalar, this.y * scalar);
},
dot: function(vector) {
return (this.x * vector.x + this.y + vector.y);
},
moveTowards: function(vector, t) {
// Linearly interpolates between vectors A and B by t.
// t = 0 returns A, t = 1 returns B
t = Math.min(t, 1); // still allow negative t
var diff = vector.subtract(this);
return this.add(diff.scale(t));
},
magnitude: function() {
return Math.sqrt(this.magnitudeSqr());
},
magnitudeSqr: function() {
return (this.x * this.x + this.y * this.y);
},
distance: function (vector) {
return Math.sqrt(this.distanceSqr(vector));
},
distanceSqr: function (vector) {
var deltaX = this.x - vector.x;
var deltaY = this.y - vector.y;
return (deltaX * deltaX + deltaY * deltaY);
},
normalize: function() {
var mag = this.magnitude();
var vector = this.clone();
if(Math.abs(mag) < 1e-9) {
vector.x = 0;
vector.y = 0;
} else {
vector.x /= mag;
vector.y /= mag;
}
return vector;
},
angle: function() {
return Math.atan2(this.y, this.x);
},
rotate: function(alpha) {
var cos = Math.cos(alpha);
var sin = Math.sin(alpha);
var vector = new Vector2();
vector.x = this.x * cos - this.y * sin;
vector.y = this.x * sin + this.y * cos;
return vector;
},
toPrecision: function(precision) {
var vector = this.clone();
vector.x = vector.x.toFixed(precision);
vector.y = vector.y.toFixed(precision);
return vector;
},
toString: function () {
var vector = this.toPrecision(1);
return ("[" + vector.x + "; " + vector.y + "]");
}
};
@Tunied
Copy link

Tunied commented May 26, 2018

dot: function(vector) {
return (this.x * vector.x + this.y* vector.y);
}
:)

@christo8989
Copy link

I think there's a bug in toPrecision. The code vector.[x|y].toFixed(precision) returns a string. It should be a number.
vector.x = Number(vector.x.toFixed(precision); and the same for "y".

Also, you should use const instead of var, especially since this class is so immutable.

@aaronfranke
Copy link

How does (x === undefined) ? 0 : x; work? How does x || 0; work? Why is one used in function Vector2 and another used in set?

@dsetzer
Copy link

dsetzer commented Mar 27, 2020

I think there's a bug in toPrecision. The code vector.[x|y].toFixed(precision) returns a string. It should be a number.
vector.x = Number(vector.x.toFixed(precision); and the same for "y".

Also, you should use const instead of var, especially since this class is so immutable.

That's actually supposed to be a string
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

toFixed() returns a string representation of numObj that does not use exponential notation and has exactly digits digits after the decimal place.

@subfluid
Copy link

How does (x === undefined) ? 0 : x; work? How does x || 0; work? Why is one used in function Vector2 and another used in set?

This is Javascript's ternary operator. It's basically an if-statement compressed onto a single expression.
The format is boolean?value1:value2, value1 is returned when boolean is true, elsewise return value2.

@201flaviosilva
Copy link

201flaviosilva commented Jun 13, 2022

Hey, I know this discussion it's kinda dead, but I kinda "improved" this code (just documented and add some new nice functions) :)

(@Dalimil) If you/any one want to update/use the code, it's OK, I am happy to help: https://gitlab.com/201flaviosilva/utilsjs/-/blob/2b165a247e22cd22cb38dae11d0da1819b741303/src/Vector2.js

(Any problem/but/etc... pls report 😅 )

@miquelvir
Copy link

Just lost so much time because of a bug in this code.... Dot is implemented as:

dot: function(vector) {
     return (this.x * vector.x + this.y + vector.y);
},

but should be:

dot: function(vector) {
     return (this.x * vector.x + this.y * vector.y);
},

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment