darbicus/vector.html

## vector.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

</body>
</html>

## vector.js
(function (w) {
  function Vector(x, y, z) {

    this.points = [x || 0, y || 0, z || 0];
    this.points._mag = Math.sqrt(this.points[0] * this.points[0] + this.points[1] * this.points[1] + this.points[2] * this.points[2]);
    this.points.update = function () {
      this._mag = Math.sqrt(this[0] * this[0] + this[1] * this[1] + this[2] * this[2]);
    };
    this.points._angle = Math.atan2(this.points[1], this.points[0]);
    Object.defineProperty(this.points, "angle", {
      get: function () {
        return this._angle;
      },
      set: function (e) {
        var smallmag = Math.sqrt(this[0] * this[0] + this[1] * this[1]);
        this[0] = Math.cos(e) * smallmag;
        this[1] = Math.sin(e) * smallmag;
        this._angle = e;
      },
      enumerable: true,
      configurable: true
    });

    Object.defineProperty(this.points, "mag", {
      get: function () {
        return this._mag;
      },
      set: function (e) {
        var ratio = e / this._mag;
        this[0] *= ratio;
        this[1] *= ratio;
        this[2] *= ratio;
        this._mag = e;
        return this;
      },
      enumerable: true,
      configurable: true
    });
    Object.defineProperty(this.points, "x", {
      get: function () {
        return this[0];
      },
      set: function (e) {
        this[0] = e;
        this.update();
        return this;
      },
      enumerable: true,
      configurable: true
    });
    Object.defineProperty(this.points, "y", {
      get: function () {
        return this[1];
      },
      set: function (e) {
        this[1] = e;
        this.update();
        return this;
      },
      enumerable: true,
      configurable: true
    });
    Object.defineProperty(this.points, "z", {
      get: function () {
        return this[2];
      },
      set: function (e) {
        this[2] = e;
        this.update();
      },
      enumerable: true,
      configurable: true
    });
    this.points.toString = function(){return this.join(", ");};
    return this.points;
  }
  Vector.prototype.cross = function (a, b) {
      return vector((a.y * b.z - a.z * b.y) / (a.mag + b.mag), (a.z * b.x - a.x * b.z), (a.x * b.y - a.y * b.x));
    };
    Vector.prototype.dist = function (v1, v2) {
      return Math.sqrt((v1.x - v2.x) * (v1.x - v2.x) + (v1.y * v2.y) * (v1.y * v2.y));
    };
    Vector.prototype.dot = function (v1, v2) {
      return v1.x * v2.x + v1.y * v2.y + v1.z * v2.z;
    };
  w.Vector = Vector.prototype;
  w.vector = Vector;
})(window);
var a = vector(10, 3, 1);
var b = vector(5, 5, 5);
a.mag = 50;
b.mag = 50;
document.body.innerHTML += Vector.dot(a, b) / (a.mag * b.mag) + "</br>";
document.body.innerHTML += a.mag + "</br>";
document.body.innerHTML += b.mag + "</br>";
document.body.innerHTML += Vector.cross(a, b) + "</br>";
document.body.innerHTML += b + "</br>";
var can = document.createElement("canvas");
var c = can.getContext("2d");
document.body.appendChild(can);
can.s = getComputedStyle(can);
c.translate(parseInt(can.s.width,10) / 2, parseInt(can.s.height,10) / 2);

c.showVectors = function(){
  [].slice.call(arguments,0).forEach(function(e,i,a){c.beginPath();c.moveTo(0,0);c.lineTo(e.x,e.y);c.strokeStyle = "RGB("+e.x/e.mag*255+","+e.y/e.mag*255+","+e.z/e.mag*255+")";c.stroke();c.closePath();});
};c.showVectors(a,b,(Vector.cross(a,b)));
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>

	</body>
	</html>
	(function (w) {
	function Vector(x, y, z) {

	this.points = [x \|\| 0, y \|\| 0, z \|\| 0];
	this.points._mag = Math.sqrt(this.points[0] * this.points[0] + this.points[1] * this.points[1] + this.points[2] * this.points[2]);
	this.points.update = function () {
	this._mag = Math.sqrt(this[0] * this[0] + this[1] * this[1] + this[2] * this[2]);
	};
	this.points._angle = Math.atan2(this.points[1], this.points[0]);
	Object.defineProperty(this.points, "angle", {
	get: function () {
	return this._angle;
	},
	set: function (e) {
	var smallmag = Math.sqrt(this[0] * this[0] + this[1] * this[1]);
	this[0] = Math.cos(e) * smallmag;
	this[1] = Math.sin(e) * smallmag;
	this._angle = e;
	},
	enumerable: true,
	configurable: true
	});

	Object.defineProperty(this.points, "mag", {
	get: function () {
	return this._mag;
	},
	set: function (e) {
	var ratio = e / this._mag;
	this[0] *= ratio;
	this[1] *= ratio;
	this[2] *= ratio;
	this._mag = e;
	return this;
	},
	enumerable: true,
	configurable: true
	});
	Object.defineProperty(this.points, "x", {
	get: function () {
	return this[0];
	},
	set: function (e) {
	this[0] = e;
	this.update();
	return this;
	},
	enumerable: true,
	configurable: true
	});
	Object.defineProperty(this.points, "y", {
	get: function () {
	return this[1];
	},
	set: function (e) {
	this[1] = e;
	this.update();
	return this;
	},
	enumerable: true,
	configurable: true
	});
	Object.defineProperty(this.points, "z", {
	get: function () {
	return this[2];
	},
	set: function (e) {
	this[2] = e;
	this.update();
	},
	enumerable: true,
	configurable: true
	});
	this.points.toString = function(){return this.join(", ");};
	return this.points;
	}
	Vector.prototype.cross = function (a, b) {
	return vector((a.y * b.z - a.z * b.y) / (a.mag + b.mag), (a.z * b.x - a.x * b.z), (a.x * b.y - a.y * b.x));
	};
	Vector.prototype.dist = function (v1, v2) {
	return Math.sqrt((v1.x - v2.x) * (v1.x - v2.x) + (v1.y * v2.y) * (v1.y * v2.y));
	};
	Vector.prototype.dot = function (v1, v2) {
	return v1.x * v2.x + v1.y * v2.y + v1.z * v2.z;
	};
	w.Vector = Vector.prototype;
	w.vector = Vector;
	})(window);
	var a = vector(10, 3, 1);
	var b = vector(5, 5, 5);
	a.mag = 50;
	b.mag = 50;
	document.body.innerHTML += Vector.dot(a, b) / (a.mag * b.mag) + "</br>";
	document.body.innerHTML += a.mag + "</br>";
	document.body.innerHTML += b.mag + "</br>";
	document.body.innerHTML += Vector.cross(a, b) + "</br>";
	document.body.innerHTML += b + "</br>";
	var can = document.createElement("canvas");
	var c = can.getContext("2d");
	document.body.appendChild(can);
	can.s = getComputedStyle(can);
	c.translate(parseInt(can.s.width,10) / 2, parseInt(can.s.height,10) / 2);

	c.showVectors = function(){
	[].slice.call(arguments,0).forEach(function(e,i,a){c.beginPath();c.moveTo(0,0);c.lineTo(e.x,e.y);c.strokeStyle = "RGB("+e.x/e.mag255+","+e.y/e.mag255+","+e.z/e.mag*255+")";c.stroke();c.closePath();});
	};c.showVectors(a,b,(Vector.cross(a,b)));