bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rewrited the corpus map drawing without virtual canvas pre-rendering as it's blured

Browse Source
This commit is contained in:
bachir
2018-04-21 10:27:02 +02:00
parent 79071bf0cc
commit f7e402320e
2 changed files with 160 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js
Vendored
+80 -49
View File
@@ -266,42 +266,42 @@
this.ori_pos = {x:this.x,y:this.y}; this.ori_pos = {x:this.x,y:this.y};
// TODO: don't forget to move ori_pos on window resize // TODO: don't forget to move ori_pos on window resize
this.draw(); //this.drawSprite();
this.initPhysics(); this.initPhysics();
}; };
Node.prototype.draw = function(){ // Node.prototype.drawSprite = function(){
_ctx.clearRect(0, 0, this.w, this.w); // _ctx.clearRect(0, 0, this.w, this.w);
//
this.canvas_ctx.beginPath(); // this.canvas_ctx.beginPath();
// white background // // white background
this.canvas_ctx.fillRect(0,0,this.w,this.w); // this.canvas_ctx.fillRect(0,0,this.w,this.w);
//
this.canvas_ctx.globalAlpha = this.faded ? 0.15 : 1; // this.canvas_ctx.globalAlpha = this.faded ? 0.15 : 1;
//
if(this.opened){ // if(this.opened){
// carre plein // // carre plein
// this.canvas_ctx.lineWidth = '1px'; // // this.canvas_ctx.lineWidth = '1px';
// 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.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(this.line_width,this.line_width,this.d,this.d); // 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) // this.canvas_ctx.restore(); // restore the normal context state (fill white)
} // }
// else{ // // else{
// // carre plein // // // carre plein
// // this.canvas_ctx.fillStyle = _ecolors[this.e_color]; // // // this.canvas_ctx.fillStyle = _ecolors[this.e_color];
// // this.canvas_ctx.fillRect(this.x - this.r,this.y - this.r,this.d,this.d); // // // this.canvas_ctx.fillRect(this.x - this.r,this.y - this.r,this.d,this.d);
// // ou carre contour // // // ou carre contour
// this.canvas_ctx.fillRect(this.line_width,this.line_width,this.d,this.d); // // 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.strokeStyle = _ecolors[this.e_color];
this.canvas_ctx.strokeRect(this.line_width,this.line_width,this.d,this.d); // 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();
}; // };
Node.prototype.initPhysics = function(){ Node.prototype.initPhysics = function(){
// particule // particule
@@ -346,26 +346,25 @@
this.p.fixed = true; this.p.fixed = true;
}else{ }else{
this.p.fixed = false; this.p.fixed = false;
}
if(this.center) if(this.center)
this.limitEvolutionZone(); this.limitEvolutionZone();
if(!this.p.resting()){ // if(!this.p.resting()){
// this.checkVelocityThreshold(); // this.checkVelocityThreshold();
this.checkWallBouncing(); this.checkWallBouncing();
this.updatePos(); this.updatePos();
if(this.scrambling){ if(this.scrambling){
this.checkOriPDist(); this.checkOriPDist();
} }
// }
} }
if(_mouse_in && !this.aside && !this.faded) if(_mouse_in && !this.aside && !this.faded)
this.checkMouse(); this.checkMouse();
// if(this.debug) // this.move();
// console.log("Node pos: ", {x:this.x, y:this.y}); this.redraw();
this.move();
}; };
Node.prototype.checkVelocityThreshold = function(){ Node.prototype.checkVelocityThreshold = function(){
@@ -443,20 +442,20 @@
Node.prototype.open = function(){ Node.prototype.open = function(){
this.opened = true; this.opened = true;
_node_opened_id = this.id; _node_opened_id = this.id;
this.draw(); //this.drawSprite();
}; };
Node.prototype.close = function(){ Node.prototype.close = function(){
this.opened = false; this.opened = false;
this.draw(); //this.drawSprite();
}; };
Node.prototype.fade = function(){ Node.prototype.fade = function(){
this.faded = true; this.faded = true;
this.draw(); //this.drawSprite();
}; };
Node.prototype.unFade = function(){ Node.prototype.unFade = function(){
this.faded = false; this.faded = false;
this.draw(); //this.drawSprite();
}; };
Node.prototype.setCenteredOnEntree = function(tid){ Node.prototype.setCenteredOnEntree = function(tid){
@@ -469,7 +468,7 @@
this.stopScrambling(); this.stopScrambling();
this.unsetAside(); this.unsetAside();
this.attract.on = true; this.attract.on = true;
this.draw(); //this.drawSprite();
} }
Node.prototype.unsetCentered = function(){ Node.prototype.unsetCentered = function(){
this.center = false; this.center = false;
@@ -483,11 +482,11 @@
this.dist_to_attracter = this.p.distanceTo(_attracter); this.dist_to_attracter = this.p.distanceTo(_attracter);
if( this.dist_to_attracter < _scene_props.width/4){ if( this.dist_to_attracter < _scene_props.width/4){
if( this.p.velocity.length() > 0.4 ){ if( this.p.velocity.length() > 0.4 ){
this.p.velocity.multiplyScalar(0.995); this.p.velocity.multiplyScalar(0.99); // 0.995
} }
} }
if( Math.abs(_attracter.position.x - this.x) > _scene_props.width/3 if( Math.abs(_attracter.position.x - this.x) > _scene_props.width/4
|| Math.abs(_attracter.position.y - this.y) > _scene_props.height/3){ || Math.abs(_attracter.position.y - this.y) > _scene_props.height/4){
this.attract.on = true; this.attract.on = true;
}else{ }else{
this.attract.on = false; this.attract.on = false;
@@ -541,6 +540,38 @@
_ctx.drawImage(this.canvas, this.x-this.w_2, this.y-this.w_2); _ctx.drawImage(this.canvas, this.x-this.w_2, this.y-this.w_2);
}; };
Node.prototype.redraw = function(){
_ctx.beginPath();
// white background
_ctx.fillStyle = 'rgb(255,255,255)';
_ctx.fillRect(this.x-this.r,this.y-this.r,this.d,this.d);
_ctx.globalAlpha = this.faded ? 0.15 : 1;
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.save(); // save the normal context state (fill white)
_ctx.fillStyle = _ecolors[this.e_color];
_ctx.fillRect(this.x-this.r,this.y-this.r,this.d,this.d);
// _ctx.restore(); // restore the normal context state (fill white)
}
// else{
// // carre plein
// // _ctx.fillStyle = _ecolors[this.e_color];
// // _ctx.fillRect(this.x - this.r,this.y - this.r,this.d,this.d);
// // ou carre contour
// _ctx.fillRect(this.line_width,this.line_width,this.d,this.d);
// }
_ctx.strokeStyle = _ecolors[this.e_color];
_ctx.strokeRect(this.x-this.r,this.y-this.r,this.d,this.d);
// _ctx.globalAlpha = 1;
_ctx.closePath();
};
Node.initialized = true; Node.initialized = true;
} }
@@ -569,9 +600,9 @@
// 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];
// avoid colliding for centered nodes
// if(_nodes[n].center) continue;
// avoid colliding for scrambling nodes // avoid colliding for scrambling nodes
// avoid colliding for aside nodes
// avoid colliding for centered nodes
if(na.scrambling || na.aside || na.center) continue; if(na.scrambling || na.aside || na.center) continue;
ma = na.p.mass; ma = na.p.mass;
sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js
+80 -49
View File
@@ -266,42 +266,42 @@
this.ori_pos = {x:this.x,y:this.y}; this.ori_pos = {x:this.x,y:this.y};
// TODO: don't forget to move ori_pos on window resize // TODO: don't forget to move ori_pos on window resize
this.draw(); //this.drawSprite();
this.initPhysics(); this.initPhysics();
}; };
Node.prototype.draw = function(){ // Node.prototype.drawSprite = function(){
_ctx.clearRect(0, 0, this.w, this.w); // _ctx.clearRect(0, 0, this.w, this.w);
//
this.canvas_ctx.beginPath(); // this.canvas_ctx.beginPath();
// white background // // white background
this.canvas_ctx.fillRect(0,0,this.w,this.w); // this.canvas_ctx.fillRect(0,0,this.w,this.w);
//
this.canvas_ctx.globalAlpha = this.faded ? 0.15 : 1; // this.canvas_ctx.globalAlpha = this.faded ? 0.15 : 1;
//
if(this.opened){ // if(this.opened){
// carre plein // // carre plein
// this.canvas_ctx.lineWidth = '1px'; // // this.canvas_ctx.lineWidth = '1px';
// 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.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(this.line_width,this.line_width,this.d,this.d); // 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) // this.canvas_ctx.restore(); // restore the normal context state (fill white)
} // }
// else{ // // else{
// // carre plein // // // carre plein
// // this.canvas_ctx.fillStyle = _ecolors[this.e_color]; // // // this.canvas_ctx.fillStyle = _ecolors[this.e_color];
// // this.canvas_ctx.fillRect(this.x - this.r,this.y - this.r,this.d,this.d); // // // this.canvas_ctx.fillRect(this.x - this.r,this.y - this.r,this.d,this.d);
// // ou carre contour // // // ou carre contour
// this.canvas_ctx.fillRect(this.line_width,this.line_width,this.d,this.d); // // 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.strokeStyle = _ecolors[this.e_color];
this.canvas_ctx.strokeRect(this.line_width,this.line_width,this.d,this.d); // 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();
}; // };
Node.prototype.initPhysics = function(){ Node.prototype.initPhysics = function(){
// particule // particule
@@ -346,26 +346,25 @@
this.p.fixed = true; this.p.fixed = true;
}else{ }else{
this.p.fixed = false; this.p.fixed = false;
}
if(this.center) if(this.center)
this.limitEvolutionZone(); this.limitEvolutionZone();
if(!this.p.resting()){ // if(!this.p.resting()){
// this.checkVelocityThreshold(); // this.checkVelocityThreshold();
this.checkWallBouncing(); this.checkWallBouncing();
this.updatePos(); this.updatePos();
if(this.scrambling){ if(this.scrambling){
this.checkOriPDist(); this.checkOriPDist();
} }
// }
} }
if(_mouse_in && !this.aside && !this.faded) if(_mouse_in && !this.aside && !this.faded)
this.checkMouse(); this.checkMouse();
// if(this.debug) // this.move();
// console.log("Node pos: ", {x:this.x, y:this.y}); this.redraw();
this.move();
}; };
Node.prototype.checkVelocityThreshold = function(){ Node.prototype.checkVelocityThreshold = function(){
@@ -443,20 +442,20 @@
Node.prototype.open = function(){ Node.prototype.open = function(){
this.opened = true; this.opened = true;
_node_opened_id = this.id; _node_opened_id = this.id;
this.draw(); //this.drawSprite();
}; };
Node.prototype.close = function(){ Node.prototype.close = function(){
this.opened = false; this.opened = false;
this.draw(); //this.drawSprite();
}; };
Node.prototype.fade = function(){ Node.prototype.fade = function(){
this.faded = true; this.faded = true;
this.draw(); //this.drawSprite();
}; };
Node.prototype.unFade = function(){ Node.prototype.unFade = function(){
this.faded = false; this.faded = false;
this.draw(); //this.drawSprite();
}; };
Node.prototype.setCenteredOnEntree = function(tid){ Node.prototype.setCenteredOnEntree = function(tid){
@@ -469,7 +468,7 @@
this.stopScrambling(); this.stopScrambling();
this.unsetAside(); this.unsetAside();
this.attract.on = true; this.attract.on = true;
this.draw(); //this.drawSprite();
} }
Node.prototype.unsetCentered = function(){ Node.prototype.unsetCentered = function(){
this.center = false; this.center = false;
@@ -483,11 +482,11 @@
this.dist_to_attracter = this.p.distanceTo(_attracter); this.dist_to_attracter = this.p.distanceTo(_attracter);
if( this.dist_to_attracter < _scene_props.width/4){ if( this.dist_to_attracter < _scene_props.width/4){
if( this.p.velocity.length() > 0.4 ){ if( this.p.velocity.length() > 0.4 ){
this.p.velocity.multiplyScalar(0.995); this.p.velocity.multiplyScalar(0.99); // 0.995
} }
} }
if( Math.abs(_attracter.position.x - this.x) > _scene_props.width/3 if( Math.abs(_attracter.position.x - this.x) > _scene_props.width/4
|| Math.abs(_attracter.position.y - this.y) > _scene_props.height/3){ || Math.abs(_attracter.position.y - this.y) > _scene_props.height/4){
this.attract.on = true; this.attract.on = true;
}else{ }else{
this.attract.on = false; this.attract.on = false;
@@ -541,6 +540,38 @@
_ctx.drawImage(this.canvas, this.x-this.w_2, this.y-this.w_2); _ctx.drawImage(this.canvas, this.x-this.w_2, this.y-this.w_2);
}; };
Node.prototype.redraw = function(){
_ctx.beginPath();
// white background
_ctx.fillStyle = 'rgb(255,255,255)';
_ctx.fillRect(this.x-this.r,this.y-this.r,this.d,this.d);
_ctx.globalAlpha = this.faded ? 0.15 : 1;
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.save(); // save the normal context state (fill white)
_ctx.fillStyle = _ecolors[this.e_color];
_ctx.fillRect(this.x-this.r,this.y-this.r,this.d,this.d);
// _ctx.restore(); // restore the normal context state (fill white)
}
// else{
// // carre plein
// // _ctx.fillStyle = _ecolors[this.e_color];
// // _ctx.fillRect(this.x - this.r,this.y - this.r,this.d,this.d);
// // ou carre contour
// _ctx.fillRect(this.line_width,this.line_width,this.d,this.d);
// }
_ctx.strokeStyle = _ecolors[this.e_color];
_ctx.strokeRect(this.x-this.r,this.y-this.r,this.d,this.d);
// _ctx.globalAlpha = 1;
_ctx.closePath();
};
Node.initialized = true; Node.initialized = true;
} }
@@ -569,9 +600,9 @@
// 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];
// avoid colliding for centered nodes
// if(_nodes[n].center) continue;
// avoid colliding for scrambling nodes // avoid colliding for scrambling nodes
// avoid colliding for aside nodes
// avoid colliding for centered nodes
if(na.scrambling || na.aside || na.center) continue; if(na.scrambling || na.aside || na.center) continue;
ma = na.p.mass; ma = na.p.mass;