map is improving : drawing squares with entries and fake colors, got the hover behaviour working

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

@@ -1,86 +1,289 @@
+/**
+ * @Author: Bachir Soussi Chiadmi <bach>
+ * @Date:   18-12-2017
+ * @Email:  bachir@figureslibres.io
+ * @Filename: corpus.js
+ * @Last modified by:   bach
+ * @Last modified time: 20-12-2017
+ * @License: GPL-V3
+ */
+
+/**
+  * depends on :
+  *
+  * physics.js : http://jonobr1.com/Physics/#
+  * EaselJS : https://createjs.com/docs/easeljs/modules/EaselJS.html
+  *
+  */
+
 (function($) {
 
   EdlpCorpus = function(){
-    var $container = $('body');
-    var $canvas = $('<canvas>').addClass('edlp-map').appendTo($container);
-    var canvas = $canvas[0];
-    var ctx = canvas.getContext('2d');
-    var physics = new Physics();
-    var particules = [];
+    var _$container = $('body');
+    var _$canvas = $('<canvas id="edlp-map">').appendTo(_$container);
+    var _canvas = _$canvas[0];
+    var _ctx = _canvas.getContext('2d');
+    var _canvas_props = {
+      'margin-top':100,
+      'margin-bottom':100
+    };
+    var _physics = new Physics();
+    // var _stage = new createjs.Stage('edlp-map');
+    var _nodes = [];
+    // var _particules = [];
+    var _p_radius = 6;
+    var _p_velocity_factor = 0.5;
+    var _m_pos = {x:0, y:0};
+    var _node_hover_id = -1;
+    var _entrees_colors = {
+      "130":"rgb(75, 143, 126)",
+      "121":"rgb(134, 142, 36)",
+      "134":"rgb(43, 143, 47)",
+      "121":"rgb(58, 51, 182)",
+      "125":"rgb(44, 159, 87)",
+      "119":"rgb(196, 137, 120)",
+      "132":"rgb(82, 112, 187)",
+      "122":"rgb(251, 84, 211)",
+      "129":"rgb(224, 116, 131)",
+      "120":"rgb(101, 88, 69)",
+      "130":"rgb(126, 8, 104)",
+      "118":"rgb(14, 113, 33)",
+      "127":"rgb(218, 189, 66)",
+      "133":"rgb(3, 153, 187)",
+      "128":"rgb(57, 154, 28)",
+      "124":"rgb(112, 133, 64)",
+      "116":"rgb(25, 27, 255)",
+      "117":"rgb(39, 157, 132)",
+      "131":"rgb(82, 25, 171)",
+      "126":"rgb(212, 156, 182)",
+      "123":"rgb(73, 119, 21)"
+    };
 
+
+    //     ____      _ __
+    //    /  _/___  (_) /______
+    //    / // __ \/ / __/ ___/
+    //  _/ // / / / / /_(__  )
+    // /___/_/ /_/_/\__/____/
     function init(){
       console.log("EdlpCorpus init()");
+      // console.log("document", document);
       initMap();
     };
 
     function initMap(){
       console.log("EdlpCorpus initMap()");
-      // console.log('physics',physics);
+      // console.log('_physics',_physics);
       initCanvas();
+      initEvents();
       loadCorpus();
+
     };
 
+    //    ______
+    //   / ____/___ _____ _   ______ ______
+    //  / /   / __ `/ __ \ | / / __ `/ ___/
+    // / /___/ /_/ / / / / |/ / /_/ (__  )
+    // \____/\__,_/_/ /_/|___/\__,_/____/
     function initCanvas(){
       // resize the canvas to fill browser window dynamically
-      window.addEventListener('resize', resizeCanvas, false);
-      resizeCanvas();
+      window.addEventListener('resize', onResizeCanvas, false);
+      onResizeCanvas();
     };
 
-    function resizeCanvas() {
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight;
+    function onResizeCanvas() {
+      _canvas.width = window.innerWidth;
+      _canvas.height = window.innerHeight - _canvas_props['margin-top'] - _canvas_props['margin-bottom'];
+      _canvas.style['margin-top'] = _canvas_props['margin-top']+"px";
+      _canvas.style['margin-bottom'] = _canvas_props['margin-bottom']+"px";
+
+    };
+
+    //     ______                 __
+    //    / ____/   _____  ____  / /______
+    //   / __/ | | / / _ \/ __ \/ __/ ___/
+    //  / /___ | |/ /  __/ / / / /_(__  )
+    // /_____/ |___/\___/_/ /_/\__/____/
+    function initEvents(){
+      _$container
+        .on('mousemove', function(event) {
+          event.preventDefault();
+          // console.log("onMouseMove", event);
+          _m_pos.x = event.originalEvent.clientX;
+          _m_pos.y = event.originalEvent.clientY;
+          // console.log("Node pos: ", {x:_nodes[0].x, y:_nodes[0].y});
+          // console.log("Mouse pos: ", {x:_m_pos.x, y:_m_pos.y});
+        })
+        .on('click', function(event) {
+          event.preventDefault();
+          if(_node_hover_id != -1){
+            console.log("click on node", _nodes[_node_hover_id]);
+          }
+        });
     };
 
+    //     ___      _
+    //    /   |    (_)___ __  __
+    //   / /| |   / / __ `/ |/_/
+    //  / ___ |  / / /_/ />  <
+    // /_/  |_|_/ /\__,_/_/|_|
+    //       /___/
     function loadCorpus(){
       // console.log('drupalSettings',drupalSettings);
-      console.log('window.location', window.location);
+      // console.log('window.location', window.location);
       var path = window.location.origin + drupalSettings.basepath + "edlp/corpus";
       $.getJSON(path, {}, function(data){
         console.log('corpus loaded : data', data);
         // console.log('first node', data.nodes[0]);
-        buildMap(data.nodes);
+        // buildParticles(data.nodes);
+        buildNodes(data.nodes);
         startAnime();
       });
     };
 
-    function buildMap(nodes){
-      var x,y,p;
-      var mass = 8;
-      console.log("physics", physics);
+    //     _   __          __
+    //    / | / /___  ____/ /__  _____
+    //   /  |/ / __ \/ __  / _ \/ ___/
+    //  / /|  / /_/ / /_/ /  __(__  )
+    // /_/ |_/\____/\__,_/\___/____/
+
+    function buildNodes(nodes){
+      console.log("buildNodes", nodes);
+      var x,y,d;
       for (var i in nodes) {
-        // console.log(nodes[i]);
-        x = Math.random()*canvas.width;
-        y = Math.random()*canvas.height;
-        p = physics.makeParticle(mass, x, y);
-        p.velocity = new Physics.Vector((Math.random()-0.5)*0.10, (Math.random()-0.5)*0.10);
-        // if(particules.length){
-          // for (var i = 0; i < particules.length; i++) {
-          //   physics.makeAttraction(p, particules[i], strength, minDistance);
-          // }
-        // }
-        particules.push(p);
+        // console.log('i',i);
+        x = _p_radius*2 + Math.random()*(_canvas.width - _p_radius*4);
+        y = _p_radius*2 + Math.random()*(_canvas.height - _p_radius*4);
+        d = i < 1 ? true : false;
+        _nodes.push(new Node(i,nodes[i],x,y,d));
+        // if(i==4)
+        //   break;
       }
     };
 
-    function render(){
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      var radius = 5;
+    function Node(i,n,x,y,d){
+      this.id = i;
+      for(key in n)
+        this[key] = n[key];
+
+      this.debug = d;
+      this.radius = _p_radius;
+      this.mass = 8;
+      this.g = {
+        l : 1, // drawing line width
+        s : 1 // drawing space between squares
+      }
+      this.x = x;
+      this.y = y;
+      this.hover = false;
+      // physics
+      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);
+
+
+      // prototypes
+      if (typeof Node.initialized == "undefined") {
+
+        // Node.prototype.init = function(){
+        //   // console.log("Node : init()", this);
+        //   // this.draw();
+        // };
+
+        Node.prototype.onUpdate = function(){
+          this.checkWallBouncing();
+          this.updatePos();
+          this.checkMouse();
+          // if(this.debug)
+          //   console.log("Node pos: ", {x:this.x, y:this.y});
+          this.draw();
+        };
+
+        Node.prototype.checkWallBouncing = function(){
+          // TODO: correct waal bouncing with centered squares
+          if(
+            (this.x < 0 && this.p.velocity.x < 0)
+            || (this.x > _canvas.width-this.radius && this.p.velocity.x > 0)
+          ){
+            // console.log("bounce x");
+            this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
+          }
+          if(
+            (this.y < 0 && this.p.velocity.y < 0)
+            || (this.y > _canvas.height-this.radius && this.p.velocity.y > 0)
+          ){
+            // console.log("bounce y");
+            this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
+          }
+        };
+
+        Node.prototype.updatePos = function(){
+          this.x = this.p.position.x;
+          this.y = this.p.position.y;
+        };
+
+        Node.prototype.checkMouse = function(){
+          // TODO: get the real w and h of node (with entrees squares)
+          if( _m_pos.x > this.x
+           && _m_pos.x < this.x+this.radius
+           && _m_pos.y > this.y
+           && _m_pos.y < this.y+this.radius){
+            if(_node_hover_id == -1 || _node_hover_id == this.id){
+              console.log("Node hover", this.id);
+              this.hover = true;
+              _node_hover_id = this.id;
+            }
+          }else{
+            this.hover = false;
+            if (_node_hover_id == this.id) {
+              _node_hover_id = -1;
+            }
+          }
+        };
+
+        Node.prototype.draw = function(){
+          // TODO: center the squares around the pos
+          _ctx.beginPath();
+          _ctx.lineWidth = this.g.l;
+          for (var i = 0; i < this.entrees.length; i++) {
+            _ctx.strokeStyle = this.hover ? "red" : _entrees_colors[this.entrees[i]];
+            _ctx.strokeRect(this.x-4*i, this.y-4*i, this.radius+8*i, this.radius+8*i);
+          }
+          _ctx.closePath();
+          // _ctx.beginPath();
+          // _ctx.fillStyle = this.hover ? "red" : this.debug ? "blue" : "black";
+          // _ctx.fillRect(this.x, this.y, this.radius, this.radius);
+          // _ctx.closePath();
+        };
+
+        Node.initialized = true;
+      }
+
+      // this.init();
+    };
 
-      // colisions between particules
-      for (var p = 0, l = particules.length; p < l; p++) {
-        var particule = particules[p];
-        // var theta = 360 / (Math.PI * radius);
+    //     ____  __               _
+    //    / __ \/ /_  __  _______(_)_________
+    //   / /_/ / __ \/ / / / ___/ / ___/ ___/
+    //  / ____/ / / / /_/ (__  ) / /__(__  )
+    // /_/   /_/ /_/\__, /____/_/\___/____/
+    //             /____/
+    // TODO: how to use particule collision in new OOP Node() contexte
+    function checkParticulesCollisions(){
+      // colisions between _particules
+      for (var p = 0, l = _particules.length; p < l; p++) {
+        var particule = _particules[p];
+        // var theta = 360 / (Math.PI * _p_radius);
         if(!particule.attracted) continue;
         for (var q = 0; q < p; q++) {
           if(q==p) continue;
 
           var a = particule;
-          var b = particules[q];
+          var b = _particules[q];
           if(!b.attracted) continue;
           var d = a.distanceTo(b);
 
           // apply new forces if colliding
-          if(d <= radius*2){
+          if(d <= _p_radius*2){
 
             var newVelX1 = (a.velocity.x * (a.mass - b.mass) + (2 * b.mass * b.velocity.x)) / (a.mass + b.mass);
             var newVelY1 = (a.velocity.y * (a.mass - b.mass) + (2 * b.mass * b.velocity.y)) / (a.mass + b.mass);
@@ -97,8 +300,8 @@
 
 
             // move particles if they overlap
-            if (d < radius*2) {
-              var makeup = radius - d/2;
+            if (d < _p_radius*2) {
+              var makeup = _p_radius - d/2;
               var angle = Math.atan2(b.position.y - a.position.y, b.position.x - a.position.x);
 
               b.position.x += makeup * Math.cos(angle);
@@ -113,44 +316,26 @@
           }
         }
       }
+    };
 
-      for (var i = 0; i < particules.length; i++) {
-        var p = particules[i];
-        // wall boucing
-        if(p.position.x < 0+radius || p.position.x > canvas.width-radius){
-          // console.log("bounce x");
-          p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
-        }
-        if(p.position.y < 0+radius || p.position.y > canvas.height-radius){
-          // console.log("bounce y");
-          p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
-        }
-
-
+    //     ____                 __
+    //    / __ \___  ____  ____/ /__  _____
+    //   / /_/ / _ \/ __ \/ __  / _ \/ ___/
+    //  / _, _/  __/ / / / /_/ /  __/ /
+    // /_/ |_|\___/_/ /_/\__,_/\___/_/
+    function render(){
+      _ctx.clearRect(0, 0, _canvas.width, _canvas.height);
 
-        // draw the ball
-        ctx.beginPath();
-        ctx.fillRect(p.position.x, p.position.y, 8, 8);
-        if(p.attracted){
-          ctx.fillStyle = "red";
-        }else{
-          ctx.fillStyle = "black";
-        }
-        ctx.fill();
+      for (var i = 0; i < _nodes.length; i++) {
+        _nodes[i].onUpdate();
       }
-
-
     };
 
     function startAnime(){
-      physics.onUpdate(render);
-      // render();
-
-      physics.play()
+      _physics.onUpdate(render);
+      _physics.play()
     };
 
-
-
     init();
   }
 

sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css

@@ -1,4 +1,4 @@
-canvas.edlp-map {
+canvas#edlp-map {
   position: absolute;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

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

@@ -1,86 +1,289 @@
+/**
+ * @Author: Bachir Soussi Chiadmi <bach>
+ * @Date:   18-12-2017
+ * @Email:  bachir@figureslibres.io
+ * @Filename: corpus.js
+ * @Last modified by:   bach
+ * @Last modified time: 20-12-2017
+ * @License: GPL-V3
+ */
+
+/**
+  * depends on :
+  *
+  * physics.js : http://jonobr1.com/Physics/#
+  * EaselJS : https://createjs.com/docs/easeljs/modules/EaselJS.html
+  *
+  */
+
 (function($) {
 
   EdlpCorpus = function(){
-    var $container = $('body');
-    var $canvas = $('<canvas>').addClass('edlp-map').appendTo($container);
-    var canvas = $canvas[0];
-    var ctx = canvas.getContext('2d');
-    var physics = new Physics();
-    var particules = [];
+    var _$container = $('body');
+    var _$canvas = $('<canvas id="edlp-map">').appendTo(_$container);
+    var _canvas = _$canvas[0];
+    var _ctx = _canvas.getContext('2d');
+    var _canvas_props = {
+      'margin-top':100,
+      'margin-bottom':100
+    };
+    var _physics = new Physics();
+    // var _stage = new createjs.Stage('edlp-map');
+    var _nodes = [];
+    // var _particules = [];
+    var _p_radius = 6;
+    var _p_velocity_factor = 0.5;
+    var _m_pos = {x:0, y:0};
+    var _node_hover_id = -1;
+    var _entrees_colors = {
+      "130":"rgb(75, 143, 126)",
+      "121":"rgb(134, 142, 36)",
+      "134":"rgb(43, 143, 47)",
+      "121":"rgb(58, 51, 182)",
+      "125":"rgb(44, 159, 87)",
+      "119":"rgb(196, 137, 120)",
+      "132":"rgb(82, 112, 187)",
+      "122":"rgb(251, 84, 211)",
+      "129":"rgb(224, 116, 131)",
+      "120":"rgb(101, 88, 69)",
+      "130":"rgb(126, 8, 104)",
+      "118":"rgb(14, 113, 33)",
+      "127":"rgb(218, 189, 66)",
+      "133":"rgb(3, 153, 187)",
+      "128":"rgb(57, 154, 28)",
+      "124":"rgb(112, 133, 64)",
+      "116":"rgb(25, 27, 255)",
+      "117":"rgb(39, 157, 132)",
+      "131":"rgb(82, 25, 171)",
+      "126":"rgb(212, 156, 182)",
+      "123":"rgb(73, 119, 21)"
+    };
 
+
+    //     ____      _ __
+    //    /  _/___  (_) /______
+    //    / // __ \/ / __/ ___/
+    //  _/ // / / / / /_(__  )
+    // /___/_/ /_/_/\__/____/
     function init(){
       console.log("EdlpCorpus init()");
+      // console.log("document", document);
       initMap();
     };
 
     function initMap(){
       console.log("EdlpCorpus initMap()");
-      // console.log('physics',physics);
+      // console.log('_physics',_physics);
       initCanvas();
+      initEvents();
       loadCorpus();
+
     };
 
+    //    ______
+    //   / ____/___ _____ _   ______ ______
+    //  / /   / __ `/ __ \ | / / __ `/ ___/
+    // / /___/ /_/ / / / / |/ / /_/ (__  )
+    // \____/\__,_/_/ /_/|___/\__,_/____/
     function initCanvas(){
       // resize the canvas to fill browser window dynamically
-      window.addEventListener('resize', resizeCanvas, false);
-      resizeCanvas();
+      window.addEventListener('resize', onResizeCanvas, false);
+      onResizeCanvas();
     };
 
-    function resizeCanvas() {
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight;
+    function onResizeCanvas() {
+      _canvas.width = window.innerWidth;
+      _canvas.height = window.innerHeight - _canvas_props['margin-top'] - _canvas_props['margin-bottom'];
+      _canvas.style['margin-top'] = _canvas_props['margin-top']+"px";
+      _canvas.style['margin-bottom'] = _canvas_props['margin-bottom']+"px";
+
+    };
+
+    //     ______                 __
+    //    / ____/   _____  ____  / /______
+    //   / __/ | | / / _ \/ __ \/ __/ ___/
+    //  / /___ | |/ /  __/ / / / /_(__  )
+    // /_____/ |___/\___/_/ /_/\__/____/
+    function initEvents(){
+      _$container
+        .on('mousemove', function(event) {
+          event.preventDefault();
+          // console.log("onMouseMove", event);
+          _m_pos.x = event.originalEvent.clientX;
+          _m_pos.y = event.originalEvent.clientY;
+          // console.log("Node pos: ", {x:_nodes[0].x, y:_nodes[0].y});
+          // console.log("Mouse pos: ", {x:_m_pos.x, y:_m_pos.y});
+        })
+        .on('click', function(event) {
+          event.preventDefault();
+          if(_node_hover_id != -1){
+            console.log("click on node", _nodes[_node_hover_id]);
+          }
+        });
     };
 
+    //     ___      _
+    //    /   |    (_)___ __  __
+    //   / /| |   / / __ `/ |/_/
+    //  / ___ |  / / /_/ />  <
+    // /_/  |_|_/ /\__,_/_/|_|
+    //       /___/
     function loadCorpus(){
       // console.log('drupalSettings',drupalSettings);
-      console.log('window.location', window.location);
+      // console.log('window.location', window.location);
       var path = window.location.origin + drupalSettings.basepath + "edlp/corpus";
       $.getJSON(path, {}, function(data){
         console.log('corpus loaded : data', data);
         // console.log('first node', data.nodes[0]);
-        buildMap(data.nodes);
+        // buildParticles(data.nodes);
+        buildNodes(data.nodes);
         startAnime();
       });
     };
 
-    function buildMap(nodes){
-      var x,y,p;
-      var mass = 8;
-      console.log("physics", physics);
+    //     _   __          __
+    //    / | / /___  ____/ /__  _____
+    //   /  |/ / __ \/ __  / _ \/ ___/
+    //  / /|  / /_/ / /_/ /  __(__  )
+    // /_/ |_/\____/\__,_/\___/____/
+
+    function buildNodes(nodes){
+      console.log("buildNodes", nodes);
+      var x,y,d;
       for (var i in nodes) {
-        // console.log(nodes[i]);
-        x = Math.random()*canvas.width;
-        y = Math.random()*canvas.height;
-        p = physics.makeParticle(mass, x, y);
-        p.velocity = new Physics.Vector((Math.random()-0.5)*0.10, (Math.random()-0.5)*0.10);
-        // if(particules.length){
-          // for (var i = 0; i < particules.length; i++) {
-          //   physics.makeAttraction(p, particules[i], strength, minDistance);
-          // }
-        // }
-        particules.push(p);
+        // console.log('i',i);
+        x = _p_radius*2 + Math.random()*(_canvas.width - _p_radius*4);
+        y = _p_radius*2 + Math.random()*(_canvas.height - _p_radius*4);
+        d = i < 1 ? true : false;
+        _nodes.push(new Node(i,nodes[i],x,y,d));
+        // if(i==4)
+        //   break;
       }
     };
 
-    function render(){
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      var radius = 5;
+    function Node(i,n,x,y,d){
+      this.id = i;
+      for(key in n)
+        this[key] = n[key];
+
+      this.debug = d;
+      this.radius = _p_radius;
+      this.mass = 8;
+      this.g = {
+        l : 1, // drawing line width
+        s : 1 // drawing space between squares
+      }
+      this.x = x;
+      this.y = y;
+      this.hover = false;
+      // physics
+      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);
+
+
+      // prototypes
+      if (typeof Node.initialized == "undefined") {
+
+        // Node.prototype.init = function(){
+        //   // console.log("Node : init()", this);
+        //   // this.draw();
+        // };
+
+        Node.prototype.onUpdate = function(){
+          this.checkWallBouncing();
+          this.updatePos();
+          this.checkMouse();
+          // if(this.debug)
+          //   console.log("Node pos: ", {x:this.x, y:this.y});
+          this.draw();
+        };
+
+        Node.prototype.checkWallBouncing = function(){
+          // TODO: correct waal bouncing with centered squares
+          if(
+            (this.x < 0 && this.p.velocity.x < 0)
+            || (this.x > _canvas.width-this.radius && this.p.velocity.x > 0)
+          ){
+            // console.log("bounce x");
+            this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
+          }
+          if(
+            (this.y < 0 && this.p.velocity.y < 0)
+            || (this.y > _canvas.height-this.radius && this.p.velocity.y > 0)
+          ){
+            // console.log("bounce y");
+            this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
+          }
+        };
+
+        Node.prototype.updatePos = function(){
+          this.x = this.p.position.x;
+          this.y = this.p.position.y;
+        };
+
+        Node.prototype.checkMouse = function(){
+          // TODO: get the real w and h of node (with entrees squares)
+          if( _m_pos.x > this.x
+           && _m_pos.x < this.x+this.radius
+           && _m_pos.y > this.y
+           && _m_pos.y < this.y+this.radius){
+            if(_node_hover_id == -1 || _node_hover_id == this.id){
+              console.log("Node hover", this.id);
+              this.hover = true;
+              _node_hover_id = this.id;
+            }
+          }else{
+            this.hover = false;
+            if (_node_hover_id == this.id) {
+              _node_hover_id = -1;
+            }
+          }
+        };
+
+        Node.prototype.draw = function(){
+          // TODO: center the squares around the pos
+          _ctx.beginPath();
+          _ctx.lineWidth = this.g.l;
+          for (var i = 0; i < this.entrees.length; i++) {
+            _ctx.strokeStyle = this.hover ? "red" : _entrees_colors[this.entrees[i]];
+            _ctx.strokeRect(this.x-4*i, this.y-4*i, this.radius+8*i, this.radius+8*i);
+          }
+          _ctx.closePath();
+          // _ctx.beginPath();
+          // _ctx.fillStyle = this.hover ? "red" : this.debug ? "blue" : "black";
+          // _ctx.fillRect(this.x, this.y, this.radius, this.radius);
+          // _ctx.closePath();
+        };
+
+        Node.initialized = true;
+      }
+
+      // this.init();
+    };
 
-      // colisions between particules
-      for (var p = 0, l = particules.length; p < l; p++) {
-        var particule = particules[p];
-        // var theta = 360 / (Math.PI * radius);
+    //     ____  __               _
+    //    / __ \/ /_  __  _______(_)_________
+    //   / /_/ / __ \/ / / / ___/ / ___/ ___/
+    //  / ____/ / / / /_/ (__  ) / /__(__  )
+    // /_/   /_/ /_/\__, /____/_/\___/____/
+    //             /____/
+    // TODO: how to use particule collision in new OOP Node() contexte
+    function checkParticulesCollisions(){
+      // colisions between _particules
+      for (var p = 0, l = _particules.length; p < l; p++) {
+        var particule = _particules[p];
+        // var theta = 360 / (Math.PI * _p_radius);
         if(!particule.attracted) continue;
         for (var q = 0; q < p; q++) {
           if(q==p) continue;
 
           var a = particule;
-          var b = particules[q];
+          var b = _particules[q];
           if(!b.attracted) continue;
           var d = a.distanceTo(b);
 
           // apply new forces if colliding
-          if(d <= radius*2){
+          if(d <= _p_radius*2){
 
             var newVelX1 = (a.velocity.x * (a.mass - b.mass) + (2 * b.mass * b.velocity.x)) / (a.mass + b.mass);
             var newVelY1 = (a.velocity.y * (a.mass - b.mass) + (2 * b.mass * b.velocity.y)) / (a.mass + b.mass);
@@ -97,8 +300,8 @@
 
 
             // move particles if they overlap
-            if (d < radius*2) {
-              var makeup = radius - d/2;
+            if (d < _p_radius*2) {
+              var makeup = _p_radius - d/2;
               var angle = Math.atan2(b.position.y - a.position.y, b.position.x - a.position.x);
 
               b.position.x += makeup * Math.cos(angle);
@@ -113,44 +316,26 @@
           }
         }
       }
+    };
 
-      for (var i = 0; i < particules.length; i++) {
-        var p = particules[i];
-        // wall boucing
-        if(p.position.x < 0+radius || p.position.x > canvas.width-radius){
-          // console.log("bounce x");
-          p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
-        }
-        if(p.position.y < 0+radius || p.position.y > canvas.height-radius){
-          // console.log("bounce y");
-          p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
-        }
-
-
+    //     ____                 __
+    //    / __ \___  ____  ____/ /__  _____
+    //   / /_/ / _ \/ __ \/ __  / _ \/ ___/
+    //  / _, _/  __/ / / / /_/ /  __/ /
+    // /_/ |_|\___/_/ /_/\__,_/\___/_/
+    function render(){
+      _ctx.clearRect(0, 0, _canvas.width, _canvas.height);
 
-        // draw the ball
-        ctx.beginPath();
-        ctx.fillRect(p.position.x, p.position.y, 8, 8);
-        if(p.attracted){
-          ctx.fillStyle = "red";
-        }else{
-          ctx.fillStyle = "black";
-        }
-        ctx.fill();
+      for (var i = 0; i < _nodes.length; i++) {
+        _nodes[i].onUpdate();
       }
-
-
     };
 
     function startAnime(){
-      physics.onUpdate(render);
-      // render();
-
-      physics.play()
+      _physics.onUpdate(render);
+      _physics.play()
     };
 
-
-
     init();
   }
 

sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss

@@ -1,4 +1,13 @@
-canvas.edlp-map{
+// @Author: Bachir Soussi Chiadmi <bach>
+// @Date:   18-12-2017
+// @Email:  bachir@figureslibres.io
+// @Filename: corpus.scss
+// @Last modified by:   bach
+// @Last modified time: 20-12-2017
+// @License: GPL-V3
+
+canvas#edlp-map{
+  // background-color: grey;
   position: absolute;
   box-sizing: border-box;
   top:0; left:0;

sites/all/modules/figli/edlp_corpus/bower.json

@@ -14,6 +14,7 @@
     "tests"
   ],
   "dependencies": {
-    "physics": "latest"
+    "physics": "latest",
+    "EaselJS": "latest"
   }
 }

sites/all/modules/figli/edlp_corpus/edlp_corpus.libraries.yml

@@ -1,3 +1,11 @@
+# @Author: Bachir Soussi Chiadmi <bach>
+# @Date:   20-12-2017
+# @Email:  bachir@figureslibres.io
+# @Filename: edlp_corpus.libraries.yml
+# @Last modified by:   bach
+# @Last modified time: 20-12-2017
+# @License: GPL-V3
+
 corpus:
   version: VERSION
   css:
@@ -6,7 +14,8 @@ corpus:
 
   version: VERSION
   js:
-    assets/dist/bower/physics.js: { scope: footer }
+    assets/dist/bower/physics.min.js: { scope: footer }
+    # assets/dist/bower/easeljs.min.js: { scope: footer }
     assets/dist/scripts/corpus.min.js: { scope: footer }
   dependencies:
     - core/drupalSettings

sites/all/modules/figli/edlp_corpus/edlp_corpus.routing.yml

@@ -1,3 +1,11 @@
+# @Author: Bachir Soussi Chiadmi <bach>
+# @Date:   13-12-2017
+# @Email:  bachir@figureslibres.io
+# @Filename: edlp_corpus.routing.yml
+# @Last modified by:   bach
+# @Last modified time: 20-12-2017
+# @License: GPL-V3
+
 edlp_corpus.corpusjson:
   path: '/edlp/corpus'
   defaults:

sites/all/modules/figli/edlp_corpus/gulpfile.js

@@ -1,3 +1,13 @@
+/**
+ * @Author: Bachir Soussi Chiadmi <bach>
+ * @Date:   20-12-2017
+ * @Email:  bachir@figureslibres.io
+ * @Filename: gulpfile.js
+ * @Last modified by:   bach
+ * @Last modified time: 20-12-2017
+ * @License: GPL-V3
+ */
+
 'use strict';
 
 var gulp = require('gulp');
@@ -47,9 +57,17 @@ gulp.task('bower', function() {
           "main": [
             './build/physics.js'
           ]
+        },
+        "EaselJS":{
+            "ignore":true
+          // "main": [
+          //   './lib/easeljs.js'
+          // ]
         }
       }
     }))
+      .pipe(config.production ? jsmin() : util.noop())
+      .pipe(rename({suffix: '.min'}))
       .pipe(gulp.dest('./assets/dist/bower/'));
 });
 

sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php

@@ -61,11 +61,21 @@ class CorpusController extends ControllerBase {
       );
     }
 
+    $query = \Drupal::entityQuery('taxonomy_term')
+      ->condition('vid', 'entrees');
+
+    $tids = $query->execute();
+    // $nodes = entity_load_multiple('node', $nids);
+    foreach ($tids as $tid) {
+      $entrees[] = $tid;
+    }
+
     $data = array(
       'date' => time(),
       'site_name' => $config->get('name'),
       'count' => count($nodes),
       'nodes' => $nodes_data,
+      'entrees' => $entrees
     );
 
     $response->setData($data);

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -11,7 +11,9 @@ body, html {
   width: 100%;
   height: 100%;
   font-family: Georgia, serif;
-  font-style: normal; }
+  font-style: normal;
+  margin: 0;
+  padding: 0; }
 
 div.layout-container {
   position: relative;

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -1,3 +1,11 @@
+// @Author: Bachir Soussi Chiadmi <bach>
+// @Date:   18-12-2017
+// @Email:  bachir@figureslibres.io
+// @Filename: app.scss
+// @Last modified by:   bach
+// @Last modified time: 20-12-2017
+// @License: GPL-V3
+
 @import 'base/reset';
 
 @import 'base/vars';
@@ -12,6 +20,8 @@ body, html{
   height:100%;
   font-family: Georgia, serif;
   font-style: normal;
+  margin:0;
+  padding:0;
 }
 
 

sites/all/themes/custom/edlptheme/assets/styles/base/_colors.scss

@@ -0,0 +1,21 @@
+$130:rgb(75, 143, 126);
+$121:rgb(134, 142, 36);
+$134:rgb(43, 143, 47);
+$121:rgb(58, 51, 182);
+$125:rgb(44, 159, 87);
+$119:rgb(196, 137, 120);
+$132:rgb(82, 112, 187);
+$122:rgb(251, 84, 211);
+$129:rgb(224, 116, 131);
+$120:rgb(101, 88, 69);
+$130:rgb(126, 8, 104);
+$118:rgb(14, 113, 33);
+$127:rgb(218, 189, 66);
+$133:rgb(3, 153, 187);
+$128:rgb(57, 154, 28);
+$124:rgb(112, 133, 64);
+$116:rgb(25, 27, 255);
+$117:rgb(39, 157, 132);
+$131:rgb(82, 25, 171);
+$126:rgb(212, 156, 182);
+$123:rgb(73, 119, 21);