- GeoNext ha un'interfaccia grafica del tutto intuitiva. La procedura per inserire nel proprio messaggio le figure ottenute è illustrata nel video seguente (si consiglia di visualizzarlo in HD (720p) a tutto schermo):
Ecco alcuni esempi del tipo di grafici che si possono ottenere:
JSXGraph v.0.95 Copyright © visita http://jsxgraph.org/
JSXGraph v.0.95 Copyright © visita http://jsxgraph.org/ - GeoGebra anch'esso un'interfaccia grafica e il suo utilizzo è semplicissimo. La procedura per inserire nel proprio messaggio le costruzioni ottenute è illustrata nel video che segue (si consiglia di visualizzarlo a tutto schermo).
N.B. Siccome è richiesto il plugin Java per l'esecuzione, si consiglia di limitare l'uso di GeoGebra nei propri post alle sole costruzioni dinamiche e di usare GeoNext o ASCIIsvg per le normali figure geometriche. - Qui di seguito è quindi spiegato il solo utilizzo di ASCIIsvg.
Al momento i disegni prodotti con ASCIIsvg possono essere visualizzati soltanto usando Internet Explorer, unitamente al plugin SVG Viewer di Adobe (scaricabile gratuitamente), Mozilla/Firefox, Opera 9.5 o superiore, Google Chrome oppure Safari 3 o superiore.
Ecco un esempio: il grafico delle funzioni $y=\sin(x)$ e $y=x^2-2$.Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico
Per ottenere questo risultato è stato inserito nel messaggio il seguente testo- Codice:
[asvg]
width=550; // specifica la larghezza della figura (in pixel)
height=550; // specifica l'altezza della figura (in pixel)
axes(); // visualizza gli assi
stroke="red"; // seleziona il colore rosso
plot("sin(x)"); // disegna la funzione seno
stroke="green"; // seleziona il colore verde
plot("x^2-2"); // disegna la conica d'equazione y = x^2 - 2
[/asvg]
Qui di seguito potete trovare un elenco e una breve guida ai comandi principali e alcune note sulla sintassi da usare (è la stessa di JavaScript). Notare che non è necessario conoscere alcun linguaggio di programmazione per realizzare semplici grafici, basta rispettare le prime tre regole che seguono e conoscere i comandi specifici per tracciare le linee. Potete anche semplicemente copiare e riadattare gli esempi scritti nei box Codice.
Sintassi
La sintassi è, come detto, la stessa di JavaScript con le seguenti avvertenze:- tutte le istruzioni devono
- i numeri decimali tra -1 e 1 devono avere uno zero iniziale: es. 0.7 e non .7
- utilizzare una delle due istruzioni axes(), eventualmente specificando gli intervalli degli assi x e y (vedi oltre), oppure noaxes()
- le istruzioni dei cicli di iterazione while e for devono essere racchiuse tra parentesi graffe (non è necessario inserire un punto e virgola dopo quella di chiusura)
- tutte le variabili devono essere dichiarate preventivamente con la parola chiave var, cioè per iniziare a usare per esempio una variabile di nome zeta bisogna scrivere var zeta;
Elenco comandi
Nota: nel seguito con le lettere minuscole a,b,... si indicano dei numeri reali qualsiasi, con A, B, C dei generici punti. Il testo tra parentesi graffe è opzionale per un dato comando.- {width = w; height = h;xmin = a; xmax = b; ymin = c; ymax = d; } axes(); specifica la regione del piano interessata al grafico, visualizza gli assi cartesiani
- { width = w; height = h;xmin = a; xmax = b; ymin = c; ymax = d; } noaxes(); specifica la regione del piano interessata al grafico, non visualizza gli assi cartesiani
N.B. width e height devono sottostare alle condizioni: \( 300 \le \text{width} \le 700 \), \( 200 \le \text{height} \le 700 \). - [ a , b ] è la notazione per indicare il punto del piano di coordinate a e b
- dot( [a,b] ) disegna il punto specificato tra parentesi
- line( [a, b] , [c, d] ) traccia il segmento avente per estremi i punti [a, b] e [c, d]
- marker = "marcatore" imposta il marcatore dot, arrow, arrowdot, none (valore di default), cioè il simbolo grafico da usare come estremo nelle linee o come punti intermedi nelle spezzate e curve poligonali
- stroke = "colore" imposta il colore da usare nei successivi comandi di disegno
- strokewidth = "dimensione" imposta la grossezza in pixel del tratto
- circle( [x, y] , r ) disegna un cerchio avente per origine il punto [x, y] e raggio r
- ellipse( [x, y] , rx , ry) disegna un'ellisse avente centro nel punto [x, y] , asse orizzontale uguale a rx, asse verticale ry
- rect( [x, y] , [u, v] ) disegna un rettangolo avente il vertice inferiore sinistro nel punto [x, y] e il vertice superiore destro nel punto [u, v]
- fill = "colore" imposta il colore di riempimento
- path( [ [x1, y1] , [x2, y2] , ... , [xn, yn] ] ) traccia una sottile linea congiungente nell'ordine i punti [x1, y1], ..., [xn, yn]
- plot("f(x)") traccia il grafico della funzione f(x)
- arc( [x,y] , [u,v] , r ) disegna un arco di cerchio in senso orario da [x,y] a [u,v] con raggio r.
- text( [x,y] , "etichetta" , posizione ) aggiunge del testo nel punto [x,y] nella posizione specificata (above, below, left, right, aboveleft, aboveright, belowleft, belowright)
- Math.E la costante $e$, base dei logaritmi naturali
- Math.LN2 logaritmo in base 2
- Math.LN10 logaritmo in base 10
- Math.PI pigreco
- Math.SQRT2 radice di 2
- { xmin = a; xmax = b; ymin = c; ymax = d; } axes(); imposta il sistema di coordinate (di norma xmin, xmax, ymin, ymax hanno il valore 5, quindi possono anche essere omessi. Se non si vuole visualizzare gli assi cartesiani basta sostituire axes() con noaxes()
È possibile anche aggiungere una scala sugli assi e/o una griglia tramite i parametri "labels" e "grid" nel seguente modo:- Codice:
axes("labels", "grid");
Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico
Ovviamente si può specificare sia la scala da usare che l'ampiezza delle maglie della griglia così:- Codice:
axes(1,2, "labels", 2, 2, "grid");
Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico - [ a , b ] è la notazione per indicare il punto del piano di coordinate a e b. Ad esempio per indicare il punto di coordinate x = -4 e y = 6.8 si scriverà
- Codice:
[-4, 6.8]
Per comodità, ad esempio nel caso il punto venga usato più volte nel codice che realizza il grafico, è possibile assegnare le coordinate a una variabile, cioè creare una sorta di nome mnemonico da utilizzare al posto della scrittura estesa delle coordinate. Ad esempio, si potrebbe indicare il punto visto sopra con la lettera P (o una qualsiasi altra lettera anche minuscola o parola) scrivendo:- Codice:
var P = [-4, 6.8];
A questo punto nelle istruzioni successive si potrà semplicemente scrivere P. - dot( [a,b] ) disegna il punto specificato tra parentesi, cioè avente coordinate a e b. Esempio:
- Codice:
axes();
dot([-1, -1]); // disegna il punto di coordinate x=-1 e y=-1
var A = [3,2]; // crea una variabile di nome A alla quale è assegnato il punto di coordinate x=3, y=2
dot(A); // disegna il punto A
var punto1 = [-4, 4.2]; // crea la variabile punto1 e le assegna le coordinate x = -4, y = 4.2
dot(punto1); // disegna punto1
Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico - line( [a, b] , [c, d] ) traccia il segmento avente per estremi i punti [a, b] e [c, d]. Esempio:
- Codice:
axes();
line([-4, 0], [4, 4]); // traccia il segmento di estremi P(-4, 0), Q(4, 4)
line([3, -3.5], [3, 2]); // traccia il segmento di estremi R(3, -3.5), M(3, 2)
Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico - marker = "marcatore" imposta il simbolo da usare come estremo nelle linee o come punti intermedi nelle spezzate e curve poligonali. La parola marcatore deve essere una delle seguenti: dot, arrow, arrowdot, none (valore di default). Ecco un esempio d'uso dei vari marcatori:
- Codice:
axes();
marker = "dot";
line([1,1], [4,4]);
marker = "arrow";
line([-1,1],[-4,4]);
marker = "arrowdot";
line([-1,-1],[-4,-4]);
marker = "none";
line([1,-1],[4,-4]);
Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico - stroke = "colore" imposta il colore da usare nei successivi comandi di disegno. colore è il nome in inglese di uno dei colori standard HTML. Esempio
- Codice:
axes();
stroke = "mediumaquamarine"; // seleziona il colore mediumaquamarine
line([-4, 0], [4, 4]); // traccia il segmento di estremi P(-4, 0), Q(4, 4)
stroke = "lightsalmon"; // seleziona il colore lightsalmon
line([3, -3.5], [3, 2]); // traccia il segmento di estremi R(3, -3.5), M(3, 2)
Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico - strokewidth = "dimensione" imposta la grossezza in pixel del tratto. dimensione è chiaramente un numero intero positivo. Esempio
- Codice:
noaxes();
line([-4,4], [4,4]);
strokewidth=6;
line([4,4], [4,-4]);
strokewidth=3;
line([4,-4], [-4,4]);
Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico - circle( [x, y] , r ) disegna un cerchio avente per origine il punto [x, y] e raggio r. Esempio
- Codice:
axes();
circle([-1,-1], 3);
Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico - ellipse( [x, y] , rx , ry) disegna un'ellisse avente centro nel punto [x, y] , asse orizzontale uguale a rx, asse verticale ry. Esempio
- Codice:
axes();
ellipse([0, 0], 4, 2);
Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico - rect( [x, y] , [u, v] ) disegna un rettangolo avente il vertice inferiore sinistro nel punto [x, y] e il vertice superiore destro nel punto [u, v]. Esempio
- Codice:
axes();
rect([-2,3],[4,4]);
Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico - fill = "colore" imposta il colore di riempimento di figure chiuse nei successivi comandi di disegno. colore è il nome in inglese di uno dei colori standard HTML. Esempio
- Codice:
noaxes();
fill="lightyellow";
rect([-2,3],[4,4]);
fill="dodgerblue";
circle([0,0], 3);
Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico - path( [ [x1, y1] , [x2, y2] , ... , [xn, yn] ] ) traccia una sottile linea congiungente nell'ordine i punti [x1, y1], ..., [xn, yn]. Se il primo e l'ultimo punto specificato coincidono, la linea tracciata è chiusa. Notare che i punti vanno racchiusi tra una coppia di parentesi quadre. Esempio
- Codice:
noaxes();
path( [ [-4,-1],[4,-1],[-1,4],[-3,4],[-4,-1] ] );
Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico - plot("f(x)") traccia il grafico della funzione f(x), espressa con la consueta notazione ASCIIMathML. Per esempio per tracciare il grafico della funzione $f(x) = (x^2-1) \cdot ln|x^2-1|$ si scriverà
- Codice:
xmin=-2.5; xmax=2.5;
ymin=-1;
axes("labels");
stroke="blue";
plot("(x^2-1) * log( abs(x^2-1) )");
Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico - arc( [x,y] , [u,v] , r ) disegna un arco di cerchio in senso orario da [x,y] a [u,v] con raggio r. Il valore di r deve essere chiaramente maggiore o uguale alla metà della distanza tra i due punti. Esempio
- Codice:
xmin = 0; xmax = 4;
noaxes();
line([0,0],[4,0]);
stroke="gold";
arc([4,0], [0,0], 2);
stroke="magenta";
arc([4,0], [0,0], 3);
stroke="green";
arc([4,0], [0,0], 4);
stroke="red";
arc([4,0], [0,0], 5);
Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico - text( [x,y] , "etichetta" , posizione ) scrive il contenuto tra i doppi apici (etichetta) relativamente al punto [x,y], cioè nella posizione specificata da posizione, che può assumere i valori above (sopra), below (sotto), left (sinistra), right (destra), aboveleft (sopra a sinistra), aboveright (sopra a destra), belowleft (sotto a sinistra), belowright (sotto a destra). Esempio
- Codice:
xmin=-4; xmax=4;
noaxes();
var N = [0,3]; dot(N);
text(N, "N", above);
var NE = [3,3]; dot(NE);
text(NE, "NE", aboveright);
var NW = [-3,3]; dot(NW);
text(NW, "NW", aboveleft);
var Ee = [3,0]; dot(Ee);
text(Ee, "E", right);
var W = [-3,0]; dot(W);
text(W, "W", left);
var S = [0,-3]; dot(S);
text(S, "S", below);
var SE = [3,-3]; dot(SE);
text(SE, "SE", belowright);
var SW = [-3,-3]; dot(SW);
text(SW, "SW", belowleft);
Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico
Ecco infine un paio di esempi di come è possibile colorare/evidenziare una regione del piano delimitata da curve arbitrarie:Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico
Il grafico è stato ottenuto disegnando delle rette verticali tramite una piccola funzione Javascript- Codice:
var incr = 0.05; // distanza tra due rette verticali
var xm = 3.14;
var xi = xm/incr;
function fillRegion (xmin, xmax, color) {
var x1, y1,y2, x;
stroke=color;
for (x=xmin; x< xmax; x++) {
x1 = incr*x;
y1 = Math.sin(x1);
y2 = Math.sin(x1)+1;
// traccia la retta
line([x1,y1 ], [x1, y2]);
}
}
fillRegion(0, xi, "cadetblue");
Altro esempio:Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico
usando la seguente funzione JavaScript- Codice:
function fillRegion (xmin, xmax, ymax, color) {
var x1, y1, x;
stroke=color;
for (x=xmin; x< xmax; x++) {
x1 = incr*x;
// coordinata y della funzione
y1 = Math.abs(Math.sin(x1)*x1);
// traccia la retta
line([x1,ymax ], [x1, y1]);
}
}