Graphiques interactifs — <mp-jsxgraph>
<mp-jsxgraph> est le système graphique natif de mathpad. Vous décrivez un plan mathématique en quelques lignes de JavaScript : axes, courbe de fonction, points, droites, cercles. Le résultat est un véritable dessin vectoriel, net au zoom, léger — le remplaçant idéal d'une image PNG figée le jour de sa création qui périme à la première correction.
Première courbe de fonction
Une parabole $y = x^2$ entre $x = -3$ et $x = 3$ :
HTML
<mp-jsxgraph width="480" height="360" bounds="-3.5,10,3.5,-1">
board.create('functiongraph',
[function(x) { return x*x; }, -3, 3],
{ strokeColor: 'red', strokeWidth: 2 }
);
</mp-jsxgraph>Rendu
board.create('functiongraph',
[function(x) { return x*x; }, -3, 3],
{ strokeColor: 'red', strokeWidth: 2 }
);
Attributs du graphique
| Attribut | Valeurs | Description |
|---|---|---|
| width | px (défaut 400) | Largeur. Mettez 300 pour mobile-friendly. |
| height | px (défaut 400) | Hauteur. |
| bounds | x_min, y_max, x_max, y_min | Cadre visible du plan mathématique. Ordre atypique : coin haut-gauche d'abord, puis bas-droit. Exemple : "-3.5,10,3.5,-1". |
| axis | true (défaut) | false | Dessine les axes avec les graduations. |
| grid | true | false (défaut) | Quadrillage de fond. |
| pan | true | false (défaut) | Si activé, l'élève peut déplacer le graphique à la souris. |
| zoom | true | false (défaut) | Si activé, zoom à la molette. |
| highlight | true | false (défaut) | Effet au survol sur les points et courbes. |
Statique par défaut
pan, zoom, highlight sont tous désactivés par défaut : le graphique est une figure fixe comme une image. Mathpad active automatiquement le défilement vertical naturel de la page quand l'élève passe le doigt sur le graphique — pas de blocage sur téléphone.
Objets courants
Points, étiquettes, segments
HTML
<mp-jsxgraph width="480" height="360" bounds="-1,5,5,-1" grid="true">
var A = board.create('point', [1, 1], { size: 3, color: 'red', fixed: true, withLabel: false });
var B = board.create('point', [4, 3], { size: 3, color: 'blue', fixed: true, withLabel: false });
board.create('segment', [A, B], { strokeColor: 'black', strokeWidth: 2 });
// Étiquettes placées à la main pour éviter le segment AB
board.create('text', [0.55, 0.5, 'A'], { fontSize: 16, fixed: true, strokeColor: 'red', useKatex: false, display: 'internal' });
board.create('text', [4.15, 3.5, 'B'], { fontSize: 16, fixed: true, strokeColor: 'blue', useKatex: false, display: 'internal' });
</mp-jsxgraph>Rendu
var A = board.create('point', [1, 1], { name:'', size: 3, color: 'red', fixed: true, withLabel: false });
var B = board.create('point', [4, 3], { name:'', size: 3, color: 'blue', fixed: true, withLabel: false });
board.create('segment', [[1, 1], [4, 3]], { strokeColor: 'black', strokeWidth: 2 });
board.create('text', [0.75, 0.65, 'A'], { fontSize: 16, fixed: true, strokeColor: 'red' });
board.create('text', [4.10, 3.30, 'B'], { fontSize: 16, fixed: true, strokeColor: 'blue' });
Tangente en un point
HTML
<mp-jsxgraph width="480" height="360" bounds="-1.5,4,4,-1" grid="true">
var f = function(x) { return 0.25*x*x; };
var cf = board.create('functiongraph', [f, -2, 4], { strokeColor: 'red', strokeWidth: 2, name: 'C', withLabel: false, dash: 0, strokeWidth: 2, highlight: false});
var tan = board.create('tangent',[ cf, A ], {id: 'tan', name : 'tan', fixed: true, strokeColor: 'rgb(0,150,255)', dash: 0, strokeWidth: 2, highlight: false});
Rendu
var f = function(x) { return 0.25*x*x; };
var cf = board.create('functiongraph', [f, -2, 4], { strokeColor: 'red', strokeWidth: 2, name: 'C', withLabel: false });
var A = board.create('glider', [2, 1, cf], { name: 'A', fixed: false, size: 3, color: 'black', label:{offset:[10,-15]} });
var tan = board.create('tangent',[ cf, A ], {id: 'tan', name : 'tan', fixed: true, strokeColor: 'rgb(0,150,255)', dash: 0, strokeWidth: 2, highlight: false});
Déplacer le point $A$
Cercle et géométrie
HTML
<mp-jsxgraph width="380" height="380" bounds="-3,3,3,-3" axis="false" grid="true">
var O = board.create('point', [0, 0], { name: 'O', fixed: true, size: 3 });
var circle = board.create('circle', [O, [2,0]], { strokeColor: 'purple', strokeWidth: 2 });
var M = board.create('glider', [2, 0, circle], { name: 'M', size: 3 });
board.create('segment', [O, M], { strokeColor: 'gray', dash: 2 });
</mp-jsxgraph>Rendu
var O = board.create('point', [0, 0], { name: 'O', fixed: true, size: 3 });
var circle = board.create('circle', [O, [2,0]], { strokeColor: 'purple', strokeWidth: 2 });
var M = board.create('glider', [2, 0, circle], { name: 'M', size: 3 });
board.create('segment', [O, M], { strokeColor: 'gray', dash: 2 });
Déplacer le point $M$
Formules dans les étiquettes
Vous pouvez écrire des étiquettes avec des formules : entrez du LaTeX entouré de $...$ dans name: ou dans le texte d'un objet text, mathpad le rend automatiquement.
HTML
<mp-jsxgraph width="480" height="360" bounds="-3.5,2,3.5,-2" grid="true">
board.create('functiongraph',
[function(x) { return Math.sin(x); }, -Math.PI, Math.PI],
{ strokeColor: 'red', strokeWidth: 2, name: '$f(x) = \\sin(x)$', withLabel: true }
);
board.create('text', [2, -1.5, '$y = \\sin(x)$'], { strokeColor: 'red', fontSize: 16 });
</mp-jsxgraph>Rendu
board.create('functiongraph', [function(x) { return Math.sin(x); }, -Math.PI, Math.PI], { strokeColor: 'red', strokeWidth: 2, name: '$f(x) = \\sin(x)$', withLabel: true });
board.create('text', [2, -1.5, '$y = \\sin(x)$'], { strokeColor: 'red', fontSize: 16 });
Format mobile
Mettez width="300" pour un graphique qui rentre dans 355 px de largeur d'écran. Une zone tactile de 16 px autour du graphique laisse l'élève faire défiler la page verticalement sans être bloqué quand il pose le doigt sur la figure. Si le graphique reste plus large, une barre de défilement horizontale apparaît automatiquement, avec une zone tactile au-dessus pour ne pas viser pile sur la barre.
Éditeur visuel dans l'IDE
Dans l'éditeur mathpad, le menu Graphiques → Figure (JSXGraph) ouvre un panneau où vous tracez points, segments, fonctions directement à la souris, puis vous fixez le cadre — l'éditeur génère le code
<mp-jsxgraph> prêt à coller dans le cours. Vous économisez la gestion manuelle des coordonnées et des styles. Si vous convertissez un .tex avec tikz/pstricks, ce sont des images PNG qui sont produites automatiquement — voir mp-figure.
Documentation JSXGraph complète
mathpad utilise directement la bibliothèque JSXGraph de l'université de Bayreuth. Tous les types d'objets (polygone, angle, ellipse, courbe paramétrique…) et toutes les options sont documentés sur jsxgraph.org/docs. Ce que vous voyez ici n'est qu'une sélection des fonctions les plus courantes.
Prêt à essayer mathpad ?
Créez votre premier document scientifique en HTML dans l'éditeur en ligne, ou importez votre cours LaTeX existant en un clic.