almost all processing removed, weirdness in drawing not solved yet
This commit is contained in:
parent
3316efb152
commit
a27346ce9a
74
pamela.js
74
pamela.js
|
@ -160,9 +160,9 @@ function Node(name) {
|
||||||
this.name = name;
|
this.name = name;
|
||||||
var size = Math.min(width, height);
|
var size = Math.min(width, height);
|
||||||
this.position = new Vector(
|
this.position = new Vector(
|
||||||
p.random(size) - (size / 2),
|
(Math.random() * size) - (size / 2),
|
||||||
p.random(size) - (size / 2),
|
(Math.random() * size) - (size / 2),
|
||||||
p.random(size) - (size / 2));
|
(Math.random() * size) - (size / 2));
|
||||||
this.position.scale(0.5);
|
this.position.scale(0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -177,12 +177,15 @@ Node.prototype.project = function(m) {
|
||||||
};
|
};
|
||||||
|
|
||||||
Node.prototype.draw = function() {
|
Node.prototype.draw = function() {
|
||||||
var s = 5000 / -this.projection.z;
|
var scale = 5000 / -this.projection.z;
|
||||||
p.fill(p.color(164 + this.alpha * 0.25));
|
var color = (164 + this.alpha * 0.25);
|
||||||
p.ellipse(this.projection.x, this.projection.y, s, s);
|
context.fillStyle = 'rgb(' + color + ',' + color + ',' + color + ')';
|
||||||
context.font = s / 2 + "pt sans-serif";
|
context.arc(this.projection.x, this.projection.y, scale, 0, Math.PI * 2, false);
|
||||||
p.fill(p.color(164, 192 + this.alpha * 0.25, 164));
|
context.fill();
|
||||||
context.fillText(this.name, this.projection.x + s, this.projection.y + s / 2);
|
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() {
|
Node.prototype.update = function() {
|
||||||
|
@ -192,31 +195,38 @@ Node.prototype.update = function() {
|
||||||
// Class NorbertNode
|
// Class NorbertNode
|
||||||
jQuery.extend(NorbertNode.prototype, Node.prototype);
|
jQuery.extend(NorbertNode.prototype, Node.prototype);
|
||||||
function NorbertNode() {
|
function NorbertNode() {
|
||||||
this.norbert = p.loadImage("norbert.png");
|
this.norbert = new Image();
|
||||||
|
this.norbert.src = "norbert.png";
|
||||||
this.position = new Vector(0, 0, 0);
|
this.position = new Vector(0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
NorbertNode.prototype.draw = function() {
|
NorbertNode.prototype.draw = function() {
|
||||||
var s = this.projection.z / (width / 2);
|
var s = Math.abs(this.projection.z / (width / 2));
|
||||||
s *= 3;
|
s *= 2;
|
||||||
var x = this.projection.x - (186 / s);
|
var x = Math.floor(this.projection.x - (186 / s));
|
||||||
var y = this.projection.y - (150 / s);
|
var y = Math.floor(this.projection.y - (50 / s));
|
||||||
p.image(this.norbert, x, y, 372 / s, 300 / s);
|
context.drawImage(this.norbert, x, y);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Class Pamela
|
||||||
|
|
||||||
var p;
|
Pamela.prototype.millis = function() {
|
||||||
|
return (new Date).getTime();
|
||||||
|
};
|
||||||
|
|
||||||
|
var ooo = 2;
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
goPamela();
|
new Pamela();
|
||||||
});
|
});
|
||||||
|
|
||||||
function goPamela() {
|
|
||||||
|
|
||||||
p = Processing("pamela");
|
function Pamela() {
|
||||||
|
|
||||||
|
var p = Processing("pamela");
|
||||||
context = p.context;
|
context = p.context;
|
||||||
width = p.width;
|
width = context.canvas.clientWidth;
|
||||||
height = p.height;
|
height = context.canvas.clientHeight;
|
||||||
|
|
||||||
var entities = ["sandb", "fs111", "tazo", "wouter", "unknown", "unknown", "unknown", "unknown"];
|
var entities = ["sandb", "fs111", "tazo", "wouter", "unknown", "unknown", "unknown", "unknown"];
|
||||||
var m = new Matrix();
|
var m = new Matrix();
|
||||||
|
@ -226,7 +236,7 @@ function goPamela() {
|
||||||
p.startTime = p.millis();
|
p.startTime = p.millis();
|
||||||
|
|
||||||
p.setup = function() {
|
p.setup = function() {
|
||||||
p.noStroke();
|
//p.noStroke();
|
||||||
var count = 0;
|
var count = 0;
|
||||||
this.nodes = [];
|
this.nodes = [];
|
||||||
this.nodes[count++] = new NorbertNode();
|
this.nodes[count++] = new NorbertNode();
|
||||||
|
@ -236,7 +246,7 @@ function goPamela() {
|
||||||
};
|
};
|
||||||
|
|
||||||
p.animate = function(secs) {
|
p.animate = function(secs) {
|
||||||
return -0.5 + (p.millis() % secs) / secs;
|
return -0.5 + (this.millis() % secs) / secs;
|
||||||
};
|
};
|
||||||
|
|
||||||
p.mousePressed = function() {
|
p.mousePressed = function() {
|
||||||
|
@ -249,7 +259,6 @@ function goPamela() {
|
||||||
return;
|
return;
|
||||||
|
|
||||||
m.resetMatrix();
|
m.resetMatrix();
|
||||||
//m.rotateZ(this.animate(8000) * 2 * Math.PI);
|
|
||||||
var startAnimation = 1 - ((p.millis() - p.startTime) / 3000);
|
var startAnimation = 1 - ((p.millis() - p.startTime) / 3000);
|
||||||
if (startAnimation > 0) {
|
if (startAnimation > 0) {
|
||||||
startAnimation *= startAnimation;
|
startAnimation *= startAnimation;
|
||||||
|
@ -257,10 +266,7 @@ function goPamela() {
|
||||||
m.translate(0, 0, Math.PI * startAnimation);
|
m.translate(0, 0, Math.PI * startAnimation);
|
||||||
}
|
}
|
||||||
|
|
||||||
//m.translate(0, 0, -width / 4 + Math.abs(this.animate(21000) * (-width / 4)));
|
|
||||||
m.translate(0, 0, -width / 6);
|
m.translate(0, 0, -width / 6);
|
||||||
//if (startAnimation > 0)
|
|
||||||
//m.rotateX(2 * Math.PI * startAnimation);
|
|
||||||
m.rotateY(this.animate(7000) * 2 * Math.PI);
|
m.rotateY(this.animate(7000) * 2 * Math.PI);
|
||||||
|
|
||||||
for (var i = 0; i < this.nodes.length; i++) {
|
for (var i = 0; i < this.nodes.length; i++) {
|
||||||
|
@ -271,14 +277,20 @@ function goPamela() {
|
||||||
return a.projection.z - b.projection.z;
|
return a.projection.z - b.projection.z;
|
||||||
});
|
});
|
||||||
|
|
||||||
p.background(255);
|
context.clearRect(0,0,width,height);
|
||||||
p.pushMatrix();
|
context.save();
|
||||||
p.translate(width / 2, height / 2);
|
context.translate(width / 2, height / 2);
|
||||||
for (var i = 0; i < this.nodes.length; i++) {
|
for (var i = 0; i < this.nodes.length; i++) {
|
||||||
this.nodes[i].draw();
|
this.nodes[i].draw();
|
||||||
}
|
}
|
||||||
p.popMatrix();
|
context.restore();
|
||||||
};
|
};
|
||||||
|
|
||||||
p.init();
|
p.init();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function loadImage(name) {
|
||||||
|
var img = new Image();
|
||||||
|
img.src = name;
|
||||||
|
return img;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user