# Vector2d

## In this example below you will see how to do a Vector2d with some HTML / CSS and JavascriptLittle vector 2d utility I use for some of my pens. Grab if you need!

This awesome code was written by Godje, you can see more from this user in the personal repository.
You can find the original code on Codepen.io

#### Technologies

• HTML
• CSS
• JavaScript
``````<!DOCTYPE html>
<html lang="en" >

<meta charset="UTF-8">
<title>Vector2d</title>

<body>

<h1>Little vector utility <strong>I made for myself</strong></h1>
<h2>Has functions like:</h2>
<ul>
<li><em>sub()</em> - subtracting vectors</li>
<li><em>mult()</em> - multiply vectors</li>
<li><em>div()</em> - divide vectors</li>
<li><em>norm()</em> - normalizing the vector</li>
<li><em>setMag()</em> - setting the magnitude of the vector</li>
<li><em>direction()</em> - getting an angle (in radians) of the vector</li>
<li><em>rotate()</em> - rotating the vector (arguments should be passed in radians)</li>
<li><em>mag()</em> - getting a magnitude of the vector</li>
<li><em>angleTo()</em> - returns an angle from this point, to the vector passed in the argument</li>
<li><em>limit()</em> - limits the vector's magnitude</li>
<li><em>distanceTo()</em> - returns a distance from itself to another vector, passed in the argument</li>
<li><em>copy()</em> - returns a copy of the targeted vector</li>
<li><em>set()</em> - sets the vector value to the vector passed in the argument</li>
</ul>
<!--
NOT MINIFIED VERSION:

Vector2 = function(x, y){
this.x = x || 0;
this.y = y || 0;
return this;
};
this.x += vector.x;
this.y += vector.y;
return this;
};
Vector2.prototype.sub = function(vector){
if(typeof vector == "object"){
this.x -= vector.x;
this.y -= vector.y;
}
if(typeof vector == "number"){
this.x -= vector;
this.y -= vector;
}
return this;
};
Vector2.prototype.mult = function(a){
if(typeof a == "object"){
this.x *= a.x;
this.y *= a.y;
} else if (typeof a == "number"){
this.x *= a;
this.y *= a;
}
return this;
};
Vector2.prototype.div = function(a){
if(typeof a == "object"){
this.x /= a.x;
this.y /= a.y;
} else if (typeof a == "number"){
this.x /= a;
this.y /= a;
}
return this;
}
Vector2.prototype.norm = function(){
this.div(this.mag());
return this;
};
Vector2.prototype.setMag = function(e){
this.norm();
this.mult(e);
return this;
};
Vector2.prototype.limit = function(max){
if(this.mag() > max){
this.setMag(max);
} else {
return this;
}
return this;
};
Vector2.prototype.direction = function(e){
return Math.atan2(this.y, this.x);
};
Vector2.prototype.rotate = function(e){
var newDirection = this.direction() + e,
mag = this.mag();

this.x = Math.cos(newDirection) * mag;
this.y = Math.sin(newDirection) * mag;
return this;
};
Vector2.prototype.mag = function(){
return Math.sqrt((this.x*this.x) + (this.y*this.y));
};
Vector2.prototype.angleTo = function(vector){
var angle = Math.atan2(vector.x - this.x, vector.y - this.y);
return angle;
};
Vector2.prototype.distanceTo = function(vector){
return Math.sqrt(Math.pow(vector.x - this.x, 2) + Math.pow(vector.y - this.y, 2));
};
Vector2.prototype.copy = function(){
return new Vector2(this.x, this.y);
};
Vector2.prototype.set = function(){
var args = arguments
if(args.length == 1){
if(typeof args[0] == "object"){
this.x = args[0].x;
this.y = args[0].y;
} else if (typeof args[0] == "number"){
this.x = args[0];
this.y = args[0];
}
} else if (args.length == 2){
this.x = args[0];
this.y = args[1];
}
return this;
};
Vector2.prototype.map = function(vXmin, vXmax, vYmin, vYmax){
if(vXmin < this.x < vXmax && vYmin < this.y < vYmax){
return this;
}
this.x < vXmin ? this.x = vXmin : this;
this.x > vXmax ? this.x = vXmax : this;
this.y < vYmin ? this.y = vYmin : this;
this.y > vYmax ? this.y = vYmax : this;
};
return deg * (Math.PI / 180);
};
return rad * (180 / Math.PI);
};
random = function(){
if(arguments){
var arg = arguments;
if(arg.length == 1){
return Math.random()*arg[0];
}
if(arg.length == 2){
return Math.random()*( Math.max(arg[0], arg[1])-(Math.min(arg[0], arg[1])) )+Math.min(arg[0], arg[1]);
}
} else {
return Math.random();
}
};
random = function(min, max) {
if (max == null) {
max = min;
min = 0;
}
return min + Math.floor(Math.random() * (max - min + 1));
};

-->

<script  src="js/index.js"></script>

</body>

</html>
``````
``````
body {
background-color: #222;
color: #fcfcfc;
}

h1 {
color: orange;
}
h1 strong {
color: white;
}

li {
color: rgba(255, 255, 255, 0.8);
}
li em {
color: white;
}

``````
``````