bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactored corpus map scrambling and setaside using ghost origin particule position as attracter

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-04-12 23:37:49 +02:00
parent 97ec3584d8
commit 97dd8cdf97
2 changed files with 102 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js
Vendored
+51 -80
View File
@@ -25,9 +25,9 @@
var _canvas = _$canvas[0]; var _canvas = _$canvas[0];
var _ctx = _canvas.getContext('2d'); var _ctx = _canvas.getContext('2d');
var _canvas_props = { var _canvas_props = {
'margin_top':100, 'margin_top':90,
'margin_right':0, 'margin_right':0,
'margin_bottom':100, 'margin_bottom':65,
'margin_left':0 'margin_left':0
}; };
var _physics = new Physics(); var _physics = new Physics();
@@ -142,41 +142,12 @@
function initPhysics(){ function initPhysics(){
_attracter = _physics.makeParticle(1000); _attracter = _physics.makeParticle(1000);
_attracter.fixed = true; _attracter.fixed = true;
_repulser_top = _physics.makeParticle(100); // move _attracter on window resize
_repulser_top.fixed = true;
_repulser_center = _physics.makeParticle(100);
_repulser_center.fixed = true;
_repulser_bottom = _physics.makeParticle(100);
_repulser_bottom.fixed = true;
_scrambler_TL = _physics.makeParticle(100);
_scrambler_TL.fixed = true;
_scrambler_TR = _physics.makeParticle(100);
_scrambler_TR.fixed = true;
_scrambler_BR = _physics.makeParticle(100);
_scrambler_BR.fixed = true;
_scrambler_BL = _physics.makeParticle(100);
_scrambler_BL.fixed = true;
_scrambler_CR = _physics.makeParticle(100);
_scrambler_CR.fixed = true;
_scrambler_CL = _physics.makeParticle(100);
_scrambler_CL.fixed = true;
// move _attracter and _repulser on window resize
resizePhysics(); resizePhysics();
}; };
function resizePhysics(){ function resizePhysics(){
// attracters // attracters
_attracter.position = {x:_canvas.width/2, y:_canvas.height/2}; _attracter.position = {x:_canvas.width/2, y:_canvas.height/2};
// repulsers
_repulser_top.position = {x:_canvas.width/2, y:0};
_repulser_center.position = {x:_canvas.width/2, y:_canvas.height/2};
_repulser_bottom.position = {x:_canvas.width/2, y:_canvas.height};
// scramblers
_scrambler_TL.position = {x:-200, y:_canvas.height/40};
_scrambler_BL.position = {x:-200, y:_canvas.height-_canvas.height/40};
// _scrambler_CL.position = {x:-200, y:_canvas.height/2};
_scrambler_TR.position = {x:_canvas.width+200, y:_canvas.height/40};
_scrambler_BR.position = {x:_canvas.width+200, y:_canvas.height-_canvas.height/40};
// _scrambler_CR.position = {x:_canvas.width+200, y:_canvas.height/2};
}; };
// _ _ _ // _ _ _
@@ -265,40 +236,26 @@
this.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left); this.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left);
this.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top); this.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top);
this.ori_pos = {x:this.x,y:this.y};
// TODO: don't forget to move ori_pos on window resize
this.initPhysics(); this.initPhysics();
// if(this.id == '620'){
// _node_pop_up.setNode(this);
// }
}; };
Node.prototype.initPhysics = function(){ Node.prototype.initPhysics = function(){
// particule // particule
this.p = _physics.makeParticle(this.mass, this.x, this.y); 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); this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
// origin position particule
this.ori_p = _physics.makeParticle(1000, this.ori_pos.x, this.ori_pos.y);
this.ori_p.fixed = true;
// TODO: don't forget to move ori_p on window resize
this.ori_p_attract = _physics.makeAttraction(this.ori_p, this.p, 1000, _canvas.width*2);
this.ori_p_attract.on = false;
// attracter // attracter
this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2); this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
this.attract.on = false; this.attract.on = false;
// repulsers
this.repulse_top = _physics.makeAttraction(_repulser_top, this.p, -60, _canvas.height/6);
this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -50, _canvas.height/6);
this.repulse_bottom = _physics.makeAttraction(_repulser_bottom, this.p, -60, _canvas.height/6);
this.repulse_top.on = false;
this.repulse_center.on = false;
this.repulse_bottom.on = false;
// Scramblers
this.scramble_TL = _physics.makeAttraction(_scrambler_TL, this.p, -100, _canvas.height/2.5);
this.scramble_TR = _physics.makeAttraction(_scrambler_TR, this.p, -100, _canvas.height/2.5);
this.scramble_BR = _physics.makeAttraction(_scrambler_BR, this.p, -100, _canvas.height/2.5);
this.scramble_BL = _physics.makeAttraction(_scrambler_BL, this.p, -100, _canvas.height/2.5);
// this.scramble_CR = _physics.makeAttraction(_scrambler_CR, this.p, -50, _canvas.height/4);
// this.scramble_CL = _physics.makeAttraction(_scrambler_CL, this.p, -50, _canvas.height/4);
this.scramble_TL.on = false;
this.scramble_TR.on = false;
this.scramble_BR.on = false;
this.scramble_BL.on = false;
// this.scramble_CR.on = false;
// this.scramble_CL.on = false;
}; };
Node.prototype.calcWallLimits = function(){ Node.prototype.calcWallLimits = function(){
@@ -312,9 +269,16 @@
Node.prototype.onResizeCanvas = function(){ Node.prototype.onResizeCanvas = function(){
this.calcWallLimits(); this.calcWallLimits();
this.shuffleOriP();
// TODO: when canvas is smaller what about nodes hors champs, they are coming back alone but it's too long // TODO: when canvas is smaller what about nodes hors champs, they are coming back alone but it's too long
}; };
Node.prototype.shuffleOriP = function(){
this.ori_pos.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left);
this.ori_pos.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top);
this.scramble();
};
Node.prototype.onUpdate = function(){ Node.prototype.onUpdate = function(){
// this.p.velocity.multiplyScalar(0.99); // this.p.velocity.multiplyScalar(0.99);
@@ -331,7 +295,11 @@
// this.checkVelocityThreshold(); // this.checkVelocityThreshold();
this.checkWallBouncing(); this.checkWallBouncing();
this.updatePos(); this.updatePos();
if(this.scrambling){
this.checkOriPDist();
}
} }
if(_mouse_in && !this.aside) if(_mouse_in && !this.aside)
this.checkMouse(); this.checkMouse();
@@ -451,35 +419,37 @@
// this.fade(); // this.fade();
this.stopScrambling(); this.stopScrambling();
this.unsetCentered(); this.unsetCentered();
this.repulse_top.on = true; this.ori_p.position.x = this.x < _canvas.width /2 ? this.wall_limits.left : this.wall_limits.right;
this.repulse_center.on = true; this.ori_p_attract.on = true;
this.repulse_bottom.on = true;
} }
Node.prototype.unsetAside = function(){ Node.prototype.unsetAside = function(){
console.log('unsetAside');
this.aside = false; this.aside = false;
this.ori_p_attract.on = false;
this.ori_p.position.x = this.ori_pos.x;
// this.unFade(); // this.unFade();
this.repulse_top.on = false;
this.repulse_center.on = false;
this.repulse_bottom.on = false;
} }
Node.prototype.scramble = function(){ Node.prototype.scramble = function(){
this.scrambling = true; this.scrambling = true;
this.unsetCentered(); this.unsetCentered();
this.unsetAside(); this.unsetAside();
this.scramble_TL.on = true; this.ori_p.position.x = this.ori_pos.x;
this.scramble_TR.on = true; this.ori_p.position.y = this.ori_pos.y;
this.scramble_BR.on = true; this.ori_p_attract.on = true;
this.scramble_BL.on = true;
// this.scramble_CR.on = true;
// this.scramble_CL.on = true;
} }
Node.prototype.checkOriPDist = function(){
if(this.p.distanceTo(this.ori_p) < 50){
this.stopScrambling();
}
};
Node.prototype.stopScrambling = function(){ Node.prototype.stopScrambling = function(){
this.scrambling = false; this.scrambling = false;
this.scramble_TL.on = false; this.ori_p_attract.on = false;
this.scramble_TR.on = false; // this.scramble_TL.on = false;
this.scramble_BR.on = false; // this.scramble_TR.on = false;
this.scramble_BL.on = false; // this.scramble_BR.on = false;
// this.scramble_BL.on = false;
// this.scramble_CR.on = false; // this.scramble_CR.on = false;
// this.scramble_CL.on = false; // this.scramble_CL.on = false;
} }
@@ -726,19 +696,20 @@
// |___/\__|_| \__,_|_|_|_|_.__/_|_|_||_\__, | // |___/\__|_| \__,_|_|_|_|_.__/_|_|_||_\__, |
// |___/ // |___/
function scrambleCollection(){ function scrambleCollection(){
console.log('scrambleCollection');
for (var i = 0; i < _nodes.length; i++) { for (var i = 0; i < _nodes.length; i++) {
_nodes[i].scramble(); _nodes[i].scramble();
} }
// setTimeout(stopScrambling, 2000); // setTimeout(stopScrambling, 2000);
stopScrambling(); // stopScrambling();
};
function stopScrambling(){
for (var i = 0; i < _nodes.length; i++) {
setTimeout(function(n){
n.stopScrambling();
}.bind(this, _nodes[i]), 1000 + Math.random()*4000);
}
}; };
// function stopScrambling(){
// for (var i = 0; i < _nodes.length; i++) {
// setTimeout(function(n){
// n.stopScrambling();
// }.bind(this, _nodes[i]), 1000 + Math.random()*4000);
// }
// };
function closeAllEntries(){ function closeAllEntries(){
_$entrees_block_termlinks.each(function(index, el) { _$entrees_block_termlinks.each(function(index, el) {
if($(this).parents('li').is('.opened')){ if($(this).parents('li').is('.opened')){
@@ -857,7 +828,7 @@
}); });
_$entrees_block_termlinks.on('click', function(event) { _$entrees_block_termlinks.on('click', function(event) {
console.log('_$entrees_block_termlinks click', this); // console.log('_$entrees_block_termlinks click', this);
event.preventDefault(); event.preventDefault();
openEntree($(this).attr('tid'), true); openEntree($(this).attr('tid'), true);
// var $link = $(this); // var $link = $(this);
sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js
+51 -80
View File
@@ -25,9 +25,9 @@
var _canvas = _$canvas[0]; var _canvas = _$canvas[0];
var _ctx = _canvas.getContext('2d'); var _ctx = _canvas.getContext('2d');
var _canvas_props = { var _canvas_props = {
'margin_top':100, 'margin_top':90,
'margin_right':0, 'margin_right':0,
'margin_bottom':100, 'margin_bottom':65,
'margin_left':0 'margin_left':0
}; };
var _physics = new Physics(); var _physics = new Physics();
@@ -142,41 +142,12 @@
function initPhysics(){ function initPhysics(){
_attracter = _physics.makeParticle(1000); _attracter = _physics.makeParticle(1000);
_attracter.fixed = true; _attracter.fixed = true;
_repulser_top = _physics.makeParticle(100); // move _attracter on window resize
_repulser_top.fixed = true;
_repulser_center = _physics.makeParticle(100);
_repulser_center.fixed = true;
_repulser_bottom = _physics.makeParticle(100);
_repulser_bottom.fixed = true;
_scrambler_TL = _physics.makeParticle(100);
_scrambler_TL.fixed = true;
_scrambler_TR = _physics.makeParticle(100);
_scrambler_TR.fixed = true;
_scrambler_BR = _physics.makeParticle(100);
_scrambler_BR.fixed = true;
_scrambler_BL = _physics.makeParticle(100);
_scrambler_BL.fixed = true;
_scrambler_CR = _physics.makeParticle(100);
_scrambler_CR.fixed = true;
_scrambler_CL = _physics.makeParticle(100);
_scrambler_CL.fixed = true;
// move _attracter and _repulser on window resize
resizePhysics(); resizePhysics();
}; };
function resizePhysics(){ function resizePhysics(){
// attracters // attracters
_attracter.position = {x:_canvas.width/2, y:_canvas.height/2}; _attracter.position = {x:_canvas.width/2, y:_canvas.height/2};
// repulsers
_repulser_top.position = {x:_canvas.width/2, y:0};
_repulser_center.position = {x:_canvas.width/2, y:_canvas.height/2};
_repulser_bottom.position = {x:_canvas.width/2, y:_canvas.height};
// scramblers
_scrambler_TL.position = {x:-200, y:_canvas.height/40};
_scrambler_BL.position = {x:-200, y:_canvas.height-_canvas.height/40};
// _scrambler_CL.position = {x:-200, y:_canvas.height/2};
_scrambler_TR.position = {x:_canvas.width+200, y:_canvas.height/40};
_scrambler_BR.position = {x:_canvas.width+200, y:_canvas.height-_canvas.height/40};
// _scrambler_CR.position = {x:_canvas.width+200, y:_canvas.height/2};
}; };
// _ _ _ // _ _ _
@@ -265,40 +236,26 @@
this.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left); this.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left);
this.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top); this.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top);
this.ori_pos = {x:this.x,y:this.y};
// TODO: don't forget to move ori_pos on window resize
this.initPhysics(); this.initPhysics();
// if(this.id == '620'){
// _node_pop_up.setNode(this);
// }
}; };
Node.prototype.initPhysics = function(){ Node.prototype.initPhysics = function(){
// particule // particule
this.p = _physics.makeParticle(this.mass, this.x, this.y); 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); this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
// origin position particule
this.ori_p = _physics.makeParticle(1000, this.ori_pos.x, this.ori_pos.y);
this.ori_p.fixed = true;
// TODO: don't forget to move ori_p on window resize
this.ori_p_attract = _physics.makeAttraction(this.ori_p, this.p, 1000, _canvas.width*2);
this.ori_p_attract.on = false;
// attracter // attracter
this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2); this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
this.attract.on = false; this.attract.on = false;
// repulsers
this.repulse_top = _physics.makeAttraction(_repulser_top, this.p, -60, _canvas.height/6);
this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -50, _canvas.height/6);
this.repulse_bottom = _physics.makeAttraction(_repulser_bottom, this.p, -60, _canvas.height/6);
this.repulse_top.on = false;
this.repulse_center.on = false;
this.repulse_bottom.on = false;
// Scramblers
this.scramble_TL = _physics.makeAttraction(_scrambler_TL, this.p, -100, _canvas.height/2.5);
this.scramble_TR = _physics.makeAttraction(_scrambler_TR, this.p, -100, _canvas.height/2.5);
this.scramble_BR = _physics.makeAttraction(_scrambler_BR, this.p, -100, _canvas.height/2.5);
this.scramble_BL = _physics.makeAttraction(_scrambler_BL, this.p, -100, _canvas.height/2.5);
// this.scramble_CR = _physics.makeAttraction(_scrambler_CR, this.p, -50, _canvas.height/4);
// this.scramble_CL = _physics.makeAttraction(_scrambler_CL, this.p, -50, _canvas.height/4);
this.scramble_TL.on = false;
this.scramble_TR.on = false;
this.scramble_BR.on = false;
this.scramble_BL.on = false;
// this.scramble_CR.on = false;
// this.scramble_CL.on = false;
}; };
Node.prototype.calcWallLimits = function(){ Node.prototype.calcWallLimits = function(){
@@ -312,9 +269,16 @@
Node.prototype.onResizeCanvas = function(){ Node.prototype.onResizeCanvas = function(){
this.calcWallLimits(); this.calcWallLimits();
this.shuffleOriP();
// TODO: when canvas is smaller what about nodes hors champs, they are coming back alone but it's too long // TODO: when canvas is smaller what about nodes hors champs, they are coming back alone but it's too long
}; };
Node.prototype.shuffleOriP = function(){
this.ori_pos.x = this.wall_limits.left + Math.random()*(this.wall_limits.right - this.wall_limits.left);
this.ori_pos.y = this.wall_limits.top + Math.random()*(this.wall_limits.bottom - this.wall_limits.top);
this.scramble();
};
Node.prototype.onUpdate = function(){ Node.prototype.onUpdate = function(){
// this.p.velocity.multiplyScalar(0.99); // this.p.velocity.multiplyScalar(0.99);
@@ -331,7 +295,11 @@
// this.checkVelocityThreshold(); // this.checkVelocityThreshold();
this.checkWallBouncing(); this.checkWallBouncing();
this.updatePos(); this.updatePos();
if(this.scrambling){
this.checkOriPDist();
}
} }
if(_mouse_in && !this.aside) if(_mouse_in && !this.aside)
this.checkMouse(); this.checkMouse();
@@ -451,35 +419,37 @@
// this.fade(); // this.fade();
this.stopScrambling(); this.stopScrambling();
this.unsetCentered(); this.unsetCentered();
this.repulse_top.on = true; this.ori_p.position.x = this.x < _canvas.width /2 ? this.wall_limits.left : this.wall_limits.right;
this.repulse_center.on = true; this.ori_p_attract.on = true;
this.repulse_bottom.on = true;
} }
Node.prototype.unsetAside = function(){ Node.prototype.unsetAside = function(){
console.log('unsetAside');
this.aside = false; this.aside = false;
this.ori_p_attract.on = false;
this.ori_p.position.x = this.ori_pos.x;
// this.unFade(); // this.unFade();
this.repulse_top.on = false;
this.repulse_center.on = false;
this.repulse_bottom.on = false;
} }
Node.prototype.scramble = function(){ Node.prototype.scramble = function(){
this.scrambling = true; this.scrambling = true;
this.unsetCentered(); this.unsetCentered();
this.unsetAside(); this.unsetAside();
this.scramble_TL.on = true; this.ori_p.position.x = this.ori_pos.x;
this.scramble_TR.on = true; this.ori_p.position.y = this.ori_pos.y;
this.scramble_BR.on = true; this.ori_p_attract.on = true;
this.scramble_BL.on = true;
// this.scramble_CR.on = true;
// this.scramble_CL.on = true;
} }
Node.prototype.checkOriPDist = function(){
if(this.p.distanceTo(this.ori_p) < 50){
this.stopScrambling();
}
};
Node.prototype.stopScrambling = function(){ Node.prototype.stopScrambling = function(){
this.scrambling = false; this.scrambling = false;
this.scramble_TL.on = false; this.ori_p_attract.on = false;
this.scramble_TR.on = false; // this.scramble_TL.on = false;
this.scramble_BR.on = false; // this.scramble_TR.on = false;
this.scramble_BL.on = false; // this.scramble_BR.on = false;
// this.scramble_BL.on = false;
// this.scramble_CR.on = false; // this.scramble_CR.on = false;
// this.scramble_CL.on = false; // this.scramble_CL.on = false;
} }
@@ -726,19 +696,20 @@
// |___/\__|_| \__,_|_|_|_|_.__/_|_|_||_\__, | // |___/\__|_| \__,_|_|_|_|_.__/_|_|_||_\__, |
// |___/ // |___/
function scrambleCollection(){ function scrambleCollection(){
console.log('scrambleCollection');
for (var i = 0; i < _nodes.length; i++) { for (var i = 0; i < _nodes.length; i++) {
_nodes[i].scramble(); _nodes[i].scramble();
} }
// setTimeout(stopScrambling, 2000); // setTimeout(stopScrambling, 2000);
stopScrambling(); // stopScrambling();
};
function stopScrambling(){
for (var i = 0; i < _nodes.length; i++) {
setTimeout(function(n){
n.stopScrambling();
}.bind(this, _nodes[i]), 1000 + Math.random()*4000);
}
}; };
// function stopScrambling(){
// for (var i = 0; i < _nodes.length; i++) {
// setTimeout(function(n){
// n.stopScrambling();
// }.bind(this, _nodes[i]), 1000 + Math.random()*4000);
// }
// };
function closeAllEntries(){ function closeAllEntries(){
_$entrees_block_termlinks.each(function(index, el) { _$entrees_block_termlinks.each(function(index, el) {
if($(this).parents('li').is('.opened')){ if($(this).parents('li').is('.opened')){
@@ -857,7 +828,7 @@
}); });
_$entrees_block_termlinks.on('click', function(event) { _$entrees_block_termlinks.on('click', function(event) {
console.log('_$entrees_block_termlinks click', this); // console.log('_$entrees_block_termlinks click', this);
event.preventDefault(); event.preventDefault();
openEntree($(this).attr('tid'), true); openEntree($(this).attr('tid'), true);
// var $link = $(this); // var $link = $(this);