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

made matter body parts of besoin and concernement

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-05-22 18:05:13 +02:00
parent 1e57fa0d22
commit 8806507ecb
1 changed files with 62 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/ConcernementMapItem.vue
View File

@ -48,6 +48,7 @@ export default {
opacity: 0, opacity: 0,
tween: null, tween: null,
body: null, body: null,
body_parts: [],
constraint: null constraint: null
} }
}, },
@ -140,18 +141,19 @@ export default {
// MatterAttractors.Attractors.gravityConstant = -5; // MatterAttractors.Attractors.gravityConstant = -5;
// Create parts of the body : main big circle & entities // Create parts of the body : main big circle & entities
var parts = [ this.body_parts = [
Matter.Bodies.circle(0, 0, this.ray, { Matter.Bodies.circle(0, 0, this.ray, {
item_type: 'concernement', item_type: 'concernement',
id: this.concernement.id, id: this.concernement.id,
}) })
]; ];
// Create parts of the body : entities
for (let i = 0; i < this.entites.length; i++) { 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, { // 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', // item_type: 'entite',
// id: this.entites[i].id // id: this.entites[i].id
// })) // }))
parts.push(Matter.Bodies.circle(this.entites[i].display.pos.x, this.entites[i].display.pos.y, 0.8, { this.body_parts.push(Matter.Bodies.circle(this.entites[i].display.pos.x, this.entites[i].display.pos.y, 0.8, {
item_type: 'entite', item_type: 'entite',
id: this.entites[i].entite.id, id: this.entites[i].entite.id,
cid: this.concernement.id, cid: this.concernement.id,
@ -159,10 +161,12 @@ export default {
isSensor: true isSensor: true
})) }))
} }
// Create parts of the body : besoins and responses
this.createBesoinsBodyParts();
// create the body // create the body
this.body = Matter.Body.create({ this.body = Matter.Body.create({
parts: parts, parts: this.body_parts,
item_type: 'concernement', item_type: 'concernement',
id: this.concernement.id, id: this.concernement.id,
frictionAir: 0, frictionAir: 0,
@ -200,6 +204,45 @@ export default {
Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate); Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
} }
}, },
createBesoinsBodyParts(){
let res_fields = ['qui','quoi','ou','avec'];
let arc = (360 / 16); // unit arc
let r = (this.ray * this.scale)/5; // unit ray
let br = r - r/3; // besoin ray
for (let i = 0; i < this.concernement.besoins.length; i++) {
let start_a = arc * i; // angle depart (for reponses)
let center_a = start_a + arc/2; // angle central
let x = Math.cos(center_a*(Math.PI/180)) * br;
let y = Math.sin(center_a*(Math.PI/180)) * br;
this.body_parts.push(Matter.Bodies.circle(x, y, 0.8, {
item_type: 'besoin',
id: this.concernement.besoins[i].id,
cid: this.concernement.id,
isSensor: true
}));
let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) {
let res_a = start_a + res_arc * (j+1); // angle for response line
for (let f = 0; f < res_fields.length; f++) {
if(this.concernement.besoins[i].reponses[j][res_fields[f]]){
let rr = this.ray * this.scale - r*f - r/2; // reponse field ray
let rx = Math.cos(res_a*(Math.PI/180)) * rr;
let ry = Math.sin(res_a*(Math.PI/180)) * rr;
this.body_parts.push(Matter.Bodies.circle(rx, ry, 0.8, {
item_type: 'reponse',
id: this.concernement.besoins[i].reponses[j].id,
bid: this.concernement.besoins[i].id,
cid: this.concernement.id,
isSensor: true
}));
}
}
}
}
},
getRandomPos(){ getRandomPos(){
return { return {
x: this.ray/2 + Math.random()*(this.canvas.width - this.ray), x: this.ray/2 + Math.random()*(this.canvas.width - this.ray),
@ -592,49 +635,29 @@ export default {
} }
}, },
drawBesoins(){ drawBesoins(){
let res_fields = ['qui','quoi','ou','avec']; for (let i = 0; i < this.body.parts.length; i++) {
let arc = (360 / 16); // unit arc if (this.body.parts[i].item_type === 'besoin' || this.body.parts[i].item_type === 'reponse') {
let r = (this.ray * this.scale)/5; // unit ray let part = this.body.parts[i];
let br = r - r/3; // besoin ray
for (let i = 0; i < this.concernement.besoins.length; i++) {
// TODO make besoins and reponses interactives
let start_a = arc * i; // angle depart (for reponses)
let center_a = start_a + arc/2; // angle central
let x = Math.cos(center_a*(Math.PI/180)) * br;
let y = Math.sin(center_a*(Math.PI/180)) * br;
switch (part.item_type) {
case 'besoin':
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.fillStyle = "#000"; this.ctx.fillStyle = "#000";
// this.ctx.arc(this.pos.x + x, this.pos.y + y, 2, 0, 2 * Math.PI, false); this.drawDiamond(part.position.x, part.position.y, 4);
this.drawDiamond(this.pos.x + x, this.pos.y + y, 4);
this.ctx.fill(); this.ctx.fill();
break;
let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number case 'reponse':
// loop through reponses
for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) {
let res_a = start_a + res_arc * (j+1); // angle for response line
// loop through fields qui, quoi, où, avec
for (let f = 0; f < res_fields.length; f++) {
if(this.concernement.besoins[i].reponses[j][res_fields[f]]){
let rr = this.ray * this.scale - r*f - r/2; // reponse field ray
let rx = Math.cos(res_a*(Math.PI/180)) * rr;
let ry = Math.sin(res_a*(Math.PI/180)) * rr;
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.fillStyle = "#eee"; this.ctx.fillStyle = "#eee";
this.ctx.strokeStyle = "#000"; this.ctx.strokeStyle = "#000";
this.ctx.lineWidth = 1; this.ctx.lineWidth = 1;
// this.ctx.arc(this.pos.x + rx, this.pos.y + ry, 2*(f+1), 0, 2 * Math.PI, false); // this.ctx.arc(this.pos.x + rx, this.pos.y + ry, 2*(f+1), 0, 2 * Math.PI, false);
this.drawDiamond(this.pos.x + rx, this.pos.y + ry, 5); this.drawDiamond(part.position.x, part.position.y, 5);
this.ctx.fill(); this.ctx.fill();
this.ctx.stroke(); this.ctx.stroke();
break;
} }
} }
}
} }
}, },
drawDiamond(x,y,r){ drawDiamond(x,y,r){