rewrited the corpus map drawing without virtual canvas pre-rendering as it's blured
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user