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

tested consraint to move the opened body, not very satisfying

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-04-04 17:15:51 +02:00
parent a74fe1d9b5
commit eaeb366ffb
2 changed files with 41 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/ConcernementMapItem.vue
View File

@ -44,7 +44,8 @@ export default {
scale: 1,
anim: null,
// matter
body: null
body: null,
constraint: null
}
},
props: ['concernement', 'opened'],
@ -79,6 +80,7 @@ export default {
opened: {
handler (n, o) {
if(n){
console.log('concernement item opened');
// opened
this.anim = {
init: this.scale,
@ -86,7 +88,18 @@ export default {
start: Date.now(),
duration: 1000 // ms
}
// create constraint to force body to move in the right position
// TODO this is not working well, better to move the body and then apply the constraint
this.constraint = Matter.Constraint.create({
pointA: { x: this.canvas.width/2, y: this.canvas.height/2 },
bodyB: this.body,
stiffness: 0.9,
damping: 0.1,
length: 0
});
Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
}else{
console.log('concernement item closed');
// closed
this.anim = {
init: this.scale,
@ -94,6 +107,9 @@ export default {
start: Date.now(),
duration: 1000 // ms
}
if(this.constraint){
Matter.Composite.remove(this.matterEngine.world, this.constraint);
}
}
console.log(`watch opened ${this.concernement.id}`, n, o, this.anim);
},
@ -102,7 +118,7 @@ export default {
},
methods: {
initCanvasMap (){
console.log('initCanvasMap');
// console.log('initCanvasMap');
// record canvas and ctx for rendering (drawing)
this.canvas = this.canvasMap.canvas
this.ctx = this.canvasMap.ctx
@ -118,12 +134,12 @@ export default {
// https://github.com/liabru/matter-attractors/issues/8
// https://github.com/liabru/matter-attractors/blob/master/index.js
MatterAttractors.Attractors.gravityConstant = -1;
// MatterAttractors.Attractors.gravityConstant = -5;
this.body = Matter.Bodies.circle(this.pos.x, this.pos.y, this.ray, {
frictionAir: 0,
// mass: Math.pow(3, this.entites.length),
mass: 10,
restitution: 0.9,
restitution: 0.4,
id: this.concernement.id,
plugin: {
attractors: [
@ -133,20 +149,23 @@ export default {
]
}
});
let delta = 60;
let delta = 10;
// add init velocity
Matter.Body.setVelocity(this.body, {
x: -delta + Math.random()*delta*2,
y: -delta + Math.random()*delta*2
});
// console.log('concernementItem mass', this.body.mass);
Matter.Composite.add(this.matterEngine.world, this.body);
console.log('concernement body', this.body);
// console.log('concernement body', this.body);
}
// // listen for animate event dispatched from parent
// this.canvas.addEventListener('animate', this.animate)
// listen for afterUpdate event from Matter.Engine object
Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate)
// Matter.Events.on(this.matterEngine, "beforeUpdate", this.onBeforeEngineUpdate)
Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
},
parsePoints (){
// converts data (menace/maintien, actuel/future, prise) into atcual position x,y
@ -211,31 +230,25 @@ export default {
}
// console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
},
scaleBody(scale){
// scale vertices
Matter.Vertices.scale(this.body.parts[0].vertices, scale, scale);
// update properties
// this.body.parts[0].axes = Matter.Axes.fromVertices(this.body.parts[0].vertices);
// update bounds
// Matter.Bounds.update(this.body.parts[0].bounds, this.body.parts[0].vertices, this.body.velocity);
this.body.circleRadius *= scale;
},
// onBeforeEngineUpdate (event) {
// if (this.opened) {
// // Matter.Body.setPosition(this.body, this.pos);
// }
// },
onAfterEngineUpdate (event) {
if (this.anim) {
let time = Date.now() - this.anim.start; // get time elapsed since anime start
if (time <= this.anim.duration) {
let ease = easeInOutQuart(time / this.anim.duration); // get the easing factor
let elapsedTime = Date.now() - this.anim.start; // get time elapsed since anime start
if (elapsedTime <= this.anim.duration) {
let ease = easeInOutQuart(elapsedTime / this.anim.duration); // get the easing factor
let scale = this.anim.init < this.anim.target
? this.anim.init + this.anim.target * ease
: this.anim.init + (this.anim.target - this.anim.init) * ease; // get the current eased scale
// // https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
// // revert to the original size (by reverting the previous scale)
Matter.Body.scale(this.body, 1 / this.scale, 1 / this.scale)
// this.scaleBody(1 / this.scale)
// // then scale again to new scale
Matter.Body.scale(this.body, scale, scale)
// this.scaleBody(scale);
// record new scale
this.scale = scale;
}else{
@ -244,13 +257,18 @@ export default {
}
}
},
render() {
// console.log('render()', this.ctx);
if (!this.ctx) return;
// if (this.opened) {
// Matter.Body.setPosition(this.body, this.pos);
// }
this.pos = this.body.position;
// exterieur circle

2
src/components/MapConcernements.vue
View File

@ -105,6 +105,7 @@ export default {
},
onClick (e) {
console.log('onClick', this, e);
// get the clicked element from matter
const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position)
// console.log(this.mouse.position);
// console.log(query);
@ -113,7 +114,6 @@ export default {
// console.log('body id:', elmt.id);
clickedIDs.push(elmt.id);
});
let opend
this.concernements.forEach((concernement, index) => {
this.openCloseConcernement(concernement.id, clickedIDs.indexOf(concernement.id) !== -1)
});