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

bodies a moving well and are clickable

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2023-03-28 15:40:05 +02:00
parent 772630d1a5
commit 5e489f074e
6 changed files with 169 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/components/ConcernementMapItem.vue
View File

@@ -1,28 +1,37 @@
<script>
// https://brm.io/matter-js/docs/classes/Engine.html
import {
// Engine,
// Render,
// World,
Bodies,
Body,
Events,
Composite,
// Composites,
// Constraint,
// Vertices,
// Mouse,
// MouseConstraint,
// Query,
// Common
} from "matter-js";
// import {
// // Engine,
// // Render,
// // World,
// Bodies,
// Body,
// Events,
// Composite,
// // Composites,
// // Constraint,
// // Vertices,
// // Mouse,
// // MouseConstraint,
// // Query,
// // Common
// } from "matter-js";
import Matter from "matter-js";
import MatterAttractors from "matter-attractors";
// Matter.use(MatterAttractors);
import { mapState, mapActions } from 'pinia'
import { ConcernementsStore } from '@/stores/concernements'
export default {
inject: ['canvasMap'],
inject: ['canvasMap', 'matterEngine'],
data() {
return {
// concernement: null,
canvas: null,
ctx: null,
pos : {
@@ -37,17 +46,20 @@ export default {
}
},
props: ['concernement'],
computed: {
...mapState(ConcernementsStore,['concernementsByID'])
},
created () {
console.log("ConcernementsMapItem concernement", this.canvasMap);
// console.log("ConcernementsMapItem concernement", this.canvasMap, this.matterEngine);
this.entites = this.concernement.entites
this.parsePoints()
this.getSalientPoints()
},
mounted() {
// console.log('concernementItem mounted', typeof this.canvasMap.canvas);
// if (this.canvasMap) {
// // this.initCanvasMap()
// }
console.log('concernementItem mounted', typeof this.canvasMap.canvas);
if (this.canvasMap) {
this.initCanvasMap()
}
},
watch: {
// canvasMap (n, o) {
@@ -61,10 +73,11 @@ export default {
}
},
deep: true
}
}
},
methods: {
initCanvasMap (){
console.log('initCanvasMap');
// record canvas and ctx for rendering (drawing)
this.canvas = this.canvasMap.canvas
this.ctx = this.canvasMap.ctx
@@ -76,25 +89,38 @@ export default {
// MATTER
// create the matter body and add it to the engine
if (!this.body) {
console.log('concernementItem creating body');
this.body = Bodies.circle(this.pos.x, this.pos.y, this.ray, {
// console.log('concernementItem creating body');
// https://github.com/liabru/matter-attractors/issues/8
// https://github.com/liabru/matter-attractors/blob/master/index.js
MatterAttractors.Attractors.gravityConstant = -1;
this.body = Matter.Bodies.circle(this.pos.x, this.pos.y, this.ray, {
frictionAir: 0,
mass: this.entites.length,
restitution: 0.9
// mass: Math.pow(3, this.entites.length),
mass: 10,
restitution: 0.9,
id: this.concernement.id,
plugin: {
attractors: [
// there is a built in helper function for Newtonian gravity!
// you can find out how it works in index.js
MatterAttractors.Attractors.gravity
]
}
});
// Body.setPosition(this.body, this.pos);
Body.setVelocity(this.body, {
x: -50 + Math.random()*50,
y: -50 + Math.random()*50
let delta = 60;
Matter.Body.setVelocity(this.body, {
x: -delta + Math.random()*delta*2,
y: -delta + Math.random()*delta*2
});
// console.log('concernementItem mass', this.body.mass);
Composite.add(this.canvasMap.matter.engine.world, this.body);
Matter.Composite.add(this.matterEngine.world, this.body);
}
// // listen for animate event dispatched from parent
// this.canvas.addEventListener('animate', this.animate)
// listen for afterUpdate event from Matter.Engine object
Events.on(this.canvasMap.matter.engine, "afterUpdate", this.animate)
Matter.Events.on(this.matterEngine, "afterUpdate", this.animate)
},
parsePoints (){
// converts data (menace/maintien, actuel/future, prise) into atcual position x,y
@@ -157,12 +183,12 @@ export default {
this.salientPoints.push(farest.display)
}
}
console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
// console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
},
animate (event) {
if (this.ctx) {
// this var is only here to trigger the render()
this.time = Date.now();
// this.time = Date.now();
this.pos = this.body.position;
}
}
@@ -173,38 +199,21 @@ export default {
if (!this.ctx) return;
// this var is only here to trigger the render() from animate()
let time = this.time;
// place all entities points
for (let i = 0; i < this.entites.length; i++) {
let entite = this.entites[i];
// console.log('entite', entite);
this.ctx.beginPath();
this.ctx.arc(this.pos.x+entite.display.pos.x, this.pos.y+entite.display.pos.y, 2, 0, 2 * Math.PI, false);
this.ctx.fillStyle = "#F00";
this.ctx.fill();
}
// concernement id @center
this.ctx.beginPath();
// this.ctx.arc(this.pos.x, this.pos.y, 4, 0, 2 * Math.PI, false);
this.ctx.fillStyle = "#000";
this.ctx.fillText(this.concernement.id, this.pos.x, this.pos.y)
this.ctx.fill();
// let time = this.time;
// exterieur circle
this.ctx.beginPath();
this.ctx.lineWidth = 0.5;
this.ctx.strokeStyle = "#888";
this.ctx.strokeStyle = this.concernement.opened ? "#ff0000" : "#888";
this.ctx.arc(this.pos.x, this.pos.y, this.ray, 0, 2 * Math.PI, false);
this.ctx.stroke();
// exterieur circle
this.ctx.beginPath();
this.ctx.lineWidth = 0.5;
this.ctx.strokeStyle = "#888";
this.ctx.arc(this.pos.x, this.pos.y, this.ray/2, 0, 2 * Math.PI, false);
this.ctx.stroke();
// // interieur circle
// this.ctx.beginPath();
// this.ctx.lineWidth = 0.5;
// this.ctx.strokeStyle = "#888";
// this.ctx.arc(this.pos.x, this.pos.y, this.ray/2, 0, 2 * Math.PI, false);
// this.ctx.stroke();
// contours
if (this.salientPoints.length > 3) {
@@ -220,6 +229,26 @@ export default {
this.ctx.fill();
this.ctx.stroke();
}
// place all entities points
for (let i = 0; i < this.entites.length; i++) {
let entite = this.entites[i];
// console.log('entite', entite);
this.ctx.beginPath();
this.ctx.arc(this.pos.x+entite.display.pos.x, this.pos.y+entite.display.pos.y, 2, 0, 2 * Math.PI, false);
this.ctx.fillStyle = "#F00";
this.ctx.fill();
}
// concernement id @center
this.ctx.beginPath();
// this.ctx.arc(this.pos.x, this.pos.y, 4, 0, 2 * Math.PI, false);
this.ctx.fillStyle = "#000";
this.ctx.fillText(this.concernement.id, this.pos.x, this.pos.y)
this.ctx.fill();
},
}