pamela, adapted for 26c3. mouse control added, resize problems solved, alpha + color depth filtering, synchronisation with new and old entries
This commit is contained in:
Pieter Iserbyt
parent
a27346ce9a
commit
d6853b8c8f
BIN
img/ccc.png
Normal file
BIN
img/ccc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
img/max-col.png
Normal file
BIN
img/max-col.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
img/max.png
Normal file
BIN
img/max.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 549 B |
BIN
img/min-col.png
Normal file
BIN
img/min-col.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
img/min.png
Normal file
BIN
img/min.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 673 B |
BIN
img/norbert.png
Normal file
BIN
img/norbert.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
15
index.xhtml
15
index.xhtml
|
|
@ -1,11 +1,14 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Pamela</title>
|
||||
<script src="jquery-1.3.2.js" type="text/javascript" />
|
||||
<script src="processing.js" type="text/javascript" />
|
||||
<script src="pamela.js" type="text/javascript" />
|
||||
<script src="js/jquery-1.3.2.js" type="text/javascript" />
|
||||
<script src="js/pamela-buttons.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.js" type="text/javascript" />
|
||||
<style type="text/css">* {margin:0; padding:0}</style>
|
||||
</head>
|
||||
<body style="text-align: center;">
|
||||
<canvas id="pamela" width="1000px" height="400px"></canvas>
|
||||
<body style="background-color: #333;">
|
||||
<canvas id="pamela"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
16
js/input.js
Normal file
16
js/input.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
[
|
||||
"00:01:e8:04:99:be",
|
||||
"00:0a:e4:2f:30:15",
|
||||
"00:0a:e4:30:e3:49",
|
||||
"00:0a:e4:3b:fa:33",
|
||||
"00:0a:e4:3d:a4:fd",
|
||||
"00:0b:5d:24:25:de",
|
||||
"00:0d:29:04:49:c5",
|
||||
"00:0d:56:74:45:ab",
|
||||
"00:0d:56:b7:fd:ac",
|
||||
"00:0d:60:12:a7:be",
|
||||
"00:0d:60:5d:eb:c7",
|
||||
"40:61:86:11:72:b2",
|
||||
"90:e6:ba:1f:0b:75",
|
||||
"90:e6:ba:62:2b:da",
|
||||
]
|
||||
7
js/input.php
Normal file
7
js/input.php
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<?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:08:2a:07:3d:0b",
|
||||
"00:0d:60:77:44:b5",
|
||||
"00:11:85:6a:1f:ec",
|
||||
"00:1f:16:0c:ad:68",
|
||||
"00:21:9b:df:52:9c", ]
|
||||
4376
js/jquery-1.3.2.js
vendored
Normal file
4376
js/jquery-1.3.2.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
87
js/pamela-buttons.js
Normal file
87
js/pamela-buttons.js
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
// Class IFace button
|
||||
function IFaceButton(x, y, width, height) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.moveTo(x, y);
|
||||
}
|
||||
|
||||
IFaceButton.prototype.moveTo = function(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
};
|
||||
|
||||
IFaceButton.prototype.execute = function() {
|
||||
};
|
||||
|
||||
IFaceButton.prototype.draw = function() {
|
||||
};
|
||||
|
||||
IFaceButton.prototype.isHovered = function(x, y) {
|
||||
return (this.x <= x) && (this.y <= y) && (this.x + this.width >= x) && (this.y + this.height >= y);
|
||||
};
|
||||
|
||||
// Class fullscreen button
|
||||
jQuery.extend(FullScreenButton.prototype, IFaceButton.prototype);
|
||||
function FullScreenButton(x, y) {
|
||||
|
||||
this.width = 64;
|
||||
this.height = 64;
|
||||
|
||||
this.isFullScreen = false;
|
||||
this.isHover = false;
|
||||
|
||||
this.minCol = new Image();
|
||||
this.minCol.src = "img/min-col.png";
|
||||
this.maxCol = new Image();
|
||||
this.maxCol.src = "img/max-col.png";
|
||||
this.min = new Image();
|
||||
this.min.src = "img/min.png";
|
||||
this.max = new Image();
|
||||
this.max.src = "img/max.png";
|
||||
};
|
||||
|
||||
FullScreenButton.prototype.draw = function() {
|
||||
if (this.isFullScreen) {
|
||||
if (this.isHover) {
|
||||
context.drawImage(this.minCol, this.x, this.y);
|
||||
} else {
|
||||
context.drawImage(this.min, this.x, this.y);
|
||||
}
|
||||
} else {
|
||||
if (this.isHover) {
|
||||
context.drawImage(this.maxCol, this.x, this.y);
|
||||
} else {
|
||||
context.drawImage(this.max, this.x, this.y);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
FullScreenButton.prototype.execute = function() {
|
||||
this.isFullScreen = !this.isFullScreen;
|
||||
//TODO: do somth
|
||||
};
|
||||
|
||||
// Class IFace buttons
|
||||
function IFaceButtons() {
|
||||
this.buttons = [];
|
||||
};
|
||||
|
||||
IFaceButtons.prototype.add = function(button) {
|
||||
this.buttons[this.buttons.length] = button;
|
||||
this.reposition();
|
||||
};
|
||||
|
||||
IFaceButtons.prototype.reposition = function() {
|
||||
var x = width - 64;
|
||||
var y = height - 64;
|
||||
for (var i = 0; i < this.buttons.length; i++) {
|
||||
this.buttons[i].moveTo(x, y);
|
||||
x -= 64;
|
||||
}
|
||||
};
|
||||
|
||||
IFaceButtons.prototype.draw = function() {
|
||||
for (var i = 0; i < this.buttons.length; i++)
|
||||
this.buttons[i].draw();
|
||||
};
|
||||
|
||||
156
js/pamela-matrices.js
Normal file
156
js/pamela-matrices.js
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
// 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;
|
||||
};
|
||||
|
||||
Matrix.prototype.clone = function() {
|
||||
return new Matrix(this.m.slice());
|
||||
}
|
||||
|
||||
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 = this.alpha / 255;
|
||||
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);
|
||||
};
|
||||
|
||||
195
js/pamela.js
Normal file
195
js/pamela.js
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
//http://192.168.42.53:5984/pamela/_design/pamela/_view/online
|
||||
|
||||
var context;
|
||||
var width;
|
||||
var height;
|
||||
|
||||
// Class Pamela
|
||||
function Pamela(canvas) {
|
||||
context = canvas.getContext("2d");
|
||||
width = context.canvas.clientWidth;
|
||||
height = context.canvas.clientHeight;
|
||||
|
||||
this.norbertNode = new NorbertNode();
|
||||
this.nodes = [this.norbertNode];
|
||||
|
||||
this.mouse = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
||||
this.buttons = new IFaceButtons();
|
||||
this.fullScreenButton = new FullScreenButton();
|
||||
this.buttons.add(this.fullScreenButton);
|
||||
this.resize();
|
||||
|
||||
this.m = new Matrix();
|
||||
this.startTime = this.millis();
|
||||
|
||||
var self = this;
|
||||
canvas.onmousemove = function(event) { self.mousemove(event); };
|
||||
canvas.onmouseup = function(event) { self.mouseclick(event); };
|
||||
$(window).resize(function () { self.resize(); });
|
||||
}
|
||||
|
||||
Pamela.prototype.updateNodes = function(entities) {
|
||||
|
||||
// copy current nodes
|
||||
var curN = this.nodes;
|
||||
|
||||
// reset current nodes
|
||||
this.nodes = [];
|
||||
|
||||
while (curN.length > 0) {
|
||||
var n = curN.pop();
|
||||
|
||||
// remove dead nodes
|
||||
if (n.isDead)
|
||||
continue;
|
||||
|
||||
// keep norbert around always
|
||||
if (n == this.norbertNode) {
|
||||
this.nodes.push(n);
|
||||
continue;
|
||||
}
|
||||
|
||||
// was around and keep around?
|
||||
var found = false;
|
||||
for (var i = 0; i < entities.length; i++) {
|
||||
|
||||
if (entities[i] != n.name)
|
||||
continue;
|
||||
|
||||
this.nodes.push(n);
|
||||
entities[i] = null;
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
|
||||
// no longer around
|
||||
if (!found) {
|
||||
n.setMode("dying");
|
||||
this.nodes.push(n);
|
||||
}
|
||||
}
|
||||
|
||||
// wasn't around before
|
||||
for (var i = 0; i < entities.length; i++) {
|
||||
if (entities[i] == null)
|
||||
continue;
|
||||
this.nodes.push(new Node(entities[i]));
|
||||
}
|
||||
};
|
||||
|
||||
Pamela.prototype.millis = function() {
|
||||
return (new Date).getTime();
|
||||
};
|
||||
|
||||
Pamela.prototype.animate = function(secs) {
|
||||
return -0.5 + (this.millis() % secs) / secs;
|
||||
};
|
||||
|
||||
Pamela.prototype.start = function() {
|
||||
if (this.play) return;
|
||||
this.play = true;
|
||||
this.updateEntries();
|
||||
this.fire();
|
||||
};
|
||||
|
||||
Pamela.prototype.mousemove = function(event) {
|
||||
this.fullScreenButton.isHover = this.fullScreenButton.isHovered(event.offsetX, event.offsetY);
|
||||
this.mouse.x = event.offsetX;
|
||||
this.mouse.y = event.offsetY;
|
||||
};
|
||||
|
||||
Pamela.prototype.mouseclick = function(event) {
|
||||
if (this.fullScreenButton.isHovered(event.offsetX, event.offsetY))
|
||||
this.fullScreenButton.execute();
|
||||
};
|
||||
|
||||
Pamela.prototype.mousein = function(event) {
|
||||
};
|
||||
|
||||
Pamela.prototype.mouseout = function(event) {
|
||||
};
|
||||
|
||||
Pamela.prototype.fire = function() {
|
||||
if (!this.play) return;
|
||||
var self = this;
|
||||
this.timer = setTimeout(function() { self.draw(); }, 10);
|
||||
};
|
||||
|
||||
Pamela.prototype.stop = function() {
|
||||
clearTimeout(this.timer);
|
||||
clearTimeout(this.entriesTimer);
|
||||
this.play = false;
|
||||
};
|
||||
|
||||
Pamela.prototype.draw = function() {
|
||||
|
||||
if (!this.play)
|
||||
return;
|
||||
|
||||
var m = this.m;
|
||||
|
||||
m.resetMatrix();
|
||||
var startAnimation = 1 - ((this.millis() - this.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 / 5);
|
||||
m.rotateY(this.animate(7000) * 2 * Math.PI);
|
||||
m.rotateX(this.animate(12000) * 2 * Math.PI);
|
||||
|
||||
m.rotateY((this.mouse.x % width) / width * Math.PI);
|
||||
m.rotateX((this.mouse.y % height) / height * 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.save();
|
||||
context.fillStyle = "#333";
|
||||
context.fillRect( 0, 0, width, height );
|
||||
context.translate(width / 2, height / 2);
|
||||
for (var i = 0; i < this.nodes.length; i++) {
|
||||
this.nodes[i].draw();
|
||||
}
|
||||
context.restore();
|
||||
|
||||
this.buttons.draw();
|
||||
|
||||
this.fire();
|
||||
};
|
||||
|
||||
Pamela.prototype.resize = function() {
|
||||
var canvas = $("#pamela")[0];
|
||||
var windowWidth = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
|
||||
var windowHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
|
||||
canvas.width = windowWidth - 10;
|
||||
canvas.height = windowHeight - 10;
|
||||
width = context.canvas.clientWidth;
|
||||
height = context.canvas.clientHeight;
|
||||
this.buttons.reposition();
|
||||
};
|
||||
|
||||
Pamela.prototype.updateEntries = function() {
|
||||
var self = this;
|
||||
$.getJSON("js/input.php", function(data) {
|
||||
self.updateNodes(data);
|
||||
});
|
||||
self.entriesTimer = setTimeout(function() { self.updateEntries(); }, 60000);
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
var canvas = $("#pamela")[0];
|
||||
var pamela = new Pamela(canvas);
|
||||
pamela.start();
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user