more corpus optimizations

This commit is contained in:
2018-04-19 22:48:51 +02:00
parent fcb7677cfc
commit 6d40f860e4
2 changed files with 90 additions and 132 deletions
@@ -226,14 +226,22 @@
this.r = 3;//4; this.r = 3;//4;
break; break;
} }
this.d = this.r*2;
this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))]; 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 = document.createElement('canvas');
this.canvas_ctx = this.canvas.getContext('2d'); 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 // node states
this.hover = false; this.hover = false;
this.opened = false; this.opened = false;
@@ -262,28 +270,13 @@
}; };
Node.prototype.draw = function(){ Node.prototype.draw = function(){
this.canvas.width = this.r*2; _ctx.clearRect(0, 0, this.canvas_w, this.canvas_w);
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
this.canvas_ctx.beginPath(); 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; 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){ if(this.opened){
// carre plein // carre plein
@@ -291,9 +284,20 @@
// this.canvas_ctx.strokeStyle = 'rgb(255,0,0)'; // 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); // 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 // 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.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.globalAlpha = 1;
this.canvas_ctx.closePath(); this.canvas_ctx.closePath();
}; };
@@ -532,38 +536,7 @@
} }
Node.prototype.move = function(){ Node.prototype.move = function(){
// carre plein // just draw the virtual node canvas into the main scene canvas at the right position
// 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();
_ctx.drawImage(this.canvas, this.x-this.r, this.y-this.r); _ctx.drawImage(this.canvas, this.x-this.r, this.y-this.r);
}; };
@@ -580,26 +553,28 @@
ma,mb, ma,mb,
w,h,dx,dy, w,h,dx,dy,
makeup, makeup,
newVelX1, newVelY1, newVelX2, newVelY2; newVelX1, newVelY1, newVelX2, newVelY2,
Smamb;
// , angle; // , angle;
// colisions between _particules // colisions between _particules
for (var n = 0, l = _nodes.length; n < l; n++) { for (var n = 0, l = _nodes.length; n < l; n++) {
na = _nodes[n]; na = _nodes[n];
ma = na.p.mass;
// avoid colliding for centered nodes // avoid colliding for centered nodes
// if(_nodes[n].center) continue; // if(_nodes[n].center) continue;
// avoid colliding for scrambling nodes // avoid colliding for scrambling nodes
if(na.scrambling) continue; if(na.scrambling) continue;
ma = na.p.mass;
for (var q = n+1; q < l; q++) { for (var q = n+1; q < l; q++) {
nb = _nodes[q]; nb = _nodes[q];
mb = nb.p.mass;
// avoid impact between center and aside particules // avoid impact between center and aside particules
// if((na.center && nb.aside) || (na.aside && nb.center))
// and between aside particules // and between aside particules
if((na.center && nb.aside) || (na.aside && nb.center) || (na.aside && nb.aside)) if(na.aside || nb.aside)
continue; continue;
// avoid impact between two centered particulses that comes to the center // avoid impact between two centered particulses that comes to the center
if(na.center && nb.center){ if(na.center && nb.center){
if(Math.min(na.p.distanceTo(_attracter), nb.p.distanceTo(_attracter)) > 300){ if(Math.min(na.p.distanceTo(_attracter), nb.p.distanceTo(_attracter)) > 300){
@@ -611,14 +586,18 @@
// if(!na.aside && !nb.aside){ // if(!na.aside && !nb.aside){
w = h += 4; // add a saftey zone around squares eccept for aside squares 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 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'); } // if( Math.abs(dx) <= w && Math.abs(dy) <= h){ console.log('colliding'); }
// else not so skip // 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 if(Math.abs(dx) < Math.abs(dy)){ // vertical collision
makeup = (h - Math.abs(dy))/2; makeup = (h - Math.abs(dy))/2;
if(dy > 0){ // a is upper than b if(dy > 0){ // a is upper than b
@@ -630,8 +609,8 @@
} }
// bounce // bounce
// https://en.wikipedia.org/wiki/Elastic_collision#One-dimensional_Newtonian // 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; newVelY1 = (ma-mb)/Smamb*na.p.velocity.y+2*mb/Smamb*nb.p.velocity.y;
newVelY2 = (mb-ma)/(mb+ma)*nb.p.velocity.y+2*ma/(mb+ma)*na.p.velocity.y; newVelY2 = (mb-ma)/Smamb*nb.p.velocity.y+2*ma/Smamb*na.p.velocity.y;
na.p.velocity.y = newVelY1; na.p.velocity.y = newVelY1;
nb.p.velocity.y = newVelY2; nb.p.velocity.y = newVelY2;
@@ -647,8 +626,8 @@
} }
// bounce // bounce
// https://en.wikipedia.org/wiki/Elastic_collision#One-dimensional_Newtonian // 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; newVelX1 = (ma-mb)/Smamb*na.p.velocity.x+2*mb/Smamb*nb.p.velocity.x;
newVelX2 = (mb-ma)/(mb+ma)*nb.p.velocity.x+2*ma/(mb+ma)*na.p.velocity.x; newVelX2 = (mb-ma)/Smamb*nb.p.velocity.x+2*ma/Smamb*na.p.velocity.x;
na.p.velocity.x = newVelX1; na.p.velocity.x = newVelX1;
nb.p.velocity.x = newVelX2; nb.p.velocity.x = newVelX2;
@@ -226,14 +226,22 @@
this.r = 3;//4; this.r = 3;//4;
break; break;
} }
this.d = this.r*2;
this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))]; 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 = document.createElement('canvas');
this.canvas_ctx = this.canvas.getContext('2d'); 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 // node states
this.hover = false; this.hover = false;
this.opened = false; this.opened = false;
@@ -262,28 +270,13 @@
}; };
Node.prototype.draw = function(){ Node.prototype.draw = function(){
this.canvas.width = this.r*2; _ctx.clearRect(0, 0, this.canvas_w, this.canvas_w);
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
this.canvas_ctx.beginPath(); 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; 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){ if(this.opened){
// carre plein // carre plein
@@ -291,9 +284,20 @@
// this.canvas_ctx.strokeStyle = 'rgb(255,0,0)'; // 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); // 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 // 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.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.globalAlpha = 1;
this.canvas_ctx.closePath(); this.canvas_ctx.closePath();
}; };
@@ -532,38 +536,7 @@
} }
Node.prototype.move = function(){ Node.prototype.move = function(){
// carre plein // just draw the virtual node canvas into the main scene canvas at the right position
// 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();
_ctx.drawImage(this.canvas, this.x-this.r, this.y-this.r); _ctx.drawImage(this.canvas, this.x-this.r, this.y-this.r);
}; };
@@ -580,26 +553,28 @@
ma,mb, ma,mb,
w,h,dx,dy, w,h,dx,dy,
makeup, makeup,
newVelX1, newVelY1, newVelX2, newVelY2; newVelX1, newVelY1, newVelX2, newVelY2,
Smamb;
// , angle; // , angle;
// colisions between _particules // colisions between _particules
for (var n = 0, l = _nodes.length; n < l; n++) { for (var n = 0, l = _nodes.length; n < l; n++) {
na = _nodes[n]; na = _nodes[n];
ma = na.p.mass;
// avoid colliding for centered nodes // avoid colliding for centered nodes
// if(_nodes[n].center) continue; // if(_nodes[n].center) continue;
// avoid colliding for scrambling nodes // avoid colliding for scrambling nodes
if(na.scrambling) continue; if(na.scrambling) continue;
ma = na.p.mass;
for (var q = n+1; q < l; q++) { for (var q = n+1; q < l; q++) {
nb = _nodes[q]; nb = _nodes[q];
mb = nb.p.mass;
// avoid impact between center and aside particules // avoid impact between center and aside particules
// if((na.center && nb.aside) || (na.aside && nb.center))
// and between aside particules // and between aside particules
if((na.center && nb.aside) || (na.aside && nb.center) || (na.aside && nb.aside)) if(na.aside || nb.aside)
continue; continue;
// avoid impact between two centered particulses that comes to the center // avoid impact between two centered particulses that comes to the center
if(na.center && nb.center){ if(na.center && nb.center){
if(Math.min(na.p.distanceTo(_attracter), nb.p.distanceTo(_attracter)) > 300){ if(Math.min(na.p.distanceTo(_attracter), nb.p.distanceTo(_attracter)) > 300){
@@ -611,14 +586,18 @@
// if(!na.aside && !nb.aside){ // if(!na.aside && !nb.aside){
w = h += 4; // add a saftey zone around squares eccept for aside squares 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 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'); } // if( Math.abs(dx) <= w && Math.abs(dy) <= h){ console.log('colliding'); }
// else not so skip // 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 if(Math.abs(dx) < Math.abs(dy)){ // vertical collision
makeup = (h - Math.abs(dy))/2; makeup = (h - Math.abs(dy))/2;
if(dy > 0){ // a is upper than b if(dy > 0){ // a is upper than b
@@ -630,8 +609,8 @@
} }
// bounce // bounce
// https://en.wikipedia.org/wiki/Elastic_collision#One-dimensional_Newtonian // 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; newVelY1 = (ma-mb)/Smamb*na.p.velocity.y+2*mb/Smamb*nb.p.velocity.y;
newVelY2 = (mb-ma)/(mb+ma)*nb.p.velocity.y+2*ma/(mb+ma)*na.p.velocity.y; newVelY2 = (mb-ma)/Smamb*nb.p.velocity.y+2*ma/Smamb*na.p.velocity.y;
na.p.velocity.y = newVelY1; na.p.velocity.y = newVelY1;
nb.p.velocity.y = newVelY2; nb.p.velocity.y = newVelY2;
@@ -647,8 +626,8 @@
} }
// bounce // bounce
// https://en.wikipedia.org/wiki/Elastic_collision#One-dimensional_Newtonian // 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; newVelX1 = (ma-mb)/Smamb*na.p.velocity.x+2*mb/Smamb*nb.p.velocity.x;
newVelX2 = (mb-ma)/(mb+ma)*nb.p.velocity.x+2*ma/(mb+ma)*na.p.velocity.x; newVelX2 = (mb-ma)/Smamb*nb.p.velocity.x+2*ma/Smamb*na.p.velocity.x;
na.p.velocity.x = newVelX1; na.p.velocity.x = newVelX1;
nb.p.velocity.x = newVelX2; nb.p.velocity.x = newVelX2;