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

enites as matter body and popup display on mouse over entites

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2023-04-18 17:16:33 +02:00
parent a940012b6e
commit a2ae70ef48
5 changed files with 173 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/ConcernementMapItem.vue
View File

@@ -32,6 +32,7 @@ export default {
inject: ['canvasMap', 'matterEngine'],
data() {
return {
entities: null,
// concernement: null,
canvas: null,
ctx: null,
@@ -58,6 +59,7 @@ export default {
created () {
// console.log("ConcernementsMapItem concernement", this.canvasMap, this.matterEngine);
this.entites = this.concernement.entites
this.entites_byid = this.concernement.entites_byid
this.parsePoints()
this.getSalientPoints()
},
@@ -82,16 +84,11 @@ export default {
},
opened: {
handler (n, o) {
if(n){
console.log('concernement item opened');
// opened
if(n){ // opened
this.openClose(true);
}else{
console.log('concernement item closed');
// closed
}else{ // closed
this.openClose(false)
}
console.log(`watch opened ${this.concernement.id}`, n, o, this.anim);
},
deep: true
}
@@ -105,6 +102,10 @@ export default {
// define init position of the item
this.pos = this.getRandomPos();
//
this.initMatterBody()
},
initMatterBody (){
// MATTER
// create the matter body and add it to the engine
@@ -114,12 +115,38 @@ export default {
// https://github.com/liabru/matter-attractors/issues/8
// https://github.com/liabru/matter-attractors/blob/master/index.js
// MatterAttractors.Attractors.gravityConstant = -5;
this.body = Matter.Bodies.circle(this.pos.x, this.pos.y, this.ray, {
// Create parts of the body : main big circle & entities
var parts = [
Matter.Bodies.circle(0, 0, this.ray, {
item_type: 'concernement',
id: this.concernement.id,
})
];
for (let i = 0; i < this.entites.length; i++) {
// parts.push(Matter.Bodies.circle(this.pos.x+this.entites[i].display.pos.x, this.pos.y+this.entites[i].display.pos.y, 15, {
// item_type: 'entite',
// id: this.entites[i].id
// }))
parts.push(Matter.Bodies.circle(this.entites[i].display.pos.x, this.entites[i].display.pos.y, 2, {
item_type: 'entite',
id: this.entites[i].entite.id,
isSensor: true
}))
}
// create the body
this.body = Matter.Body.create({
parts: parts,
item_type: 'concernement',
id: this.concernement.id,
frictionAir: 0,
// mass: Math.pow(3, this.entites.length),
mass: 10,
restitution: 0.4,
id: this.concernement.id,
collisionFilter: {
group: -1
},
plugin: {
attractors: [
// there is a built in helper function for Newtonian gravity!
@@ -128,8 +155,10 @@ export default {
]
}
});
let delta = 10;
Matter.Body.setPosition(this.body, this.pos);
// add init velocity
let delta = 10;
Matter.Body.setVelocity(this.body, {
x: -delta + Math.random()*delta*2,
y: -delta + Math.random()*delta*2
@@ -137,14 +166,14 @@ export default {
// console.log('concernementItem mass', this.body.mass);
Matter.Composite.add(this.matterEngine.world, 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, "beforeUpdate", this.onBeforeEngineUpdate);
Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
}
// // 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, "beforeUpdate", this.onBeforeEngineUpdate)
Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
},
getRandomPos(){
return {
@@ -167,8 +196,13 @@ export default {
// slope = (output_end - output_start) / (input_end - input_start)
// output = output_start + slope * (input - input_start)
// from range 0 -> 100 to range 0 -> this.ray
let slope = this.ray / 100
this.entites[i].display.ray = slope * (100 - entite.prise);
let init_max = 100
let slope = this.ray / init_max
this.entites[i].display.ray = slope * (init_max - entite.prise);
// if (this.concernement.id === 28) {
// console.log(`entity prise: ${entite.prise} | ray: ${this.entites[i].display.ray}`);
// }
// ANGLE
// -90 <= mm <= 90
@@ -187,6 +221,8 @@ export default {
x: this.entites[i].display.ray * Math.cos(this.entites[i].display.alpha * (Math.PI/180)),
y: this.entites[i].display.ray * Math.sin(this.entites[i].display.alpha * (Math.PI/180))
}
this.entites_byid[entite.entite.id].display = this.entites[i].display;
}
},
getSalientPoints () {
@@ -309,7 +345,8 @@ export default {
this.ctx.beginPath();
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`;
this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false);
// external circle is %8 less than max ray = (*0.92)
this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale*0.92, 0, 2 * Math.PI, false);
// this.ctx.stroke();
// interieur circle
@@ -327,9 +364,9 @@ export default {
// fleches
// haute
this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale + (8*this.scale));
this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale);
this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale + (8*this.scale));
this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale));
this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale*0.92);
this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale));
// milieu
this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y + (8*this.scale));
this.ctx.lineTo(this.pos.x, this.pos.y);
@@ -380,10 +417,26 @@ export default {
let entite = this.entites[i];
// console.log('entite', entite);
this.ctx.beginPath();
this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 2, 0, 2 * Math.PI, false);
this.ctx.fillStyle = "#000";
this.ctx.fill();
this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 5, 0, 2 * Math.PI, false);
this.ctx.strokeStyle = "#F00";
this.ctx.stroke();
}
// OR
for (let i = 0; i < this.body.parts.length; i++) {
// let entite = this.entites[i];
if (this.body.parts[i].item_type === 'entity') {
let part = this.body.parts[i];
// console.log('part', part);
// console.log(`part pos x:${part.position.x} y:${part.position.y} || entity pos x:${this.pos.x+this.entites_byid[part.id].display.pos.x*this.scale} y:${this.pos.y+this.entites_byid[part.id].display.pos.y*this.scale}`);
this.ctx.beginPath();
// this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 2, 0, 2 * Math.PI, false);
this.ctx.arc(this.body.parts[i].position.x, this.body.parts[i].position.y, 2*this.scale, 0, 2 * Math.PI, false);
this.ctx.strokeStyle = "#000";
this.ctx.stroke();
}
}
}
// concernement id @center