im trying to great a array of vector3's in JavaScript, im trying to create a Vertex, Edge, Face structure for a openGL cube, now im quite new to JavaScript but as HTML5 supports it, i feel JS should be a language i understand and now :),
Now I dont know how to declare a struct in JS and then how I would implement it into a array type?
I have something like this but i'm not sure if that's correct.
var vector3 = (x=0,y=0,z=0);
but then how would I use that for a array?
Cheers for the help.
I would create an Object:
var vector3 = {
x:0,
y:0,
z:0
};
You can access the individual fields with code such as:
var tmp = vector3.x;
To place points in a vector
var myPolygon = [
{x: 3, y: 8, z: -8},
{x: 3, y: 4, z: 10},
{x: 9, y: 8, z: -8},
];
You could write a vector type with this too so you do not have to write x, y, and z every time:
var vec3 = {x:0,y:0,z:0};
var demoVec = vec3;
var demo2Vec = vec3;
demoVec.x+=demo2Vec.y;
Use a javascript object:
var vector1 = {x:0,y:0,z:0};
var vector2 = {x:10,y:0,z:0};
//example function to find scalar distance between two points
function distance(v1,v2){
return Math.sqrt(Math.pow((v1.x-v2.x),2) + Math.pow((v1.y-v2.y),2) + Math.pow((v1.z-v2.z),2));
}
var d = distance(vector1,vector2); //returns 10
console.log(d);
I would write a constructor
function Vector(x,y,z){
this.dimension = 0;
if( undefined !== x ) this.dimension = 1, this.x = x || 0;
else this.x = 0;
if( undefined !== y ) this.dimension = 2, this.y = y || 0;
else this.y = 0;
if( undefined !== z ) this.dimension = 3, this.z = z || 0;
else this.z = 0;
}
Vector.prototype = Object.create(null, {
length: {
get: function(){
return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
}
},
add : {
value: function(v){
var d = Math.max(this.dimension, v.dimension), x, y, z;
if( d > 0 ) x = (this.x || 0) + (v.x || 0);
if( d > 1 ) y = (this.y || 0) + (v.y || 0);
if( d > 2 ) z = (this.z || 0) + (v.z || 0);
return new Vector(x, y, z);
}
}
});
var vector3 = new Vector(0,0,0);
{ add : { value : 'foobar' } } is being used to define properties (see Object.create), the inner object is a descriptor. It means the property add has value (in this example) "foobar". Using Object.create and propertiesObject like this means you can easily set up a prototype chain as well as define non-enumerable/configurable properties, etc.var o = {foo: 1, get bar(){return this.foo;}}, see how o.bar is a function but can be accessed without (). @AsadI like Tobias Springer's solution, but you could also create a vector object with utility methods:
Vector = function(x, y, z) {
this._init(x, y, z);
};
Vector.prototype = {
/**
* Fixed Constructor.
*/
constructor: Vector,
x: null,
y: null,
z: null,
/**
* Add documentation!
*/
_init: function(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
},
/**
* Add documentation!
*/
add: function(otherVector) {
return new Vector(this.x + otherVector.x,
this.y + otherVector.y, this.z + otherVector.z);
},
/**
* Add documentation!
*/
scalarProduct: function(otherVector) {
return this.x * otherVector.x + this.y * otherVector.y
+ this.z * otherVector.z;
},
/**
* From Asad's answer. Returns the distance between this vector
* and <code>otherVector</code>.
* @param otherVector {Vector}
* @returns {Number}
*/
distance: function(otherVector) {
return Math.sqrt(Math.pow((this.x-otherVector.x),2)
+ Math.pow((this.y-otherVector.y),2)
+ Math.pow((this.z-otherVector.z),2));
}
// and so on....
};
So, you would use it like this:
var vector1 = new Vector (1, 1, 1);
var vector2 = new Vector (1, 0, 1);
var addedVector = vector1.add(vector2); // --> = (2, 1, 2)
var scalarProduct = vector1.scalarProduct(vector2); // --> = 2
