optimized corpus map behaviours, now scrambling

This commit is contained in:
Bachir Soussi Chiadmi
2018-03-09 23:48:50 +01:00
parent 7bfb04a025
commit af9c95ad97
3 changed files with 156 additions and 90 deletions
@@ -143,10 +143,14 @@
_attracter.fixed = true; _attracter.fixed = true;
_repulser_center = _physics.makeParticle(100, _canvas.width/2, _canvas.height/2); _repulser_center = _physics.makeParticle(100, _canvas.width/2, _canvas.height/2);
_repulser_center.fixed = true; _repulser_center.fixed = true;
_repulser_top = _physics.makeParticle(100, _canvas.width/2, 100); _scrambler_TL = _physics.makeParticle(100, -100, -100);
_repulser_top.fixed = true; _scrambler_TL.fixed = true;
_repulser_bottom = _physics.makeParticle(100, _canvas.width/2, _canvas.height-100); _scrambler_TR = _physics.makeParticle(100, _canvas.width+100, -100);
_repulser_bottom.fixed = true; _scrambler_TR.fixed = true;
_scrambler_BR = _physics.makeParticle(100, _canvas.width+100, _canvas.height+100);
_scrambler_BR.fixed = true;
_scrambler_BL = _physics.makeParticle(100, -100, _canvas.height+100);
_scrambler_BL.fixed = true;
// TODO: move _attracter and _repulser on window resize // TODO: move _attracter and _repulser on window resize
}; };
@@ -196,14 +200,14 @@
this.velocity_threshold = 0.01; this.velocity_threshold = 0.01;
// define radius regarding entries length // define radius regarding entries length
switch(true){ switch(true){
case this.entrees.length > 1 & this.entrees.length <= 3:
this.r = 7.5;
break;
case this.entrees.length > 3: case this.entrees.length > 3:
this.r = 10; this.r = 10;
break; break;
case this.entrees.length > 1 && this.entrees.length <= 3:
this.r = 7;
break;
default: default:
this.r = 5; this.r = 4;
break; break;
} }
@@ -214,6 +218,7 @@
this.faded = false; this.faded = false;
this.center = false; this.center = false;
this.aside = false; this.aside = false;
this.scrambling = false;
// prototypes // prototypes
if (typeof Node.initialized == "undefined") { if (typeof Node.initialized == "undefined") {
@@ -224,7 +229,14 @@
this.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left); this.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left);
this.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top); this.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top);
// physics this.initPhysics();
// if(this.id == '620'){
// _node_pop_up.setNode(this);
// }
};
Node.prototype.initPhysics = function(){
// particule // particule
this.p = _physics.makeParticle(this.mass, this.x, this.y); this.p = _physics.makeParticle(this.mass, this.x, this.y);
this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor); this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
@@ -234,14 +246,15 @@
// repulsers // repulsers
this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2); this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2);
this.repulse_center.on = false; this.repulse_center.on = false;
// this.repulse_left = _physics.makeAttraction(_repulser_top, this.p, -100, _canvas.height/3);
// this.repulse_left.on = false;
// this.repulse_right = _physics.makeAttraction(_repulser_bottom, this.p, -100, _canvas.height/3);
// this.repulse_right.on = false;
// if(this.id == '620'){ this.scramble_TL = _physics.makeAttraction(_scrambler_TL, this.p, -100, _canvas.height/3);
// _node_pop_up.setNode(this); this.scramble_TL.on = false;
// } this.scramble_TR = _physics.makeAttraction(_scrambler_TR, this.p, -100, _canvas.height/3);
this.scramble_TR.on = false;
this.scramble_BR = _physics.makeAttraction(_scrambler_BR, this.p, -100, _canvas.height/3);
this.scramble_BR.on = false;
this.scramble_BL = _physics.makeAttraction(_scrambler_BL, this.p, -100, _canvas.height/3);
this.scramble_BL.on = false;
}; };
Node.prototype.calcWallLimits = function(){ Node.prototype.calcWallLimits = function(){
@@ -262,11 +275,11 @@
// this.p.velocity.multiplyScalar(0.99); // this.p.velocity.multiplyScalar(0.99);
// if(!this.p.resting()){ if(!this.p.resting()){
// this.checkVelocityThreshold(); // this.checkVelocityThreshold();
this.checkWallBouncing(); this.checkWallBouncing();
this.updatePos(); this.updatePos();
// } }
if(!this.aside) if(!this.aside)
this.checkMouse(); this.checkMouse();
@@ -276,10 +289,12 @@
}; };
Node.prototype.checkVelocityThreshold = function(){ Node.prototype.checkVelocityThreshold = function(){
if (Math.abs(this.p.velocity.x) < this.velocity_threshold if(!this.centered || !this.aside){
&& Math.abs(this.p.velocity.y) < this.velocity_threshold){ if (Math.abs(this.p.velocity.x) < this.velocity_threshold
&& Math.abs(this.p.velocity.y) < this.velocity_threshold){
this.p.velocity.multiplyScalar(0); this.p.velocity.multiplyScalar(0);
// this.p.makeFixed(); // this.p.makeFixed();
}
} }
}; };
@@ -358,29 +373,50 @@
this.faded = false; this.faded = false;
}; };
Node.prototype.setCenteredOnEntree = function(tid){
this.e_color = 'e_col_'+tid;
this.setCentered();
};
Node.prototype.setCentered = function(){ Node.prototype.setCentered = function(){
this.center = true; this.center = true;
this.stopScrambling();
this.unsetAside(); this.unsetAside();
this.unFade();
this.attract.on = true; this.attract.on = true;
} }
Node.prototype.unsetCentered = function(){ Node.prototype.unsetCentered = function(){
this.center = false; this.center = false;
this.attract.on = false; this.attract.on = false;
} }
Node.prototype.setAside = function(){ Node.prototype.setAside = function(){
this.aside = true; this.aside = true;
this.fade(); this.fade();
this.stopScrambling();
this.unsetCentered(); this.unsetCentered();
this.repulse_center.on = true; this.repulse_center.on = true;
// this.repulse_left.on = true;
// this.repulse_right.on = true;
} }
Node.prototype.unsetAside = function(){ Node.prototype.unsetAside = function(){
this.aside = false; this.aside = false;
this.unFade();
this.repulse_center.on = false; this.repulse_center.on = false;
// this.repulse_left.on = false; }
// this.repulse_right.on = false;
Node.prototype.scramble = function(){
this.scrambling = true;
this.unsetCentered();
this.unsetAside();
this.scramble_TL.on = true;
this.scramble_TR.on = true;
this.scramble_BR.on = true;
this.scramble_BL.on = true;
}
Node.prototype.stopScrambling = function(){
this.scrambling = false;
this.scramble_TL.on = false;
this.scramble_TR.on = false;
this.scramble_BR.on = false;
this.scramble_BL.on = false;
} }
Node.prototype.draw = function(){ Node.prototype.draw = function(){
@@ -421,6 +457,8 @@
// colisions between _particules // colisions between _particules
for (var n = 0; n < _nodes.length; n++) { for (var n = 0; n < _nodes.length; n++) {
if(_nodes[n].scrambling) continue;
for (var q = n+1; q < _nodes.length; q++) { for (var q = n+1; q < _nodes.length; q++) {
if(q===n) continue; if(q===n) continue;
@@ -458,8 +496,8 @@
_nodes[q].p.velocity.y = newVelY2; _nodes[q].p.velocity.y = newVelY2;
// slow down particule on impact // slow down particule on impact
_nodes[n].p.velocity.multiplyScalar(_nodes[n].center ? 0.95 : 0.90); _nodes[n].p.velocity.multiplyScalar(_nodes[n].center ? 0.90 : 0.90);
_nodes[q].p.velocity.multiplyScalar(_nodes[q].center ? 0.95 : 0.90); _nodes[q].p.velocity.multiplyScalar(_nodes[q].center ? 0.90 : 0.90);
// move particles if they overlap // move particles if they overlap
@@ -500,31 +538,25 @@
// | _|| ' \ _| '_/ -_) -_|_-< // | _|| ' \ _| '_/ -_) -_|_-<
// |___|_||_\__|_| \___\___/__/ // |___|_||_\__|_| \___\___/__/
function filterEntree(t){ function filterEntree(t){
// for (tid of _nodes_by_entries) {
for (var n = 0; n < _nodes.length; n++) { for (var n = 0; n < _nodes.length; n++) {
if(_nodes[n].entrees.indexOf(t) == -1){ if(_nodes[n].entrees.indexOf(t) == -1){
_nodes[n].setAside(); _nodes[n].setAside();
}else{ }else{
_nodes[n].setCentered(); _nodes[n].setCenteredOnEntree(t);
} }
} }
// for (var i = 0; i < _nodes_by_entries[t].length; i++) {
// // _nodes_by_entries[t][i].unsetAside();
// _nodes_by_entries[t][i].setCentered();
// }
// for (var tid in _nodes_by_entries) {
// if (tid == t) continue;
// for (var i = 0; i < _nodes_by_entries[tid].length; i++) {
// // _nodes_by_entries[tid][i].unsetCentered();
// _nodes_by_entries[tid][i].setAside();
// }
// }
}; };
function resetFilterEntree(){ function scrambleCollection(){
for (var i = 0; i < _nodes.length; i++) { for (var i = 0; i < _nodes.length; i++) {
_nodes[i].unsetAside(); _nodes[i].scramble();
}
setTimeout(stopScrambling, 5000);
};
function stopScrambling(){
for (var i = 0; i < _nodes.length; i++) {
_nodes[i].stopScrambling();
} }
}; };
@@ -628,7 +660,7 @@
filterEntree(tid); filterEntree(tid);
}else{ }else{
$li.removeClass('opened'); $li.removeClass('opened');
resetFilterEntree(tid); scrambleCollection();
} }
return false; return false;
}); });
@@ -143,10 +143,14 @@
_attracter.fixed = true; _attracter.fixed = true;
_repulser_center = _physics.makeParticle(100, _canvas.width/2, _canvas.height/2); _repulser_center = _physics.makeParticle(100, _canvas.width/2, _canvas.height/2);
_repulser_center.fixed = true; _repulser_center.fixed = true;
_repulser_top = _physics.makeParticle(100, _canvas.width/2, 100); _scrambler_TL = _physics.makeParticle(100, -100, -100);
_repulser_top.fixed = true; _scrambler_TL.fixed = true;
_repulser_bottom = _physics.makeParticle(100, _canvas.width/2, _canvas.height-100); _scrambler_TR = _physics.makeParticle(100, _canvas.width+100, -100);
_repulser_bottom.fixed = true; _scrambler_TR.fixed = true;
_scrambler_BR = _physics.makeParticle(100, _canvas.width+100, _canvas.height+100);
_scrambler_BR.fixed = true;
_scrambler_BL = _physics.makeParticle(100, -100, _canvas.height+100);
_scrambler_BL.fixed = true;
// TODO: move _attracter and _repulser on window resize // TODO: move _attracter and _repulser on window resize
}; };
@@ -196,14 +200,14 @@
this.velocity_threshold = 0.01; this.velocity_threshold = 0.01;
// define radius regarding entries length // define radius regarding entries length
switch(true){ switch(true){
case this.entrees.length > 1 & this.entrees.length <= 3:
this.r = 7.5;
break;
case this.entrees.length > 3: case this.entrees.length > 3:
this.r = 10; this.r = 10;
break; break;
case this.entrees.length > 1 && this.entrees.length <= 3:
this.r = 7;
break;
default: default:
this.r = 5; this.r = 4;
break; break;
} }
@@ -214,6 +218,7 @@
this.faded = false; this.faded = false;
this.center = false; this.center = false;
this.aside = false; this.aside = false;
this.scrambling = false;
// prototypes // prototypes
if (typeof Node.initialized == "undefined") { if (typeof Node.initialized == "undefined") {
@@ -224,7 +229,14 @@
this.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left); this.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left);
this.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top); this.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top);
// physics this.initPhysics();
// if(this.id == '620'){
// _node_pop_up.setNode(this);
// }
};
Node.prototype.initPhysics = function(){
// particule // particule
this.p = _physics.makeParticle(this.mass, this.x, this.y); this.p = _physics.makeParticle(this.mass, this.x, this.y);
this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor); this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
@@ -234,14 +246,15 @@
// repulsers // repulsers
this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2); this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2);
this.repulse_center.on = false; this.repulse_center.on = false;
// this.repulse_left = _physics.makeAttraction(_repulser_top, this.p, -100, _canvas.height/3);
// this.repulse_left.on = false;
// this.repulse_right = _physics.makeAttraction(_repulser_bottom, this.p, -100, _canvas.height/3);
// this.repulse_right.on = false;
// if(this.id == '620'){ this.scramble_TL = _physics.makeAttraction(_scrambler_TL, this.p, -100, _canvas.height/3);
// _node_pop_up.setNode(this); this.scramble_TL.on = false;
// } this.scramble_TR = _physics.makeAttraction(_scrambler_TR, this.p, -100, _canvas.height/3);
this.scramble_TR.on = false;
this.scramble_BR = _physics.makeAttraction(_scrambler_BR, this.p, -100, _canvas.height/3);
this.scramble_BR.on = false;
this.scramble_BL = _physics.makeAttraction(_scrambler_BL, this.p, -100, _canvas.height/3);
this.scramble_BL.on = false;
}; };
Node.prototype.calcWallLimits = function(){ Node.prototype.calcWallLimits = function(){
@@ -262,11 +275,11 @@
// this.p.velocity.multiplyScalar(0.99); // this.p.velocity.multiplyScalar(0.99);
// if(!this.p.resting()){ if(!this.p.resting()){
// this.checkVelocityThreshold(); // this.checkVelocityThreshold();
this.checkWallBouncing(); this.checkWallBouncing();
this.updatePos(); this.updatePos();
// } }
if(!this.aside) if(!this.aside)
this.checkMouse(); this.checkMouse();
@@ -276,10 +289,12 @@
}; };
Node.prototype.checkVelocityThreshold = function(){ Node.prototype.checkVelocityThreshold = function(){
if (Math.abs(this.p.velocity.x) < this.velocity_threshold if(!this.centered || !this.aside){
&& Math.abs(this.p.velocity.y) < this.velocity_threshold){ if (Math.abs(this.p.velocity.x) < this.velocity_threshold
&& Math.abs(this.p.velocity.y) < this.velocity_threshold){
this.p.velocity.multiplyScalar(0); this.p.velocity.multiplyScalar(0);
// this.p.makeFixed(); // this.p.makeFixed();
}
} }
}; };
@@ -358,29 +373,50 @@
this.faded = false; this.faded = false;
}; };
Node.prototype.setCenteredOnEntree = function(tid){
this.e_color = 'e_col_'+tid;
this.setCentered();
};
Node.prototype.setCentered = function(){ Node.prototype.setCentered = function(){
this.center = true; this.center = true;
this.stopScrambling();
this.unsetAside(); this.unsetAside();
this.unFade();
this.attract.on = true; this.attract.on = true;
} }
Node.prototype.unsetCentered = function(){ Node.prototype.unsetCentered = function(){
this.center = false; this.center = false;
this.attract.on = false; this.attract.on = false;
} }
Node.prototype.setAside = function(){ Node.prototype.setAside = function(){
this.aside = true; this.aside = true;
this.fade(); this.fade();
this.stopScrambling();
this.unsetCentered(); this.unsetCentered();
this.repulse_center.on = true; this.repulse_center.on = true;
// this.repulse_left.on = true;
// this.repulse_right.on = true;
} }
Node.prototype.unsetAside = function(){ Node.prototype.unsetAside = function(){
this.aside = false; this.aside = false;
this.unFade();
this.repulse_center.on = false; this.repulse_center.on = false;
// this.repulse_left.on = false; }
// this.repulse_right.on = false;
Node.prototype.scramble = function(){
this.scrambling = true;
this.unsetCentered();
this.unsetAside();
this.scramble_TL.on = true;
this.scramble_TR.on = true;
this.scramble_BR.on = true;
this.scramble_BL.on = true;
}
Node.prototype.stopScrambling = function(){
this.scrambling = false;
this.scramble_TL.on = false;
this.scramble_TR.on = false;
this.scramble_BR.on = false;
this.scramble_BL.on = false;
} }
Node.prototype.draw = function(){ Node.prototype.draw = function(){
@@ -421,6 +457,8 @@
// colisions between _particules // colisions between _particules
for (var n = 0; n < _nodes.length; n++) { for (var n = 0; n < _nodes.length; n++) {
if(_nodes[n].scrambling) continue;
for (var q = n+1; q < _nodes.length; q++) { for (var q = n+1; q < _nodes.length; q++) {
if(q===n) continue; if(q===n) continue;
@@ -458,8 +496,8 @@
_nodes[q].p.velocity.y = newVelY2; _nodes[q].p.velocity.y = newVelY2;
// slow down particule on impact // slow down particule on impact
_nodes[n].p.velocity.multiplyScalar(_nodes[n].center ? 0.95 : 0.90); _nodes[n].p.velocity.multiplyScalar(_nodes[n].center ? 0.90 : 0.90);
_nodes[q].p.velocity.multiplyScalar(_nodes[q].center ? 0.95 : 0.90); _nodes[q].p.velocity.multiplyScalar(_nodes[q].center ? 0.90 : 0.90);
// move particles if they overlap // move particles if they overlap
@@ -500,31 +538,25 @@
// | _|| ' \ _| '_/ -_) -_|_-< // | _|| ' \ _| '_/ -_) -_|_-<
// |___|_||_\__|_| \___\___/__/ // |___|_||_\__|_| \___\___/__/
function filterEntree(t){ function filterEntree(t){
// for (tid of _nodes_by_entries) {
for (var n = 0; n < _nodes.length; n++) { for (var n = 0; n < _nodes.length; n++) {
if(_nodes[n].entrees.indexOf(t) == -1){ if(_nodes[n].entrees.indexOf(t) == -1){
_nodes[n].setAside(); _nodes[n].setAside();
}else{ }else{
_nodes[n].setCentered(); _nodes[n].setCenteredOnEntree(t);
} }
} }
// for (var i = 0; i < _nodes_by_entries[t].length; i++) {
// // _nodes_by_entries[t][i].unsetAside();
// _nodes_by_entries[t][i].setCentered();
// }
// for (var tid in _nodes_by_entries) {
// if (tid == t) continue;
// for (var i = 0; i < _nodes_by_entries[tid].length; i++) {
// // _nodes_by_entries[tid][i].unsetCentered();
// _nodes_by_entries[tid][i].setAside();
// }
// }
}; };
function resetFilterEntree(){ function scrambleCollection(){
for (var i = 0; i < _nodes.length; i++) { for (var i = 0; i < _nodes.length; i++) {
_nodes[i].unsetAside(); _nodes[i].scramble();
}
setTimeout(stopScrambling, 5000);
};
function stopScrambling(){
for (var i = 0; i < _nodes.length; i++) {
_nodes[i].stopScrambling();
} }
}; };
@@ -628,7 +660,7 @@
filterEntree(tid); filterEntree(tid);
}else{ }else{
$li.removeClass('opened'); $li.removeClass('opened');
resetFilterEntree(tid); scrambleCollection();
} }
return false; return false;
}); });
@@ -53,6 +53,8 @@ class CorpusController extends ControllerBase {
foreach ($node->get('field_entrees')->getValue() as $key => $term) { foreach ($node->get('field_entrees')->getValue() as $key => $term) {
$entrees[] = $term['target_id']; $entrees[] = $term['target_id'];
} }
// remove if no entries
if(!count($entrees)) continue;
$description_values = $node->get('field_description')->getValue(); $description_values = $node->get('field_description')->getValue();
$description = count($description_values) ? $description_values[0]['value'] : ""; $description = count($description_values) ? $description_values[0]['value'] : "";