more corpus optimizations

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

@@ -226,14 +226,22 @@
           this.r = 3;//4;
           break;
       }
+      this.d = this.r*2;
 
       this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
 
-      this.wall_bouncing_elasticity = 0.75;
-
       this.canvas = document.createElement('canvas');
       this.canvas_ctx = this.canvas.getContext('2d');
 
+      this.line_width = 1.5;
+      this.canvas_w = this.r*2+this.line_width*2;
+      this.canvas.width = this.canvas_w;
+      this.canvas.height = this.canvas_w;
+      this.canvas_ctx.fillStyle = 'rgb(255,255,255)';
+      this.canvas_ctx.lineWidth = this.line_width;
+
+      this.wall_bouncing_elasticity = 0.75;
+
       // node states
       this.hover = false;
       this.opened = false;
@@ -262,28 +270,13 @@
         };
 
         Node.prototype.draw = function(){
-          this.canvas.width = this.r*2;
-          this.canvas.height = this.r*2;
-          _ctx.clearRect(0, 0, this.r*2, this.r*2);
-          // carre plein
-          // clouleur aléatoire ds les entrees
-          // 3 tailles :
-          // - 1 entree : petit carre 5px
-          // - 2-3 entrees : moyen 7.5px
-          // - >3 entrees : grand 10px
-          // actif entouré de rouge
+          _ctx.clearRect(0, 0, this.canvas_w, this.canvas_w);
 
           this.canvas_ctx.beginPath();
+          // white background
+          this.canvas_ctx.fillRect(0,0,this.canvas_w,this.canvas_w);
+
           this.canvas_ctx.globalAlpha = this.faded ? 0.15 : 1;
-          // carre plein
-          // this.canvas_ctx.fillStyle = _ecolors[this.e_color];
-          // this.canvas_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          // ou carre contour
-          this.canvas_ctx.lineWidth = 1.5;
-          this.canvas_ctx.fillStyle = 'rgb(255,255,255)';
-          this.canvas_ctx.fillRect(0,0,this.r*2,this.r*2);
-          this.canvas_ctx.strokeStyle = _ecolors[this.e_color];
-          this.canvas_ctx.strokeRect(0,0,this.r*2,this.r*2);
 
           if(this.opened){
             // carre plein
@@ -291,9 +284,20 @@
             // this.canvas_ctx.strokeStyle = 'rgb(255,0,0)';
             // this.canvas_ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
             // ou carre contour
+            this.canvas_ctx.save(); // save the normal context state (fill white)
             this.canvas_ctx.fillStyle = _ecolors[this.e_color];
-            this.canvas_ctx.fillRect(0,0,this.r*2,this.r*2);
+            this.canvas_ctx.fillRect(this.line_width,this.line_width,this.d,this.d);
+            this.canvas_ctx.restore(); // restore the normal context state (fill white)
           }
+          // else{
+          //   // carre plein
+          //   // this.canvas_ctx.fillStyle = _ecolors[this.e_color];
+          //   // this.canvas_ctx.fillRect(this.x - this.r,this.y - this.r,this.d,this.d);
+          //   // ou carre contour
+          //   this.canvas_ctx.fillRect(this.line_width,this.line_width,this.d,this.d);
+          // }
+          this.canvas_ctx.strokeStyle = _ecolors[this.e_color];
+          this.canvas_ctx.strokeRect(this.line_width,this.line_width,this.d,this.d);
           // this.canvas_ctx.globalAlpha = 1;
           this.canvas_ctx.closePath();
         };
@@ -532,38 +536,7 @@
         }
 
         Node.prototype.move = function(){
-          // carre plein
-          // clouleur aléatoire ds les entrees
-          // 3 tailles :
-          // - 1 entree : petit carre 5px
-          // - 2-3 entrees : moyen 7.5px
-          // - >3 entrees : grand 10px
-          // actif entouré de rouge
-
-          // _ctx.beginPath();
-          // _ctx.globalAlpha = this.faded ? 0.15 : 1;
-          // carre plein
-          // _ctx.fillStyle = _ecolors[this.e_color];
-          // _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          // ou carre contour
-          // _ctx.lineWidth = 1.5;
-          // _ctx.fillStyle = 'rgb(255,255,255)';
-          // _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          // _ctx.strokeStyle = _ecolors[this.e_color];
-          // _ctx.strokeRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          //
-          // if(this.opened){
-          //   // carre plein
-          //   // _ctx.lineWidth = '1px';
-          //   // _ctx.strokeStyle = 'rgb(255,0,0)';
-          //   // _ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
-          //   // ou carre contour
-          //   _ctx.fillStyle = _ecolors[this.e_color];
-          //   _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          // }
-          // _ctx.globalAlpha = 1;
-          // _ctx.closePath();
-
+          // just draw the virtual node canvas into the main scene canvas at the right position
           _ctx.drawImage(this.canvas, this.x-this.r, this.y-this.r);
         };
 
