Thomas Zilliox
Intégrateur CSS Freelance à Lyon

Faire de la triangulation en JavaScript

Ma passion pour les énigmes n'est plus un secret. L'année dernière j'ai même co-crée Zupple, un jeu d'énigmes dans les rues de Lyon. C'est un nouveau concept qui reprend le game play de Pokémon Go et les mécanismes des escapes games.

Ces derniers temps la plupart de mon temps libre s'évanouit dans la recherche de trésors, et plus particulièrement celui de La Toile Mystérieuse. J'adore ! On a l'impression de se plonger dans les histoires de notre enfance, mais cette fois-ci il y a un vrai trésor au bout. Dans les faits, on passe ses soirées sur Wikipédia à chercher des indices. L'occasion parfaite d'en apprendre plus sur les méthodes de construction des navirres de guerre sous Louis XIV. Honnêtement, je ne vois pas de meilleures occasions de se perdre sur internet.

Il s'agit de nos premières chasses, et on n'a encore jamais connu l'excitation d'aller creuser. J'espère que ça arrivera un jour. En attendant, un bon aventurier doit savoir s'équiper, d'une pelle bien-sûr, mais pas seulement. Nous avions surtout besoin d'un outil pour pouvoir faire des triangulations pour gagner en rapidité et en précision.

Capture d'écran de notre outil

Après un appel à l'aide sur les réseaux sociaux, on m'a pointé du doigt la bibliothèque JavaScript Turf.js. C'est exactement ce dont on avait besoin (merci aux copains). On s'est donc créé un petit calculateur qui nous indique les lieux possibles à partir de deux points et de deux distances.

Pour ceux qui voudraient savoir un peu à quoi ça ressemble sous le capot, voici le code de notre premier essai. La documentation de Turf.js est très bien faite, il faut quand même apprendre du vocabulaire spécifique à la cartographie. Ah si, attention, les coordonnées commencent par la latitude 😅

const center1 = [1.56, 44.58];
const distance1 = 127;
const circle1 = turf.circle(center1, distance1, {
  steps: 1000,
  units: "kilometers"
});

const center2 = [1.89, 44.97];
const distance2 = 89;
const circle2 = turf.circle(center2, distance2, {
  steps: 1000,
  units: "kilometers"
});

const intersections = turf.lineIntersect(circle1, circle2);
console.log(intersections);
// Outputs: [1.49712, 45.72128] and [3.01305, 45.07238]

Bonne chasse à tous, Thomas.

That's my face!

Thomas ZILLIOX

L'homme qui murmurait à l'oreille des chevrons.

Je développe, j'intègre, je forme ou je conseille sur les CSS. Besoin d'améliorer la maintenabilité ou les performances de vos projets ?