Introduction

Un logiciel dit de “géométrie dynamique” désigne un ensemble applicatif comprenant des outils qui permettent d’explorer de façon interactive les propriétés des objets géométriques. Ils permettent d’effectuer des opérations de nature géométrique (tracé de courbe, transformation, projection, …) tout en respectant les contraintes du milieu géométrique.

GeoGebra est un exemple de ce type de logiciel, vu pendant votre scolarité, permettant de manipuler des objets 2D et 3D.

L’objectif de ce projet est de concevoir, à l’aide de l’élément <canvas> et des API JavaScript le manipulant, un mini GeoGebra 2D. Celui-ci devra permettre le tracé de fonctions sur un plan en deux dimensions, de naviguer aisément dans ce plan, d’afficher un repère ainsi que les coordonnées et de modifier les propriétés de dessin de ces fonctions (taille du trait, couleur, …).

Géométrie dynamique avec <canvas>

Dans un logiciel de géométrie dynamique, le cadre (canvas) permet d’afficher une “vue” courante du plan 2d géométrique. Cette vue, caractérisée par son origine ainsi que ses dimensions, peut être modifiée selon les entrées utilisateur (déplacement, agrandissement, …). Il faudra alors distinguer une position dans le canvas d’une coordonnée dans le plan 2D géométrique.

• Créez un document HTML contenant un élément <canvas> de dimension 800x600.
• Affichez les bordures de cet élément en utilisant une feuille de style CSS.
• Dans un fichier JavaScript, concevez une structure de donnée permettant de décrire la vue courante. Vous en préciserez les valeurs initiales (par exemple, une vue qui a une origine (-4, -3) et de taille 8x6).
• Écrivez une fonction JavaScript permettant la conversion d’une position dans le <canvas> vers une coordonnée dans le plan 2D géométrique, ainsi que celle permettant la conversion inverse. Pensez à utiliser l’état courant de la vue ainsi que les propriétés du canvas.
• Mettez en place une fonction qui affiche la position de chaque clic utilisateur dans le canvas, la coordonnée correspondante dans le plan 2D ainsi qu’à nouveau la position dans la canvas mais cette fois-ci calculée depuis la coordonnée 2D.
• Écrivez une fonction Javascript qui dessine la courbe d’une fonction (paramétrée par x) point par point dans la vue courante. Le nombre de points est donné en paramètre. Vous pouvez tester cette fonction de dessin avec les fonctions mathématiques définies dans la bibliothèque standard JavaScript (Math.cos, Math.sin, …)
• Écrivez une fonction permettant de dessiner le plan cartésien: repère ainsi que les subdivisions. L’espace entre les subdivisions sera donné en paramètre de cette fonction. Attention à ne pas dessiner ce qui n’est pas dans la vue !
• Permettre à l’utilisateur de se déplacer dans le plan 2d à l’aide des touches du clavier.
• Permettre à l’utilisateur selon l’entrée utilisateur que vous choisirez (boutons, touches clavier, souris, …) d’agrandir et de rétrécir la vue.
• La bibliothèque math.js fournit un ensemble de fonctions compatible avec le module Math de JavaScript permettant l’analyse syntaxique et l’évaluation d’expressions mathématiques. Permettre à l’utilisateur de soumettre une nouvelle fonction à afficher ainsi que de choisir la couleur et l’épaisseur du trait (en utilisant les éléments HTML permettant ce choix de manière la plus accessible).
  • Ajout de la bibliothèque depuis HTML:

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.6.1/math.js"></script>
    

  • Exemple de compilation et évaluation d’une expression mathématique (JavaScript): ```javascript let code = math.compile(“sqrt(x^2) + 1”); // On précise la fonction sous forme de chaine de caractère

let scope = { x: 4 }; // valeur de x pour l’évaluation ci-dessous let y = code.evaluate(scope); // y = 5 ```

• Lister dynamiquement en HTML l’ensemble des fonctions renseignées par l’utilisateur.