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;
_repulser_center = _physics.makeParticle(100, _canvas.width/2, _canvas.height/2);
_repulser_center.fixed = true;
_repulser_top = _physics.makeParticle(100, _canvas.width/2, 100);
_repulser_top.fixed = true;
_repulser_bottom = _physics.makeParticle(100, _canvas.width/2, _canvas.height-100);
_repulser_bottom.fixed = true;
_scrambler_TL = _physics.makeParticle(100, -100, -100);
_scrambler_TL.fixed = true;
_scrambler_TR = _physics.makeParticle(100, _canvas.width+100, -100);
_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
};
@@ -196,14 +200,14 @@
this.velocity_threshold = 0.01;
// define radius regarding entries length
switch(true){
case this.entrees.length > 1 & this.entrees.length <= 3:
this.r = 7.5;
break;
case this.entrees.length > 3:
this.r = 10;
break;
case this.entrees.length > 1 && this.entrees.length <= 3:
this.r = 7;
break;
default:
this.r = 5;
this.r = 4;
break;
}
@@ -214,6 +218,7 @@
this.faded = false;
this.center = false;
this.aside = false;
this.scrambling = false;
// prototypes
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.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
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);
@@ -234,14 +246,15 @@
// repulsers
this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2);
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'){
// _node_pop_up.setNode(this);
// }
this.scramble_TL = _physics.makeAttraction(_scrambler_TL, this.p, -100, _canvas.height/3);
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(){
@@ -262,11 +275,11 @@
// this.p.velocity.multiplyScalar(0.99);
// if(!this.p.resting()){
// this.checkVelocityThreshold();
if(!this.p.resting()){
// this.checkVelocityThreshold();
this.checkWallBouncing();
this.updatePos();
// }
}
if(!this.aside)
this.checkMouse();
@@ -276,10 +289,12 @@
};
Node.prototype.checkVelocityThreshold = function(){
if (Math.abs(this.p.velocity.x) < this.velocity_threshold
&& Math.abs(this.p.velocity.y) < this.velocity_threshold){
if(!this.centered || !this.aside){
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.makeFixed();
}
}
};
@@ -358,29 +373,50 @@
this.faded = false;
};
Node.prototype.setCenteredOnEntree = function(tid){
this.e_color = 'e_col_'+tid;
this.setCentered();
};
Node.prototype.setCentered = function(){
this.center = true;
this.stopScrambling();
this.unsetAside();
this.unFade();
this.attract.on = true;
}
Node.prototype.unsetCentered = function(){
this.center = false;
this.attract.on = false;
}
Node.prototype.setAside = function(){
this.aside = true;
this.fade();
this.stopScrambling();
this.unsetCentered();
this.repulse_center.on = true;
// this.repulse_left.on = true;
// this.repulse_right.on = true;
}
Node.prototype.unsetAside = function(){
this.aside = false;
this.unFade();
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(){
@@ -421,6 +457,8 @@
// colisions between _particules
for (var n = 0; n < _nodes.length; n++) {
if(_nodes[n].scrambling) continue;
for (var q = n+1; q < _nodes.length; q++) {
if(q===n) continue;
@@ -458,8 +496,8 @@
_nodes[q].p.velocity.y = newVelY2;
// slow down particule on impact
_nodes[n].p.velocity.multiplyScalar(_nodes[n].center ? 0.95 : 0.90);
_nodes[q].p.velocity.multiplyScalar(_nodes[q].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.90 : 0.90);
// move particles if they overlap
@@ -500,31 +538,25 @@
// | _|| ' \ _| '_/ -_) -_|_-<
// |___|_||_\__|_| \___\___/__/
function filterEntree(t){
// for (tid of _nodes_by_entries) {
for (var n = 0; n < _nodes.length; n++) {
if(_nodes[n].entrees.indexOf(t) == -1){
_nodes[n].setAside();
}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++) {
_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);
}else{
$li.removeClass('opened');
resetFilterEntree(tid);
scrambleCollection();
}
return false;
});
@@ -143,10 +143,14 @@
_attracter.fixed = true;
_repulser_center = _physics.makeParticle(100, _canvas.width/2, _canvas.height/2);
_repulser_center.fixed = true;
_repulser_top = _physics.makeParticle(100, _canvas.width/2, 100);
_repulser_top.fixed = true;
_repulser_bottom = _physics.makeParticle(100, _canvas.width/2, _canvas.height-100);
_repulser_bottom.fixed = true;
_scrambler_TL = _physics.makeParticle(100, -100, -100);
_scrambler_TL.fixed = true;
_scrambler_TR = _physics.makeParticle(100, _canvas.width+100, -100);
_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
};
@@ -196,14 +200,14 @@
this.velocity_threshold = 0.01;
// define radius regarding entries length
switch(true){
case this.entrees.length > 1 & this.entrees.length <= 3:
this.r = 7.5;
break;
case this.entrees.length > 3:
this.r = 10;
break;
case this.entrees.length > 1 && this.entrees.length <= 3:
this.r = 7;
break;
default:
this.r = 5;
this.r = 4;
break;
}
@@ -214,6 +218,7 @@
this.faded = false;
this.center = false;
this.aside = false;
this.scrambling = false;
// prototypes
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.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
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);
@@ -234,14 +246,15 @@
// repulsers
this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2);
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'){
// _node_pop_up.setNode(this);
// }
this.scramble_TL = _physics.makeAttraction(_scrambler_TL, this.p, -100, _canvas.height/3);
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(){
@@ -262,11 +275,11 @@
// this.p.velocity.multiplyScalar(0.99);
// if(!this.p.resting()){
// this.checkVelocityThreshold();
if(!this.p.resting()){
// this.checkVelocityThreshold();
this.checkWallBouncing();
this.updatePos();
// }
}
if(!this.aside)
this.checkMouse();
@@ -276,10 +289,12 @@
};
Node.prototype.checkVelocityThreshold = function(){
if (Math.abs(this.p.velocity.x) < this.velocity_threshold
&& Math.abs(this.p.velocity.y) < this.velocity_threshold){
if(!this.centered || !this.aside){
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.makeFixed();
}
}
};
@@ -358,29 +373,50 @@
this.faded = false;
};
Node.prototype.setCenteredOnEntree = function(tid){
this.e_color = 'e_col_'+tid;
this.setCentered();
};
Node.prototype.setCentered = function(){
this.center = true;
this.stopScrambling();
this.unsetAside();
this.unFade();
this.attract.on = true;
}
Node.prototype.unsetCentered = function(){
this.center = false;
this.attract.on = false;
}
Node.prototype.setAside = function(){
this.aside = true;
this.fade();
this.stopScrambling();
this.unsetCentered();
this.repulse_center.on = true;
// this.repulse_left.on = true;
// this.repulse_right.on = true;
}
Node.prototype.unsetAside = function(){
this.aside = false;
this.unFade();
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(){
@@ -421,6 +457,8 @@
// colisions between _particules
for (var n = 0; n < _nodes.length; n++) {
if(_nodes[n].scrambling) continue;
for (var q = n+1; q < _nodes.length; q++) {
if(q===n) continue;
@@ -458,8 +496,8 @@
_nodes[q].p.velocity.y = newVelY2;
// slow down particule on impact
_nodes[n].p.velocity.multiplyScalar(_nodes[n].center ? 0.95 : 0.90);
_nodes[q].p.velocity.multiplyScalar(_nodes[q].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.90 : 0.90);
// move particles if they overlap
@@ -500,31 +538,25 @@
// | _|| ' \ _| '_/ -_) -_|_-<
// |___|_||_\__|_| \___\___/__/
function filterEntree(t){
// for (tid of _nodes_by_entries) {
for (var n = 0; n < _nodes.length; n++) {
if(_nodes[n].entrees.indexOf(t) == -1){
_nodes[n].setAside();
}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++) {
_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);
}else{
$li.removeClass('opened');
resetFilterEntree(tid);
scrambleCollection();
}
return false;
});
@@ -53,6 +53,8 @@ class CorpusController extends ControllerBase {
foreach ($node->get('field_entrees')->getValue() as $key => $term) {
$entrees[] = $term['target_id'];
}
// remove if no entries
if(!count($entrees)) continue;
$description_values = $node->get('field_description')->getValue();
$description = count($description_values) ? $description_values[0]['value'] : "";