bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better pushAside & bringToCenter logarithmic algorithem

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-06-26 13:07:32 +02:00
parent 45cd0341fe
commit a90458f145
2 changed files with 57 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/ConcernementMapItem.vue
View File

@ -72,7 +72,8 @@ export default {
...mapState(ConcernementsStore,['concernementsByID']),
...mapState(ConcernementsStore,['opened_concernement']),
...mapState(ConcernementsStore,['opened_entite_id']),
...mapState(CommonStore,['hover_elmt'])
...mapState(CommonStore,['hover_elmt']),
...mapState(CommonStore,['cartouch_width'])
},
created () {
// console.log(`ConcernementsMapItem ${this.concernement.id} created`, this.canvasMap, this.matterEngine);
@ -1691,7 +1692,7 @@ export default {
this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y, o: 0})
.to({
s: s,
x: (this.canvas.width - 450) / 2,
x: (this.canvas.width - this.cartouch_width) / 2,
y: this.canvas.height / 2,
o: 0.8
}, 800)
@ -1786,19 +1787,35 @@ export default {
}
},
pushAside(){
// INFO logarithmic force : https://stackoverflow.com/questions/846221/logarithmic-slider/846249#846249
// console.log('pushAside', this.opened_concernement);
// apply a force in direction of one side or an other depending of the start position
// the force is exponentialy proportional to the distance from the side
let dir = this.pos.x > this.canvas.width/2 ? 1 : -1; // get the direction to the closest side
// let minp = 0;
// let maxp = this.canvas.width / 2;
// INFO logarithmic force : https://stackoverflow.com/questions/846221/logarithmic-slider/846249#846249
let pseudo_center_x = (this.canvas.width - this.cartouch_width) / 2;
// get the direction to the closest side
let dir = this.pos.x > pseudo_center_x
? 1 // to the right
: -1; // to the left
// max and min item position
let minp = 0;
let maxp = dir < 0
? pseudo_center_x
: this.canvas.width - pseudo_center_x;
// max and min force
let minf = 0;
let maxf = 10;
// scale factor
let scale = (maxf-minf) / (maxp-minp);
// get the inversed distance
let dist = dir < 0
? this.pos.x
: this.canvas.width - this.pos.x; // get the distance from the side
// // calculate the force
// let x_force = Math.pow(dist/700,100) * dir;
// calculate the logarithmic force
let x_force = Math.exp(minf + scale*(dist-minp)) * dir;
// let dist = (dir < 0 ? this.pos.x : this.canvas.width - this.pos.x); // get the distance from the side
let x_force = Math.pow(dist/700,100) * dir;
let ori_pos = {x:this.canvas.width/2, y:this.body.position.y};
let ori_pos = {x:pseudo_center_x, y:this.body.position.y};
Matter.Body.applyForce(
this.body,
@ -1811,10 +1828,32 @@ export default {
},
bringToCenter(){
// bring to the centre
let dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction to the centre
let dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side
let ori_pos = dir < 0 ? {x:this.canvas.width, y:this.body.position.y} : {x:0, y:this.body.position.y}
let x_force = Math.pow(dist/800,10) * dir;
let pseudo_center_x = (this.canvas.width - this.cartouch_width) / 2;
// get the direction to the centre
let dir = this.pos.x > pseudo_center_x
? -1 // to left
: 1; // to right
// max & min item position
let minp = 0;
let maxp = dir < 0
? this.canvas.width - pseudo_center_x
: pseudo_center_x;
// max and min force
let minf = 0;
let maxf = 2;
// scale factor
let scale = (maxf-minf) / (maxp-minp);
// get the inversed distance from the side
let dist = dir < 0
? this.pos.x - pseudo_center_x
: pseudo_center_x - this.pos.x;
let x_force = Math.exp(minf + scale*(dist-minp)) * dir;
let ori_pos = dir < 0
? {x:this.canvas.width, y:this.body.position.y}
: {x:0, y:this.body.position.y};
// let x_force = Math.pow(dist/800,10) * dir;
this.body.frictionAir = 0.05;

3
src/stores/common.js
View File

@ -3,7 +3,8 @@ import { defineStore } from 'pinia'
export const CommonStore = defineStore({
id: 'common',
state: () => ({
hover_elmt: null
hover_elmt: null,
cartouch_width: 450
}),
getters: {