Grafici interattivi — <mp-jsxgraph>
<mp-jsxgraph> è il sistema grafico nativo di mathpad. Descrivi un piano matematico in poche righe di JavaScript: assi, curva di funzione, punti, rette, cerchi. Il risultato è un vero disegno vettoriale, nitido allo zoom, leggero — il sostituto ideale di un'immagine PNG congelata il giorno della sua creazione che diventa obsoleta alla prima correzione.
Prima curva di funzione
Una parabola $y = x^2$ tra $x = -3$ e $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>Risultato
board.create('functiongraph',
[function(x) { return x*x; }, -3, 3],
{ strokeColor: 'red', strokeWidth: 2 }
);
Attributi del grafico
| Attributo | Valori | Descrizione |
|---|---|---|
| width | px (predefinito 400) | Larghezza. Metti 300 per mobile-friendly. |
| height | px (predefinito 400) | Altezza. |
| bounds | x_min, y_max, x_max, y_min | Cornice visibile del piano matematico. Ordine atipico: prima l'angolo in alto a sinistra, poi quello in basso a destra. Esempio: "-3.5,10,3.5,-1". |
| axis | true (predefinito) | false | Disegna gli assi con le graduazioni. |
| grid | true | false (predefinito) | Griglia di sfondo. |
| pan | true | false (predefinito) | Se attivato, lo studente può spostare il grafico con il mouse. |
| zoom | true | false (predefinito) | Se attivato, zoom con la rotellina. |
| highlight | true | false (predefinito) | Effetto al passaggio del mouse su punti e curve. |
Statico per impostazione predefinita
pan, zoom, highlight sono tutti disattivati per impostazione predefinita: il grafico è una figura fissa come un'immagine. Mathpad attiva automaticamente lo scorrimento verticale naturale della pagina quando lo studente passa il dito sul grafico — nessun blocco sul telefono.
Oggetti comuni
Punti, etichette, segmenti
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>Risultato
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 in un punto
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});
Risultato
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$
Cerchio e geometria
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>Risultato
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$
Formule nelle etichette
Può scrivere etichette con formule: inserisci LaTeX racchiuso tra $...$ in name: o nel testo di un oggetto text, mathpad lo renderizza automaticamente.
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>Risultato
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 });
Formato mobile
Metti width="300" per un grafico che rientra in 355 px di larghezza dello schermo. Una zona tattile di 16 px attorno al grafico permette allo studente di scorrere la pagina verticalmente senza bloccarsi quando appoggia il dito sulla figura. Se il grafico resta più largo, appare automaticamente una barra di scorrimento orizzontale, con una zona tattile sopra per non dover mirare esattamente sulla barra.
Editor visuale nell'IDE
In the mathpad editor, the menu Graphics → Figure (JSXGraph) opens a panel where you draw points, segments, functions directly with the mouse, then set the viewport — the editor generates the ready-to-paste
<mp-jsxgraph> code. You skip the manual handling of coordinates and styles. If you convert a .tex with tikz/pstricks, PNG images are produced automatically instead — see mp-figure.
Documentazione JSXGraph completa
mathpad utilizza direttamente la libreria JSXGraph dell'Università di Bayreuth. Tutti i tipi di oggetti (poligono, angolo, ellisse, curva parametrica…) e tutte le opzioni sono documentati su jsxgraph.org/docs. Ciò che vedi qui è solo una selezione delle funzioni più comuni.
Pronto a provare mathpad?
Crei il suo primo documento scientifico in HTML nell'editor online, o importi il suo corso LaTeX esistente con un solo clic.