|
|
@@ -49,6 +49,10 @@
|
|
|
var _node_pop_up;
|
|
|
// Colors depend on edlp_vars loaded by edlptheme
|
|
|
// console.log('Corpus : edlp_vars', edlp_vars);
|
|
|
+ // Physics
|
|
|
+ var _attracter;
|
|
|
+ var _repulser;
|
|
|
+
|
|
|
|
|
|
// ____ _ __
|
|
|
// / _/___ (_) /______
|
|
|
@@ -89,6 +93,7 @@
|
|
|
_canvas.height = window.innerHeight;
|
|
|
for (var i = 0; i < _nodes.length; i++) {
|
|
|
_nodes[i].onResizeCanvas();
|
|
|
+ // TODO: move _attracter and _repulser to the center again
|
|
|
}
|
|
|
};
|
|
|
|
|
|
@@ -121,11 +126,31 @@
|
|
|
// buildParticles(data.nodes);
|
|
|
initNodePopup();
|
|
|
initArtilesLink();
|
|
|
+ initPhysics();
|
|
|
buildNodes(data.nodes);
|
|
|
initEvents();
|
|
|
startAnime();
|
|
|
};
|
|
|
|
|
|
+
|
|
|
+ // ___ _ _
|
|
|
+ // | _ \ |_ _ _ __(_)__ ___
|
|
|
+ // | _/ ' \ || (_-< / _(_-<
|
|
|
+ // |_| |_||_\_, /__/_\__/__/
|
|
|
+ // |__/
|
|
|
+ function initPhysics(){
|
|
|
+ _attracter = _physics.makeParticle(1000, _canvas.width/2, _canvas.height/2);
|
|
|
+ _attracter.fixed = true;
|
|
|
+ _repulser_center = _physics.makeParticle(100, _canvas.width/2, _canvas.height/2);
|
|
|
+ _repulser_center.fixed = true;
|
|
|
+ _repulser_top = _physics.makeParticle(100, _canvas.width/2, 100);
|
|
|
+ _repulser_top.fixed = true;
|
|
|
+ _repulser_bottom = _physics.makeParticle(100, _canvas.width/2, _canvas.height-100);
|
|
|
+ _repulser_bottom.fixed = true;
|
|
|
+ // TODO: move _attracter and _repulser on window resize
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
// _ __ __
|
|
|
// / | / /___ ____/ /__ _____
|
|
|
// / |/ / __ \/ __ / _ \/ ___/
|
|
|
@@ -167,7 +192,7 @@
|
|
|
}
|
|
|
|
|
|
this.debug = d;
|
|
|
- this.mass = 8;
|
|
|
+ this.mass = Math.max(1, this.entrees.length); //1;
|
|
|
this.velocity_threshold = 0.01;
|
|
|
// define radius regarding entries length
|
|
|
switch(true){
|
|
|
@@ -187,6 +212,8 @@
|
|
|
this.hover = false;
|
|
|
this.opened = false;
|
|
|
this.faded = false;
|
|
|
+ this.center = false;
|
|
|
+ this.aside = false;
|
|
|
|
|
|
// prototypes
|
|
|
if (typeof Node.initialized == "undefined") {
|
|
|
@@ -198,8 +225,19 @@
|
|
|
this.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top);
|
|
|
|
|
|
// physics
|
|
|
+ // particule
|
|
|
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);
|
|
|
+ // attracter
|
|
|
+ this.attract = _physics.makeAttraction(_attracter, this.p, 100, _canvas.width*2);
|
|
|
+ this.attract.on = false;
|
|
|
+ // repulsers
|
|
|
+ this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2);
|
|
|
+ this.repulse_center.on = false;
|
|
|
+ // this.repulse_left = _physics.makeAttraction(_repulser_top, this.p, -100, _canvas.height/3);
|
|
|
+ // this.repulse_left.on = false;
|
|
|
+ // this.repulse_right = _physics.makeAttraction(_repulser_bottom, this.p, -100, _canvas.height/3);
|
|
|
+ // this.repulse_right.on = false;
|
|
|
|
|
|
// if(this.id == '620'){
|
|
|
// _node_pop_up.setNode(this);
|
|
|
@@ -221,15 +259,17 @@
|
|
|
};
|
|
|
|
|
|
Node.prototype.onUpdate = function(){
|
|
|
- // if(this.id == 0){
|
|
|
- // console.log(_physics.playing);
|
|
|
- // }
|
|
|
- if(!this.p.resting()){
|
|
|
- this.checkVelocityThreshold();
|
|
|
+
|
|
|
+ // this.p.velocity.multiplyScalar(0.99);
|
|
|
+
|
|
|
+ // if(!this.p.resting()){
|
|
|
+ // this.checkVelocityThreshold();
|
|
|
this.checkWallBouncing();
|
|
|
this.updatePos();
|
|
|
- }
|
|
|
- this.checkMouse();
|
|
|
+ // }
|
|
|
+ if(!this.aside)
|
|
|
+ this.checkMouse();
|
|
|
+
|
|
|
// if(this.debug)
|
|
|
// console.log("Node pos: ", {x:this.x, y:this.y});
|
|
|
this.draw();
|
|
|
@@ -244,20 +284,38 @@
|
|
|
};
|
|
|
|
|
|
Node.prototype.checkWallBouncing = function(){
|
|
|
- if(
|
|
|
- (this.x < this.wall_limits.left && this.p.velocity.x < 0)
|
|
|
- || (this.x > this.wall_limits.right && this.p.velocity.x > 0)
|
|
|
- ){
|
|
|
- // console.log("bounce x");
|
|
|
- this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
|
|
|
- }
|
|
|
- if(
|
|
|
- (this.y < this.wall_limits.top && this.p.velocity.y < 0)
|
|
|
- || (this.y > this.wall_limits.bottom && this.p.velocity.y > 0)
|
|
|
- ){
|
|
|
- // console.log("bounce y");
|
|
|
- this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
|
|
|
+ switch(true){
|
|
|
+ case this.x < this.wall_limits.left && this.p.velocity.x < 0:
|
|
|
+ this.p.position.x = this.wall_limits.left;
|
|
|
+ this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
|
|
|
+ break;
|
|
|
+ case this.x > this.wall_limits.right && this.p.velocity.x > 0:
|
|
|
+ this.p.position.x = this.wall_limits.right;
|
|
|
+ this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
|
|
|
+ break;
|
|
|
+ case this.y < this.wall_limits.top && this.p.velocity.y < 0 :
|
|
|
+ this.p.position.y = this.wall_limits.top;
|
|
|
+ this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
|
|
|
+ break;
|
|
|
+ case this.y > this.wall_limits.bottom && this.p.velocity.y > 0 :
|
|
|
+ this.p.position.y = this.wall_limits.bottom;
|
|
|
+ this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
|
|
|
+ break;
|
|
|
}
|
|
|
+ // if(
|
|
|
+ // (this.x < this.wall_limits.left && this.p.velocity.x < 0)
|
|
|
+ // || (this.x > this.wall_limits.right && this.p.velocity.x > 0)
|
|
|
+ // ){
|
|
|
+ // // console.log("bounce x");
|
|
|
+ // this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
|
|
|
+ // }
|
|
|
+ // if(
|
|
|
+ // (this.y < this.wall_limits.top && this.p.velocity.y < 0)
|
|
|
+ // || (this.y > this.wall_limits.bottom && this.p.velocity.y > 0)
|
|
|
+ // ){
|
|
|
+ // // console.log("bounce y");
|
|
|
+ // this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
|
|
|
+ // }
|
|
|
};
|
|
|
|
|
|
Node.prototype.updatePos = function(){
|
|
|
@@ -272,7 +330,7 @@
|
|
|
&& _m_pos.y > this.y - this.r
|
|
|
&& _m_pos.y < this.y + this.r){
|
|
|
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;
|
|
|
_node_hover_id = this.id;
|
|
|
_node_pop_up.setNode(this);
|
|
|
@@ -289,7 +347,6 @@
|
|
|
Node.prototype.open = function(){
|
|
|
this.opened = true;
|
|
|
};
|
|
|
-
|
|
|
Node.prototype.close = function(){
|
|
|
this.opened = false;
|
|
|
};
|
|
|
@@ -297,12 +354,34 @@
|
|
|
Node.prototype.fade = function(){
|
|
|
this.faded = true;
|
|
|
};
|
|
|
-
|
|
|
Node.prototype.unFade = function(){
|
|
|
this.faded = false;
|
|
|
};
|
|
|
|
|
|
-
|
|
|
+ Node.prototype.setCentered = function(){
|
|
|
+ this.center = true;
|
|
|
+ this.unsetAside();
|
|
|
+ this.unFade();
|
|
|
+ this.attract.on = true;
|
|
|
+ }
|
|
|
+ Node.prototype.unsetCentered = function(){
|
|
|
+ this.center = false;
|
|
|
+ this.attract.on = false;
|
|
|
+ }
|
|
|
+ Node.prototype.setAside = function(){
|
|
|
+ this.aside = true;
|
|
|
+ this.fade();
|
|
|
+ this.unsetCentered();
|
|
|
+ this.repulse_center.on = true;
|
|
|
+ // this.repulse_left.on = true;
|
|
|
+ // this.repulse_right.on = true;
|
|
|
+ }
|
|
|
+ Node.prototype.unsetAside = function(){
|
|
|
+ this.aside = false;
|
|
|
+ this.repulse_center.on = false;
|
|
|
+ // this.repulse_left.on = false;
|
|
|
+ // this.repulse_right.on = false;
|
|
|
+ }
|
|
|
|
|
|
Node.prototype.draw = function(){
|
|
|
// carre plein
|
|
|
@@ -314,9 +393,9 @@
|
|
|
// actif entouré de rouge
|
|
|
|
|
|
_ctx.beginPath();
|
|
|
- // _ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
|
|
|
_ctx.globalAlpha = this.faded ? 0.1 : 1;
|
|
|
- _ctx.fillStyle = edlp_vars[this.e_color];
|
|
|
+ _ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
|
|
|
+ // _ctx.fillStyle = edlp_vars[this.e_color];
|
|
|
_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
|
|
|
|
|
|
if(this.opened){
|
|
|
@@ -345,7 +424,16 @@
|
|
|
for (var q = n+1; q < _nodes.length; q++) {
|
|
|
if(q===n) continue;
|
|
|
|
|
|
- // if(!_nodes[q].moving) continue;
|
|
|
+ // avoid impact between center and aside particules
|
|
|
+ if((_nodes[n].center && _nodes[q].aside) || (_nodes[n].aside && _nodes[q].center))
|
|
|
+ continue;
|
|
|
+
|
|
|
+ // avoid impact between two centered particulses that comes to the center
|
|
|
+ if(_nodes[n].center && _nodes[q].center){
|
|
|
+ if(Math.min(_nodes[n].p.distanceTo(_attracter), _nodes[q].p.distanceTo(_attracter)) > 300){
|
|
|
+ if( Math.random()>0.3 ) continue;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
d = _nodes[n].p.distanceTo(_nodes[q].p);
|
|
|
|
|
|
@@ -369,13 +457,14 @@
|
|
|
_nodes[q].p.velocity.x = newVelX2;
|
|
|
_nodes[q].p.velocity.y = newVelY2;
|
|
|
|
|
|
- _nodes[n].p.velocity.multiplyScalar(0.85);
|
|
|
- _nodes[q].p.velocity.multiplyScalar(0.85);
|
|
|
+ // slow down particule on impact
|
|
|
+ _nodes[n].p.velocity.multiplyScalar(_nodes[n].center ? 0.95 : 0.90);
|
|
|
+ _nodes[q].p.velocity.multiplyScalar(_nodes[q].center ? 0.95 : 0.90);
|
|
|
|
|
|
|
|
|
// move particles if they overlap
|
|
|
if (d < full_rad) {
|
|
|
- makeup = full_rad/2 - d/2;
|
|
|
+ makeup = (full_rad/2 - d/2)*1.2;
|
|
|
angle = Math.atan2(_nodes[q].p.position.y - _nodes[n].p.position.y, _nodes[q].p.position.x - _nodes[n].p.position.x);
|
|
|
|
|
|
_nodes[q].p.position.x += makeup * Math.cos(angle);
|
|
|
@@ -406,6 +495,38 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ // ___ _
|
|
|
+ // | __|_ _| |_ _ _ ___ ___ ___
|
|
|
+ // | _|| ' \ _| '_/ -_) -_|_-<
|
|
|
+ // |___|_||_\__|_| \___\___/__/
|
|
|
+ function filterEntree(t){
|
|
|
+ // for (tid of _nodes_by_entries) {
|
|
|
+
|
|
|
+ for (var n = 0; n < _nodes.length; n++) {
|
|
|
+ if(_nodes[n].entrees.indexOf(t) == -1){
|
|
|
+ _nodes[n].setAside();
|
|
|
+ }else{
|
|
|
+ _nodes[n].setCentered();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // for (var i = 0; i < _nodes_by_entries[t].length; i++) {
|
|
|
+ // // _nodes_by_entries[t][i].unsetAside();
|
|
|
+ // _nodes_by_entries[t][i].setCentered();
|
|
|
+ // }
|
|
|
+ // for (var tid in _nodes_by_entries) {
|
|
|
+ // if (tid == t) continue;
|
|
|
+ // for (var i = 0; i < _nodes_by_entries[tid].length; i++) {
|
|
|
+ // // _nodes_by_entries[tid][i].unsetCentered();
|
|
|
+ // _nodes_by_entries[tid][i].setAside();
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ };
|
|
|
+
|
|
|
+ function resetFilterEntree(){
|
|
|
+ for (var i = 0; i < _nodes.length; i++) {
|
|
|
+ _nodes[i].unsetAside();
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
// _ _ _ _
|
|
|
// /_\ _ _| |_(_)__| |___ ___
|
|
|
@@ -499,12 +620,15 @@
|
|
|
|
|
|
_$entrees_block_termlinks.on('click', function(event) {
|
|
|
event.preventDefault();
|
|
|
+ var tid = $(this).attr('tid');
|
|
|
var $li = $(this).parents('li');
|
|
|
if(!$li.is('.opened')){
|
|
|
_$entrees_block_termlinks.parents('li').removeClass('opened');
|
|
|
$li.addClass('opened');
|
|
|
+ filterEntree(tid);
|
|
|
}else{
|
|
|
$li.removeClass('opened');
|
|
|
+ resetFilterEntree(tid);
|
|
|
}
|
|
|
return false;
|
|
|
});
|
Bachir Soussi Chiadmi