@@ -580,26 +553,28 @@
           ma,mb,
           w,h,dx,dy,
           makeup,
-          newVelX1, newVelY1, newVelX2, newVelY2;
+          newVelX1, newVelY1, newVelX2, newVelY2,
+          Smamb;
           // , angle;
       // colisions between _particules
       for (var n = 0, l = _nodes.length; n < l; n++) {
         na = _nodes[n];
-        ma = na.p.mass;
         // avoid colliding for centered nodes
         // if(_nodes[n].center) continue;
-
         // avoid colliding for scrambling nodes
         if(na.scrambling) continue;
 
+        ma = na.p.mass;
+
         for (var q = n+1; q < l; q++) {
           nb = _nodes[q];
-          mb = nb.p.mass;
           // avoid impact between center and aside particules
+          // if((na.center && nb.aside) || (na.aside && nb.center))
           // and between aside particules
-          if((na.center && nb.aside) || (na.aside && nb.center) || (na.aside && nb.aside))
+          if(na.aside || nb.aside)
             continue;
 
+
           // avoid impact between two centered particulses that comes to the center
           if(na.center && nb.center){
             if(Math.min(na.p.distanceTo(_attracter), nb.p.distanceTo(_attracter)) > 300){
@@ -611,14 +586,18 @@
           // if(!na.aside && !nb.aside){
             w = h += 4; // add a saftey zone around squares eccept for aside squares
           // }
-          dx = na.p.position.x - nb.p.position.x;
-          dy = na.p.position.y - nb.p.position.y;
 
           // if both dx and dy are inferior to w & h so squares are colliding (overlapping)
           // if( Math.abs(dx) <= w && Math.abs(dy) <= h){ console.log('colliding'); }
           // else not so skip
-          if( Math.abs(dx) > w || Math.abs(dy) > h) continue;
+          // if( Math.abs(dx) > w || Math.abs(dy) > h) continue;
+          dx = na.p.position.x - nb.p.position.x;
+          if( Math.abs(dx) > w ) continue;
+          dy = na.p.position.y - nb.p.position.y;
+          if(Math.abs(dy) > h) continue
 
+          mb = nb.p.mass;
+          Smamb = ma+mb;
           if(Math.abs(dx) < Math.abs(dy)){ // vertical collision
             makeup = (h - Math.abs(dy))/2;
             if(dy > 0){ // a is upper than b
@@ -630,8 +609,8 @@
             }
             // bounce
             // https://en.wikipedia.org/wiki/Elastic_collision#One-dimensional_Newtonian
-            newVelY1 = (ma-mb)/(ma+mb)*na.p.velocity.y+2*mb/(ma+mb)*nb.p.velocity.y;
-            newVelY2 = (mb-ma)/(mb+ma)*nb.p.velocity.y+2*ma/(mb+ma)*na.p.velocity.y;
+            newVelY1 = (ma-mb)/Smamb*na.p.velocity.y+2*mb/Smamb*nb.p.velocity.y;
+            newVelY2 = (mb-ma)/Smamb*nb.p.velocity.y+2*ma/Smamb*na.p.velocity.y;
 
             na.p.velocity.y = newVelY1;
             nb.p.velocity.y = newVelY2;
@@ -647,8 +626,8 @@
             }
             // bounce
             // https://en.wikipedia.org/wiki/Elastic_collision#One-dimensional_Newtonian
-            newVelX1 = (ma-mb)/(ma+mb)*na.p.velocity.x+2*mb/(ma+mb)*nb.p.velocity.x;
-            newVelX2 = (mb-ma)/(mb+ma)*nb.p.velocity.x+2*ma/(mb+ma)*na.p.velocity.x;
+            newVelX1 = (ma-mb)/Smamb*na.p.velocity.x+2*mb/Smamb*nb.p.velocity.x;
+            newVelX2 = (mb-ma)/Smamb*nb.p.velocity.x+2*ma/Smamb*na.p.velocity.x;
 
             na.p.velocity.x = newVelX1;
             nb.p.velocity.x = newVelX2;

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

@@ -226,14 +226,22 @@
           this.r = 3;//4;
           break;
       }
+      this.d = this.r*2;
 
       this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
 
-      this.wall_bouncing_elasticity = 0.75;
-
       this.canvas = document.createElement('canvas');
       this.canvas_ctx = this.canvas.getContext('2d');
 
+      this.line_width = 1.5;
+      this.canvas_w = this.r*2+this.line_width*2;
+      this.canvas.width = this.canvas_w;
+      this.canvas.height = this.canvas_w;
+      this.canvas_ctx.fillStyle = 'rgb(255,255,255)';
+      this.canvas_ctx.lineWidth = this.line_width;
+
+      this.wall_bouncing_elasticity = 0.75;
+
       // node states
       this.hover = false;
       this.opened = false;
@@ -262,28 +270,13 @@
         };
 
         Node.prototype.draw = function(){
-          this.canvas.width = this.r*2;
-          this.canvas.height = this.r*2;
-          _ctx.clearRect(0, 0, this.r*2, this.r*2);
-          // carre plein
-          // clouleur aléatoire ds les entrees
-          // 3 tailles :
-          // - 1 entree : petit carre 5px
-          // - 2-3 entrees : moyen 7.5px
-          // - >3 entrees : grand 10px
-          // actif entouré de rouge
+          _ctx.clearRect(0, 0, this.canvas_w, this.canvas_w);
 
           this.canvas_ctx.beginPath();
+          // white background
+          this.canvas_ctx.fillRect(0,0,this.canvas_w,this.canvas_w);
+
           this.canvas_ctx.globalAlpha = this.faded ? 0.15 : 1;
-          // carre plein
-          // this.canvas_ctx.fillStyle = _ecolors[this.e_color];
-          // this.canvas_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          // ou carre contour
-          this.canvas_ctx.lineWidth = 1.5;
-          this.canvas_ctx.fillStyle = 'rgb(255,255,255)';
-          this.canvas_ctx.fillRect(0,0,this.r*2,this.r*2);
-          this.canvas_ctx.strokeStyle = _ecolors[this.e_color];
-          this.canvas_ctx.strokeRect(0,0,this.r*2,this.r*2);
 
           if(this.opened){
             // carre plein
@@ -291,9 +284,20 @@
             // this.canvas_ctx.strokeStyle = 'rgb(255,0,0)';
             // this.canvas_ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
             // ou carre contour
+            this.canvas_ctx.save(); // save the normal context state (fill white)
             this.canvas_ctx.fillStyle = _ecolors[this.e_color];
-            this.canvas_ctx.fillRect(0,0,this.r*2,this.r*2);
+            this.canvas_ctx.fillRect(this.line_width,this.line_width,this.d,this.d);
+            this.canvas_ctx.restore(); // restore the normal context state (fill white)
           }
+          // else{
+          //   // carre plein
+          //   // this.canvas_ctx.fillStyle = _ecolors[this.e_color];
+          //   // this.canvas_ctx.fillRect(this.x - this.r,this.y - this.r,this.d,this.d);
+          //   // ou carre contour
+          //   this.canvas_ctx.fillRect(this.line_width,this.line_width,this.d,this.d);
+          // }
+          this.canvas_ctx.strokeStyle = _ecolors[this.e_color];
+          this.canvas_ctx.strokeRect(this.line_width,this.line_width,this.d,this.d);
           // this.canvas_ctx.globalAlpha = 1;
           this.canvas_ctx.closePath();
         };
@@ -532,38 +536,7 @@
         }
 
         Node.prototype.move = function(){
-          // carre plein
-          // clouleur aléatoire ds les entrees
-          // 3 tailles :
-          // - 1 entree : petit carre 5px
-          // - 2-3 entrees : moyen 7.5px
-          // - >3 entrees : grand 10px
-          // actif entouré de rouge
-
-          // _ctx.beginPath();
-          // _ctx.globalAlpha = this.faded ? 0.15 : 1;
-          // carre plein
-          // _ctx.fillStyle = _ecolors[this.e_color];
-          // _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          // ou carre contour
-          // _ctx.lineWidth = 1.5;
-          // _ctx.fillStyle = 'rgb(255,255,255)';
-          // _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          // _ctx.strokeStyle = _ecolors[this.e_color];
-          // _ctx.strokeRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          //
-          // if(this.opened){
-          //   // carre plein
-          //   // _ctx.lineWidth = '1px';
-          //   // _ctx.strokeStyle = 'rgb(255,0,0)';
-          //   // _ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
-          //   // ou carre contour
-          //   _ctx.fillStyle = _ecolors[this.e_color];
-          //   _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
-          // }
-          // _ctx.globalAlpha = 1;
-          // _ctx.closePath();
-
+          // just draw the virtual node canvas into the main scene canvas at the right position
           _ctx.drawImage(this.canvas, this.x-this.r, this.y-this.r);
         };
 
@@ -580,26 +553,28 @@
           ma,mb,
           w,h,dx,dy,
           makeup,
-          newVelX1, newVelY1, newVelX2, newVelY2;
+          newVelX1, newVelY1, newVelX2, newVelY2,
+          Smamb;
           // , angle;
       // colisions between _particules
       for (var n = 0, l = _nodes.length; n < l; n++) {
         na = _nodes[n];
-        ma = na.p.mass;
         // avoid colliding for centered nodes
         // if(_nodes[n].center) continue;
-
         // avoid colliding for scrambling nodes
         if(na.scrambling) continue;
 
+        ma = na.p.mass;
+
         for (var q = n+1; q < l; q++) {
           nb = _nodes[q];
-          mb = nb.p.mass;
           // avoid impact between center and aside particules
+          // if((na.center && nb.aside) || (na.aside && nb.center))
           // and between aside particules
-          if((na.center && nb.aside) || (na.aside && nb.center) || (na.aside && nb.aside))
+          if(na.aside || nb.aside)
             continue;
 
+
           // avoid impact between two centered particulses that comes to the center
           if(na.center && nb.center){
             if(Math.min(na.p.distanceTo(_attracter), nb.p.distanceTo(_attracter)) > 300){
@@ -611,14 +586,18 @@
           // if(!na.aside && !nb.aside){
             w = h += 4; // add a saftey zone around squares eccept for aside squares
           // }
-          dx = na.p.position.x - nb.p.position.x;
-          dy = na.p.position.y - nb.p.position.y;
 
           // if both dx and dy are inferior to w & h so squares are colliding (overlapping)
           // if( Math.abs(dx) <= w && Math.abs(dy) <= h){ console.log('colliding'); }
           // else not so skip
-          if( Math.abs(dx) > w || Math.abs(dy) > h) continue;
+          // if( Math.abs(dx) > w || Math.abs(dy) > h) continue;
+          dx = na.p.position.x - nb.p.position.x;
+          if( Math.abs(dx) > w ) continue;
+          dy = na.p.position.y - nb.p.position.y;
+          if(Math.abs(dy) > h) continue
 
+          mb = nb.p.mass;
+          Smamb = ma+mb;
           if(Math.abs(dx) < Math.abs(dy)){ // vertical collision
             makeup = (h - Math.abs(dy))/2;
             if(dy > 0){ // a is upper than b
@@ -630,8 +609,8 @@
             }
             // bounce
             // https://en.wikipedia.org/wiki/Elastic_collision#One-dimensional_Newtonian
-            newVelY1 = (ma-mb)/(ma+mb)*na.p.velocity.y+2*mb/(ma+mb)*nb.p.velocity.y;
-            newVelY2 = (mb-ma)/(mb+ma)*nb.p.velocity.y+2*ma/(mb+ma)*na.p.velocity.y;
+            newVelY1 = (ma-mb)/Smamb*na.p.velocity.y+2*mb/Smamb*nb.p.velocity.y;
+            newVelY2 = (mb-ma)/Smamb*nb.p.velocity.y+2*ma/Smamb*na.p.velocity.y;
 
             na.p.velocity.y = newVelY1;
             nb.p.velocity.y = newVelY2;
@@ -647,8 +626,8 @@
             }
             // bounce
             // https://en.wikipedia.org/wiki/Elastic_collision#One-dimensional_Newtonian
-            newVelX1 = (ma-mb)/(ma+mb)*na.p.velocity.x+2*mb/(ma+mb)*nb.p.velocity.x;
-            newVelX2 = (mb-ma)/(mb+ma)*nb.p.velocity.x+2*ma/(mb+ma)*na.p.velocity.x;
+            newVelX1 = (ma-mb)/Smamb*na.p.velocity.x+2*mb/Smamb*nb.p.velocity.x;
+            newVelX2 = (mb-ma)/Smamb*nb.p.velocity.x+2*ma/Smamb*na.p.velocity.x;
 
             na.p.velocity.x = newVelX1;
             nb.p.velocity.x = newVelX2;