refactored corpus map scrambling and setaside using ghost origin particule position as attracter
This commit is contained in:
Bachir Soussi Chiadmi
@@ -25,9 +25,9 @@
|
||||
var _canvas = _$canvas[0];
|
||||
var _ctx = _canvas.getContext('2d');
|
||||
var _canvas_props = {
|
||||
'margin_top':100,
|
||||
'margin_top':90,
|
||||
'margin_right':0,
|
||||
'margin_bottom':100,
|
||||
'margin_bottom':65,
|
||||
'margin_left':0
|
||||
};
|
||||
var _physics = new Physics();
|
||||
@@ -142,41 +142,12 @@
|
||||
function initPhysics(){
|
||||
_attracter = _physics.makeParticle(1000);
|
||||
_attracter.fixed = true;
|
||||
_repulser_top = _physics.makeParticle(100);
|
||||
_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
|
||||
// move _attracter on window resize
|
||||
resizePhysics();
|
||||
};
|
||||
function resizePhysics(){
|
||||
// attracters
|
||||
_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.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();
|
||||
|
||||
// if(this.id == '620'){
|
||||
// _node_pop_up.setNode(this);
|
||||
// }
|
||||
};
|
||||
|
||||
Node.prototype.initPhysics = function(){
|
||||
// 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);
|
||||
// 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
|
||||
this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
|
||||
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(){
|
||||
@@ -312,9 +269,16 @@
|
||||
|
||||
Node.prototype.onResizeCanvas = function(){
|
||||
this.calcWallLimits();
|
||||
this.shuffleOriP();
|
||||
// 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(){
|
||||
|
||||
// this.p.velocity.multiplyScalar(0.99);
|
||||
@@ -331,7 +295,11 @@
|
||||
// this.checkVelocityThreshold();
|
||||
this.checkWallBouncing();
|
||||
this.updatePos();
|
||||
if(this.scrambling){
|
||||
this.checkOriPDist();
|
||||
}
|
||||
}
|
||||
|
||||
if(_mouse_in && !this.aside)
|
||||
this.checkMouse();
|
||||
|
||||
@@ -451,35 +419,37 @@
|
||||
// this.fade();
|
||||
this.stopScrambling();
|
||||
this.unsetCentered();
|
||||
this.repulse_top.on = true;
|
||||
this.repulse_center.on = true;
|
||||
this.repulse_bottom.on = true;
|
||||
this.ori_p.position.x = this.x < _canvas.width /2 ? this.wall_limits.left : this.wall_limits.right;
|
||||
this.ori_p_attract.on = true;
|
||||
}
|
||||
Node.prototype.unsetAside = function(){
|
||||
console.log('unsetAside');
|
||||
this.aside = false;
|
||||
this.ori_p_attract.on = false;
|
||||
this.ori_p.position.x = this.ori_pos.x;
|
||||
// this.unFade();
|
||||
this.repulse_top.on = false;
|
||||
this.repulse_center.on = false;
|
||||
this.repulse_bottom.on = false;
|
||||
}
|
||||
|
||||
Node.prototype.scramble = function(){
|
||||
this.scrambling = true;
|
||||
this.unsetCentered();
|
||||
this.unsetAside();
|
||||
this.scramble_TL.on = true;
|
||||
this.scramble_TR.on = true;
|
||||
this.scramble_BR.on = true;
|
||||
this.scramble_BL.on = true;
|
||||
// this.scramble_CR.on = true;
|
||||
// this.scramble_CL.on = true;
|
||||
this.ori_p.position.x = this.ori_pos.x;
|
||||
this.ori_p.position.y = this.ori_pos.y;
|
||||
this.ori_p_attract.on = true;
|
||||
}
|
||||
Node.prototype.checkOriPDist = function(){
|
||||
if(this.p.distanceTo(this.ori_p) < 50){
|
||||
this.stopScrambling();
|
||||
}
|
||||
};
|
||||
Node.prototype.stopScrambling = function(){
|
||||
this.scrambling = false;
|
||||
this.scramble_TL.on = false;
|
||||
this.scramble_TR.on = false;
|
||||
this.scramble_BR.on = false;
|
||||
this.scramble_BL.on = false;
|
||||
this.ori_p_attract.on = false;
|
||||
// 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;
|
||||
}
|
||||
@@ -726,19 +696,20 @@
|
||||
// |___/\__|_| \__,_|_|_|_|_.__/_|_|_||_\__, |
|
||||
// |___/
|
||||
function scrambleCollection(){
|
||||
console.log('scrambleCollection');
|
||||
for (var i = 0; i < _nodes.length; i++) {
|
||||
_nodes[i].scramble();
|
||||
}
|
||||
// setTimeout(stopScrambling, 2000);
|
||||
stopScrambling();
|
||||
};
|
||||
function stopScrambling(){
|
||||
for (var i = 0; i < _nodes.length; i++) {
|
||||
setTimeout(function(n){
|
||||
n.stopScrambling();
|
||||
}.bind(this, _nodes[i]), 1000 + Math.random()*4000);
|
||||
}
|
||||
// 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 closeAllEntries(){
|
||||
_$entrees_block_termlinks.each(function(index, el) {
|
||||
if($(this).parents('li').is('.opened')){
|
||||
@@ -857,7 +828,7 @@
|
||||
});
|
||||
|
||||
_$entrees_block_termlinks.on('click', function(event) {
|
||||
console.log('_$entrees_block_termlinks click', this);
|
||||
// console.log('_$entrees_block_termlinks click', this);
|
||||
event.preventDefault();
|
||||
openEntree($(this).attr('tid'), true);
|
||||
// var $link = $(this);
|
||||
|
||||
@@ -25,9 +25,9 @@
|
||||
var _canvas = _$canvas[0];
|
||||
var _ctx = _canvas.getContext('2d');
|
||||
var _canvas_props = {
|
||||
'margin_top':100,
|
||||
'margin_top':90,
|
||||
'margin_right':0,
|
||||
'margin_bottom':100,
|
||||
'margin_bottom':65,
|
||||
'margin_left':0
|
||||
};
|
||||
var _physics = new Physics();
|
||||
@@ -142,41 +142,12 @@
|
||||
function initPhysics(){
|
||||
_attracter = _physics.makeParticle(1000);
|
||||
_attracter.fixed = true;
|
||||
_repulser_top = _physics.makeParticle(100);
|
||||
_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
|
||||
// move _attracter on window resize
|
||||
resizePhysics();
|
||||
};
|
||||
function resizePhysics(){
|
||||
// attracters
|
||||
_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.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();
|
||||
|
||||
// if(this.id == '620'){
|
||||
// _node_pop_up.setNode(this);
|
||||
// }
|
||||
};
|
||||
|
||||
Node.prototype.initPhysics = function(){
|
||||
// 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);
|
||||
// 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
|
||||
this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
|
||||
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(){
|
||||
@@ -312,9 +269,16 @@
|
||||
|
||||
Node.prototype.onResizeCanvas = function(){
|
||||
this.calcWallLimits();
|
||||
this.shuffleOriP();
|
||||
// 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(){
|
||||
|
||||
// this.p.velocity.multiplyScalar(0.99);
|
||||
@@ -331,7 +295,11 @@
|
||||
// this.checkVelocityThreshold();
|
||||
this.checkWallBouncing();
|
||||
this.updatePos();
|
||||
if(this.scrambling){
|
||||
this.checkOriPDist();
|
||||
}
|
||||
}
|
||||
|
||||
if(_mouse_in && !this.aside)
|
||||
this.checkMouse();
|
||||
|
||||
@@ -451,35 +419,37 @@
|
||||
// this.fade();
|
||||
this.stopScrambling();
|
||||
this.unsetCentered();
|
||||
this.repulse_top.on = true;
|
||||
this.repulse_center.on = true;
|
||||
this.repulse_bottom.on = true;
|
||||
this.ori_p.position.x = this.x < _canvas.width /2 ? this.wall_limits.left : this.wall_limits.right;
|
||||
this.ori_p_attract.on = true;
|
||||
}
|
||||
Node.prototype.unsetAside = function(){
|
||||
console.log('unsetAside');
|
||||
this.aside = false;
|
||||
this.ori_p_attract.on = false;
|
||||
this.ori_p.position.x = this.ori_pos.x;
|
||||
// this.unFade();
|
||||
this.repulse_top.on = false;
|
||||
this.repulse_center.on = false;
|
||||
this.repulse_bottom.on = false;
|
||||
}
|
||||
|
||||
Node.prototype.scramble = function(){
|
||||
this.scrambling = true;
|
||||
this.unsetCentered();
|
||||
this.unsetAside();
|
||||
this.scramble_TL.on = true;
|
||||
this.scramble_TR.on = true;
|
||||
this.scramble_BR.on = true;
|
||||
this.scramble_BL.on = true;
|
||||
// this.scramble_CR.on = true;
|
||||
// this.scramble_CL.on = true;
|
||||
this.ori_p.position.x = this.ori_pos.x;
|
||||
this.ori_p.position.y = this.ori_pos.y;
|
||||
this.ori_p_attract.on = true;
|
||||
}
|
||||
Node.prototype.checkOriPDist = function(){
|
||||
if(this.p.distanceTo(this.ori_p) < 50){
|
||||
this.stopScrambling();
|
||||
}
|
||||
};
|
||||
Node.prototype.stopScrambling = function(){
|
||||
this.scrambling = false;
|
||||
this.scramble_TL.on = false;
|
||||
this.scramble_TR.on = false;
|
||||
this.scramble_BR.on = false;
|
||||
this.scramble_BL.on = false;
|
||||
this.ori_p_attract.on = false;
|
||||
// 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;
|
||||
}
|
||||
@@ -726,19 +696,20 @@
|
||||
// |___/\__|_| \__,_|_|_|_|_.__/_|_|_||_\__, |
|
||||
// |___/
|
||||
function scrambleCollection(){
|
||||
console.log('scrambleCollection');
|
||||
for (var i = 0; i < _nodes.length; i++) {
|
||||
_nodes[i].scramble();
|
||||
}
|
||||
// setTimeout(stopScrambling, 2000);
|
||||
stopScrambling();
|
||||
};
|
||||
function stopScrambling(){
|
||||
for (var i = 0; i < _nodes.length; i++) {
|
||||
setTimeout(function(n){
|
||||
n.stopScrambling();
|
||||
}.bind(this, _nodes[i]), 1000 + Math.random()*4000);
|
||||
}
|
||||
// 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 closeAllEntries(){
|
||||
_$entrees_block_termlinks.each(function(index, el) {
|
||||
if($(this).parents('li').is('.opened')){
|
||||
@@ -857,7 +828,7 @@
|
||||
});
|
||||
|
||||
_$entrees_block_termlinks.on('click', function(event) {
|
||||
console.log('_$entrees_block_termlinks click', this);
|
||||
// console.log('_$entrees_block_termlinks click', this);
|
||||
event.preventDefault();
|
||||
openEntree($(this).attr('tid'), true);
|
||||
// var $link = $(this);
|
||||
|
||||
Reference in New Issue
Block a user