refactored corpus map scrambling and setaside using ghost origin particule position as attracter

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

@@ -25,9 +25,9 @@
     var _canvas = _$canvas[0];
     var _ctx = _canvas.getContext('2d');
     var _canvas_props = {
-      'margin_top':100,
+      'margin_top':90,
       'margin_right':0,
-      'margin_bottom':100,
+      'margin_bottom':65,
       'margin_left':0
     };
     var _physics = new Physics();
@@ -142,41 +142,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);
-      _scrambler_TR.fixed = true;
-      _scrambler_BR = _physics.makeParticle(100);
-      _scrambler_BR.fixed = true;
-      _scrambler_BL = _physics.makeParticle(100);
-      _scrambler_BL.fixed = true;
-      _scrambler_CR = _physics.makeParticle(100);
-      _scrambler_CR.fixed = true;
-      _scrambler_CL = _physics.makeParticle(100);
-      _scrambler_CL.fixed = true;
-      // move _attracter and _repulser on window resize
+      // move _attracter on window resize
       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};
-      _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};
     };
 
     //  _  _         _
@@ -265,40 +236,26 @@
           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.ori_pos = {x:this.x,y:this.y};
+          // TODO: don't forget to move ori_pos on window resize
+
           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);
+          // origin position particule
+          this.ori_p = _physics.makeParticle(1000, this.ori_pos.x, this.ori_pos.y);
+          this.ori_p.fixed = true;
+          // TODO: don't forget to move ori_p on window resize
+          this.ori_p_attract = _physics.makeAttraction(this.ori_p, this.p, 1000, _canvas.width*2);
+          this.ori_p_attract.on = false;
           // attracter
           this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
           this.attract.on = false;
-          // repulsers
-          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_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.on = false;
-          this.scramble_BR.on = false;
-          this.scramble_BL.on = false;
-          // this.scramble_CR.on = false;
-          // this.scramble_CL.on = false;
         };
 
         Node.prototype.calcWallLimits = function(){
@@ -312,9 +269,16 @@
 
         Node.prototype.onResizeCanvas = function(){
           this.calcWallLimits();
+          this.shuffleOriP();
           // TODO: when canvas is smaller what about nodes hors champs, they are coming back alone but it's too long
         };
 
+        Node.prototype.shuffleOriP = function(){
+          this.ori_pos.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left);
+          this.ori_pos.y = this.wall_limits.top  + Math.random()*(this.wall_limits.bottom - this.wall_limits.top);
+          this.scramble();
+        };
+
         Node.prototype.onUpdate = function(){
 
           // this.p.velocity.multiplyScalar(0.99);
@@ -331,7 +295,11 @@
             // this.checkVelocityThreshold();
             this.checkWallBouncing();
             this.updatePos();
+            if(this.scrambling){
+              this.checkOriPDist();
+            }
           }
+
           if(_mouse_in && !this.aside)
             this.checkMouse();
 
@@ -451,35 +419,37 @@
           // this.fade();
           this.stopScrambling();
           this.unsetCentered();
-          this.repulse_top.on = true;
-          this.repulse_center.on = true;
-          this.repulse_bottom.on = true;
+          this.ori_p.position.x = this.x < _canvas.width /2 ? this.wall_limits.left : this.wall_limits.right;
+          this.ori_p_attract.on = true;
         }
         Node.prototype.unsetAside = function(){
+          console.log('unsetAside');
           this.aside = false;
+          this.ori_p_attract.on = false;
+          this.ori_p.position.x = this.ori_pos.x;
           // this.unFade();
-          this.repulse_top.on = false;
-          this.repulse_center.on = false;
-          this.repulse_bottom.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;
-          // this.scramble_CR.on = true;
-          // this.scramble_CL.on = true;
+          this.ori_p.position.x = this.ori_pos.x;
+          this.ori_p.position.y = this.ori_pos.y;
+          this.ori_p_attract.on = true;
         }
+        Node.prototype.checkOriPDist = function(){
+          if(this.p.distanceTo(this.ori_p) < 50){
+            this.stopScrambling();
+          }
+        };
         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;
+          this.ori_p_attract.on = false;
+          // this.scramble_TL.on = false;
+          // this.scramble_TR.on = false;
+          // this.scramble_BR.on = false;
+          // this.scramble_BL.on = false;
           // this.scramble_CR.on = false;
           // this.scramble_CL.on = false;
         }
@@ -726,19 +696,20 @@
     // |___/\__|_| \__,_|_|_|_|_.__/_|_|_||_\__, |
     //                                      |___/
     function scrambleCollection(){
+      console.log('scrambleCollection');
       for (var i = 0; i < _nodes.length; i++) {
         _nodes[i].scramble();
       }
       // setTimeout(stopScrambling, 2000);
-      stopScrambling();
-    };
-    function stopScrambling(){
-      for (var i = 0; i < _nodes.length; i++) {
-        setTimeout(function(n){
-          n.stopScrambling();
-        }.bind(this, _nodes[i]), 1000 + Math.random()*4000);
-      }
+      // stopScrambling();
     };
