added red square arround opened node in corpus map

This commit is contained in:
Bachir Soussi Chiadmi
2018-03-08 12:58:02 +01:00
parent 0ca9c9cc83
commit fb4701f043
6 changed files with 93 additions and 31 deletions
@@ -39,6 +39,7 @@
var _p_velocity_factor = 0.5;
var _m_pos = {x:0, y:0};
var _node_hover_id = -1;
var _node_opened_id = -1;
var _$entrees_block = $('#block-edlpentreesblock');
var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
var _node_pop_up;
@@ -176,6 +177,7 @@
this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
this.hover = false;
this.opened = false;
// physics
this.p = _physics.makeParticle(this.mass, this.x, this.y);
@@ -267,6 +269,14 @@
}
};
Node.prototype.open = function(){
this.opened = true;
};
Node.prototype.close = function(){
this.opened = false;
};
Node.prototype.draw = function(){
// carre plein
// clouleur aléatoire ds les entrees
@@ -280,6 +290,13 @@
// _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){
_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);
}
_ctx.closePath();
};
@@ -288,13 +305,6 @@
// 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(){
// pre create vars to save memory;
@@ -354,6 +364,19 @@
}
};
// show opened audio node
function openNode(id){
closeNode();
_node_opened_id = id;
_nodes[id].open();
}
function closeNode(){
if(_node_opened_id != -1){
_nodes[_node_opened_id].close();
_node_opened_id = -1;
}
}
// ______ __
// / ____/ _____ ____ / /______
// / __/ | | / / _ \/ __ \/ __/ ___/
@@ -385,11 +408,15 @@
},
};
_$canvas.trigger(event);
openNode(_node_hover_id);
}else{
// console.log('corpus : click on map');
_$canvas.trigger('corpus-cliked-on-map');
}
}
})
.on('audio-node-closed', function(e){
closeNode();
});
_$entrees_block_termlinks.on('click', function(event) {
@@ -39,6 +39,7 @@
var _p_velocity_factor = 0.5;
var _m_pos = {x:0, y:0};
var _node_hover_id = -1;
var _node_opened_id = -1;
var _$entrees_block = $('#block-edlpentreesblock');
var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
var _node_pop_up;
@@ -176,6 +177,7 @@
this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
this.hover = false;
this.opened = false;
// physics
this.p = _physics.makeParticle(this.mass, this.x, this.y);
@@ -267,6 +269,14 @@
}
};
Node.prototype.open = function(){
this.opened = true;
};
Node.prototype.close = function(){
this.opened = false;
};
Node.prototype.draw = function(){
// carre plein
// clouleur aléatoire ds les entrees
@@ -280,6 +290,13 @@
// _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){
_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);
}
_ctx.closePath();
};
@@ -288,13 +305,6 @@
// 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(){
// pre create vars to save memory;
@@ -354,6 +364,19 @@
}
};
// show opened audio node
function openNode(id){
closeNode();
_node_opened_id = id;
_nodes[id].open();
}
function closeNode(){
if(_node_opened_id != -1){
_nodes[_node_opened_id].close();
_node_opened_id = -1;
}
}
// ______ __
// / ____/ _____ ____ / /______
// / __/ | | / / _ \/ __ \/ __/ ___/
@@ -385,11 +408,15 @@
},
};
_$canvas.trigger(event);
openNode(_node_hover_id);
}else{
// console.log('corpus : click on map');
_$canvas.trigger('corpus-cliked-on-map');
}
}
})
.on('audio-node-closed', function(e){
closeNode();
});
_$entrees_block_termlinks.on('click', function(event) {