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 bb7ae728c..822ffb6e6 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 @@ -34,7 +34,7 @@ // var _stage = new createjs.Stage('edlp-map'); var _nodes = []; // var _particules = []; - var _p_radius = 3; // nodes radius (real radius, not diametre) + var _base_radius = 3; // nodes radius (real radius, not diametre) var _p_velocity_factor = 0.5; var _m_pos = {x:0, y:0}; var _node_hover_id = -1; @@ -129,7 +129,7 @@ this.debug = d; this.mass = 8; - this.base_radius = _p_radius; + this.base_radius = _base_radius; this.g = { l : 1, // drawing line width s : 1 // drawing space between squares @@ -145,6 +145,7 @@ this.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top); this.hover = false; + // physics this.p = _physics.makeParticle(this.mass, this.x, this.y); this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor); @@ -206,7 +207,7 @@ && _m_pos.y > this.y - this.real_radius && _m_pos.y < this.y + this.real_radius){ if(_node_hover_id == -1 || _node_hover_id == this.id){ - console.log("Node hover", this.id); + // console.log("Node hover", this.id); this.hover = true; this.highlightEntries(); _node_hover_id = this.id; @@ -235,7 +236,7 @@ _ctx.beginPath(); _ctx.lineWidth = this.g.l*2;//this.hover ? this.g.l*2 : this.g.l; var r,d; - for (var i = 0; i < this.entrees.length; i++) { + for (let i = 0; i < this.entrees.length; i++) { // _ctx.fillStyle = i == 0 ? _entrees_colors[this.entrees[i]] : "#fff"; // _ctx.strokeStyle = _entrees_colors[this.entrees[i]]; _ctx.fillStyle = i == 0 ? edlp_vars['e_col_'+this.entrees[i]] : "#fff"; @@ -266,53 +267,70 @@ // / ____/ / / / /_/ (__ ) / /__(__ ) // /_/ /_/ /_/\__, /____/_/\___/____/ // /____/ - // TODO: how to use particule collision in new OOP Node() contexte + // 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(){ + // pre create vars to save memory; + var node_a, node_b, p_a, p_b, + d, full_rad, + newVelX1, newVelY1, newVelX2, newVelY2, + makeup, angle; // colisions between _particules - for (var p = 0, l = _particules.length; p < l; p++) { - var particule = _particules[p]; - // var theta = 360 / (Math.PI * _p_radius); - if(!particule.attracted) continue; - for (var q = 0; q < p; q++) { - if(q==p) continue; + for (var n = 0, l = _nodes.length; n < l; n++) { + node_a = _nodes[n]; + p_a = node_a.p; + // console.log(`p_a`, p_a.attracted); + // var theta = 360 / (Math.PI * _base_radius); + // if(!p_a.attracted) continue; + // console.log('test'); + for (var q = 0; q < n; q++) { + if(q===n) continue; - var a = particule; - var b = _particules[q]; - if(!b.attracted) continue; - var d = a.distanceTo(b); + node_b = _nodes[q]; + p_b = node_b.p; + // if(!p_b.attracted) continue; + d = p_a.distanceTo(p_b); + + full_rad = node_a.real_radius + node_b.real_radius; + + // if not colliding skip following + if(d > full_rad) continue; // apply new forces if colliding - if(d <= _p_radius*2){ + newVelX1 = (p_a.velocity.x * (p_a.mass - p_b.mass) + + (2 * p_b.mass * p_b.velocity.x)) / (p_a.mass + p_b.mass); + newVelY1 = (p_a.velocity.y * (p_a.mass - p_b.mass) + + (2 * p_b.mass * p_b.velocity.y)) / (p_a.mass + p_b.mass); + newVelX2 = (p_b.velocity.x * (p_b.mass - p_a.mass) + + (2 * p_a.mass * p_a.velocity.x)) / (p_a.mass + p_b.mass); + newVelY2 = (p_b.velocity.y * (p_b.mass - p_a.mass) + + (2 * p_a.mass * p_a.velocity.y)) / (p_a.mass + p_b.mass); - var newVelX1 = (a.velocity.x * (a.mass - b.mass) + (2 * b.mass * b.velocity.x)) / (a.mass + b.mass); - var newVelY1 = (a.velocity.y * (a.mass - b.mass) + (2 * b.mass * b.velocity.y)) / (a.mass + b.mass); - var newVelX2 = (b.velocity.x * (b.mass - a.mass) + (2 * a.mass * a.velocity.x)) / (a.mass + b.mass); - var newVelY2 = (b.velocity.y * (b.mass - a.mass) + (2 * a.mass * a.velocity.y)) / (a.mass + b.mass); + p_a.velocity.x = newVelX1; + p_a.velocity.y = newVelY1; + p_b.velocity.x = newVelX2; + p_b.velocity.y = newVelY2; - a.velocity.x = newVelX1; - a.velocity.y = newVelY1; - b.velocity.x = newVelX2; - b.velocity.y = newVelY2; - - a.velocity.multiplyScalar(0.75); - b.velocity.multiplyScalar(0.75); + p_a.velocity.multiplyScalar(0.75); + p_b.velocity.multiplyScalar(0.75); - // move particles if they overlap - if (d < _p_radius*2) { - var makeup = _p_radius - d/2; - var angle = Math.atan2(b.position.y - a.position.y, b.position.x - a.position.x); + // move particles if they overlap + if (d < full_rad) { + makeup = full_rad/2 - d/2; + angle = Math.atan2(p_b.position.y - p_a.position.y, p_b.position.x - p_a.position.x); - b.position.x += makeup * Math.cos(angle); - b.position.y += makeup * Math.sin(angle); + p_b.position.x += makeup * Math.cos(angle); + p_b.position.y += makeup * Math.sin(angle); - angle += Math.PI; + angle += Math.PI; - a.position.x += makeup * Math.cos(angle); - a.position.y += makeup * Math.sin(angle); + p_a.position.x += makeup * Math.cos(angle); + p_a.position.y += makeup * Math.sin(angle); - } } + + _nodes[n].p = p_a; + _nodes[q].p = p_b; } } }; @@ -326,7 +344,7 @@ _$canvas .on('mousemove', function(event) { event.preventDefault(); - console.log("onMouseMove"); + // console.log("onMouseMove"); _m_pos.x = event.originalEvent.clientX; _m_pos.y = event.originalEvent.clientY; // console.log("/ _ / - / _ /"); @@ -369,14 +387,17 @@ function render(){ _ctx.clearRect(0, 0, _canvas.width, _canvas.height); + checkParticulesCollisions(); + for (var i = 0; i < _nodes.length; i++) { _nodes[i].onUpdate(); } - if(_node_hover_id != -1){ - _canvas.style.cursor = 'pointer'; - }else{ - _canvas.style.cursor = 'auto'; - } + // if(_node_hover_id != -1){ + // _canvas.style.cursor = 'pointer'; + // }else{ + // _canvas.style.cursor = 'auto'; + // } + _canvas.style.cursor = _node_hover_id != -1 ? 'pointer' : 'auto'; }; function startAnime(){ 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 bb7ae728c..822ffb6e6 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js +++ b/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js @@ -34,7 +34,7 @@ // var _stage = new createjs.Stage('edlp-map'); var _nodes = []; // var _particules = []; - var _p_radius = 3; // nodes radius (real radius, not diametre) + var _base_radius = 3; // nodes radius (real radius, not diametre) var _p_velocity_factor = 0.5; var _m_pos = {x:0, y:0}; var _node_hover_id = -1; @@ -129,7 +129,7 @@ this.debug = d; this.mass = 8; - this.base_radius = _p_radius; + this.base_radius = _base_radius; this.g = { l : 1, // drawing line width s : 1 // drawing space between squares @@ -145,6 +145,7 @@ this.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top); this.hover = false; + // physics this.p = _physics.makeParticle(this.mass, this.x, this.y); this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor); @@ -206,7 +207,7 @@ && _m_pos.y > this.y - this.real_radius && _m_pos.y < this.y + this.real_radius){ if(_node_hover_id == -1 || _node_hover_id == this.id){ - console.log("Node hover", this.id); + // console.log("Node hover", this.id); this.hover = true; this.highlightEntries(); _node_hover_id = this.id; @@ -235,7 +236,7 @@ _ctx.beginPath(); _ctx.lineWidth = this.g.l*2;//this.hover ? this.g.l*2 : this.g.l; var r,d; - for (var i = 0; i < this.entrees.length; i++) { + for (let i = 0; i < this.entrees.length; i++) { // _ctx.fillStyle = i == 0 ? _entrees_colors[this.entrees[i]] : "#fff"; // _ctx.strokeStyle = _entrees_colors[this.entrees[i]]; _ctx.fillStyle = i == 0 ? edlp_vars['e_col_'+this.entrees[i]] : "#fff"; @@ -266,53 +267,70 @@ // / ____/ / / / /_/ (__ ) / /__(__ ) // /_/ /_/ /_/\__, /____/_/\___/____/ // /____/ - // TODO: how to use particule collision in new OOP Node() contexte + // 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(){ + // pre create vars to save memory; + var node_a, node_b, p_a, p_b, + d, full_rad, + newVelX1, newVelY1, newVelX2, newVelY2, + makeup, angle; // colisions between _particules - for (var p = 0, l = _particules.length; p < l; p++) { - var particule = _particules[p]; - // var theta = 360 / (Math.PI * _p_radius); - if(!particule.attracted) continue; - for (var q = 0; q < p; q++) { - if(q==p) continue; + for (var n = 0, l = _nodes.length; n < l; n++) { + node_a = _nodes[n]; + p_a = node_a.p; + // console.log(`p_a`, p_a.attracted); + // var theta = 360 / (Math.PI * _base_radius); + // if(!p_a.attracted) continue; + // console.log('test'); + for (var q = 0; q < n; q++) { + if(q===n) continue; - var a = particule; - var b = _particules[q]; - if(!b.attracted) continue; - var d = a.distanceTo(b); + node_b = _nodes[q]; + p_b = node_b.p; + // if(!p_b.attracted) continue; + d = p_a.distanceTo(p_b); + + full_rad = node_a.real_radius + node_b.real_radius; + + // if not colliding skip following + if(d > full_rad) continue; // apply new forces if colliding - if(d <= _p_radius*2){ + newVelX1 = (p_a.velocity.x * (p_a.mass - p_b.mass) + + (2 * p_b.mass * p_b.velocity.x)) / (p_a.mass + p_b.mass); + newVelY1 = (p_a.velocity.y * (p_a.mass - p_b.mass) + + (2 * p_b.mass * p_b.velocity.y)) / (p_a.mass + p_b.mass); + newVelX2 = (p_b.velocity.x * (p_b.mass - p_a.mass) + + (2 * p_a.mass * p_a.velocity.x)) / (p_a.mass + p_b.mass); + newVelY2 = (p_b.velocity.y * (p_b.mass - p_a.mass) + + (2 * p_a.mass * p_a.velocity.y)) / (p_a.mass + p_b.mass); - var newVelX1 = (a.velocity.x * (a.mass - b.mass) + (2 * b.mass * b.velocity.x)) / (a.mass + b.mass); - var newVelY1 = (a.velocity.y * (a.mass - b.mass) + (2 * b.mass * b.velocity.y)) / (a.mass + b.mass); - var newVelX2 = (b.velocity.x * (b.mass - a.mass) + (2 * a.mass * a.velocity.x)) / (a.mass + b.mass); - var newVelY2 = (b.velocity.y * (b.mass - a.mass) + (2 * a.mass * a.velocity.y)) / (a.mass + b.mass); + p_a.velocity.x = newVelX1; + p_a.velocity.y = newVelY1; + p_b.velocity.x = newVelX2; + p_b.velocity.y = newVelY2; - a.velocity.x = newVelX1; - a.velocity.y = newVelY1; - b.velocity.x = newVelX2; - b.velocity.y = newVelY2; - - a.velocity.multiplyScalar(0.75); - b.velocity.multiplyScalar(0.75); + p_a.velocity.multiplyScalar(0.75); + p_b.velocity.multiplyScalar(0.75); - // move particles if they overlap - if (d < _p_radius*2) { - var makeup = _p_radius - d/2; - var angle = Math.atan2(b.position.y - a.position.y, b.position.x - a.position.x); + // move particles if they overlap + if (d < full_rad) { + makeup = full_rad/2 - d/2; + angle = Math.atan2(p_b.position.y - p_a.position.y, p_b.position.x - p_a.position.x); - b.position.x += makeup * Math.cos(angle); - b.position.y += makeup * Math.sin(angle); + p_b.position.x += makeup * Math.cos(angle); + p_b.position.y += makeup * Math.sin(angle); - angle += Math.PI; + angle += Math.PI; - a.position.x += makeup * Math.cos(angle); - a.position.y += makeup * Math.sin(angle); + p_a.position.x += makeup * Math.cos(angle); + p_a.position.y += makeup * Math.sin(angle); - } } + + _nodes[n].p = p_a; + _nodes[q].p = p_b; } } }; @@ -326,7 +344,7 @@ _$canvas .on('mousemove', function(event) { event.preventDefault(); - console.log("onMouseMove"); + // console.log("onMouseMove"); _m_pos.x = event.originalEvent.clientX; _m_pos.y = event.originalEvent.clientY; // console.log("/ _ / - / _ /"); @@ -369,14 +387,17 @@ function render(){ _ctx.clearRect(0, 0, _canvas.width, _canvas.height); + checkParticulesCollisions(); + for (var i = 0; i < _nodes.length; i++) { _nodes[i].onUpdate(); } - if(_node_hover_id != -1){ - _canvas.style.cursor = 'pointer'; - }else{ - _canvas.style.cursor = 'auto'; - } + // if(_node_hover_id != -1){ + // _canvas.style.cursor = 'pointer'; + // }else{ + // _canvas.style.cursor = 'auto'; + // } + _canvas.style.cursor = _node_hover_id != -1 ? 'pointer' : 'auto'; }; function startAnime(){ 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 8b381d2d2..41a0cc957 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 @@ -1211,7 +1211,6 @@ main[role="main"] .layout-content { overflow: hidden; } main[role="main"] .layout-content .row .col { pointer-events: all; - height: 100%; position: relative; } main[role="main"] .layout-content .row .col > .wrapper { position: relative; diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index 1ba4bee03..eaec93e47 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss @@ -110,7 +110,7 @@ main[role="main"]{ overflow: hidden; .col{ pointer-events:all; - height: 100%; + // height: 100%; position: relative; &>.wrapper{ position: relative;