Vector2d

In this example below you will see how to do a Vector2d with some HTML / CSS and Javascript

Little vector 2d utility I use for some of my pens. Grab if you need!

Thumbnail
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
Copyright Godje ©

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Vector2d</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Little vector utility <strong>I made for myself</strong></h1>
<h2>Has functions like:</h2>
<ul>
<li><em>add()</em> - adding vectors</li>
<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;
};
Vector2.prototype.add = function(vector){
  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;
};
Math.radians = function(deg){
  return deg * (Math.PI / 180);
};
Math.degrees = function(rad){
  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>

/*Downloaded from https://www.codeseek.co/Godje/vector2d-aBbjza */
body {
  padding: 20px;
  background-color: #222;
  color: #fcfcfc;
}

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

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


/*Downloaded from https://www.codeseek.co/Godje/vector2d-aBbjza */
Vector2=function(a,b){return this.x=a||0,this.y=b||0,this},Vector2.prototype.add=function(a){return this.x+=a.x,this.y+=a.y,this},Vector2.prototype.sub=function(a){return"object"==typeof a&&(this.x-=a.x,this.y-=a.y),"number"==typeof a&&(this.x-=a,this.y-=a),this},Vector2.prototype.mult=function(a){return"object"==typeof a?(this.x*=a.x,this.y*=a.y):"number"==typeof a&&(this.x*=a,this.y*=a),this},Vector2.prototype.div=function(a){return"object"==typeof a?(this.x/=a.x,this.y/=a.y):"number"==typeof a&&(this.x/=a,this.y/=a),this},Vector2.prototype.norm=function(){return this.div(this.mag()),this},Vector2.prototype.setMag=function(a){return this.norm(),this.mult(a),this},Vector2.prototype.limit=function(a){return this.mag()>a?(this.setMag(a),this):this},Vector2.prototype.direction=function(a){return Math.atan2(this.y,this.x)},Vector2.prototype.rotate=function(a){var b=this.direction()+a,c=this.mag();return this.x=Math.cos(b)*c,this.y=Math.sin(b)*c,this},Vector2.prototype.mag=function(){return Math.sqrt(this.x*this.x+this.y*this.y)},Vector2.prototype.angleTo=function(a){var b=Math.atan2(a.x-this.x,a.y-this.y);return b},Vector2.prototype.distanceTo=function(a){return Math.sqrt(Math.pow(a.x-this.x,2)+Math.pow(a.y-this.y,2))},Vector2.prototype.copy=function(){return new Vector2(this.x,this.y)},Vector2.prototype.set=function(){var a=arguments;return 1==a.length?"object"==typeof a[0]?(this.x=a[0].x,this.y=a[0].y):"number"==typeof a[0]&&(this.x=a[0],this.y=a[0]):2==a.length&&(this.x=a[0],this.y=a[1]),this},Vector2.prototype.map=function(a,b,c,d){return a<this.x<b&&c<this.y<d?this:(this.x<a?this.x=a:this,this.x>b?this.x=b:this,this.y<c?this.y=c:this,void(this.y>d?this.y=d:this))},Math.radians=function(a){return a*(Math.PI/180)},Math.degrees=function(a){return a*(180/Math.PI)},random=function(){if(!arguments)return Math.random();var a=arguments;return 1==a.length?Math.random()*a[0]:2==a.length?Math.random()*(Math.max(a[0],a[1])-Math.min(a[0],a[1]))+Math.min(a[0],a[1]):void 0},random=function(a,b){return null==b&&(b=a,a=0),a+Math.floor(Math.random()*(b-a+1))};

Comments