Vector Calculation Library
Physics simulation requires a vector library to represent object positions and orientations, and to support the computations involved in the simulation that changes these quantities. The computation involved in 2D physics simulations are basic vector operations, including addition, subtraction, scaling, cross product, etc. For this reason, you will create a simple Vec2 vector math library to be included in all subsequent projects.
Creating the Library
In this step, you will create a new file within a new Library folder to support all the required calculations.
- Create a new folder name Lib inside the SiteRoot (or public_html) folder by right-clicking and creating a new folder.
- Create a new JavaScript file within the Library folder by right-clicking the Lib Name the file
Vec2.js. - Open the new js file for editing.
- Add the Vec2
var Vec2 = function (x, y) {
this.x = x;
this.y = y;
};- Add all the functions to support basic vector operations.
Vec2.prototype.length = function () {
return Math.sqrt(this.x * this.x + this.y * this.y);
};
Vec2.prototype.add = function (vec) {
return new Vec2(vec.x + this.x, vec.y + this.y);
};
Vec2.prototype.subtract = function (vec) {
return new Vec2(this.x - vec.x, this.y - vec.y);
};
Vec2.prototype.scale = function (n) {
return new Vec2(this.x * n, this.y * n);
};
Vec2.prototype.dot = function (vec) {
return (this.x * vec.x + this.y * vec.y);
};
Vec2.prototype.cross = function (vec) {
return (this.x * vec.y - this.y * vec.x);
};
Vec2.prototype.rotate = function (center, angle) {
//rotate in counterclockwise
var r = [];
var x = this.x - center.x;
var y = this.y - center.y;
r[0] = x * Math.cos(angle) - y * Math.sin(angle);
r[1] = x * Math.sin(angle) + y * Math.cos(angle);
r[0] += center.x;
r[1] += center.y;
return new Vec2(r[0], r[1]);
};
Vec2.prototype.normalize = function () {
var len = this.length();
if (len > 0) {
len = 1 / len;
}
return new Vec2(this.x * len, this.y * len);
};
Vec2.prototype.distance = function (vec) {
var x = this.x - vec.x;
var y = this.y - vec.y;
return Math.sqrt(x * x + y * y);
};With these functions defined, it is now possible to operate on vectors to calculate and manipulate the position, size, and orientation of objects drawn on the canvas. It is expected that you understand these elementary operators. Do not forget to include the new library in the project by adding the new file into the index.html using the <script> tag, like so:
<script type="text/javascript" src="/Lib/Vec2.js"></script>
