bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved corpus map animations

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-17 12:07:46 +01:00
parent 0d8c1f3913
commit e84c95b99b
2 changed files with 172 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js
Vendored
+86 -25
View File
@@ -59,8 +59,9 @@
console.log('Corpus : _ecolors', _ecolors); console.log('Corpus : _ecolors', _ecolors);
// Physics // Physics
var _attracter, var _attracter,
_repulser, _repulser_top,
_repulser_center, _repulser_center,
_repulser_bottom,
_scrambler_TL, _scrambler_TL,
_scrambler_TR, _scrambler_TR,
_scrambler_BR, _scrambler_BR,
@@ -156,8 +157,12 @@
function initPhysics(){ function initPhysics(){
_attracter = _physics.makeParticle(1000); _attracter = _physics.makeParticle(1000);
_attracter.fixed = true; _attracter.fixed = true;
_repulser_top = _physics.makeParticle(100);
_repulser_top.fixed = true;
_repulser_center = _physics.makeParticle(100); _repulser_center = _physics.makeParticle(100);
_repulser_center.fixed = true; _repulser_center.fixed = true;
_repulser_bottom = _physics.makeParticle(100);
_repulser_bottom.fixed = true;
_scrambler_TL = _physics.makeParticle(100); _scrambler_TL = _physics.makeParticle(100);
_scrambler_TL.fixed = true; _scrambler_TL.fixed = true;
_scrambler_TR = _physics.makeParticle(100); _scrambler_TR = _physics.makeParticle(100);
@@ -174,15 +179,19 @@
resizePhysics(); resizePhysics();
}; };
function resizePhysics(){ function resizePhysics(){
// attracters
_attracter.position = {x:_canvas.width/2, y:_canvas.height/2}; _attracter.position = {x:_canvas.width/2, y:_canvas.height/2};
// repulsers
_repulser_top.position = {x:_canvas.width/2, y:0};
_repulser_center.position = {x:_canvas.width/2, y:_canvas.height/2}; _repulser_center.position = {x:_canvas.width/2, y:_canvas.height/2};
_scrambler_TL.position = {x:-100, y:-100}; _repulser_bottom.position = {x:_canvas.width/2, y:_canvas.height};
_scrambler_TR.position = {x:_canvas.width+100, y:-100}; // scramblers
_scrambler_BR.position = {x:_canvas.width+100, y:_canvas.height+100}; _scrambler_TL.position = {x:-200, y:_canvas.height/40};
_scrambler_BL.position = {x:-100, y:_canvas.height+100}; _scrambler_BL.position = {x:-200, y:_canvas.height-_canvas.height/40};
_scrambler_CL.position = {x:-100, y:_canvas.height/2}; // _scrambler_CL.position = {x:-200, y:_canvas.height/2};
_scrambler_CR.position = {x:_canvas.width+100, y:_canvas.height/2}; _scrambler_TR.position = {x:_canvas.width+200, y:_canvas.height/40};
// TODO: move _attracter and _repulser on window resize _scrambler_BR.position = {x:_canvas.width+200, y:_canvas.height-_canvas.height/40};
// _scrambler_CR.position = {x:_canvas.width+200, y:_canvas.height/2};
}; };
@@ -281,21 +290,25 @@
this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2); this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
this.attract.on = false; this.attract.on = false;
// repulsers // repulsers
this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2); this.repulse_top = _physics.makeAttraction(_repulser_top, this.p, -60, _canvas.height/6);
this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -50, _canvas.height/6);
this.repulse_bottom = _physics.makeAttraction(_repulser_bottom, this.p, -60, _canvas.height/6);
this.repulse_top.on = false;
this.repulse_center.on = false; this.repulse_center.on = false;
this.repulse_bottom.on = false;
this.scramble_TL = _physics.makeAttraction(_scrambler_TL, this.p, -100, _canvas.height/3); // Scramblers
this.scramble_TL = _physics.makeAttraction(_scrambler_TL, this.p, -100, _canvas.height/2.5);
this.scramble_TR = _physics.makeAttraction(_scrambler_TR, this.p, -100, _canvas.height/2.5);
this.scramble_BR = _physics.makeAttraction(_scrambler_BR, this.p, -100, _canvas.height/2.5);
this.scramble_BL = _physics.makeAttraction(_scrambler_BL, this.p, -100, _canvas.height/2.5);
// this.scramble_CR = _physics.makeAttraction(_scrambler_CR, this.p, -50, _canvas.height/4);
// this.scramble_CL = _physics.makeAttraction(_scrambler_CL, this.p, -50, _canvas.height/4);
this.scramble_TL.on = false; 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_TR.on = false;
this.scramble_BR = _physics.makeAttraction(_scrambler_BR, this.p, -100, _canvas.height/3);
this.scramble_BR.on = false; this.scramble_BR.on = false;
this.scramble_BL = _physics.makeAttraction(_scrambler_BL, this.p, -100, _canvas.height/3);
this.scramble_BL.on = false; this.scramble_BL.on = false;
this.scramble_CR = _physics.makeAttraction(_scrambler_CR, this.p, -100, _canvas.height/3); // this.scramble_CR.on = false;
this.scramble_CR.on = false; // this.scramble_CL.on = false;
this.scramble_CL = _physics.makeAttraction(_scrambler_CL, this.p, -100, _canvas.height/3);
this.scramble_CL.on = false;
}; };
Node.prototype.calcWallLimits = function(){ Node.prototype.calcWallLimits = function(){
@@ -316,6 +329,9 @@
// this.p.velocity.multiplyScalar(0.99); // this.p.velocity.multiplyScalar(0.99);
if(this.center)
this.slowDownNearCenter();
if(!this.p.resting()){ if(!this.p.resting()){
// this.checkVelocityThreshold(); // this.checkVelocityThreshold();
this.checkWallBouncing(); this.checkWallBouncing();
@@ -416,17 +432,40 @@
this.attract.on = false; this.attract.on = false;
} }
Node.prototype.slowDownNearCenter = function(){
// smouthly slow down node near center
// if(this.id == 1)
// console.log('this.p.velocity', this.p.velocity);
this.dist_to_attracter = this.p.distanceTo(_attracter);
if( this.dist_to_attracter < _canvas.width/4){
if( this.p.velocity.length() > 0.4 ){
this.p.velocity.multiplyScalar(0.995);
}
// if(Math.abs(this.p.velocity.x) > 1){
// this.p.velocity.x *= 0.99;
// }
// if(Math.abs(this.p.velocity.y) > 1){
// this.p.velocity.y *= 0.99;
// }
}
}
Node.prototype.setAside = function(){ Node.prototype.setAside = function(){
this.aside = true; this.aside = true;
// this.fade(); // this.fade();
this.stopScrambling(); this.stopScrambling();
this.unsetCentered(); this.unsetCentered();
this.repulse_top.on = true;
this.repulse_center.on = true; this.repulse_center.on = true;
this.repulse_bottom.on = true;
} }
Node.prototype.unsetAside = function(){ Node.prototype.unsetAside = function(){
this.aside = false; this.aside = false;
// this.unFade(); // this.unFade();
this.repulse_top.on = false;
this.repulse_center.on = false; this.repulse_center.on = false;
this.repulse_bottom.on = false;
} }
Node.prototype.scramble = function(){ Node.prototype.scramble = function(){
@@ -489,9 +528,7 @@
for (var n = 0; n < _nodes.length; n++) { for (var n = 0; n < _nodes.length; n++) {
// avoid colliding for centered nodes // avoid colliding for centered nodes
if(_nodes[n].center) continue; // if(_nodes[n].center) continue;
// TODO: find a way to smouthly slow down theme near center
// avoid colliding for scrambling nodes // avoid colliding for scrambling nodes
if(_nodes[n].scrambling) continue; if(_nodes[n].scrambling) continue;
@@ -538,8 +575,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.90 : 0.90); _nodes[n].p.velocity.multiplyScalar(_nodes[n].center && _nodes[n].p.velocity.length() < 1 ? 1.1 : 0.90);
_nodes[q].p.velocity.multiplyScalar(_nodes[q].center ? 0.90 : 0.90); _nodes[q].p.velocity.multiplyScalar(_nodes[q].center && _nodes[q].p.velocity.length() < 1 ? 1.1 : 0.90);
// move particles if they overlap // move particles if they overlap
@@ -580,12 +617,17 @@
// | _|| ' \ _| '_/ -_) -_|_-< // | _|| ' \ _| '_/ -_) -_|_-<
// |___|_||_\__|_| \___\___/__/ // |___|_||_\__|_| \___\___/__/
function filterEntree(t){ function filterEntree(t){
// shuydown articles if active
if(_$articles_link.is('.is-active'))
_$articles_link.trigger('click');
_nodes_centered = []; _nodes_centered = [];
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].setCenteredOnEntree(t); _nodes[n].setCenteredOnEntree(t);
// record centered nodes for inter node repulsions
_nodes_centered.push(_nodes[n]); _nodes_centered.push(_nodes[n]);
} }
} }
@@ -617,19 +659,37 @@
// console.log('_physics.attractions.length', _physics.attractions.length); // console.log('_physics.attractions.length', _physics.attractions.length);
}; };
// ___ _ _ _
// / __| __ _ _ __ _ _ __ | |__| (_)_ _ __ _
// \__ \/ _| '_/ _` | ' \| '_ \ | | ' \/ _` |
// |___/\__|_| \__,_|_|_|_|_.__/_|_|_||_\__, |
// |___/
function scrambleCollection(){ function scrambleCollection(){
for (var i = 0; i < _nodes.length; i++) { for (var i = 0; i < _nodes.length; i++) {
_nodes[i].scramble(); _nodes[i].scramble();
} }
setTimeout(stopScrambling, 5000); // setTimeout(stopScrambling, 2000);
stopScrambling();
}; };
function stopScrambling(){ function stopScrambling(){
for (var i = 0; i < _nodes.length; i++) { for (var i = 0; i < _nodes.length; i++) {
_nodes[i].stopScrambling(); setTimeout(function(n){
n.stopScrambling();
}.bind(this, _nodes[i]), 1000 + Math.random()*4000);
} }
}; };
function closeAllEntries(){
_$entrees_block_termlinks.each(function(index, el) {
if($(this).parents('li').is('.opened')){
$(this).trigger('click');
return false;
}
});
};
// _ _ _ _ // _ _ _ _
// /_\ _ _| |_(_)__| |___ ___ // /_\ _ _| |_(_)__| |___ ___
// / _ \| '_| _| / _| / -_|_-< // / _ \| '_| _| / _| / -_|_-<
@@ -654,6 +714,7 @@
$(this).toggleClass('is-active'); $(this).toggleClass('is-active');
if($(this).is('.is-active')){ if($(this).is('.is-active')){
filterArticles(); filterArticles();
closeAllEntries();
}else{ }else{
resetArticlesFilter(); resetArticlesFilter();
} }
sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js
+86 -25
View File
@@ -59,8 +59,9 @@
console.log('Corpus : _ecolors', _ecolors); console.log('Corpus : _ecolors', _ecolors);
// Physics // Physics
var _attracter, var _attracter,
_repulser, _repulser_top,
_repulser_center, _repulser_center,
_repulser_bottom,
_scrambler_TL, _scrambler_TL,
_scrambler_TR, _scrambler_TR,
_scrambler_BR, _scrambler_BR,
@@ -156,8 +157,12 @@
function initPhysics(){ function initPhysics(){
_attracter = _physics.makeParticle(1000); _attracter = _physics.makeParticle(1000);
_attracter.fixed = true; _attracter.fixed = true;
_repulser_top = _physics.makeParticle(100);
_repulser_top.fixed = true;
_repulser_center = _physics.makeParticle(100); _repulser_center = _physics.makeParticle(100);
_repulser_center.fixed = true; _repulser_center.fixed = true;
_repulser_bottom = _physics.makeParticle(100);
_repulser_bottom.fixed = true;
_scrambler_TL = _physics.makeParticle(100); _scrambler_TL = _physics.makeParticle(100);
_scrambler_TL.fixed = true; _scrambler_TL.fixed = true;
_scrambler_TR = _physics.makeParticle(100); _scrambler_TR = _physics.makeParticle(100);
@@ -174,15 +179,19 @@
resizePhysics(); resizePhysics();
}; };
function resizePhysics(){ function resizePhysics(){
// attracters
_attracter.position = {x:_canvas.width/2, y:_canvas.height/2}; _attracter.position = {x:_canvas.width/2, y:_canvas.height/2};
// repulsers
_repulser_top.position = {x:_canvas.width/2, y:0};
_repulser_center.position = {x:_canvas.width/2, y:_canvas.height/2}; _repulser_center.position = {x:_canvas.width/2, y:_canvas.height/2};
_scrambler_TL.position = {x:-100, y:-100}; _repulser_bottom.position = {x:_canvas.width/2, y:_canvas.height};
_scrambler_TR.position = {x:_canvas.width+100, y:-100}; // scramblers
_scrambler_BR.position = {x:_canvas.width+100, y:_canvas.height+100}; _scrambler_TL.position = {x:-200, y:_canvas.height/40};
_scrambler_BL.position = {x:-100, y:_canvas.height+100}; _scrambler_BL.position = {x:-200, y:_canvas.height-_canvas.height/40};
_scrambler_CL.position = {x:-100, y:_canvas.height/2}; // _scrambler_CL.position = {x:-200, y:_canvas.height/2};
_scrambler_CR.position = {x:_canvas.width+100, y:_canvas.height/2}; _scrambler_TR.position = {x:_canvas.width+200, y:_canvas.height/40};
// TODO: move _attracter and _repulser on window resize _scrambler_BR.position = {x:_canvas.width+200, y:_canvas.height-_canvas.height/40};
// _scrambler_CR.position = {x:_canvas.width+200, y:_canvas.height/2};
}; };
@@ -281,21 +290,25 @@
this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2); this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
this.attract.on = false; this.attract.on = false;
// repulsers // repulsers
this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2); this.repulse_top = _physics.makeAttraction(_repulser_top, this.p, -60, _canvas.height/6);
this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -50, _canvas.height/6);
this.repulse_bottom = _physics.makeAttraction(_repulser_bottom, this.p, -60, _canvas.height/6);
this.repulse_top.on = false;
this.repulse_center.on = false; this.repulse_center.on = false;
this.repulse_bottom.on = false;
this.scramble_TL = _physics.makeAttraction(_scrambler_TL, this.p, -100, _canvas.height/3); // Scramblers
this.scramble_TL = _physics.makeAttraction(_scrambler_TL, this.p, -100, _canvas.height/2.5);
this.scramble_TR = _physics.makeAttraction(_scrambler_TR, this.p, -100, _canvas.height/2.5);
this.scramble_BR = _physics.makeAttraction(_scrambler_BR, this.p, -100, _canvas.height/2.5);
this.scramble_BL = _physics.makeAttraction(_scrambler_BL, this.p, -100, _canvas.height/2.5);
// this.scramble_CR = _physics.makeAttraction(_scrambler_CR, this.p, -50, _canvas.height/4);
// this.scramble_CL = _physics.makeAttraction(_scrambler_CL, this.p, -50, _canvas.height/4);
this.scramble_TL.on = false; 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_TR.on = false;
this.scramble_BR = _physics.makeAttraction(_scrambler_BR, this.p, -100, _canvas.height/3);
this.scramble_BR.on = false; this.scramble_BR.on = false;
this.scramble_BL = _physics.makeAttraction(_scrambler_BL, this.p, -100, _canvas.height/3);
this.scramble_BL.on = false; this.scramble_BL.on = false;
this.scramble_CR = _physics.makeAttraction(_scrambler_CR, this.p, -100, _canvas.height/3); // this.scramble_CR.on = false;
this.scramble_CR.on = false; // this.scramble_CL.on = false;
this.scramble_CL = _physics.makeAttraction(_scrambler_CL, this.p, -100, _canvas.height/3);
this.scramble_CL.on = false;
}; };
Node.prototype.calcWallLimits = function(){ Node.prototype.calcWallLimits = function(){
@@ -316,6 +329,9 @@
// this.p.velocity.multiplyScalar(0.99); // this.p.velocity.multiplyScalar(0.99);
if(this.center)
this.slowDownNearCenter();
if(!this.p.resting()){ if(!this.p.resting()){
// this.checkVelocityThreshold(); // this.checkVelocityThreshold();
this.checkWallBouncing(); this.checkWallBouncing();
@@ -416,17 +432,40 @@
this.attract.on = false; this.attract.on = false;
} }
Node.prototype.slowDownNearCenter = function(){
// smouthly slow down node near center
// if(this.id == 1)
// console.log('this.p.velocity', this.p.velocity);
this.dist_to_attracter = this.p.distanceTo(_attracter);
if( this.dist_to_attracter < _canvas.width/4){
if( this.p.velocity.length() > 0.4 ){
this.p.velocity.multiplyScalar(0.995);
}
// if(Math.abs(this.p.velocity.x) > 1){
// this.p.velocity.x *= 0.99;
// }
// if(Math.abs(this.p.velocity.y) > 1){
// this.p.velocity.y *= 0.99;
// }
}
}
Node.prototype.setAside = function(){ Node.prototype.setAside = function(){
this.aside = true; this.aside = true;
// this.fade(); // this.fade();
this.stopScrambling(); this.stopScrambling();
this.unsetCentered(); this.unsetCentered();
this.repulse_top.on = true;
this.repulse_center.on = true; this.repulse_center.on = true;
this.repulse_bottom.on = true;
} }
Node.prototype.unsetAside = function(){ Node.prototype.unsetAside = function(){
this.aside = false; this.aside = false;
// this.unFade(); // this.unFade();
this.repulse_top.on = false;
this.repulse_center.on = false; this.repulse_center.on = false;
this.repulse_bottom.on = false;
} }
Node.prototype.scramble = function(){ Node.prototype.scramble = function(){
@@ -489,9 +528,7 @@
for (var n = 0; n < _nodes.length; n++) { for (var n = 0; n < _nodes.length; n++) {
// avoid colliding for centered nodes // avoid colliding for centered nodes
if(_nodes[n].center) continue; // if(_nodes[n].center) continue;
// TODO: find a way to smouthly slow down theme near center
// avoid colliding for scrambling nodes // avoid colliding for scrambling nodes
if(_nodes[n].scrambling) continue; if(_nodes[n].scrambling) continue;
@@ -538,8 +575,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.90 : 0.90); _nodes[n].p.velocity.multiplyScalar(_nodes[n].center && _nodes[n].p.velocity.length() < 1 ? 1.1 : 0.90);
_nodes[q].p.velocity.multiplyScalar(_nodes[q].center ? 0.90 : 0.90); _nodes[q].p.velocity.multiplyScalar(_nodes[q].center && _nodes[q].p.velocity.length() < 1 ? 1.1 : 0.90);
// move particles if they overlap // move particles if they overlap
@@ -580,12 +617,17 @@
// | _|| ' \ _| '_/ -_) -_|_-< // | _|| ' \ _| '_/ -_) -_|_-<
// |___|_||_\__|_| \___\___/__/ // |___|_||_\__|_| \___\___/__/
function filterEntree(t){ function filterEntree(t){
// shuydown articles if active
if(_$articles_link.is('.is-active'))
_$articles_link.trigger('click');
_nodes_centered = []; _nodes_centered = [];
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].setCenteredOnEntree(t); _nodes[n].setCenteredOnEntree(t);
// record centered nodes for inter node repulsions
_nodes_centered.push(_nodes[n]); _nodes_centered.push(_nodes[n]);
} }
} }
@@ -617,19 +659,37 @@
// console.log('_physics.attractions.length', _physics.attractions.length); // console.log('_physics.attractions.length', _physics.attractions.length);
}; };
// ___ _ _ _
// / __| __ _ _ __ _ _ __ | |__| (_)_ _ __ _
// \__ \/ _| '_/ _` | ' \| '_ \ | | ' \/ _` |
// |___/\__|_| \__,_|_|_|_|_.__/_|_|_||_\__, |
// |___/
function scrambleCollection(){ function scrambleCollection(){
for (var i = 0; i < _nodes.length; i++) { for (var i = 0; i < _nodes.length; i++) {
_nodes[i].scramble(); _nodes[i].scramble();
} }
setTimeout(stopScrambling, 5000); // setTimeout(stopScrambling, 2000);
stopScrambling();
}; };
function stopScrambling(){ function stopScrambling(){
for (var i = 0; i < _nodes.length; i++) { for (var i = 0; i < _nodes.length; i++) {
_nodes[i].stopScrambling(); setTimeout(function(n){
n.stopScrambling();
}.bind(this, _nodes[i]), 1000 + Math.random()*4000);
} }
}; };
function closeAllEntries(){
_$entrees_block_termlinks.each(function(index, el) {
if($(this).parents('li').is('.opened')){
$(this).trigger('click');
return false;
}
});
};
// _ _ _ _ // _ _ _ _
// /_\ _ _| |_(_)__| |___ ___ // /_\ _ _| |_(_)__| |___ ___
// / _ \| '_| _| / _| / -_|_-< // / _ \| '_| _| / _| / -_|_-<
@@ -654,6 +714,7 @@
$(this).toggleClass('is-active'); $(this).toggleClass('is-active');
if($(this).is('.is-active')){ if($(this).is('.is-active')){
filterArticles(); filterArticles();
closeAllEntries();
}else{ }else{
resetArticlesFilter(); resetArticlesFilter();
} }