improved corpus map animations

sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js

@@ -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

@@ -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();
       }