m2d - MathALEA 2D

MathALEA 2D doit permettre de générer toutes les figures de géométrie utiles à l'enseignement des mathématiques avec un export svg, un export LaTeX et une version interactive.

Licence

Ce programma a été développé par Rémi Angot et Jean-Claude Lhote à partir de février 2021 sous licence AGPL pour reconstruire le travail fait sous MathALEA2D avec l'interactivité en plus et une programmation davantage orienté objet.

Pour le tester en local

• Récupérer le dépôt
• pnpm install
• pnpm start pour lancer la compilation et le serveur de ViteJs

Le fichier src/main.ts permet de faire des tests de constructions/

Principes de fonctionnement

Principe général

On créé un objet figure instance de la classe Figure qui stockera toutes les information sur le container SVG (width, height, xMin, yMin...) et les éléments de ce SVG (sauvegardés dans figure.set pour ceux qui ont besoin d'un tracé). figure a notamment 2 propriétés figure.svg et figure.latex qui permettent de récupérer le code SVG ou TikZ de la figure.

Les objets graphiques sont des instances d'objets d'une sous classe de Element2D qui ont un paramètre g qui sera un groupe SVG ou un simple élément qui est automatiquement ajouté au svg de la figure.

Les nombres utilisés comme par exemple les rapports d'homothétie ou les angles de rotation sont des instances d'objets d'une sous classe de Measure. L'objet Cursor par exemple fournit l'un de ces nombres et peut agir comme un variateur pour des constructions paramétrées.

const figure = new Figure()
const A = figure.point(x, y) // ou const A = new Point(figure, x, y)
const B = figure.point(x, y)
const sAB = figure.segment(A, B) // ou const sAB = new Segment(A, B)

Les objets Element2D peuvent être stylisés

• color : pour changer la couleur
• thickness : pour changer l'épaisseur
• dashed: booléen pour les pointillés
• size : pour la taille des points
• fill : couleur de remplissage
• opacity : pour l'opacité de tout le groupe
• fillOpacity : pour l'opacité du remplissage

ToDo

• Bspline
• SegmentCode
• Cube
• Codage segment
• Codage arc
• Texte le long d'un segment
• Repère
• Courbe représentative de fonctions
• Calculs d'aires
• ...

Les dépendances

childs: {element: Element2D, type: string}[]

Exemple :

• Quand on créé un segment [AB], on prévient A que le segment dépend de lui avec A.addChild(this).
• Lorsque A est déplacé, il exécute après son déplacement notifyAllChilds() qui parcourt la liste de ces dépendances.
• Comme le segment est dans sa liste de dépendance on appelle la méthode update() du segment.

Avec un fonctionnement en cascade chaque objet prévient ses dépendances pour qu'elles se mettent à jour. Dans chaque objet, la il y a la méthode update pour calculer les nouvelles coordonnées et la liste des paramètres nécessaires à ce nouveau calcul (l'antécédent de la transformation, les éléments caractéristiques de la transformation...)

Les coordonnées

Il y a 3 systèmes de coordonnées donc la convention suivante est utilisée en interne :

• les coordonnées par rapport à la fenêtre (notamment celles de la souris)
• les coordonnées à l'intérieur du SVG (avec l'axe y du haut vers le bas) sont préfixées avec s : sx, sy ...
• les coordonnées dans notre repère personnalisée ne sont pas préfixées x : x1, x2 ... (Un type Coords = { x: number, y: number} est défini pour manipuler des littéraux adaptés aux calculs et aux transformations sans avoir à créer des points intermédiaires)

Le paramètre pixelsPerUnit (par défaut à 30) permet de déterminer la conversion des coordonnées du repère vers celle du SVG. Pour la sortie LaTeX, l'unité correspondra à 1 cm.

Les arrondis

On travaille avec les décimaux de JS. Pour l'affichage LaTeX dans Figure.ts > get latex on arrondit à 3 chiffres après la virgule. Dans textByPosition.ts, on arrondit à un chiffre après la virgule.

Measures

Un objet enfant de Element2D peut dépendre d'un autre objet enfant de Element2D ou enfant de Measure qui est une classe abstraite pour des valeurs numériques dynamiques. Parmi les enfant de Measure on trouve Cursor ou Angle ou encore Distance. Un point peut être défini par homothétie en utilisant un rapport de type number ou Measure. Dans ce dernier cas, on pourra faire varier le rapport d'homothétie dynamiquement avec, par exemple, un objet Cursor.

Gestion de la sauvegarde

• Figure possède un compteur lastId qui est incrémenté à chaque création d'enfants de Element2D.
• Chaque élément a un id unique : element.id.
• Sauvegarde : [ {className, arguments, color, thickness, dashed}, {className, arguments, color, thickness, dashed}, ] Où arguments est la liste des arguments du constructeur (strings ou numbers) dans le même ordre que pour le constructeur