From eaeb366ffbc680038ee626aa65d712434c6f91c9 Mon Sep 17 00:00:00 2001 From: bach Date: Tue, 4 Apr 2023 17:15:51 +0200 Subject: [PATCH] tested consraint to move the opened body, not very satisfying --- src/components/ConcernementMapItem.vue | 62 +++++++++++++++++--------- src/components/MapConcernements.vue | 2 +- 2 files changed, 41 insertions(+), 23 deletions(-) diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index dc02b67..f285076 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -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 diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index 7a3a5e5..5cf2e3f 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -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) });