More configurability through config.php
This commit is contained in:
sandbender
parent
cd979d0bf6
commit
5098db94eb
|
|
@ -1,5 +0,0 @@
|
|||
Addtype application/octet-stream .ttf .otf
|
||||
AddType application/vnd.ms-fontobject .eot
|
||||
|
||||
RewriteRule (.*).php $1
|
||||
RewriteRule (.*).hmtl $1
|
||||
50
admin.php
50
admin.php
|
|
@ -1,50 +0,0 @@
|
|||
<?php
|
||||
require_once("lib/trans.php");
|
||||
?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Pamela</title>
|
||||
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="pamela.css" type="text/css" media="screen" />
|
||||
</head>
|
||||
<body>
|
||||
<header id="hdr">
|
||||
<div>
|
||||
<img src="img/pamela-logo.png" alt="Pamela" />
|
||||
</div>
|
||||
</header>
|
||||
<h1>Name your macs</h1>
|
||||
<p>If you want to have a name shown instead of your mac, enter your mac and desired name below.</p>
|
||||
<form method="post">
|
||||
<table>
|
||||
<thead>
|
||||
<th>Mac</th>
|
||||
<th>Name</th>
|
||||
<th>Visible</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
$known_macs = known_macs_get();
|
||||
$counter = 0;
|
||||
foreach ($known_macs as $mac => $name) {
|
||||
?>
|
||||
<tr>
|
||||
<td><input name="mac-<?=$counter?>" type="text" value="<?=$mac?>" /></td>
|
||||
<td><input name="name-<?=$counter?>" type="text" value="<?=$name?>" /></td>
|
||||
<td><input name="show-<?=$counter?>" type="checkbox" <?=$name==NULL?"":"checked"?> /></td>
|
||||
</tr>
|
||||
<?php
|
||||
$counter++;
|
||||
}
|
||||
?>
|
||||
<tr>
|
||||
<td><input name="mac-<?=$counter?>" type="text" /></td>
|
||||
<td><input name="name-<?=$counter?>" type="text" /></td>
|
||||
<td><input name="show-<?=$counter?>" type="checkbox" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<input type="submit" value="submit" name="submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
14
index.html
14
index.html
|
|
@ -1,14 +0,0 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Pamela</title>
|
||||
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
|
||||
<script src="js/pamela-buttons.js" type="text/javascript"></script>
|
||||
<script src="js/pamela-nodes.js" type="text/javascript"></script>
|
||||
<script src="js/pamela-matrices.js" type="text/javascript"></script>
|
||||
<script src="js/pamela.js" type="text/javascript"></script>
|
||||
<style type="text/css">* {margin:0; padding:0} body { background-color: #fff; }</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="pamela"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
24
index.php
Normal file
24
index.php
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Pamela</title>
|
||||
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
|
||||
<script src="js/pamela-conf.php" type="text/javascript"></script>
|
||||
<script src="js/pamela-buttons.js" type="text/javascript"></script>
|
||||
<script src="js/pamela-nodes.js" type="text/javascript"></script>
|
||||
<script src="js/pamela-matrices.js" type="text/javascript"></script>
|
||||
<script src="js/pamela.js" type="text/javascript"></script>
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: <?php echo PAM_BGCOLOR; ?>;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="pamela"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -98,7 +98,8 @@ function DownloadScriptButton(x, y) {
|
|||
|
||||
DownloadScriptButton.prototype.draw = function() {
|
||||
if (this.isHover) {
|
||||
context.fillStyle = 'rgb(192,192,192)';
|
||||
//context.fillStyle = 'rgb(192,192,192)';
|
||||
context.fillStyle = config.buttonColor;
|
||||
context.font = "18pt sans-serif";
|
||||
context.fillText("Download pamela scanner script", this.x, this.y - 10);
|
||||
context.drawImage(this.dlCol, this.x, this.y);
|
||||
|
|
|
|||
10
js/pamela-conf.php
Normal file
10
js/pamela-conf.php
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<?php
|
||||
require_once("../config.php");
|
||||
header('Content-Type: application/javascript');
|
||||
?>
|
||||
config = new function() {
|
||||
this.bgcolor = "<?php echo PAM_BGCOLOR; ?>";
|
||||
this.image = "<?php echo PAM_IMAGE; ?>";
|
||||
this.buttonColor = "<?php echo PAM_BUT_COLOR; ?>";
|
||||
this.buttonShow = <?php echo PAM_BUT_SHOW=="TRUE"?"true":"false"; ?>;
|
||||
}
|
||||
|
|
@ -21,25 +21,25 @@
|
|||
// Class color generator
|
||||
|
||||
function ColorGenerator() {
|
||||
this.colors = [
|
||||
[255, 0, 0],
|
||||
[255, 255, 0],
|
||||
[ 0, 255, 0],
|
||||
[ 0, 255, 255],
|
||||
[ 0, 0, 255],
|
||||
[255, 0, 255]
|
||||
];
|
||||
this.colorGeneratorValue = 0;
|
||||
this.colors = [
|
||||
[255, 0, 0],
|
||||
[255, 255, 0],
|
||||
[ 0, 255, 0],
|
||||
[ 0, 255, 255],
|
||||
[ 0, 0, 255],
|
||||
[255, 0, 255]
|
||||
];
|
||||
this.colorGeneratorValue = 0;
|
||||
}
|
||||
|
||||
ColorGenerator.prototype.generate = function() {
|
||||
if (this.colorGeneratorValue > this.colors.length)
|
||||
this.colorGeneratorValue = 0;
|
||||
if (this.colorGeneratorValue > this.colors.length)
|
||||
this.colorGeneratorValue = 0;
|
||||
|
||||
// weirdo fix for chrome bug where the colors get
|
||||
// garbage collected. I think.
|
||||
var c = this.colors[this.colorGeneratorValue++];
|
||||
return [c[0], c[1], c[2]];
|
||||
// weirdo fix for chrome bug where the colors get
|
||||
// garbage collected. I think.
|
||||
var c = this.colors[this.colorGeneratorValue++];
|
||||
return [c[0], c[1], c[2]];
|
||||
};
|
||||
|
||||
var colorGenerator = new ColorGenerator();
|
||||
|
|
@ -47,124 +47,124 @@ var colorGenerator = new ColorGenerator();
|
|||
// 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.color = colorGenerator.generate();
|
||||
this.position = new Vector(
|
||||
(Math.random() * size) - (size / 2),
|
||||
(Math.random() * size) - (size / 2),
|
||||
(Math.random() * size) - (size / 2));
|
||||
this.position.scale(0.5);
|
||||
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.color = colorGenerator.generate();
|
||||
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);
|
||||
}
|
||||
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);
|
||||
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);
|
||||
},
|
||||
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 = 0.5 + this.alpha / 128;
|
||||
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;
|
||||
}
|
||||
draw: function() {
|
||||
if (this.projection.z > -1) return;
|
||||
var scale = width * 3 / -this.projection.z;
|
||||
var alphaScale = 0.5 + this.alpha / 128;
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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) {
|
||||
},
|
||||
|
||||
project: function(m) {
|
||||
},
|
||||
|
||||
draw: function() {
|
||||
}
|
||||
|
||||
draw: function() {
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// For inheriting classes
|
||||
|
|
@ -174,22 +174,22 @@ 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/whitespace-logo-square-transp-drop.png";
|
||||
self = this;
|
||||
this.norbertLoaded = false;
|
||||
this.norbert.onload=function() { self.norbertLoaded = true; }
|
||||
this.position = new Vector(0, 0, 0);
|
||||
parent = this;
|
||||
this.norbert = new Image();
|
||||
this.norbertLoaded = false;
|
||||
$(this.norbert).load(function() {
|
||||
parent.norbertLoaded = true;
|
||||
parent.width = parent.norbert.width;
|
||||
parent.height = parent.norbert.height;
|
||||
});
|
||||
this.norbert.src = config.image;
|
||||
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 - (280 / s));
|
||||
var y = Math.floor(this.projection.y - (240 / s));
|
||||
//var x = Math.floor(this.projection.x - (192 / s));
|
||||
//var y = Math.floor(this.projection.y - (180 / s));
|
||||
if (this.norbertLoaded)
|
||||
context.drawImage(this.norbert, x, y);
|
||||
if (!this.norbertLoaded) return;
|
||||
var x = this.projection.x - this.width / 2;
|
||||
var y = this.projection.y - this.height / 2;
|
||||
context.drawImage(this.norbert, x, y);
|
||||
};
|
||||
|
||||
|
|
|
|||
271
js/pamela.js
271
js/pamela.js
|
|
@ -23,183 +23,184 @@ 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.downloadScriptButton = new DownloadScriptButton();
|
||||
this.buttons.add(this.downloadScriptButton);
|
||||
this.resize();
|
||||
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.downloadScriptButton = new DownloadScriptButton();
|
||||
this.buttons.add(this.downloadScriptButton);
|
||||
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(); });
|
||||
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 = [];
|
||||
// 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;
|
||||
}
|
||||
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++) {
|
||||
// was around and keep around?
|
||||
var found = false;
|
||||
for (var i = 0; i < entities.length; i++) {
|
||||
|
||||
if (entities[i] != n.name)
|
||||
continue;
|
||||
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]));
|
||||
}
|
||||
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();
|
||||
return (new Date).getTime();
|
||||
};
|
||||
|
||||
Pamela.prototype.animate = function(secs) {
|
||||
return -0.5 + (this.millis() % secs) / secs;
|
||||
return -0.5 + (this.millis() % secs) / secs;
|
||||
};
|
||||
|
||||
Pamela.prototype.start = function() {
|
||||
if (this.play) return;
|
||||
this.play = true;
|
||||
this.updateEntries();
|
||||
this.fire();
|
||||
if (this.play) return;
|
||||
this.play = true;
|
||||
this.updateEntries();
|
||||
this.fire();
|
||||
};
|
||||
|
||||
Pamela.prototype.mousemove = function(event) {
|
||||
this.buttons.mousemove(event);
|
||||
this.mouse.x = event.clientX;
|
||||
this.mouse.y = event.clientY;
|
||||
this.buttons.mousemove(event);
|
||||
this.mouse.x = event.clientX;
|
||||
this.mouse.y = event.clientY;
|
||||
};
|
||||
|
||||
Pamela.prototype.mouseclick = function(event) {
|
||||
this.buttons.mouseclick(event);
|
||||
this.buttons.mouseclick(event);
|
||||
};
|
||||
|
||||
Pamela.prototype.fire = function() {
|
||||
if (!this.play) return;
|
||||
var self = this;
|
||||
this.timer = setTimeout(function() { self.draw(); }, 50);
|
||||
if (!this.play) return;
|
||||
var self = this;
|
||||
this.timer = setTimeout(function() { self.draw(); }, 50);
|
||||
};
|
||||
|
||||
Pamela.prototype.stop = function() {
|
||||
clearTimeout(this.timer);
|
||||
clearTimeout(this.entriesTimer);
|
||||
this.play = false;
|
||||
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;
|
||||
});
|
||||
|
||||
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 = "#fff";
|
||||
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();
|
||||
context.save();
|
||||
context.fillStyle = config.bgcolor;
|
||||
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.fire();
|
||||
if (config.buttonShow)
|
||||
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();
|
||||
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("macs.php", function(data) {
|
||||
self.updateNodes(data);
|
||||
});
|
||||
self.entriesTimer = setTimeout(function() { self.updateEntries(); }, 20000);
|
||||
var self = this;
|
||||
$.getJSON("macs.php", function(data) {
|
||||
self.updateNodes(data);
|
||||
});
|
||||
self.entriesTimer = setTimeout(function() { self.updateEntries(); }, 20000);
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
var canvas = $("#pamela")[0];
|
||||
var pamela = new Pamela(canvas);
|
||||
pamela.start();
|
||||
var canvas = $("#pamela")[0];
|
||||
var pamela = new Pamela(canvas);
|
||||
pamela.start();
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user