+    // function stopScrambling(){
+    //   for (var i = 0; i < _nodes.length; i++) {
+    //     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')){
@@ -857,7 +828,7 @@
         });
 
       _$entrees_block_termlinks.on('click', function(event) {
-        console.log('_$entrees_block_termlinks click', this);
+        // console.log('_$entrees_block_termlinks click', this);
         event.preventDefault();
         openEntree($(this).attr('tid'), true);
         // var $link = $(this);

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

@@ -25,9 +25,9 @@
     var _canvas = _$canvas[0];
     var _ctx = _canvas.getContext('2d');
     var _canvas_props = {
-      'margin_top':100,
+      'margin_top':90,
       'margin_right':0,
-      'margin_bottom':100,
+      'margin_bottom':65,
       'margin_left':0
     };
     var _physics = new Physics();
@@ -142,41 +142,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);
-      _scrambler_TR.fixed = true;
-      _scrambler_BR = _physics.makeParticle(100);
-      _scrambler_BR.fixed = true;
-      _scrambler_BL = _physics.makeParticle(100);
-      _scrambler_BL.fixed = true;
-      _scrambler_CR = _physics.makeParticle(100);
-      _scrambler_CR.fixed = true;
-      _scrambler_CL = _physics.makeParticle(100);
-      _scrambler_CL.fixed = true;
-      // move _attracter and _repulser on window resize
+      // move _attracter on window resize
       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};
-      _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};
     };
 
     //  _  _         _
@@ -265,40 +236,26 @@
           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.ori_pos = {x:this.x,y:this.y};
+          // TODO: don't forget to move ori_pos on window resize
+
           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);
+          // origin position particule
+          this.ori_p = _physics.makeParticle(1000, this.ori_pos.x, this.ori_pos.y);
+          this.ori_p.fixed = true;
+          // TODO: don't forget to move ori_p on window resize
+          this.ori_p_attract = _physics.makeAttraction(this.ori_p, this.p, 1000, _canvas.width*2);
+          this.ori_p_attract.on = false;
           // attracter
           this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
           this.attract.on = false;
-          // repulsers
-          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_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.on = false;
-          this.scramble_BR.on = false;
-          this.scramble_BL.on = false;
-          // this.scramble_CR.on = false;
-          // this.scramble_CL.on = false;
         };
 
         Node.prototype.calcWallLimits = function(){
@@ -312,9 +269,16 @@
 
         Node.prototype.onResizeCanvas = function(){
           this.calcWallLimits();
+          this.shuffleOriP();
           // TODO: when canvas is smaller what about nodes hors champs, they are coming back alone but it's too long
         };
 
+        Node.prototype.shuffleOriP = function(){
+          this.ori_pos.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left);
+          this.ori_pos.y = this.wall_limits.top  + Math.random()*(this.wall_limits.bottom - this.wall_limits.top);
+          this.scramble();
+        };
+
         Node.prototype.onUpdate = function(){
 
           // this.p.velocity.multiplyScalar(0.99);
@@ -331,7 +295,11 @@
             // this.checkVelocityThreshold();
             this.checkWallBouncing();
             this.updatePos();
+            if(this.scrambling){
+              this.checkOriPDist();
+            }
           }
+
           if(_mouse_in && !this.aside)
             this.checkMouse();
 
@@ -451,35 +419,37 @@
           // this.fade();
           this.stopScrambling();
           this.unsetCentered();
-          this.repulse_top.on = true;
-          this.repulse_center.on = true;
-          this.repulse_bottom.on = true;
+          this.ori_p.position.x = this.x < _canvas.width /2 ? this.wall_limits.left : this.wall_limits.right;
+          this.ori_p_attract.on = true;
         }
         Node.prototype.unsetAside = function(){
+          console.log('unsetAside');
           this.aside = false;
+          this.ori_p_attract.on = false;
+          this.ori_p.position.x = this.ori_pos.x;
           // this.unFade();
-          this.repulse_top.on = false;
-          this.repulse_center.on = false;
-          this.repulse_bottom.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;
-          // this.scramble_CR.on = true;
-          // this.scramble_CL.on = true;
+          this.ori_p.position.x = this.ori_pos.x;
+          this.ori_p.position.y = this.ori_pos.y;
+          this.ori_p_attract.on = true;
         }
+        Node.prototype.checkOriPDist = function(){
+          if(this.p.distanceTo(this.ori_p) < 50){
+            this.stopScrambling();
+          }
+        };
         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;
+          this.ori_p_attract.on = false;
+          // this.scramble_TL.on = false;
+          // this.scramble_TR.on = false;
+          // this.scramble_BR.on = false;
+          // this.scramble_BL.on = false;
           // this.scramble_CR.on = false;
           // this.scramble_CL.on = false;
         }
@@ -726,19 +696,20 @@
     // |___/\__|_| \__,_|_|_|_|_.__/_|_|_||_\__, |
     //                                      |___/
     function scrambleCollection(){
+      console.log('scrambleCollection');
       for (var i = 0; i < _nodes.length; i++) {
         _nodes[i].scramble();
       }
       // setTimeout(stopScrambling, 2000);
-      stopScrambling();
-    };
-    function stopScrambling(){
-      for (var i = 0; i < _nodes.length; i++) {
-        setTimeout(function(n){
-          n.stopScrambling();
-        }.bind(this, _nodes[i]), 1000 + Math.random()*4000);
-      }
+      // stopScrambling();
     };
+    // function stopScrambling(){
+    //   for (var i = 0; i < _nodes.length; i++) {
+    //     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')){
@@ -857,7 +828,7 @@
         });
 
       _$entrees_block_termlinks.on('click', function(event) {
-        console.log('_$entrees_block_termlinks click', this);
+        // console.log('_$entrees_block_termlinks click', this);
         event.preventDefault();
         openEntree($(this).attr('tid'), true);
         // var $link = $(this);