refactoring: replaced all matter sub body part (entites, etc) by directly paperjs groups
This commit is contained in:
parent
a90458f145
commit
7c589b0327
@ -335,24 +335,6 @@ export default {
|
||||
id: this.concernement.id,
|
||||
})
|
||||
];
|
||||
|
||||
// Create parts of the body : entities
|
||||
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
|
||||
// }))
|
||||
this.body_parts.push(Matter.Bodies.circle(this.entites[i].display.pos.x, this.entites[i].display.pos.y, 0.8, {
|
||||
item_type: 'entite',
|
||||
id: this.entites[i].entite.id,
|
||||
cid: this.concernement.id,
|
||||
agissante: this.entites[i].entite.agissante,
|
||||
isSensor: true
|
||||
}))
|
||||
}
|
||||
|
||||
// Create parts of the body : besoins and responses
|
||||
this.createBesoinsBodyParts();
|
||||
|
||||
// create the body
|
||||
this.body = Matter.Body.create({
|
||||
@ -397,49 +379,6 @@ export default {
|
||||
y: -delta + Math.random()*delta*2
|
||||
});
|
||||
},
|
||||
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++) { // loop through all 4 fields, keep only the last one filled
|
||||
if( this.concernement.besoins[i].reponses[j][res_fields[f]] // if field filled
|
||||
&& (f === res_fields.length -1 || !this.concernement.besoins[i].reponses[j][res_fields[f+1]]) // and is last field or last field filled
|
||||
){
|
||||
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',
|
||||
// field: res_fields[f],
|
||||
id: this.concernement.besoins[i].reponses[j].id,
|
||||
bid: this.concernement.besoins[i].id,
|
||||
cid: this.concernement.id,
|
||||
isSensor: true
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// PAPER OBJECTS
|
||||
initPaperObjects(){
|
||||
this.paper_objects = new paper.Group({
|
||||
@ -449,6 +388,7 @@ export default {
|
||||
this.paper_objects.addChild(this.setPaperBoussoleBG());
|
||||
this.paper_objects.addChild(this.setPaperContour());
|
||||
this.paper_objects.addChild(this.setPaperEntites());
|
||||
|
||||
if (this.concernement.has_puissancedagir) {
|
||||
this.paper_objects.addChild(this.setPaperPuissanceagirBG());
|
||||
this.paper_objects.addChild(this.setPaperPuissanceagirICON());
|
||||
@ -709,16 +649,36 @@ export default {
|
||||
pivot: new paper.Point(this.pos),
|
||||
name: 'entites'
|
||||
});
|
||||
for (let i = 0; i < this.body.parts.length; i++) {
|
||||
if (this.body.parts[i].item_type === 'entite') {
|
||||
let part = this.body.parts[i];
|
||||
for (let i = 0; i < this.entites.length; i++) {
|
||||
g.addChild(new paper.Path.Circle({
|
||||
pivot: new paper.Point(this.pos),
|
||||
center: [this.pos.x + this.entites[i].display.pos.x, this.pos.y + this.entites[i].display.pos.y],
|
||||
radius: 0.5, //0.3
|
||||
fillColor: '#000',
|
||||
item_id: this.entites[i].entite.id,
|
||||
item_type: 'entite'
|
||||
}))
|
||||
}
|
||||
return g;
|
||||
},
|
||||
setPaperAgissantes(){
|
||||
let g = new paper.Group({
|
||||
pivot: new paper.Point(this.pos),
|
||||
name: 'agissantes'
|
||||
});
|
||||
for (let i = 0; i < this.entites.length; i++) {
|
||||
if (this.entites[i].entite.agissante) {
|
||||
g.addChild(new paper.Path.Circle({
|
||||
center: [part.position.x, part.position.y],
|
||||
pivot: new paper.Point(this.pos),
|
||||
center: [this.pos.x + this.entites[i].display.pos.x, this.pos.y + this.entites[i].display.pos.y],
|
||||
radius: 0.5, //0.3
|
||||
fillColor: '#000',
|
||||
item_id: part.id,
|
||||
strokeColor: '#000',
|
||||
strokeWidth: 3,
|
||||
item_id: this.entites[i].entite.id,
|
||||
item_type: 'entite'
|
||||
}))
|
||||
|
||||
}
|
||||
}
|
||||
return g;
|
||||
@ -803,37 +763,53 @@ export default {
|
||||
name: 'puissanceagir_besoins'
|
||||
});
|
||||
|
||||
for (let i = 0; i < this.body.parts.length; i++) {
|
||||
if (this.body.parts[i].item_type === 'besoin' || this.body.parts[i].item_type === 'reponse') {
|
||||
let part = this.body.parts[i];
|
||||
|
||||
switch (part.item_type) {
|
||||
case 'besoin':
|
||||
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;
|
||||
|
||||
g.addChild(
|
||||
new paper.Path({
|
||||
pivot: new paper.Point(this.pos),
|
||||
segments: this.getDiamondSegments(this.pos.x + x, this.pos.y + y, 1),
|
||||
fillColor: '#000',
|
||||
item_id: this.concernement.besoins[i].id,
|
||||
item_cid: this.concernement.id,
|
||||
item_type: 'besoin'
|
||||
})
|
||||
)
|
||||
|
||||
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++) { // loop through all 4 fields, keep only the last one filled
|
||||
if( this.concernement.besoins[i].reponses[j][res_fields[f]] // if field filled
|
||||
&& (f === res_fields.length -1 || !this.concernement.besoins[i].reponses[j][res_fields[f+1]]) // and is last field or last field filled
|
||||
){
|
||||
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;
|
||||
|
||||
g.addChild(
|
||||
new paper.Path({
|
||||
segments: this.getDiamondSegments(part.position.x, part.position.y, 1),
|
||||
fillColor: '#000',
|
||||
pivot: new paper.Point(this.pos),
|
||||
item_id: part.id,
|
||||
item_type: 'besoin'
|
||||
})
|
||||
)
|
||||
break;
|
||||
case 'reponse':
|
||||
g.addChild(
|
||||
new paper.Path({
|
||||
segments: this.getDiamondSegments(part.position.x, part.position.y, 1),
|
||||
segments: this.getDiamondSegments(this.pos.x + rx, this.pos.y + ry, 1),
|
||||
fillColor: '#eee',
|
||||
strokeColor: "#000",
|
||||
strokeWidth: 1,
|
||||
pivot: new paper.Point(this.pos),
|
||||
item_id: part.id,
|
||||
item_bid: part.bid,
|
||||
item_cid: part.cid,
|
||||
item_id: this.concernement.besoins[i].reponses[j].id,
|
||||
item_bid: this.concernement.besoins[i].id,
|
||||
item_cid: this.concernement.id,
|
||||
item_type: 'reponse'
|
||||
})
|
||||
)
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -849,27 +825,6 @@ export default {
|
||||
[x, y - r]
|
||||
];
|
||||
},
|
||||
setPaperAgissantes(){
|
||||
let g = new paper.Group({
|
||||
pivot: new paper.Point(this.pos),
|
||||
name: 'agissantes'
|
||||
});
|
||||
for (let i = 0; i < this.body.parts.length; i++) {
|
||||
if (this.body.parts[i].item_type === 'entite' && this.body.parts[i].agissante) {
|
||||
let part = this.body.parts[i];
|
||||
g.addChild(new paper.Path.Circle({
|
||||
center: [part.position.x, part.position.y],
|
||||
radius: 0.3, //0.3
|
||||
fillColor: '#000',
|
||||
strokeColor: '#000',
|
||||
strokeWidth: 3,
|
||||
item_id: part.id,
|
||||
item_type: 'entite'
|
||||
}))
|
||||
}
|
||||
}
|
||||
return g;
|
||||
},
|
||||
setPaperDoleanceBG(){
|
||||
var r = this.ray * this.scale * 0.8; // ray
|
||||
var dr = r/2; // demi ray
|
||||
@ -1803,7 +1758,7 @@ export default {
|
||||
: this.canvas.width - pseudo_center_x;
|
||||
// max and min force
|
||||
let minf = 0;
|
||||
let maxf = 10;
|
||||
let maxf = 6;
|
||||
// scale factor
|
||||
let scale = (maxf-minf) / (maxp-minp);
|
||||
// get the inversed distance
|
||||
@ -1840,7 +1795,7 @@ export default {
|
||||
: pseudo_center_x;
|
||||
// max and min force
|
||||
let minf = 0;
|
||||
let maxf = 2;
|
||||
let maxf = 1;
|
||||
// scale factor
|
||||
let scale = (maxf-minf) / (maxp-minp);
|
||||
// get the inversed distance from the side
|
||||
@ -1867,19 +1822,46 @@ export default {
|
||||
);
|
||||
},
|
||||
applyShuffleForces() {
|
||||
var dist, dir, x_velocity;
|
||||
dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction to the centre
|
||||
dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side
|
||||
x_velocity = Math.pow(dist/650,10) * dir;
|
||||
// var dist, dir, x_velocity;
|
||||
// dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction to the centre
|
||||
// dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side
|
||||
// x_velocity = Math.pow(dist/650,10) * dir;
|
||||
let pseudo_center_x = (this.canvas.width - this.cartouch_width) / 2;
|
||||
// get the direction to the centre
|
||||
let dir = this.pos.x > pseudo_center_x
|
||||
? -1 // to left
|
||||
: 1; // to right
|
||||
// max & min item position
|
||||
let minp = 0;
|
||||
let maxp = dir < 0
|
||||
? this.canvas.width - pseudo_center_x
|
||||
: pseudo_center_x;
|
||||
// max and min force
|
||||
let minf = 0;
|
||||
let maxf = 10;
|
||||
// scale factor
|
||||
let scale = (maxf-minf) / (maxp-minp);
|
||||
// get the inversed distance from the side
|
||||
let dist = dir < 0
|
||||
? this.pos.x - pseudo_center_x
|
||||
: pseudo_center_x - this.pos.x;
|
||||
|
||||
Matter.Body.setVelocity(this.body, {x: x_velocity, y: 0});
|
||||
let x_velocity = Math.exp(minf + scale*(dist-minp));
|
||||
|
||||
let y_velocity = -10 + Math.random() * 10;
|
||||
// let ori_pos = dir < 0
|
||||
// ? {x:this.canvas.width, y:this.body.position.y}
|
||||
// : {x:0, y:this.body.position.y};
|
||||
// let x_force = Math.pow(dist/800,10) * dir;
|
||||
|
||||
Matter.Body.setVelocity(this.body, {x: x_velocity, y: y_velocity});
|
||||
},
|
||||
onAfterEngineUpdate (event) {
|
||||
// respawn element if outside screen
|
||||
// if(this.pos.x < 0
|
||||
// || this.pos.x > this.canvas.width
|
||||
// || this.pos.y < 0
|
||||
// || this.pos.y > this.canvas.height){
|
||||
// if(this.pos.x <= 0
|
||||
// || this.pos.x >= this.canvas.width
|
||||
// || this.pos.y <= 0
|
||||
// || this.pos.y >= this.canvas.height){
|
||||
// this.pos = this.getRandomPos()
|
||||
// Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
|
||||
// this.setInitBodyVelocity();
|
||||
@ -1956,34 +1938,8 @@ export default {
|
||||
&& this.map_mode !== 'doleancer'
|
||||
&& this.map_mode !== 'action' ) {
|
||||
this.paper_objects.children.entites.visible = true;
|
||||
// if (this.opened_entite_id) {
|
||||
// // console.log('this.paper_objects.children.entites', this.paper_objects.children.entites);
|
||||
// this.paper_objects.children.entites.children.forEach((entite) => {
|
||||
// // console.log('entite', entite);
|
||||
// if (entite.item_id === this.opened_entite_id) {
|
||||
// entite.style.fillColor = '#01ffe2';
|
||||
// } else {
|
||||
// entite.style.fillColor = '#000';
|
||||
// }
|
||||
// });
|
||||
// } else {
|
||||
// this.paper_objects.children.entites.children.forEach((entite) => {
|
||||
// entite.style.fillColor = '#000';
|
||||
// })
|
||||
// }
|
||||
} else {
|
||||
this.paper_objects.children.entites.visible = false;
|
||||
// if(this.map_mode === 'puissancedagir'
|
||||
// || this.map_mode === 'doleancer'
|
||||
// || this.map_mode === 'action' ){
|
||||
// this.paper_objects.children.entites.visible = false;
|
||||
// }else{
|
||||
// this.paper_objects.children.entites.visible = true;
|
||||
// // this.paper_objects.children.entites.children.forEach((entite) => {
|
||||
// // // entite.style.strokeWidth = 2;
|
||||
// // // entite.style.strokeColor = "#fff";
|
||||
// // })
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user