Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vectors are fun
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.