diff --git a/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js b/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js index 2c2bdad2e..b03ac40b3 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js +++ b/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; diff --git a/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js b/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js index 2c2bdad2e..b03ac40b3 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js +++ b/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;