From f7e402320e646c1e71d6b9921d4f818ff7115233 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Sat, 21 Apr 2018 10:27:02 +0200 Subject: [PATCH] rewrited the corpus map drawing without virtual canvas pre-rendering as it's blured --- .../assets/dist/scripts/corpus.min.js | 129 +++++++++++------- .../edlp_corpus/assets/scripts/corpus.js | 129 +++++++++++------- 2 files changed, 160 insertions(+), 98 deletions(-) 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 7bad54fac..0c7dd2637 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 @@ -266,42 +266,42 @@ this.ori_pos = {x:this.x,y:this.y}; // TODO: don't forget to move ori_pos on window resize - this.draw(); + //this.drawSprite(); this.initPhysics(); }; - Node.prototype.draw = function(){ - _ctx.clearRect(0, 0, this.w, this.w); - - this.canvas_ctx.beginPath(); - // white background - this.canvas_ctx.fillRect(0,0,this.w,this.w); - - this.canvas_ctx.globalAlpha = this.faded ? 0.15 : 1; - - if(this.opened){ - // carre plein - // this.canvas_ctx.lineWidth = '1px'; - // 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(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(); - }; + // Node.prototype.drawSprite = function(){ + // _ctx.clearRect(0, 0, this.w, this.w); + // + // this.canvas_ctx.beginPath(); + // // white background + // this.canvas_ctx.fillRect(0,0,this.w,this.w); + // + // this.canvas_ctx.globalAlpha = this.faded ? 0.15 : 1; + // + // if(this.opened){ + // // carre plein + // // this.canvas_ctx.lineWidth = '1px'; + // // 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(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(); + // }; Node.prototype.initPhysics = function(){ // particule @@ -346,26 +346,25 @@ this.p.fixed = true; }else{ this.p.fixed = false; - } - if(this.center) + if(this.center) this.limitEvolutionZone(); - if(!this.p.resting()){ + // if(!this.p.resting()){ // this.checkVelocityThreshold(); this.checkWallBouncing(); this.updatePos(); if(this.scrambling){ this.checkOriPDist(); } + // } } if(_mouse_in && !this.aside && !this.faded) this.checkMouse(); - // if(this.debug) - // console.log("Node pos: ", {x:this.x, y:this.y}); - this.move(); + // this.move(); + this.redraw(); }; Node.prototype.checkVelocityThreshold = function(){ @@ -443,20 +442,20 @@ Node.prototype.open = function(){ this.opened = true; _node_opened_id = this.id; - this.draw(); + //this.drawSprite(); }; Node.prototype.close = function(){ this.opened = false; - this.draw(); + //this.drawSprite(); }; Node.prototype.fade = function(){ this.faded = true; - this.draw(); + //this.drawSprite(); }; Node.prototype.unFade = function(){ this.faded = false; - this.draw(); + //this.drawSprite(); }; Node.prototype.setCenteredOnEntree = function(tid){ @@ -469,7 +468,7 @@ this.stopScrambling(); this.unsetAside(); this.attract.on = true; - this.draw(); + //this.drawSprite(); } Node.prototype.unsetCentered = function(){ this.center = false; @@ -483,11 +482,11 @@ this.dist_to_attracter = this.p.distanceTo(_attracter); if( this.dist_to_attracter < _scene_props.width/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 - || Math.abs(_attracter.position.y - this.y) > _scene_props.height/3){ + if( Math.abs(_attracter.position.x - this.x) > _scene_props.width/4 + || Math.abs(_attracter.position.y - this.y) > _scene_props.height/4){ this.attract.on = true; }else{ this.attract.on = false; @@ -541,6 +540,38 @@ _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; } @@ -569,9 +600,9 @@ // colisions between _particules for (var n = 0, l = _nodes.length; n < l; n++) { na = _nodes[n]; - // avoid colliding for centered nodes - // if(_nodes[n].center) continue; // avoid colliding for scrambling nodes + // avoid colliding for aside nodes + // avoid colliding for centered nodes if(na.scrambling || na.aside || na.center) continue; ma = na.p.mass; 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 7bad54fac..0c7dd2637 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js +++ b/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js @@ -266,42 +266,42 @@ this.ori_pos = {x:this.x,y:this.y}; // TODO: don't forget to move ori_pos on window resize - this.draw(); + //this.drawSprite(); this.initPhysics(); }; - Node.prototype.draw = function(){ - _ctx.clearRect(0, 0, this.w, this.w); - - this.canvas_ctx.beginPath(); - // white background - this.canvas_ctx.fillRect(0,0,this.w,this.w); - - this.canvas_ctx.globalAlpha = this.faded ? 0.15 : 1; - - if(this.opened){ - // carre plein - // this.canvas_ctx.lineWidth = '1px'; - // 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(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(); - }; + // Node.prototype.drawSprite = function(){ + // _ctx.clearRect(0, 0, this.w, this.w); + // + // this.canvas_ctx.beginPath(); + // // white background + // this.canvas_ctx.fillRect(0,0,this.w,this.w); + // + // this.canvas_ctx.globalAlpha = this.faded ? 0.15 : 1; + // + // if(this.opened){ + // // carre plein + // // this.canvas_ctx.lineWidth = '1px'; + // // 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(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(); + // }; Node.prototype.initPhysics = function(){ // particule @@ -346,26 +346,25 @@ this.p.fixed = true; }else{ this.p.fixed = false; - } - if(this.center) + if(this.center) this.limitEvolutionZone(); - if(!this.p.resting()){ + // if(!this.p.resting()){ // this.checkVelocityThreshold(); this.checkWallBouncing(); this.updatePos(); if(this.scrambling){ this.checkOriPDist(); } + // } } if(_mouse_in && !this.aside && !this.faded) this.checkMouse(); - // if(this.debug) - // console.log("Node pos: ", {x:this.x, y:this.y}); - this.move(); + // this.move(); + this.redraw(); }; Node.prototype.checkVelocityThreshold = function(){ @@ -443,20 +442,20 @@ Node.prototype.open = function(){ this.opened = true; _node_opened_id = this.id; - this.draw(); + //this.drawSprite(); }; Node.prototype.close = function(){ this.opened = false; - this.draw(); + //this.drawSprite(); }; Node.prototype.fade = function(){ this.faded = true; - this.draw(); + //this.drawSprite(); }; Node.prototype.unFade = function(){ this.faded = false; - this.draw(); + //this.drawSprite(); }; Node.prototype.setCenteredOnEntree = function(tid){ @@ -469,7 +468,7 @@ this.stopScrambling(); this.unsetAside(); this.attract.on = true; - this.draw(); + //this.drawSprite(); } Node.prototype.unsetCentered = function(){ this.center = false; @@ -483,11 +482,11 @@ this.dist_to_attracter = this.p.distanceTo(_attracter); if( this.dist_to_attracter < _scene_props.width/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 - || Math.abs(_attracter.position.y - this.y) > _scene_props.height/3){ + if( Math.abs(_attracter.position.x - this.x) > _scene_props.width/4 + || Math.abs(_attracter.position.y - this.y) > _scene_props.height/4){ this.attract.on = true; }else{ this.attract.on = false; @@ -541,6 +540,38 @@ _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; } @@ -569,9 +600,9 @@ // colisions between _particules for (var n = 0, l = _nodes.length; n < l; n++) { na = _nodes[n]; - // avoid colliding for centered nodes - // if(_nodes[n].center) continue; // avoid colliding for scrambling nodes + // avoid colliding for aside nodes + // avoid colliding for centered nodes if(na.scrambling || na.aside || na.center) continue; ma = na.p.mass;