jeudi 21 septembre 2023
Outil pour illustrer des articles de mathématique ou de physique en 2 ou 3 dimensions : axes, bases, points, segments, vecteurs, angles, etc.
On suppose que le script axes.js est disponible.
Exemple : si ce script est dans le dossier du fichier html, il faut inclure dans le fichier html la balise :
<script src="axes.js"></script>
Les dessins se font sur un canvas. Exemple de balise dans le fichier html :
<canvas id='fig0' width='200' height='200'></canvas>
L'obtention du contexte se fait grâce à la fonction initCtx.
Sa signature est initCtx(id, X, Y, u, dim) où :
Exemple : initCtx('fig0', 50, 150, 40, 2); utilisera le canvas identifié par 'fig0' et placera l'origine O à 50 du bord droit et à 150 à partir du haut. L'échelle du dessin sera de 40. Le dernier paramètre indique que l'on travaillera dans le plan.
Dans la suite je discuterai les deux situations Dans le plan, Dans l'espace.
L'objet fondamental est l'objet Pt.
Dans le plan : un objet Pt possède 4 attributs :
Dans l'espace : un point Pt possède 6 attributs :
Tous deux possèdent un attribut facultatif name le nom du point. e.g. "A"
Exemple
a = new Pt([1, 3], "A"); // dans le plana = new Pt([1, 2, 3], "A"); // dans l'espace
La fonction implicite reconnait la dimension de l'espace affine en dénombrant l'array donné comme premier paramètre.
Elle calcule ensuite les attributs X, Y.
O : origine du repère de coordonnées [0, 0], ou [0, 0, 0].
ctx : contexte graphique au sens de js. Ses attributs (publics) sont :
ctx.dim : 2 pour le plan
ctx.O_X et ctx.O_Y mais on préfèrera utiliser O.X et O.Y.
ctx.u l'échelle du tracé
ctx.fontSize la taille de la police (11 par défaut), qui peut être modifiée manuellement. e.g. ctx.fontSize = 12 ou à la volée.
cosphi et sinphi, par défaut cos(π/6) et sin(π/6). C'est l'angle $(\vec, -\vec{k})$.
C'est la même syntaxe aussi bien pour le plan que pour l'espace.
On suppose que les points A et B ont été définis par A = new Pt([ ...], "A") et B = new Pt[ .. ], "B").
A.ligne(B) trace le segment [AB].
Un argument facultatif true trace la ligne en pointillé, e.g. A.line(B, true).
A.arrow(B) trace le segment terminé (en B) par une flèche.
A.mark() trace un point, une sorte de petit disque.
Si le point A possède un attribut name, on peut marquer ce nom sur le contexte graphique par la fonction A.label(dX, dY). Ce nom apparaît à proximité du point avec un décalage de dX et dY.
Exemple : A.label(2, 10) à droite à 2 pixels et plus bas de 10 pixels.
Remarque j'écris pixel, mais CanvasRenderingContext2D semble fournir plusieurs pixels pour le prix d'un, puisqu'on peut faire ctx.lineWidth = 0.5 pour obtenir des traits fins.
La fonction label permet d'afficher le nom du point surmonté d'une flèche.
Exemple A.mark(2, 10, true) tracera $\vec{A}$.
On peut aussi utiliser une fonction vec(s, X, Y) pour inscrire tout autre texte surmonté d'une flèche.
Exemple : vec("AB", B.X + 2, B.Y + 4) tracera à proximité de B (2 à droite, 4 plus bas) $\vec{AB}$. C'est une sorte de ∖vec de LaTex.
Le code :
initCtx('fig1', 100, 100, 50, 2);axis();let A = new Pt([-1, -0.5], "A");let B = new Pt([1, 1], "B");A.mark(0, 10);A.label(0, 10);A.arrow(B);B.label(0, 10);vec("AB", B.X - 30, B.Y + 10);
donnera la figure :
Figure 1
La fonction axis() dessine les axes Ox, Oy (éventuellement Oz).
La fonction basis() trace les vecteurs $\vec{i}$, $\vec{j}$, (éventuellement $\vec{k}$). Une option axis(true) permet d'ajouter la lettre O.
On peut cumuler les deux :
axis();basis(); // sans l'argument true puisque O a été inscrit par axis
Exemple :
initCtx('fig2', 100, 150, 40, 3);basis(true);let A = new Pt([1, 3, 0.5]);let A3 = new Pt([1, 3, 0]);let B = new Pt([0, 2, 2]);O.arrow(A);O.arrow(B);O.arc(A, B);
affichera :
Figure 2
Le script axes.js est disponible ici : axes.js.
La fonction function proj(p) s'entend comme la projection de (x, y) ou (x, y, z) sur le plan du contexte graphique.