improved checkcollision performance

This commit is contained in:
2018-04-20 11:18:05 +02:00
parent 6d40f860e4
commit 79071bf0cc
4 changed files with 58 additions and 40 deletions
@@ -73,6 +73,9 @@
// _scrambler_CL, // _scrambler_CL,
// _scrambler_CR; // _scrambler_CR;
var check_parts_colid_frq = 2;
var check_parts_colid_tick = 1;
// ____ _ __ // ____ _ __
// / _/___ (_) /______ // / _/___ (_) /______
// / // __ \/ / __/ ___/ // / // __ \/ / __/ ___/
@@ -230,13 +233,14 @@
this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))]; this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
// pre-rendering node virtual canvas
this.canvas = document.createElement('canvas'); this.canvas = document.createElement('canvas');
this.canvas_ctx = this.canvas.getContext('2d'); this.canvas_ctx = this.canvas.getContext('2d');
this.line_width = 1;
this.line_width = 1.5; this.w = this.r*2+this.line_width*2;
this.canvas_w = this.r*2+this.line_width*2; this.w_2 = this.w/2;
this.canvas.width = this.canvas_w; this.canvas.width = this.w;
this.canvas.height = this.canvas_w; this.canvas.height = this.w;
this.canvas_ctx.fillStyle = 'rgb(255,255,255)'; this.canvas_ctx.fillStyle = 'rgb(255,255,255)';
this.canvas_ctx.lineWidth = this.line_width; this.canvas_ctx.lineWidth = this.line_width;
@@ -250,8 +254,6 @@
this.aside = false; this.aside = false;
this.scrambling = false; this.scrambling = false;
// this.n_repulses = {};
// prototypes // prototypes
if (typeof Node.initialized == "undefined") { if (typeof Node.initialized == "undefined") {
@@ -266,15 +268,14 @@
this.draw(); this.draw();
this.initPhysics(); this.initPhysics();
}; };
Node.prototype.draw = function(){ Node.prototype.draw = function(){
_ctx.clearRect(0, 0, this.canvas_w, this.canvas_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.canvas_w,this.canvas_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;
@@ -537,7 +538,7 @@
Node.prototype.move = function(){ Node.prototype.move = function(){
// just draw the virtual node canvas into the main scene canvas at the right position // 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); _ctx.drawImage(this.canvas, this.x-this.w_2, this.y-this.w_2);
}; };
Node.initialized = true; Node.initialized = true;
@@ -545,9 +546,18 @@
this.init(); this.init();
}; };
// TODO: we may convert a lot of computation into a web worker // TODO: we may convert a lot of computation into a web worker
// https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers // https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
function checkParticulesCollisions(){ function checkParticulesCollisions(){
// do not run particule collision every frames
if(check_parts_colid_tick < check_parts_colid_frq){
check_parts_colid_tick++;
return;
}
check_parts_colid_tick = 1;
// pre create vars to save memory; // pre create vars to save memory;
var na,nb, var na,nb,
ma,mb, ma,mb,
@@ -562,7 +572,7 @@
// avoid colliding for centered nodes // avoid colliding for centered nodes
// if(_nodes[n].center) continue; // if(_nodes[n].center) continue;
// avoid colliding for scrambling nodes // avoid colliding for scrambling nodes
if(na.scrambling) continue; if(na.scrambling || na.aside || na.center) continue;
ma = na.p.mass; ma = na.p.mass;
@@ -571,16 +581,16 @@
// avoid impact between center and aside particules // avoid impact between center and aside particules
// if((na.center && nb.aside) || (na.aside && nb.center)) // if((na.center && nb.aside) || (na.aside && nb.center))
// and between aside particules // and between aside particules
if(na.aside || nb.aside) if(nb.aside)
continue; continue;
// avoid impact between two centered particulses that comes to the center // avoid impact between two centered particulses that comes to the center
if(na.center && nb.center){ // if(na.center && nb.center){
if(Math.min(na.p.distanceTo(_attracter), nb.p.distanceTo(_attracter)) > 300){ // if(Math.min(na.p.distanceTo(_attracter), nb.p.distanceTo(_attracter)) > 300){
if( Math.random()>0.3 ) continue; // if( Math.random()>0.3 ) continue;
} // }
} // }
w = h = (na.r+nb.r); w = h = (na.r+nb.r);
// if(!na.aside && !nb.aside){ // if(!na.aside && !nb.aside){
@@ -684,7 +694,6 @@
// console.log('_physics.attractions.length', _physics.attractions.length); // console.log('_physics.attractions.length', _physics.attractions.length);
}; };
// ___ _ ___ _ _ _ _ // ___ _ ___ _ _ _ _
// | _ \__ _ _ _ __| |___ _ __ | _ \ |__ _ _ _| (_)__| |_ // | _ \__ _ _ _ __| |___ _ __ | _ \ |__ _ _ _| (_)__| |_
// | / _` | ' \/ _` / _ \ ' \ | _/ / _` | || | | (_-< _| // | / _` | ' \/ _` / _ \ ' \ | _/ / _` | || | | (_-< _|
@@ -73,6 +73,9 @@
// _scrambler_CL, // _scrambler_CL,
// _scrambler_CR; // _scrambler_CR;
var check_parts_colid_frq = 2;
var check_parts_colid_tick = 1;
// ____ _ __ // ____ _ __
// / _/___ (_) /______ // / _/___ (_) /______
// / // __ \/ / __/ ___/ // / // __ \/ / __/ ___/
@@ -230,13 +233,14 @@
this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))]; this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
// pre-rendering node virtual canvas
this.canvas = document.createElement('canvas'); this.canvas = document.createElement('canvas');
this.canvas_ctx = this.canvas.getContext('2d'); this.canvas_ctx = this.canvas.getContext('2d');
this.line_width = 1;
this.line_width = 1.5; this.w = this.r*2+this.line_width*2;
this.canvas_w = this.r*2+this.line_width*2; this.w_2 = this.w/2;
this.canvas.width = this.canvas_w; this.canvas.width = this.w;
this.canvas.height = this.canvas_w; this.canvas.height = this.w;
this.canvas_ctx.fillStyle = 'rgb(255,255,255)'; this.canvas_ctx.fillStyle = 'rgb(255,255,255)';
this.canvas_ctx.lineWidth = this.line_width; this.canvas_ctx.lineWidth = this.line_width;
@@ -250,8 +254,6 @@
this.aside = false; this.aside = false;
this.scrambling = false; this.scrambling = false;
// this.n_repulses = {};
// prototypes // prototypes
if (typeof Node.initialized == "undefined") { if (typeof Node.initialized == "undefined") {
@@ -266,15 +268,14 @@
this.draw(); this.draw();
this.initPhysics(); this.initPhysics();
}; };
Node.prototype.draw = function(){ Node.prototype.draw = function(){
_ctx.clearRect(0, 0, this.canvas_w, this.canvas_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.canvas_w,this.canvas_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;
@@ -537,7 +538,7 @@
Node.prototype.move = function(){ Node.prototype.move = function(){
// just draw the virtual node canvas into the main scene canvas at the right position // 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); _ctx.drawImage(this.canvas, this.x-this.w_2, this.y-this.w_2);
}; };
Node.initialized = true; Node.initialized = true;
@@ -545,9 +546,18 @@
this.init(); this.init();
}; };
// TODO: we may convert a lot of computation into a web worker // TODO: we may convert a lot of computation into a web worker
// https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers // https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
function checkParticulesCollisions(){ function checkParticulesCollisions(){
// do not run particule collision every frames
if(check_parts_colid_tick < check_parts_colid_frq){
check_parts_colid_tick++;
return;
}
check_parts_colid_tick = 1;
// pre create vars to save memory; // pre create vars to save memory;
var na,nb, var na,nb,
ma,mb, ma,mb,
@@ -562,7 +572,7 @@
// avoid colliding for centered nodes // avoid colliding for centered nodes
// if(_nodes[n].center) continue; // if(_nodes[n].center) continue;
// avoid colliding for scrambling nodes // avoid colliding for scrambling nodes
if(na.scrambling) continue; if(na.scrambling || na.aside || na.center) continue;
ma = na.p.mass; ma = na.p.mass;
@@ -571,16 +581,16 @@
// avoid impact between center and aside particules // avoid impact between center and aside particules
// if((na.center && nb.aside) || (na.aside && nb.center)) // if((na.center && nb.aside) || (na.aside && nb.center))
// and between aside particules // and between aside particules
if(na.aside || nb.aside) if(nb.aside)
continue; continue;
// avoid impact between two centered particulses that comes to the center // avoid impact between two centered particulses that comes to the center
if(na.center && nb.center){ // if(na.center && nb.center){
if(Math.min(na.p.distanceTo(_attracter), nb.p.distanceTo(_attracter)) > 300){ // if(Math.min(na.p.distanceTo(_attracter), nb.p.distanceTo(_attracter)) > 300){
if( Math.random()>0.3 ) continue; // if( Math.random()>0.3 ) continue;
} // }
} // }
w = h = (na.r+nb.r); w = h = (na.r+nb.r);
// if(!na.aside && !nb.aside){ // if(!na.aside && !nb.aside){
@@ -684,7 +694,6 @@
// console.log('_physics.attractions.length', _physics.attractions.length); // console.log('_physics.attractions.length', _physics.attractions.length);
}; };
// ___ _ ___ _ _ _ _ // ___ _ ___ _ _ _ _
// | _ \__ _ _ _ __| |___ _ __ | _ \ |__ _ _ _| (_)__| |_ // | _ \__ _ _ _ __| |___ _ __ | _ \ |__ _ _ _| (_)__| |_
// | / _` | ' \/ _` / _ \ ' \ | _/ / _` | || | | (_-< _| // | / _` | ' \/ _` / _ \ ' \ | _/ / _` | || | | (_-< _|
@@ -2589,7 +2589,7 @@ footer {
footer .block-block-edlp-entrees div.item-list ul li.opened .entree-content { footer .block-block-edlp-entrees div.item-list ul li.opened .entree-content {
width: 350px; width: 350px;
opacity: 1; } opacity: 1; }
footer .block-block-edlp-entrees div.item-list.opened li:not(.opened):not(.highlighted) a.term-link, footer .block-block-edlp-entrees div.item-list.highlighted li:not(.opened):not(.highlighted) a.term-link { footer .block-block-edlp-entrees div.item-list.opened li:not(.opened):not(.highlighted):not(:hover) a.term-link, footer .block-block-edlp-entrees div.item-list.highlighted li:not(.opened):not(.highlighted):not(:hover) a.term-link {
color: #a1a1a1; } color: #a1a1a1; }
footer .block.random-player { footer .block.random-player {
margin-bottom: 1em; margin-bottom: 1em;
@@ -1744,7 +1744,7 @@ footer{
} }
} }
&.opened, &.highlighted{ &.opened, &.highlighted{
li:not(.opened):not(.highlighted){ li:not(.opened):not(.highlighted):not(:hover){
a.term-link{ a.term-link{
color:#a1a1a1; color:#a1a1a1;
} }