|
@@ -25,7 +25,9 @@
|
|
|
var _canvas = _$canvas[0];
|
|
|
var _ctx = _canvas.getContext('2d');
|
|
|
var _dpi = window.devicePixelRatio;
|
|
|
- var _canvas_props = {
|
|
|
+ var _scene_props = {
|
|
|
+ width:0,
|
|
|
+ height:0,
|
|
|
// 'margin_top':90, // with red border on head
|
|
|
// 'margin_top':75, // without red border on head
|
|
|
'margin_top':0,
|
|
@@ -95,10 +97,13 @@
|
|
|
onResizeCanvas();
|
|
|
};
|
|
|
function onResizeCanvas() {
|
|
|
- _canvas.style.width = window.innerWidth;
|
|
|
- _canvas.style.height = window.innerHeight;
|
|
|
- _canvas.width = window.innerWidth*_dpi;
|
|
|
- _canvas.height = window.innerHeight*_dpi;
|
|
|
+ _dpi = 2;
|
|
|
+ _scene_props.width = window.innerWidth;
|
|
|
+ _scene_props.height = window.innerHeight;
|
|
|
+ _canvas.style.width = _scene_props.width+'px';
|
|
|
+ _canvas.style.height = _scene_props.height+'px';
|
|
|
+ _canvas.width = _scene_props.width*_dpi;
|
|
|
+ _canvas.height = _scene_props.height*_dpi;
|
|
|
_ctx.scale(_dpi, _dpi);
|
|
|
|
|
|
|
|
@@ -159,7 +164,7 @@
|
|
|
};
|
|
|
function resizePhysics(){
|
|
|
// attracters
|
|
|
- _attracter.position = {x:_canvas.width/2, y:_canvas.height/2};
|
|
|
+ _attracter.position = {x:_scene_props.width/2, y:_scene_props.height/2};
|
|
|
};
|
|
|
|
|
|
// _ _ _
|
|
@@ -258,19 +263,19 @@
|
|
|
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 = _physics.makeAttraction(this.ori_p, this.p, 1000, _scene_props.width*2);
|
|
|
this.ori_p_attract.on = false;
|
|
|
// attracter
|
|
|
- this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
|
|
|
+ this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _scene_props.width*2);
|
|
|
this.attract.on = false;
|
|
|
};
|
|
|
|
|
|
Node.prototype.calcWallLimits = function(){
|
|
|
this.wall_limits = {
|
|
|
- top: _canvas_props.margin_top +this.r,
|
|
|
- right: _canvas.width -_canvas_props.margin_right -this.r,
|
|
|
- bottom: _canvas.height -_canvas_props.margin_bottom -this.r,
|
|
|
- left: _canvas_props.margin_left +this.r
|
|
|
+ top: _scene_props.margin_top +this.r,
|
|
|
+ right: _scene_props.width -_scene_props.margin_right -this.r,
|
|
|
+ bottom: _scene_props.height -_scene_props.margin_bottom -this.r,
|
|
|
+ left: _scene_props.margin_left +this.r
|
|
|
}
|
|
|
};
|
|
|
|
|
@@ -423,13 +428,13 @@
|
|
|
// if(this.id == 1)
|
|
|
// console.log('this.p.velocity', this.p.velocity);
|
|
|
this.dist_to_attracter = this.p.distanceTo(_attracter);
|
|
|
- if( this.dist_to_attracter < _canvas.width/4){
|
|
|
+ if( this.dist_to_attracter < _scene_props.width/4){
|
|
|
if( this.p.velocity.length() > 0.4 ){
|
|
|
this.p.velocity.multiplyScalar(0.995);
|
|
|
}
|
|
|
}
|
|
|
- if( Math.abs(_attracter.position.x - this.x) > _canvas.width/3
|
|
|
- || Math.abs(_attracter.position.y - this.y) > _canvas.height/3){
|
|
|
+ if( Math.abs(_attracter.position.x - this.x) > _scene_props.width/3
|
|
|
+ || Math.abs(_attracter.position.y - this.y) > _scene_props.height/3){
|
|
|
this.attract.on = true;
|
|
|
}else{
|
|
|
this.attract.on = false;
|
|
@@ -441,7 +446,7 @@
|
|
|
// this.fade();
|
|
|
this.stopScrambling();
|
|
|
this.unsetCentered();
|
|
|
- this.ori_p.position.x = this.x < _canvas.width /2 ? this.wall_limits.left : this.wall_limits.right;
|
|
|
+ this.ori_p.position.x = this.x < _scene_props.width /2 ? this.wall_limits.left : this.wall_limits.right;
|
|
|
this.ori_p_attract.on = true;
|
|
|
this.wall_bouncing_elasticity = 0.15;
|
|
|
}
|
|
@@ -1055,7 +1060,7 @@
|
|
|
// | / -_) ' \/ _` / -_) '_|
|
|
|
// |_|_\___|_||_\__,_\___|_|
|
|
|
function render(){
|
|
|
- _ctx.clearRect(0, 0, _canvas.width, _canvas.height);
|
|
|
+ _ctx.clearRect(0, 0, _scene_props.width, _scene_props.height);
|
|
|
|
|
|
checkParticulesCollisions();
|
|
|
|