made all classes use prototype methods, should be easier on the mem
This commit is contained in:
sandbender
parent
a62ab99a3d
commit
704a0404c3
329
pamela.js
329
pamela.js
|
|
@ -1,139 +1,159 @@
|
|||
var context;
|
||||
|
||||
// Class Vector
|
||||
function Vector(x, y, z) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.z = z;
|
||||
this.w = 1;
|
||||
this.add = function(v) {
|
||||
this.x += v.x;
|
||||
this.y += v.y;
|
||||
this.z += v.z;
|
||||
};
|
||||
this.subtract = function(v) {
|
||||
this.x -= v.x;
|
||||
this.y -= v.y;
|
||||
this.z -= v.z;
|
||||
};
|
||||
this.scale = function(s) {
|
||||
this.x *= s;
|
||||
this.y *= s;
|
||||
this.z *= s;
|
||||
};
|
||||
this.rotateX = function(a) {
|
||||
var c = p.cos(a);
|
||||
var s = p.sin(a);
|
||||
this.y = this.y * c + this.z * s;
|
||||
this.z = this.z * c - this.y * s;
|
||||
};
|
||||
this.rotateY = function(a) {
|
||||
var c = p.cos(a);
|
||||
var s = p.sin(a);
|
||||
this.x = this.x * c + this.z * s;
|
||||
this.z = this.z * c - this.x * s;
|
||||
};
|
||||
this.rotateZ = function(a) {
|
||||
var c = p.cos(a);
|
||||
var s = p.sin(a);
|
||||
this.x = this.x * c + this.y * s;
|
||||
this.y = this.y * c - this.x * s;
|
||||
};
|
||||
this.distance = function(v) {
|
||||
if (typeof v == "undefined") {
|
||||
return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
|
||||
}
|
||||
var xd = this.x - v.x;
|
||||
var yd = this.y - v.y;
|
||||
var zd = this.z - v.z;
|
||||
return Math.sqrt(xd * xd + yd * yd + zd * zd);
|
||||
};
|
||||
this.clone = function() {
|
||||
return new Vector(this.x, this.y, this.z);
|
||||
};
|
||||
this.project = function(cam) {
|
||||
var d = this.clone();
|
||||
d.subtract(cam);
|
||||
if (d.z < 0) return false;
|
||||
var s = (p.width / 2) / d.distance();
|
||||
return { x: d.x * s, y: d.y * s, scale: s };
|
||||
};
|
||||
}
|
||||
|
||||
Vector.prototype.add = function(v) {
|
||||
this.x += v.x;
|
||||
this.y += v.y;
|
||||
this.z += v.z;
|
||||
};
|
||||
|
||||
Vector.prototype.subtract = function(v) {
|
||||
this.x -= v.x;
|
||||
this.y -= v.y;
|
||||
this.z -= v.z;
|
||||
};
|
||||
|
||||
Vector.prototype.scale = function(s) {
|
||||
this.x *= s;
|
||||
this.y *= s;
|
||||
this.z *= s;
|
||||
};
|
||||
|
||||
Vector.prototype.rotateX = function(a) {
|
||||
var c = Math.cos(a);
|
||||
var s = Math.sin(a);
|
||||
this.y = this.y * c + this.z * s;
|
||||
this.z = this.z * c - this.y * s;
|
||||
};
|
||||
|
||||
Vector.prototype.rotateY = function(a) {
|
||||
var c = p.cos(a);
|
||||
var s = p.sin(a);
|
||||
this.x = this.x * c + this.z * s;
|
||||
this.z = this.z * c - this.x * s;
|
||||
};
|
||||
|
||||
Vector.prototype.rotateZ = function(a) {
|
||||
var c = p.cos(a);
|
||||
var s = p.sin(a);
|
||||
this.x = this.x * c + this.y * s;
|
||||
this.y = this.y * c - this.x * s;
|
||||
};
|
||||
|
||||
Vector.prototype.distance = function(v) {
|
||||
if (typeof v == "undefined") {
|
||||
return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
|
||||
}
|
||||
var xd = this.x - v.x;
|
||||
var yd = this.y - v.y;
|
||||
var zd = this.z - v.z;
|
||||
return Math.sqrt(xd * xd + yd * yd + zd * zd);
|
||||
};
|
||||
|
||||
Vector.prototype.clone = function() {
|
||||
return new Vector(this.x, this.y, this.z);
|
||||
};
|
||||
|
||||
Vector.prototype.project = function(cam) {
|
||||
var d = this.clone();
|
||||
d.subtract(cam);
|
||||
if (d.z < 0) return false;
|
||||
var s = (p.width / 2) / d.distance();
|
||||
return { x: d.x * s, y: d.y * s, scale: s };
|
||||
};
|
||||
|
||||
// Class Matrix
|
||||
function Matrix(m) {
|
||||
if (typeof m == "undefined")
|
||||
m = [[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]];
|
||||
this.m = m;
|
||||
this.multiplyVector = function(v) {
|
||||
|
||||
// Initialize the result vector.
|
||||
var result = new Vector();
|
||||
var m = this.m;
|
||||
|
||||
// Perform the multiplication
|
||||
result.x = m[0][0]*v.x + m[0][1]*v.y + m[0][2]*v.z + m[0][3];
|
||||
result.y = m[1][0]*v.x + m[1][1]*v.y + m[1][2]*v.z + m[1][3];
|
||||
result.z = m[2][0]*v.x + m[2][1]*v.y + m[2][2]*v.z + m[2][3];
|
||||
result.w = m[3][0]*v.x + m[3][1]*v.y + m[3][2]*v.z + m[3][3];
|
||||
|
||||
return result;
|
||||
};
|
||||
this.multiplyMatrix = function(m) {
|
||||
this.m = this._mult(m);
|
||||
return this;
|
||||
};
|
||||
this.resetMatrix = function() {
|
||||
// identity and translate the axes to the center of the canvas.
|
||||
this.m = [[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]];
|
||||
};
|
||||
this.rotateX = function(angle) {
|
||||
var c = Math.cos(angle);
|
||||
var s = Math.sin(angle);
|
||||
this.m = this._mult([[1, 0, 0, 0],[0, c, -s, 0],[0, s, c, 0],[0, 0, 0, 1]]);
|
||||
return this;
|
||||
};
|
||||
this.rotateY = function(angle) {
|
||||
var c = Math.cos(angle);
|
||||
var s = Math.sin(angle);
|
||||
this.m = this._mult([[c, 0, s, 0],[0, 1, 0, 0],[-s, 0, c, 0],[0, 0, 0, 1]]);
|
||||
return this;
|
||||
};
|
||||
this.rotateZ = function(angle) {
|
||||
var c = Math.cos(angle);
|
||||
var s = Math.sin(angle);
|
||||
this.m = this._mult([[c, -s, 0, 0],[s, c, 0, 0],[0, 0, 1, 0],[0, 0, 0, 1]]);
|
||||
return this;
|
||||
};
|
||||
this.scale = function(scaleX, scaleY, scaleZ) {
|
||||
this.m = this._mult([[scaleX,0,0,0],[0,scaleY,0,0],[0,0,scaleZ,0],[0,0,0,1]]);
|
||||
return this;
|
||||
};
|
||||
this.translate = function(dX, dY, dZ) {
|
||||
this.m = this._mult([[1,0,0,dX],[0,1,0,dY],[0,0,1,dZ],[0,0,0,1]]);
|
||||
return this;
|
||||
};
|
||||
this.project = function(v) {
|
||||
var pj = this.multiplyVector(v);
|
||||
pj.x /= pj.z / (p.width / 2);
|
||||
pj.y /= pj.z / (p.width / 2);
|
||||
return pj;
|
||||
};
|
||||
this._mult = function(m) {
|
||||
var m1 = this.m;
|
||||
var m2 = m;
|
||||
var result = [[],[],[],[]];
|
||||
for(var i = 0; i < 4; i++){
|
||||
result[i][0] = m1[i][0] * m2[0][0] + m1[i][1] * m2[1][0] + m1[i][2] * m2[2][0] + m1[i][3] * m2[3][0];
|
||||
result[i][1] = m1[i][0] * m2[0][1] + m1[i][1] * m2[1][1] + m1[i][2] * m2[2][1] + m1[i][3] * m2[3][1];
|
||||
result[i][2] = m1[i][0] * m2[0][2] + m1[i][1] * m2[1][2] + m1[i][2] * m2[2][2] + m1[i][3] * m2[3][2];
|
||||
result[i][3] = m1[i][0] * m2[0][3] + m1[i][1] * m2[1][3] + m1[i][2] * m2[2][3] + m1[i][3] * m2[3][3];
|
||||
}
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
function alphaForDepth(d, start, cutoff) {
|
||||
d = d < cutoff ? cutoff : d > start ? start : d;
|
||||
return 1 - (d - start) / (cutoff - start);
|
||||
}
|
||||
Matrix.prototype.multiplyVector = function(v) {
|
||||
|
||||
// Initialize the result vector.
|
||||
var result = new Vector();
|
||||
var m = this.m;
|
||||
|
||||
// Perform the multiplication
|
||||
result.x = m[0][0]*v.x + m[0][1]*v.y + m[0][2]*v.z + m[0][3];
|
||||
result.y = m[1][0]*v.x + m[1][1]*v.y + m[1][2]*v.z + m[1][3];
|
||||
result.z = m[2][0]*v.x + m[2][1]*v.y + m[2][2]*v.z + m[2][3];
|
||||
result.w = m[3][0]*v.x + m[3][1]*v.y + m[3][2]*v.z + m[3][3];
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
Matrix.prototype.multiplyMatrix = function(m) {
|
||||
this.m = this._mult(m);
|
||||
return this;
|
||||
};
|
||||
|
||||
Matrix.prototype.resetMatrix = function() {
|
||||
// identity and translate the axes to the center of the canvas.
|
||||
this.m = [[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]];
|
||||
};
|
||||
|
||||
Matrix.prototype.rotateX = function(angle) {
|
||||
var c = Math.cos(angle);
|
||||
var s = Math.sin(angle);
|
||||
this.m = this._mult([[1, 0, 0, 0],[0, c, -s, 0],[0, s, c, 0],[0, 0, 0, 1]]);
|
||||
return this;
|
||||
};
|
||||
|
||||
Matrix.prototype.rotateY = function(angle) {
|
||||
var c = Math.cos(angle);
|
||||
var s = Math.sin(angle);
|
||||
this.m = this._mult([[c, 0, s, 0],[0, 1, 0, 0],[-s, 0, c, 0],[0, 0, 0, 1]]);
|
||||
return this;
|
||||
};
|
||||
|
||||
Matrix.prototype.rotateZ = function(angle) {
|
||||
var c = Math.cos(angle);
|
||||
var s = Math.sin(angle);
|
||||
this.m = this._mult([[c, -s, 0, 0],[s, c, 0, 0],[0, 0, 1, 0],[0, 0, 0, 1]]);
|
||||
return this;
|
||||
};
|
||||
|
||||
Matrix.prototype.scale = function(scaleX, scaleY, scaleZ) {
|
||||
this.m = this._mult([[scaleX,0,0,0],[0,scaleY,0,0],[0,0,scaleZ,0],[0,0,0,1]]);
|
||||
return this;
|
||||
};
|
||||
|
||||
Matrix.prototype.translate = function(dX, dY, dZ) {
|
||||
this.m = this._mult([[1,0,0,dX],[0,1,0,dY],[0,0,1,dZ],[0,0,0,1]]);
|
||||
return this;
|
||||
};
|
||||
|
||||
Matrix.prototype.project = function(v) {
|
||||
var pj = this.multiplyVector(v);
|
||||
pj.x /= pj.z / (p.width / 2);
|
||||
pj.y /= pj.z / (p.width / 2);
|
||||
return pj;
|
||||
};
|
||||
|
||||
Matrix.prototype._mult = function(m) {
|
||||
var m1 = this.m;
|
||||
var m2 = m;
|
||||
var result = [[],[],[],[]];
|
||||
for(var i = 0; i < 4; i++){
|
||||
result[i][0] = m1[i][0] * m2[0][0] + m1[i][1] * m2[1][0] + m1[i][2] * m2[2][0] + m1[i][3] * m2[3][0];
|
||||
result[i][1] = m1[i][0] * m2[0][1] + m1[i][1] * m2[1][1] + m1[i][2] * m2[2][1] + m1[i][3] * m2[3][1];
|
||||
result[i][2] = m1[i][0] * m2[0][2] + m1[i][1] * m2[1][2] + m1[i][2] * m2[2][2] + m1[i][3] * m2[3][2];
|
||||
result[i][3] = m1[i][0] * m2[0][3] + m1[i][1] * m2[1][3] + m1[i][2] * m2[2][3] + m1[i][3] * m2[3][3];
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
|
||||
// Class Node
|
||||
function Node(name) {
|
||||
this.name = name;
|
||||
var size = Math.min(p.width, p.height);
|
||||
|
|
@ -142,42 +162,47 @@ function Node(name) {
|
|||
p.random(size) - (size / 2),
|
||||
p.random(size) - (size / 2));
|
||||
this.position.scale(0.5);
|
||||
this.project = function(m) {
|
||||
this.projection = m.project(this.position);
|
||||
this.alpha = 255 * alphaForDepth(this.projection.z, 0, -200);
|
||||
};
|
||||
this.draw = function() {
|
||||
var s = 5000 / -this.projection.z;
|
||||
p.fill(p.color(164 + this.alpha * 0.25));
|
||||
p.ellipse(this.projection.x, this.projection.y, s, s);
|
||||
p.context.font = s / 2 + "pt sans-serif";
|
||||
p.fill(p.color(164, 192 + this.alpha * 0.25, 164));
|
||||
p.context.fillText(this.name, this.projection.x + s, this.projection.y + s / 2);
|
||||
};
|
||||
this.update = function() {
|
||||
};
|
||||
}
|
||||
|
||||
Node.prototype.alphaForDepth = function(d, start, cutoff) {
|
||||
d = d < cutoff ? cutoff : d > start ? start : d;
|
||||
return 1 - (d - start) / (cutoff - start);
|
||||
};
|
||||
|
||||
Node.prototype.project = function(m) {
|
||||
this.projection = m.project(this.position);
|
||||
this.alpha = 255 * this.alphaForDepth(this.projection.z, 0, -200);
|
||||
};
|
||||
|
||||
Node.prototype.draw = function() {
|
||||
var s = 5000 / -this.projection.z;
|
||||
p.fill(p.color(164 + this.alpha * 0.25));
|
||||
p.ellipse(this.projection.x, this.projection.y, s, s);
|
||||
p.context.font = s / 2 + "pt sans-serif";
|
||||
p.fill(p.color(164, 192 + this.alpha * 0.25, 164));
|
||||
p.context.fillText(this.name, this.projection.x + s, this.projection.y + s / 2);
|
||||
};
|
||||
|
||||
Node.prototype.update = function() {
|
||||
};
|
||||
|
||||
|
||||
// Class NorbertNode
|
||||
jQuery.extend(NorbertNode.prototype, Node.prototype);
|
||||
function NorbertNode() {
|
||||
this.norbert = p.loadImage("norbert.png");
|
||||
this.position = new Vector(0, 0, 0);
|
||||
this.project = function(m) {
|
||||
this.projection = m.project(this.position);
|
||||
this.alpha = 255 * alphaForDepth(this.projection.z, -200, -400);
|
||||
};
|
||||
this.draw = function() {
|
||||
var s = this.projection.z / (p.width / 2);
|
||||
s *= 3;
|
||||
var x = this.projection.x - (186 / s);
|
||||
var y = this.projection.y - (150 / s);
|
||||
//var xx = this.projection.x + (186 * s);
|
||||
//var yy = this.projection.y + (240 * s);
|
||||
//var x = Math.floor(this.projection.x - 186);
|
||||
//var y = Math.floor(this.projection.y - 60);
|
||||
p.image(this.norbert, x, y, 372 / s, 300 / s);
|
||||
};
|
||||
}
|
||||
|
||||
NorbertNode.prototype.draw = function() {
|
||||
var s = this.projection.z / (p.width / 2);
|
||||
s *= 3;
|
||||
var x = this.projection.x - (186 / s);
|
||||
var y = this.projection.y - (150 / s);
|
||||
p.image(this.norbert, x, y, 372 / s, 300 / s);
|
||||
};
|
||||
|
||||
|
||||
var p;
|
||||
|
||||
$(document).ready(function() {
|
||||
|
|
@ -187,6 +212,7 @@ $(document).ready(function() {
|
|||
function goPamela() {
|
||||
|
||||
p = Processing("pamela");
|
||||
context = p.context;
|
||||
|
||||
var entities = ["sandb", "fs111", "tazo", "wouter", "unknown", "unknown", "unknown", "unknown"];
|
||||
var m = new Matrix();
|
||||
|
|
@ -200,7 +226,6 @@ function goPamela() {
|
|||
var count = 0;
|
||||
this.nodes = [];
|
||||
this.nodes[count++] = new NorbertNode();
|
||||
//for (var j = 0; j < 10; j++)
|
||||
for (var i = 0; i < entities.length; i++) {
|
||||
this.nodes[count++] = new Node(entities[i]);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user