From 79071bf0ccb0bb1a089d79594177504c52625af1 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Fri, 20 Apr 2018 11:18:05 +0200 Subject: [PATCH] improved checkcollision performance --- .../assets/dist/scripts/corpus.min.js | 47 +++++++++++-------- .../edlp_corpus/assets/scripts/corpus.js | 47 +++++++++++-------- .../edlptheme/assets/dist/styles/app.min.css | 2 +- .../custom/edlptheme/assets/styles/app.scss | 2 +- 4 files changed, 58 insertions(+), 40 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 b03ac40b3..7bad54fac 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 @@ -73,6 +73,9 @@ // _scrambler_CL, // _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))]; + // pre-rendering node virtual canvas 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.line_width = 1; + this.w = this.r*2+this.line_width*2; + this.w_2 = this.w/2; + this.canvas.width = this.w; + this.canvas.height = this.w; this.canvas_ctx.fillStyle = 'rgb(255,255,255)'; this.canvas_ctx.lineWidth = this.line_width; @@ -250,8 +254,6 @@ this.aside = false; this.scrambling = false; - // this.n_repulses = {}; - // prototypes if (typeof Node.initialized == "undefined") { @@ -266,15 +268,14 @@ this.draw(); this.initPhysics(); - }; 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(); // 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; @@ -537,7 +538,7 @@ Node.prototype.move = function(){ // 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; @@ -545,9 +546,18 @@ this.init(); }; + // 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 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; var na,nb, ma,mb, @@ -562,7 +572,7 @@ // avoid colliding for centered nodes // if(_nodes[n].center) continue; // avoid colliding for scrambling nodes - if(na.scrambling) continue; + if(na.scrambling || na.aside || na.center) continue; ma = na.p.mass; @@ -571,16 +581,16 @@ // avoid impact between center and aside particules // if((na.center && nb.aside) || (na.aside && nb.center)) // and between aside particules - if(na.aside || nb.aside) + if(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){ - if( Math.random()>0.3 ) continue; - } - } + // if(na.center && nb.center){ + // if(Math.min(na.p.distanceTo(_attracter), nb.p.distanceTo(_attracter)) > 300){ + // if( Math.random()>0.3 ) continue; + // } + // } w = h = (na.r+nb.r); // if(!na.aside && !nb.aside){ @@ -684,7 +694,6 @@ // console.log('_physics.attractions.length', _physics.attractions.length); }; - // ___ _ ___ _ _ _ _ // | _ \__ _ _ _ __| |___ _ __ | _ \ |__ _ _ _| (_)__| |_ // | / _` | ' \/ _` / _ \ ' \ | _/ / _` | || | | (_-< _| 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 b03ac40b3..7bad54fac 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js +++ b/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js @@ -73,6 +73,9 @@ // _scrambler_CL, // _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))]; + // pre-rendering node virtual canvas 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.line_width = 1; + this.w = this.r*2+this.line_width*2; + this.w_2 = this.w/2; + this.canvas.width = this.w; + this.canvas.height = this.w; this.canvas_ctx.fillStyle = 'rgb(255,255,255)'; this.canvas_ctx.lineWidth = this.line_width; @@ -250,8 +254,6 @@ this.aside = false; this.scrambling = false; - // this.n_repulses = {}; - // prototypes if (typeof Node.initialized == "undefined") { @@ -266,15 +268,14 @@ this.draw(); this.initPhysics(); - }; 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(); // 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; @@ -537,7 +538,7 @@ Node.prototype.move = function(){ // 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; @@ -545,9 +546,18 @@ this.init(); }; + // 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 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; var na,nb, ma,mb, @@ -562,7 +572,7 @@ // avoid colliding for centered nodes // if(_nodes[n].center) continue; // avoid colliding for scrambling nodes - if(na.scrambling) continue; + if(na.scrambling || na.aside || na.center) continue; ma = na.p.mass; @@ -571,16 +581,16 @@ // avoid impact between center and aside particules // if((na.center && nb.aside) || (na.aside && nb.center)) // and between aside particules - if(na.aside || nb.aside) + if(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){ - if( Math.random()>0.3 ) continue; - } - } + // if(na.center && nb.center){ + // if(Math.min(na.p.distanceTo(_attracter), nb.p.distanceTo(_attracter)) > 300){ + // if( Math.random()>0.3 ) continue; + // } + // } w = h = (na.r+nb.r); // if(!na.aside && !nb.aside){ @@ -684,7 +694,6 @@ // console.log('_physics.attractions.length', _physics.attractions.length); }; - // ___ _ ___ _ _ _ _ // | _ \__ _ _ _ __| |___ _ __ | _ \ |__ _ _ _| (_)__| |_ // | / _` | ' \/ _` / _ \ ' \ | _/ / _` | || | | (_-< _| diff --git a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css index d0d623db2..99cb7e1b2 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css +++ b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css @@ -2589,7 +2589,7 @@ footer { footer .block-block-edlp-entrees div.item-list ul li.opened .entree-content { width: 350px; 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; } footer .block.random-player { margin-bottom: 1em; diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index 841af0b97..46f051dab 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss @@ -1744,7 +1744,7 @@ footer{ } } &.opened, &.highlighted{ - li:not(.opened):not(.highlighted){ + li:not(.opened):not(.highlighted):not(:hover){ a.term-link{ color:#a1a1a1; }