JavaScript 2D Vector Math Library

A 2D vector math library built in JavaScript. Will serve as a great start point for a web game.

The first set-up is done for readability and ease-of -use as opposed to memory and GC optimization. The second set-up is completely GC friendly while sacrificing ease-of-use. The download file contains both versions.

Features the usual suspects like:

  • addition
  • multiplication
  • division
  • abs
  • length & length squared
  • dot product
  • linear interpolation
  • normalization ( unit vector )
Set-up 1

( no GC optimizations)

Download zip here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/*
Common vector operations
Author: Tudor Nita | cgrats.com
Version: 0.51

*/

function Vec2(x_,y_)
{
this.x = x_;
this.y = y_;

/* vector * scalar */
this.mulS = function (value){ return new Vec2(this.x*value, this.y*value); }
/* vector * vector */
this.mulV = function(vec_) { return new Vec2(this.x * vec_.x, this.y * vec_.y); }
/* vector / scalar */
this.divS = function(value) { return new Vec2(this.x/value,this.y/value); }
/* vector + scalar */
this.addS = function(value) { return new Vec2(this.x+value,this.y+value); }
/* vector + vector */
this.addV = function(vec_) { return new Vec2(this.x+vec_.x,this.y+vec_.y); }
/* vector - scalar */
this.subS = function(value) { return new Vec2(this.x-value, this.y-value); }
/* vector - vector */
this.subV = function(vec_) { return new Vec2(this.x-vec_.x,this.y-vec_.y); }
/* vector absolute */
this.abs = function() { return new Vec2(Math.abs(this.x),Math.abs(this.y)); }
/* dot product */
this.dot = function(vec_) { return (this.x*vec_.x+this.y*vec_.y); }
/* vector length */
this.length = function() { return Math.sqrt(this.dot(this)); }
/* vector length, squared */
this.lengthSqr = function() { return this.dot(this); }
/*
vector linear interpolation
interpolate between two vectors.
value should be in 0.0f - 1.0f space
*/

this.lerp = function(vec_, value) {
return new Vec2(
this.x+(vec_.x-this.x)*value,
this.y+(vec_.y-this.y)*value
);
}
/* normalize THIS vector */
this.normalize = function() {
var vlen = this.length();
this.x = this.x/ vlen;
this.y = this.y/ vlen;
}
}

 

Set-up 2

( GC optimized )
Download zip here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/*
       Common vector2 operations
       Ugly as hell but no GC headaches
       Author: Tudor Nita | cgrats.com
       Version: 0.6

*/

/* vector 2D structure */
function Vec2(x_,y_) {
    this.x = x_;
    this.y = y_;
}

/* vector math */
vMath = new function() {
    /* vector * scalar */
    this.mulS = function(v, value)  { v.x*=value;  v.y*=value;      }
    /* vector * vector */
    this.mulV = function(v1,v2)     { v1.x*= v2.x;v1.y*=v2.y;       }
    /* vector / scalar */
    this.divS = function(v, value)  { v.x/=value; v.y/=value;       }
    /* vector + scalar */
    this.addS = function(v, value)  { v.x+=value; v.y+=value;       }
    /* vector + vector */
    this.addV  = function(v1,v2)    { v1.x+=v2.x; v1.y+=v2.y;       }
    /* vector - scalar */
    this.subS = function(v, value)  { v.x-=value;  v.y-=value;      }
    /* vector - vector */
    this.subV = function(v1, v2)    { v1.x-=v2.x; v1.y-=v2.y;       }
    /*  vector absolute */
    this.abs = function(v)          { Math.abs(v.x); Math.abs(v.y); }
    /* dot product */
    this.dot = function(v1,v2)      { return (v1.x*vec_.x+v2.y*vec_.y); }
    /* vector length */
    this.length = function(v)       { return Math.sqrt(v.dot(v));       }
    /* distance between vectors */
    this.dist = function(v1,v2)     { return (v2.subV(v1)).length();    }
    /* vector length, squared */
    this.lengthSqr = function(v)    { return v.dot(v);                  }
    /*
        vector linear interpolation
        interpolate between two vectors.
        value should be in 0.0f - 1.0f space ( just to skip a clamp operation )
    */

    this.lerp = function(targetV2, v1,v2, value) { 
        targetV2.x = v1.x+(v2.x-v1.x)*value;
        targetV2.y = v1.y+(v2.y-v1.y)*value;
    }
    /* normalize a vector */
    this.normalize  = function(v) {
        var vlen   = v.length();
        v.x = v.x/ vlen;
        v.y = v.y/ vlen;
    }
}
More Info:

Author:  

Born from an unhealthy cross-over between a rat and a pet hamster. Likes cheese, and chewing his way through virtual cardboard walls.

Original photo:  Jakob.scholbach

Keytags:  , , , , , , , , , ,

Related Stuff:

JS csv reader

Comments disabled for maintenance. Use the contact form for questions.

About the authors:

Tudor:

Programmer and 3D enthusiast. Teaches web design, builds games and maintains this site in his spare time.

Personal portfolio

Iulian:

2D/ 3D artist. Loves game& product art.

Personal portfolio

Vlad:

2D/ 3D artist. Works as a print designer and does 3D art in his spare time.

Personal portfolio