Al momento i disegni così prodotti 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 \( \displaystyle {y}={\sin{{\left({x}\right)}}} \) e \( \displaystyle {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: Seleziona tutto
[asvg]
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
- essere scritte tra le etichette
- Codice: Seleziona tutto
[asvg]
[/asvg]
che possono essere inserite automaticamente nel messaggio premendo l'apposito bottone dell'editor oppure la combinazione di tasti ALT e.
- terminare con un punto e virgola
- essere scritte tra le etichette
- 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.
- { xmin = a; xmax = b; ymin = c; ymax = d; } axes(); specifica la regione del piano interessata al grafico, visualizza gli assi cartesiani
- { xmin = a; xmax = b; ymin = c; ymax = d; } noaxes(); specifica la regione del piano interessata al grafico, non visualizza gli assi cartesiani
- [ 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 \( \displaystyle {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: Seleziona tutto
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: Seleziona tutto
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: Seleziona tutto
[-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: Seleziona tutto
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: Seleziona tutto
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: Seleziona tutto
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: Seleziona tutto
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: Seleziona tutto
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: Seleziona tutto
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: Seleziona tutto
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: Seleziona tutto
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: Seleziona tutto
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: Seleziona tutto
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: Seleziona tutto
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 \( \displaystyle {f{{\left({x}\right)}}}={\left({{x}}^{{2}}-{1}\right)}\cdot{\ln}{\left|{{x}}^{{2}}-{1}\right|} \) si scriverà
- Codice: Seleziona tutto
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: Seleziona tutto
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: Seleziona tutto
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: Seleziona tutto
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: Seleziona tutto
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]);
}
}
