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

better sailent point definition

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-05-26 00:10:44 +02:00
parent d9690ee4c1
commit 4ee8b51fa2
3 changed files with 78 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/ConcernementMapItem.vue
View File

@ -21,6 +21,7 @@
import Matter from "matter-js";
import MatterAttractors from "matter-attractors";
// Matter.use(MatterAttractors);
// import polydecomp from "poly-decomp";
// import { easeInOutQuad, easeInOutQuart } from 'easing-utils';
import Tween from "@tweenjs/tween.js";
@ -245,6 +246,44 @@ export default {
id: this.concernement.id,
})
];
// // Create parts of the body : contours
// if (this.salientPoints.length > 2) {
// var decomp = require('poly-decomp');
// // window.decomp = decomp;
// // debugger;
// Matter.Common.setDecomp(decomp);
// // Matter.Common.setDecomp(require('poly-decomp'));
// // let contourpoints = [];
// // for (let j = 0; j < this.salientPoints.length; j++) {
// // contourpoints.push(this.salientPoints[j].pos);
// // }
// let contourpoints = this.salientPoints.map(function(point) {
// return point.pos; //[point.pos.x, point.pos.y]
// });
// // console.log('contourpoints', contourpoints);
// // let contourpoints = Matter.Vertices.fromPath('35 7 19 17 14 38 14 58 25 79 45 85 65 84 65 66 46 67 34 59 30 44 33 29 45 23 66 23 66 7 53 7');
// // let ccw_contourpoints = decomp.makeCCW(contourpoints);
// // console.log('ccw_contourpoints', ccw_contourpoints);
// let vertices_contour = Matter.Vertices.create(contourpoints);
// // console.log('vertices_contour', vertices_contour);
// // let vertices_contour_bounds = Matter.Bounds.create(vertices_contour);
// // console.log('vertices_contour_bounds', vertices_contour_bounds);
// // debugger;
// let body_contour = Matter.Bodies.fromVertices(0, 0, vertices_contour, {
// mass: 0,
// item_type: 'concernement-contours',
// id: this.concernement.id,
// }, false, 0, 0, 0);
// // debugger;
// // console.log('body_contour.bounds', body_contour.bounds);
// // // https://github.com/liabru/matter-js/issues/186
// // Matter.Body.translate(body_contour, Matter.Vector.sub(vertices_contour_bounds.min, body_contour.bounds.min))
// this.body_parts.push(body_contour);
// }
// 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, {
@ -259,6 +298,7 @@ export default {
isSensor: true
}))
}
// Create parts of the body : besoins and responses
this.createBesoinsBodyParts();
@ -341,82 +381,6 @@ export default {
}
}
},
getRandomPos(){
return {
x: this.ray/2 + Math.random()*(this.canvas.width - this.ray),
y: this.ray/2 + Math.random()*(this.canvas.height - this.ray)
};
},
parsePoints (){
// converts data (menace/maintien, actuel/future, prise) into atcual position x,y
for (let i = 0; i < this.entites.length; i++) {
let entite = this.entites[i]
// console.log('entite', entite);
this.entites[i].display = {
alpha: null,
ray: null
}
// RAYON
// https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
// 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 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
if (entite.actuelfuture) {
// future en haut : 180 <= a <= 360
// from -90 -> 90 to range 180 -> 360
this.entites[i].display.alpha = entite.menacemaintien + 270
} else {
// actuel: en bas : O <= a <= 180
// from -90 -> 90 to range 180 -> 0
this.entites[i].display.alpha = -1 * entite.menacemaintien + 90
}
// POSITION X Y (par rapport au centre de l'entite)
this.entites[i].display.pos = {
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 () {
// debugger
// console.log(this.entites);
let arc = 360/10;
// loop through arcs
for (let i = 0; i <= 360/arc; i++) {
// loop through entities to find the farest on the arc
let max_r = 0;
let farest = null;
for (let j = 0; j < this.entites.length; j++) {
let entite = this.entites[j];
if(arc*i <= entite.display.alpha && entite.display.alpha <= arc*i+arc) {
// if entity is in arc
if (entite.display.ray > max_r) { // && entite.display.ray > this.ray/2 // and farest from minimu
// if entity is farest from precedent one
max_r = entite.display.ray;
farest = entite;
}
}
}
if (farest) {
this.salientPoints.push(farest.display)
}
}
// console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
},
// onBeforeEngineUpdate (event) {
// if (this.opened) {
// // Matter.Body.setPosition(this.body, this.pos);
@ -844,6 +808,38 @@ export default {
this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap)
this.ctx.fill();
this.ctx.stroke();
// // test draw contour from body part
// for (let i = 0; i < this.body.parts.length; i++) {
// if (this.body.parts[i].item_type === 'concernement-contours'){
// // console.log('concernement contours', this.body.parts[i]);
// this.ctx.beginPath();
// this.ctx.lineWidth = 1;
// this.ctx.strokeStyle = "#F00";
// this.ctx.moveTo(this.body.parts[i].vertices[0].x, this.body.parts[i].vertices[0].y);
// for (let j = 1; j < this.body.parts[i].vertices.length; j++) {
// this.ctx.lineTo(this.body.parts[i].vertices[j].x, this.body.parts[i].vertices[j].y);
// }
// this.ctx.lineTo(this.body.parts[i].vertices[0].x, this.body.parts[i].vertices[0].y);
// this.ctx.stroke();
// // for (let k = 0; k < this.body.parts[i].parts.length; k++) {
// // let part = this.body.parts[i];
// // let partpart = part.parts[k];
// // debugger;
// // this.ctx.beginPath();
// // this.ctx.lineWidth = 1;
// // this.ctx.strokeStyle = "#F00";
// // this.ctx.moveTo(this.body.parts[i].parts[k].vertices[0].x, this.body.parts[i].parts[k].vertices[0].y);
// // for (let j = 1; j < this.body.parts[i].parts[k].vertices.length; j++) {
// // this.ctx.lineTo(this.body.parts[i].parts[k].vertices[j].x, this.body.parts[i].parts[k].vertices[j].y);
// // }
// // this.ctx.lineTo(this.body.parts[i].parts[k].vertices[0].x, this.body.parts[i].parts[k].vertices[0].y);
// // this.ctx.stroke();
// // }
// }
// }
}
},
isFocused(){

1
src/components/MapConcernements.vue
View File

@ -143,6 +143,7 @@ export default {
if (query && query.length) {
// if we have a results
for (let body of query) {
console.log('mouse hover body.item_type', body.item_type);
if (!this.opened // if no concernement is opened
&& body.item_type === "concernement" // if it is a concernement
&& typeof this.concernementsByID[body.id] !== "undefined" // if the id exists

4
src/main.js
View File

@ -8,6 +8,10 @@ import '@csstools/normalize.css';
import '@mdi/font/css/materialdesignicons.css'
import './assets/main.scss'
// var decomp = require('poly-decomp');
// window.decomp = decomp;
const app = createApp(App)
// https://vuejs.org/guide/components/provide-inject.html#provide
app.config.unwrapInjectedRef = true;