Vectors are fun

gistfile1.html

<canvas></canvas>

<script>

var L, M, Vect, v;

M = {
  TAU: Math.PI * 2,
  vary: function(amt) {
    return 2 * amt * (Math.random() - 0.5);
  },
  rand: function(amt) {
    return amt * Math.random();
  },
  randInt: function(amt) {
    return Math.floor(rand(amt));
  },
  lerp: function(t, from, to) {
    return t * to + (1 - t) * from;
  },
  sq: function(x) {
    return x * x;
  },
  cube: function(x) {
    return x * x * x;
  }
};

Vect = function(x, y) {
  this.x = x;
  this.y = y;
};

Vect.prototype.len = function() {
  return Math.sqrt(M.sq(this.x) + M.sq(this.y));
};

Vect.prototype.len2 = function() {
  return M.sq(this.x) + M.sq(this.y);
};

Vect.prototype.angle = function() {
  return Math.atan2(this.y, this.x);
};

Vect.prototype.toString = function() {
  return [this.x, this.y].join(',');
};

v = function(x, y) {
  if (x instanceof Array) {
    return new Vect(x[0], x[1]);
  } else if (y == null) {
    return new Vect(x.x, x.y);
  } else {
    return new Vect(x, y);
  }
};

v.rotate = function(v1, v2) {
  return v(v1.x * v2.x - v1.y * v2.y, v1.x * v2.y + v1.y * v2.x);
};

v.forAngle = function(a) {
  return v(Math.cos(a), Math.sin(a));
};

v.add = function(v1, v2) {
  return v(v1.x + v2.x, v1.y + v2.y);
};

v.sub = function(v1, v2) {
  return v(v1.x - v2.x, v1.y - v2.y);
};

v.mul = function(v1, s) {
  return v(v1.x * s, v1.y * s);
};

v.div = function(v1, s) {
  return v(v1.x / s, v1.y / s);
};

v.dot = function(v1, v2) {
  return v1.x * v2.x + v1.y * v2.y;
};

v.lerp = function(t, v1, v2) {
  return v(M.lerp(t, v1.x, v2.x), M.lerp(t, v1.y, v2.y));
};

v.eq = function(v1, v2) {
  return v1.x === v2.x && v1.y === v2.y;
};

v.map = function(f, v1) {
  return v(f(v1.x), f(v1.y));
};

v.reduce = function(f, v1) {
  return f(v1.x, v1.y);
};

v.rotateBy = function(v1, a) {
  return v.rotate(v1, v.forAngle(a));
};

v.dist = function(v1, v2) {
  return (v.sub(v1, v2)).len();
};

v.dist2 = function(v1, v2) {
  return (v.sub(v1, v2)).len2();
};

v.unit = function(v1) {
  var len;
  len = v1.len();
  return v(v1.x / len, v1.y / len);
};



var canvas = document.getElementsByTagName("canvas")[0];
canvas.width = 1024;
canvas.height = 768;

var ctx = canvas.getContext('2d');

// point A and B of the line
var pointA = v(100, 200);
var pointB = v(400, 400);


// unit vector representing the line
var lineVector = v.unit(v.sub(pointB, pointA));

// the perpendicular unit vector 
var perp = v(lineVector.y, -lineVector.x);

// distance offset
var d = 120;

// pointC is distance d along the line from pointB
var pointC = v.add(pointB, v.mul(lineVector, d));

// find the midpoint of A and B
var midPoint = v.lerp(0.5, pointA, pointB);

// move distance d along the perpendicular from midpoint
var perpendicularPoint = v.add(midPoint, v.mul(perp, d));

ctx.beginPath();
ctx.moveTo(pointA.x, pointA.y);
ctx.lineTo(pointB.x, pointB.y);
ctx.stroke();

ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(pointB.x, pointB.y);
ctx.lineTo(pointC.x, pointC.y);
ctx.stroke();

ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(midPoint.x, midPoint.y);
ctx.lineTo(perpendicularPoint.x, perpendicularPoint.y);
ctx.stroke();

</script>