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