pamela, adapted for 26c3. mouse control added, resize problems solved, alpha + color depth filtering, synchronisation with new and old entries, remaining from last commit
This commit is contained in:
Pieter Iserbyt
parent
d6853b8c8f
commit
6851a984c2
|
|
@ -6,9 +6,9 @@
|
||||||
<script src="js/pamela-nodes.js" type="text/javascript" />
|
<script src="js/pamela-nodes.js" type="text/javascript" />
|
||||||
<script src="js/pamela-matrices.js" type="text/javascript" />
|
<script src="js/pamela-matrices.js" type="text/javascript" />
|
||||||
<script src="js/pamela.js" type="text/javascript" />
|
<script src="js/pamela.js" type="text/javascript" />
|
||||||
<style type="text/css">* {margin:0; padding:0}</style>
|
<style type="text/css">* {margin:0; padding:0} body { background-color: #333; }</style>
|
||||||
</head>
|
</head>
|
||||||
<body style="background-color: #333;">
|
<body>
|
||||||
<canvas id="pamela"></canvas>
|
<canvas id="pamela"></canvas>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
1
input.js
1
input.js
|
|
@ -1 +0,0 @@
|
||||||
["sandb", "fs111", "tazo", "unknown", "unknown", "unknown", "unknown", "unknown"]
|
|
||||||
4376
jquery-1.3.2.js
vendored
4376
jquery-1.3.2.js
vendored
File diff suppressed because it is too large
Load Diff
146
js/input.php
146
js/input.php
|
|
@ -1,7 +1,143 @@
|
||||||
<?php header("Content-type: application/pdf"); header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Cache-Control: no-cache"); header("Pragma: no-cache"); ?> [ "00:01:e8:04:99:be",
|
<?php header("Content-type: application/pdf"); header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Cache-Control: no-cache"); header("Pragma: no-cache"); ?> [ "00:01:e8:04:99:be",
|
||||||
"00:03:0d:55:e3:f6",
|
"00:05:4e:40:1e:97",
|
||||||
"00:08:2a:07:3d:0b",
|
"00:0c:f1:16:10:ba",
|
||||||
"00:0d:60:77:44:b5",
|
"00:0c:f1:1d:dc:70",
|
||||||
|
"00:0e:35:96:c7:ff",
|
||||||
"00:11:85:6a:1f:ec",
|
"00:11:85:6a:1f:ec",
|
||||||
"00:1f:16:0c:ad:68",
|
"00:11:f5:22:9f:7d",
|
||||||
"00:21:9b:df:52:9c", ]
|
"00:13:02:0e:52:10",
|
||||||
|
"00:13:02:1d:76:1e",
|
||||||
|
"00:13:02:25:d8:bc",
|
||||||
|
"00:13:02:53:47:62",
|
||||||
|
"00:13:02:99:a7:78",
|
||||||
|
"00:13:02:a4:98:83",
|
||||||
|
"00:13:02:b8:a2:52",
|
||||||
|
"00:13:ce:72:dc:a2",
|
||||||
|
"00:13:e8:16:59:39",
|
||||||
|
"00:13:e8:a5:b5:05",
|
||||||
|
"00:14:a4:85:84:ad",
|
||||||
|
"00:15:af:2e:cd:45",
|
||||||
|
"00:15:af:67:0a:0b",
|
||||||
|
"00:15:af:8d:47:e2",
|
||||||
|
"00:15:af:d8:92:49",
|
||||||
|
"00:15:af:db:24:ac",
|
||||||
|
"00:15:af:e6:9c:13",
|
||||||
|
"00:16:01:9c:22:42",
|
||||||
|
"00:16:44:7f:8a:1b",
|
||||||
|
"00:16:6f:04:b7:ef",
|
||||||
|
"00:16:e6:3b:f5:1b",
|
||||||
|
"00:16:ea:68:52:1a",
|
||||||
|
"00:16:ea:71:fd:3c",
|
||||||
|
"00:16:ea:89:d5:84",
|
||||||
|
"00:16:ea:e5:7f:12",
|
||||||
|
"00:16:ea:e5:8c:fa",
|
||||||
|
"00:16:ea:ee:59:62",
|
||||||
|
"00:18:41:e0:46:65",
|
||||||
|
"00:18:41:e0:7e:ff",
|
||||||
|
"00:18:41:e1:06:e9",
|
||||||
|
"00:18:de:02:06:27",
|
||||||
|
"00:18:de:76:ff:1d",
|
||||||
|
"00:18:de:7e:22:a2",
|
||||||
|
"00:18:de:b2:52:96",
|
||||||
|
"00:18:de:b9:17:12",
|
||||||
|
"00:19:d2:0b:f0:24",
|
||||||
|
"00:19:d2:98:47:b9",
|
||||||
|
"00:19:d2:b3:ec:c3",
|
||||||
|
"00:19:e3:d8:13:0e",
|
||||||
|
"00:19:e3:d8:30:66",
|
||||||
|
"00:1b:77:04:74:ea",
|
||||||
|
"00:1b:77:41:ad:f5",
|
||||||
|
"00:1b:77:54:40:72",
|
||||||
|
"00:1b:9e:d5:be:60",
|
||||||
|
"00:1c:b3:01:5b:06",
|
||||||
|
"00:1c:b3:bc:b6:5b",
|
||||||
|
"00:1c:bf:02:08:10",
|
||||||
|
"00:1c:bf:2c:3f:fb",
|
||||||
|
"00:1c:bf:6e:a0:4a",
|
||||||
|
"00:1c:bf:73:ec:aa",
|
||||||
|
"00:1c:f0:14:32:fa",
|
||||||
|
"00:1d:4f:11:c6:4d",
|
||||||
|
"00:1d:4f:f9:97:b2",
|
||||||
|
"00:1d:e0:2d:9d:cd",
|
||||||
|
"00:1d:e0:4e:53:57",
|
||||||
|
"00:1d:e0:a3:4a:0b",
|
||||||
|
"00:1d:e0:b8:e6:af",
|
||||||
|
"00:1e:52:70:07:41",
|
||||||
|
"00:1e:52:74:75:c3",
|
||||||
|
"00:1e:52:86:cb:81",
|
||||||
|
"00:1e:c2:a4:da:2f",
|
||||||
|
"00:1e:c2:a7:6f:e6",
|
||||||
|
"00:1e:c2:bc:aa:ff",
|
||||||
|
"00:1e:c2:d2:40:e7",
|
||||||
|
"00:1f:1f:31:5f:b4",
|
||||||
|
"00:1f:3b:27:90:7d",
|
||||||
|
"00:1f:3b:39:7b:bf",
|
||||||
|
"00:1f:3b:5c:ed:73",
|
||||||
|
"00:1f:3b:82:79:13",
|
||||||
|
"00:1f:3b:a9:fe:b3",
|
||||||
|
"00:1f:3c:21:88:de",
|
||||||
|
"00:1f:3c:4b:60:a7",
|
||||||
|
"00:1f:3c:4e:ef:75",
|
||||||
|
"00:1f:3c:5d:a6:fd",
|
||||||
|
"00:1f:3c:98:77:7b",
|
||||||
|
"00:1f:3c:a5:2a:58",
|
||||||
|
"00:1f:f3:d9:95:d0",
|
||||||
|
"00:21:00:49:24:3e",
|
||||||
|
"00:21:5c:04:db:55",
|
||||||
|
"00:21:5c:29:5a:b5",
|
||||||
|
"00:21:5c:64:6d:f3",
|
||||||
|
"00:21:5d:94:fc:66",
|
||||||
|
"00:21:6a:13:69:52",
|
||||||
|
"00:21:6a:7f:d1:fe",
|
||||||
|
"00:21:6a:80:5f:c2",
|
||||||
|
"00:21:6b:1b:93:dc",
|
||||||
|
"00:21:85:77:b5:f4",
|
||||||
|
"00:21:e9:53:ce:dc",
|
||||||
|
"00:21:e9:e2:7f:5d",
|
||||||
|
"00:21:fe:5a:24:89",
|
||||||
|
"00:22:43:25:31:8b",
|
||||||
|
"00:22:43:3b:71:c9",
|
||||||
|
"00:22:43:4a:9e:00",
|
||||||
|
"00:22:43:4b:65:9a",
|
||||||
|
"00:22:43:53:2d:88",
|
||||||
|
"00:22:43:57:e2:ce",
|
||||||
|
"00:22:43:79:0f:b2",
|
||||||
|
"00:22:68:b7:f2:28",
|
||||||
|
"00:22:69:17:03:bd",
|
||||||
|
"00:22:69:30:8a:27",
|
||||||
|
"00:22:fa:60:08:54",
|
||||||
|
"00:22:fa:99:45:24",
|
||||||
|
"00:22:fa:cc:c8:f4",
|
||||||
|
"00:22:fb:47:f3:00",
|
||||||
|
"00:22:fb:70:62:e2",
|
||||||
|
"00:22:fb:8d:a3:00",
|
||||||
|
"00:23:12:54:63:87",
|
||||||
|
"00:23:32:34:20:15",
|
||||||
|
"00:23:4d:c4:df:57",
|
||||||
|
"00:23:6c:7e:f9:5a",
|
||||||
|
"00:23:6c:86:4f:98",
|
||||||
|
"00:23:76:08:dc:ee",
|
||||||
|
"00:23:76:0c:21:ee",
|
||||||
|
"00:23:76:1e:b3:c3",
|
||||||
|
"00:24:2b:7c:76:88",
|
||||||
|
"00:24:2b:89:63:59",
|
||||||
|
"00:24:2c:06:1e:4d",
|
||||||
|
"00:24:2c:1d:06:68",
|
||||||
|
"00:24:d2:6c:c9:95",
|
||||||
|
"00:25:00:49:9e:1d",
|
||||||
|
"00:25:00:4a:bc:77",
|
||||||
|
"00:25:00:4a:df:7b",
|
||||||
|
"00:25:00:4f:05:dc",
|
||||||
|
"00:25:00:b1:56:20",
|
||||||
|
"00:25:d3:44:a3:03",
|
||||||
|
"00:25:d3:5a:26:52",
|
||||||
|
"00:26:08:dd:13:28",
|
||||||
|
"00:26:08:e6:6e:7f",
|
||||||
|
"00:26:08:e6:87:6f",
|
||||||
|
"00:26:bb:0b:64:82",
|
||||||
|
"00:26:bb:0f:c7:ec",
|
||||||
|
"00:26:bb:1d:36:f8",
|
||||||
|
"00:26:ff:b7:39:c9",
|
||||||
|
"00:a0:f5:e0:a7:bc",
|
||||||
|
"00:bd:3a:69:69:5f",
|
||||||
|
"a4:ed:4e:b7:2d:c7", ]
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,7 @@ Node.prototype.normal = {
|
||||||
Math.round(128 * invAlphaScale + this.color[2] * alphaScale),
|
Math.round(128 * invAlphaScale + this.color[2] * alphaScale),
|
||||||
];
|
];
|
||||||
context.fillStyle = 'rgb(' + col[0] + ',' + col[1] + ',' + col[2] + ')';
|
context.fillStyle = 'rgb(' + col[0] + ',' + col[1] + ',' + col[2] + ')';
|
||||||
//context.globalAlpha = this.alpha / 255;
|
context.globalAlpha = this.alpha / 255;
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
context.arc(this.projection.x, this.projection.y, scale, 0, Math.PI * 2, false);
|
context.arc(this.projection.x, this.projection.y, scale, 0, Math.PI * 2, false);
|
||||||
context.fill();
|
context.fill();
|
||||||
|
|
|
||||||
144
js/pamela-nodes.js~
Normal file
144
js/pamela-nodes.js~
Normal file
|
|
@ -0,0 +1,144 @@
|
||||||
|
// Class Node
|
||||||
|
function Node(name) {
|
||||||
|
|
||||||
|
this.name = name;
|
||||||
|
this.modeTime = (new Date).getTime();
|
||||||
|
this.setMode("newNode");
|
||||||
|
|
||||||
|
var size = Math.min(width, height);
|
||||||
|
this.color = [
|
||||||
|
Math.random() * 128,
|
||||||
|
Math.random() * 128,
|
||||||
|
Math.random() * 128];
|
||||||
|
this.position = new Vector(
|
||||||
|
(Math.random() * size) - (size / 2),
|
||||||
|
(Math.random() * size) - (size / 2),
|
||||||
|
(Math.random() * size) - (size / 2));
|
||||||
|
this.position.scale(0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
Node.prototype.setMode = function(mode) {
|
||||||
|
this.modeTime = (new Date).getTime();
|
||||||
|
if (mode == "newNode") {
|
||||||
|
jQuery.extend(this, Node.prototype.newNode);
|
||||||
|
} else if (mode == "dying") {
|
||||||
|
jQuery.extend(this, Node.prototype.dying);
|
||||||
|
} else if (mode == "dead") {
|
||||||
|
jQuery.extend(this, Node.prototype.dead);
|
||||||
|
this.isDead = true;
|
||||||
|
} else {
|
||||||
|
jQuery.extend(this, Node.prototype.normal);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Node.prototype.alphaForDepth = function(d, start, cutoff) {
|
||||||
|
d = d < cutoff ? cutoff : d > start ? start : d;
|
||||||
|
return 1 - (d - start) / (cutoff - start);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
//Normal mode
|
||||||
|
Node.prototype.normal = {
|
||||||
|
|
||||||
|
project: function(m) {
|
||||||
|
this.projection = m.project(this.position);
|
||||||
|
this.alpha = 255 * this.alphaForDepth(this.projection.z, 0, -400);
|
||||||
|
},
|
||||||
|
|
||||||
|
draw: function() {
|
||||||
|
if (this.projection.z > -1) return;
|
||||||
|
var scale = width * 3 / -this.projection.z;
|
||||||
|
var alphaScale = this.alpha / 255;
|
||||||
|
var invAlphaScale = 1 - alphaScale;
|
||||||
|
var col =
|
||||||
|
/* [
|
||||||
|
Math.round(this.color[0]),
|
||||||
|
Math.round(this.color[1]),
|
||||||
|
Math.round(this.color[2]),
|
||||||
|
]; */
|
||||||
|
[
|
||||||
|
Math.round(128 * invAlphaScale + this.color[0] * alphaScale),
|
||||||
|
Math.round(128 * invAlphaScale + this.color[1] * alphaScale),
|
||||||
|
Math.round(128 * invAlphaScale + this.color[2] * alphaScale),
|
||||||
|
];
|
||||||
|
context.fillStyle = 'rgb(' + col[0] + ',' + col[1] + ',' + col[2] + ')';
|
||||||
|
context.globalAlpha = 128 + this.alpha / 512;
|
||||||
|
context.beginPath();
|
||||||
|
context.arc(this.projection.x, this.projection.y, scale, 0, Math.PI * 2, false);
|
||||||
|
context.fill();
|
||||||
|
context.font = scale + "pt sans-serif";
|
||||||
|
context.fillText(this.name, this.projection.x + (scale * 1.5), this.projection.y + (scale / 1.5));
|
||||||
|
context.closePath();
|
||||||
|
context.globalAlpha = 1;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
//New mode
|
||||||
|
Node.prototype.newNode = {
|
||||||
|
|
||||||
|
project: function(m) {
|
||||||
|
|
||||||
|
var newTime = (new Date).getTime() - this.modeTime;
|
||||||
|
if (newTime > 1000) {
|
||||||
|
this.setMode("normal");
|
||||||
|
this.project(m);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var scale = Math.sqrt(1000 / Math.max(newTime, 1));
|
||||||
|
this.projection = m.clone().scale(scale, scale, scale).project(this.position);
|
||||||
|
this.alpha = 255 * this.alphaForDepth(this.projection.z, 0, -500);
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
//Dying mode
|
||||||
|
Node.prototype.dying = {
|
||||||
|
|
||||||
|
project: function(m) {
|
||||||
|
var dyingTime = (new Date).getTime() - this.modeTime;
|
||||||
|
if (dyingTime > 1000) {
|
||||||
|
this.setMode("dead");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var scale = Math.sqrt(1000 / Math.max(1000 - dyingTime, 1));
|
||||||
|
this.projection = m.clone().scale(scale, scale, scale).project(this.position);
|
||||||
|
this.alpha = 255 * this.alphaForDepth(this.projection.z, 0, -500);
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
//Dead mode
|
||||||
|
Node.prototype.dead = {
|
||||||
|
|
||||||
|
project: function(m) {
|
||||||
|
},
|
||||||
|
|
||||||
|
draw: function() {
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// For inheriting classes
|
||||||
|
Node.prototype.project = Node.prototype.normal.project;
|
||||||
|
Node.prototype.draw = Node.prototype.normal.draw;
|
||||||
|
|
||||||
|
// Class NorbertNode
|
||||||
|
jQuery.extend(NorbertNode.prototype, Node.prototype);
|
||||||
|
function NorbertNode() {
|
||||||
|
this.norbert = new Image();
|
||||||
|
this.norbert.src = "img/ccc.png";
|
||||||
|
this.position = new Vector(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
NorbertNode.prototype.draw = function() {
|
||||||
|
var s = Math.abs(this.projection.z / (width / 2));
|
||||||
|
s *= 2;
|
||||||
|
//var x = Math.floor(this.projection.x - (186 / s));
|
||||||
|
//var y = Math.floor(this.projection.y - (50 / s));
|
||||||
|
var x = Math.floor(this.projection.x - (250 / s));
|
||||||
|
var y = Math.floor(this.projection.y - (180 / s));
|
||||||
|
context.drawImage(this.norbert, x, y);
|
||||||
|
};
|
||||||
|
|
||||||
BIN
norbert.png
BIN
norbert.png
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
296
pamela.js
296
pamela.js
|
|
@ -1,296 +0,0 @@
|
||||||
var context;
|
|
||||||
var width;
|
|
||||||
var height;
|
|
||||||
|
|
||||||
// Class Vector
|
|
||||||
function Vector(x, y, z) {
|
|
||||||
this.x = x;
|
|
||||||
this.y = y;
|
|
||||||
this.z = z;
|
|
||||||
this.w = 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
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 = Math.cos(a);
|
|
||||||
var s = Math.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 = Math.cos(a);
|
|
||||||
var s = Math.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 = (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;
|
|
||||||
}
|
|
||||||
|
|
||||||
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 / (width / 2);
|
|
||||||
pj.y /= pj.z / (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(width, height);
|
|
||||||
this.position = new Vector(
|
|
||||||
(Math.random() * size) - (size / 2),
|
|
||||||
(Math.random() * size) - (size / 2),
|
|
||||||
(Math.random() * size) - (size / 2));
|
|
||||||
this.position.scale(0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
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 scale = 5000 / -this.projection.z;
|
|
||||||
var color = (164 + this.alpha * 0.25);
|
|
||||||
context.fillStyle = 'rgb(' + color + ',' + color + ',' + color + ')';
|
|
||||||
context.arc(this.projection.x, this.projection.y, scale, 0, Math.PI * 2, false);
|
|
||||||
context.fill();
|
|
||||||
context.font = scale / 2 + "pt sans-serif";
|
|
||||||
var textColor = (192 + this.alpha * 0.25);
|
|
||||||
context.fillStyle = 'rgb(164,' + textColor + ',164)';
|
|
||||||
context.fillText(this.name, this.projection.x + scale, this.projection.y + scale / 2);
|
|
||||||
};
|
|
||||||
|
|
||||||
Node.prototype.update = function() {
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
// Class NorbertNode
|
|
||||||
jQuery.extend(NorbertNode.prototype, Node.prototype);
|
|
||||||
function NorbertNode() {
|
|
||||||
this.norbert = new Image();
|
|
||||||
this.norbert.src = "norbert.png";
|
|
||||||
this.position = new Vector(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
NorbertNode.prototype.draw = function() {
|
|
||||||
var s = Math.abs(this.projection.z / (width / 2));
|
|
||||||
s *= 2;
|
|
||||||
var x = Math.floor(this.projection.x - (186 / s));
|
|
||||||
var y = Math.floor(this.projection.y - (50 / s));
|
|
||||||
context.drawImage(this.norbert, x, y);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Class Pamela
|
|
||||||
|
|
||||||
Pamela.prototype.millis = function() {
|
|
||||||
return (new Date).getTime();
|
|
||||||
};
|
|
||||||
|
|
||||||
var ooo = 2;
|
|
||||||
|
|
||||||
$(document).ready(function() {
|
|
||||||
new Pamela();
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
function Pamela() {
|
|
||||||
|
|
||||||
var p = Processing("pamela");
|
|
||||||
context = p.context;
|
|
||||||
width = context.canvas.clientWidth;
|
|
||||||
height = context.canvas.clientHeight;
|
|
||||||
|
|
||||||
var entities = ["sandb", "fs111", "tazo", "wouter", "unknown", "unknown", "unknown", "unknown"];
|
|
||||||
var m = new Matrix();
|
|
||||||
|
|
||||||
p.play = true;
|
|
||||||
|
|
||||||
p.startTime = p.millis();
|
|
||||||
|
|
||||||
p.setup = function() {
|
|
||||||
//p.noStroke();
|
|
||||||
var count = 0;
|
|
||||||
this.nodes = [];
|
|
||||||
this.nodes[count++] = new NorbertNode();
|
|
||||||
for (var i = 0; i < entities.length; i++) {
|
|
||||||
this.nodes[count++] = new Node(entities[i]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
p.animate = function(secs) {
|
|
||||||
return -0.5 + (this.millis() % secs) / secs;
|
|
||||||
};
|
|
||||||
|
|
||||||
p.mousePressed = function() {
|
|
||||||
this.play = !this.play;
|
|
||||||
};
|
|
||||||
|
|
||||||
p.draw = function() {
|
|
||||||
|
|
||||||
if (!this.play)
|
|
||||||
return;
|
|
||||||
|
|
||||||
m.resetMatrix();
|
|
||||||
var startAnimation = 1 - ((p.millis() - p.startTime) / 3000);
|
|
||||||
if (startAnimation > 0) {
|
|
||||||
startAnimation *= startAnimation;
|
|
||||||
m.translate((width / 4) * startAnimation, 0 ,0);
|
|
||||||
m.translate(0, 0, Math.PI * startAnimation);
|
|
||||||
}
|
|
||||||
|
|
||||||
m.translate(0, 0, -width / 6);
|
|
||||||
m.rotateY(this.animate(7000) * 2 * Math.PI);
|
|
||||||
|
|
||||||
for (var i = 0; i < this.nodes.length; i++) {
|
|
||||||
this.nodes[i].project(m);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.nodes.sort(function(a, b) {
|
|
||||||
return a.projection.z - b.projection.z;
|
|
||||||
});
|
|
||||||
|
|
||||||
context.clearRect(0,0,width,height);
|
|
||||||
context.save();
|
|
||||||
context.translate(width / 2, height / 2);
|
|
||||||
for (var i = 0; i < this.nodes.length; i++) {
|
|
||||||
this.nodes[i].draw();
|
|
||||||
}
|
|
||||||
context.restore();
|
|
||||||
};
|
|
||||||
|
|
||||||
p.init();
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadImage(name) {
|
|
||||||
var img = new Image();
|
|
||||||
img.src = name;
|
|
||||||
return img;
|
|
||||||
}
|
|
||||||
2349
processing.js
2349
processing.js
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user