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);
// Physics
var _attracter,
_repulser,
_repulser_top,
_repulser_center,
_repulser_bottom,
_scrambler_TL,
_scrambler_TR,
_scrambler_BR,
@@ -156,8 +157,12 @@
function initPhysics(){
_attracter = _physics.makeParticle(1000);
_attracter.fixed = true;
_repulser_top = _physics.makeParticle(100);
_repulser_top.fixed = true;
_repulser_center = _physics.makeParticle(100);
_repulser_center.fixed = true;
_repulser_bottom = _physics.makeParticle(100);
_repulser_bottom.fixed = true;
_scrambler_TL = _physics.makeParticle(100);
_scrambler_TL.fixed = true;
_scrambler_TR = _physics.makeParticle(100);
@@ -174,15 +179,19 @@
resizePhysics();
};
function resizePhysics(){
// attracters
_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};
_scrambler_TL.position = {x:-100, y:-100};
_scrambler_TR.position = {x:_canvas.width+100, y:-100};
_scrambler_BR.position = {x:_canvas.width+100, y:_canvas.height+100};
_scrambler_BL.position = {x:-100, y:_canvas.height+100};
_scrambler_CL.position = {x:-100, y:_canvas.height/2};
_scrambler_CR.position = {x:_canvas.width+100, y:_canvas.height/2};
// TODO: move _attracter and _repulser on window resize
_repulser_bottom.position = {x:_canvas.width/2, y:_canvas.height};
// scramblers
_scrambler_TL.position = {x:-200, y:_canvas.height/40};
_scrambler_BL.position = {x:-200, y:_canvas.height-_canvas.height/40};
// _scrambler_CL.position = {x:-200, y:_canvas.height/2};
_scrambler_TR.position = {x:_canvas.width+200, y:_canvas.height/40};
_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.on = false;
// 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.scramble_TL = _physics.makeAttraction(_scrambler_TL, this.p, -100, _canvas.height/3);
this.repulse_bottom.on = false;
// 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_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;
this.scramble_CR = _physics.makeAttraction(_scrambler_CR, this.p, -100, _canvas.height/3);
this.scramble_CR.on = false;
this.scramble_CL = _physics.makeAttraction(_scrambler_CL, this.p, -100, _canvas.height/3);
this.scramble_CL.on = false;
// this.scramble_CR.on = false;
// this.scramble_CL.on = false;
};
Node.prototype.calcWallLimits = function(){
@@ -316,6 +329,9 @@
// this.p.velocity.multiplyScalar(0.99);
if(this.center)
this.slowDownNearCenter();
if(!this.p.resting()){
// this.checkVelocityThreshold();
this.checkWallBouncing();
@@ -416,17 +432,40 @@
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(){
this.aside = true;
// this.fade();
this.stopScrambling();
this.unsetCentered();
this.repulse_top.on = true;
this.repulse_center.on = true;
this.repulse_bottom.on = true;
}
Node.prototype.unsetAside = function(){
this.aside = false;
// this.unFade();
this.repulse_top.on = false;
this.repulse_center.on = false;
this.repulse_bottom.on = false;
}
Node.prototype.scramble = function(){
@@ -489,9 +528,7 @@
for (var n = 0; n < _nodes.length; n++) {
// avoid colliding for centered nodes
if(_nodes[n].center) continue;
// TODO: find a way to smouthly slow down theme near center
// if(_nodes[n].center) continue;
// avoid colliding for scrambling nodes
if(_nodes[n].scrambling) continue;
@@ -538,8 +575,8 @@
_nodes[q].p.velocity.y = newVelY2;
// slow down particule on impact
_nodes[n].p.velocity.multiplyScalar(_nodes[n].center ? 0.90 : 0.90);
_nodes[q].p.velocity.multiplyScalar(_nodes[q].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 && _nodes[q].p.velocity.length() < 1 ? 1.1 : 0.90);
// move particles if they overlap
@@ -580,12 +617,17 @@
// | _|| ' \ _| '_/ -_) -_|_-<
// |___|_||_\__|_| \___\___/__/
function filterEntree(t){
// shuydown articles if active
if(_$articles_link.is('.is-active'))
_$articles_link.trigger('click');
_nodes_centered = [];
for (var n = 0; n < _nodes.length; n++) {
if(_nodes[n].entrees.indexOf(t) == -1){
_nodes[n].setAside();
}else{
_nodes[n].setCenteredOnEntree(t);
// record centered nodes for inter node repulsions
_nodes_centered.push(_nodes[n]);
}
}
@@ -617,19 +659,37 @@
// console.log('_physics.attractions.length', _physics.attractions.length);
};
// ___ _ _ _
// / __| __ _ _ __ _ _ __ | |__| (_)_ _ __ _
// \__ \/ _| '_/ _` | ' \| '_ \ | | ' \/ _` |
// |___/\__|_| \__,_|_|_|_|_.__/_|_|_||_\__, |
// |___/
function scrambleCollection(){
for (var i = 0; i < _nodes.length; i++) {
_nodes[i].scramble();
}
setTimeout(stopScrambling, 5000);
// setTimeout(stopScrambling, 2000);
stopScrambling();
};
function stopScrambling(){
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');
if($(this).is('.is-active')){
filterArticles();
closeAllEntries();
}else{
resetArticlesFilter();
}
sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js
+86 -25
View File
@@ -59,8 +59,9 @@
console.log('Corpus : _ecolors', _ecolors);
// Physics
var _attracter,
_repulser,
_repulser_top,
_repulser_center,
_repulser_bottom,
_scrambler_TL,
_scrambler_TR,
_scrambler_BR,
@@ -156,8 +157,12 @@
function initPhysics(){
_attracter = _physics.makeParticle(1000);
_attracter.fixed = true;
_repulser_top = _physics.makeParticle(100);
_repulser_top.fixed = true;
_repulser_center = _physics.makeParticle(100);
_repulser_center.fixed = true;
_repulser_bottom = _physics.makeParticle(100);
_repulser_bottom.fixed = true;
_scrambler_TL = _physics.makeParticle(100);
_scrambler_TL.fixed = true;
_scrambler_TR = _physics.makeParticle(100);
@@ -174,15 +179,19 @@
resizePhysics();
};
function resizePhysics(){
// attracters
_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};
_scrambler_TL.position = {x:-100, y:-100};
_scrambler_TR.position = {x:_canvas.width+100, y:-100};
_scrambler_BR.position = {x:_canvas.width+100, y:_canvas.height+100};
_scrambler_BL.position = {x:-100, y:_canvas.height+100};
_scrambler_CL.position = {x:-100, y:_canvas.height/2};
_scrambler_CR.position = {x:_canvas.width+100, y:_canvas.height/2};
// TODO: move _attracter and _repulser on window resize
_repulser_bottom.position = {x:_canvas.width/2, y:_canvas.height};
// scramblers
_scrambler_TL.position = {x:-200, y:_canvas.height/40};
_scrambler_BL.position = {x:-200, y:_canvas.height-_canvas.height/40};
// _scrambler_CL.position = {x:-200, y:_canvas.height/2};
_scrambler_TR.position = {x:_canvas.width+200, y:_canvas.height/40};
_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.on = false;
// 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.scramble_TL = _physics.makeAttraction(_scrambler_TL, this.p, -100, _canvas.height/3);
this.repulse_bottom.on = false;
// 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_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;
this.scramble_CR = _physics.makeAttraction(_scrambler_CR, this.p, -100, _canvas.height/3);
this.scramble_CR.on = false;
this.scramble_CL = _physics.makeAttraction(_scrambler_CL, this.p, -100, _canvas.height/3);
this.scramble_CL.on = false;
// this.scramble_CR.on = false;
// this.scramble_CL.on = false;
};
Node.prototype.calcWallLimits = function(){
@@ -316,6 +329,9 @@
// this.p.velocity.multiplyScalar(0.99);
if(this.center)
this.slowDownNearCenter();
if(!this.p.resting()){
// this.checkVelocityThreshold();
this.checkWallBouncing();
@@ -416,17 +432,40 @@
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(){
this.aside = true;
// this.fade();
this.stopScrambling();
this.unsetCentered();
this.repulse_top.on = true;
this.repulse_center.on = true;
this.repulse_bottom.on = true;
}
Node.prototype.unsetAside = function(){
this.aside = false;
// this.unFade();
this.repulse_top.on = false;
this.repulse_center.on = false;
this.repulse_bottom.on = false;
}
Node.prototype.scramble = function(){
@@ -489,9 +528,7 @@
for (var n = 0; n < _nodes.length; n++) {
// avoid colliding for centered nodes
if(_nodes[n].center) continue;
// TODO: find a way to smouthly slow down theme near center
// if(_nodes[n].center) continue;
// avoid colliding for scrambling nodes
if(_nodes[n].scrambling) continue;
@@ -538,8 +575,8 @@
_nodes[q].p.velocity.y = newVelY2;
// slow down particule on impact
_nodes[n].p.velocity.multiplyScalar(_nodes[n].center ? 0.90 : 0.90);
_nodes[q].p.velocity.multiplyScalar(_nodes[q].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 && _nodes[q].p.velocity.length() < 1 ? 1.1 : 0.90);
// move particles if they overlap
@@ -580,12 +617,17 @@
// | _|| ' \ _| '_/ -_) -_|_-<
// |___|_||_\__|_| \___\___/__/
function filterEntree(t){
// shuydown articles if active
if(_$articles_link.is('.is-active'))
_$articles_link.trigger('click');
_nodes_centered = [];
for (var n = 0; n < _nodes.length; n++) {
if(_nodes[n].entrees.indexOf(t) == -1){
_nodes[n].setAside();
}else{
_nodes[n].setCenteredOnEntree(t);
// record centered nodes for inter node repulsions
_nodes_centered.push(_nodes[n]);
}
}
@@ -617,19 +659,37 @@
// console.log('_physics.attractions.length', _physics.attractions.length);
};
// ___ _ _ _
// / __| __ _ _ __ _ _ __ | |__| (_)_ _ __ _
// \__ \/ _| '_/ _` | ' \| '_ \ | | ' \/ _` |
// |___/\__|_| \__,_|_|_|_|_.__/_|_|_||_\__, |
// |___/
function scrambleCollection(){
for (var i = 0; i < _nodes.length; i++) {
_nodes[i].scramble();
}
setTimeout(stopScrambling, 5000);
// setTimeout(stopScrambling, 2000);
stopScrambling();
};
function stopScrambling(){
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');
if($(this).is('.is-active')){
filterArticles();
closeAllEntries();
}else{
resetArticlesFilter();
}