Come disegnare grafici

Messaggioda stan » 12/02/2008, 23:19

In questo forum è possibile utilizzare GeoNext, GeoGebra, oppure ASCIIsvg per disegnare grafici e figure.

  • 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:





  • 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:

    1. tutte le istruzioni devono
      1. essere scritte tra le etichette
        Codice:
        [asvg]


        [/asvg]


        che possono essere inserite automaticamente nel messaggio premendo l'apposito bottone dell'editor oppure la combinazione di tasti ALT e.

        Immagine
      2. terminare con un punto e virgola
    2. i numeri decimali tra -1 e 1 devono avere uno zero iniziale: es. 0.7 e non .7
    3. utilizzare una delle due istruzioni axes(), eventualmente specificando gli intervalli degli assi x e y (vedi oltre), oppure noaxes()
    4. 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)
    5. 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)
    Costanti principali
    • 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
    Qui di seguito vengono illustrati più in dettaglio i vari comandi con l'aiuto di un esempio.

    • { 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]);
             }
    }
Avatar utente
stan
Supporto tecnico
Supporto tecnico
 
Messaggio: 431 di 1859
Iscritto il: 02/03/2006, 21:20
Località: Un luogo geometrico

Re: Come disegnare grafici

Messaggioda marcosocio » 06/01/2013, 20:08

Forse è una domanda stupida, ma come si disegna una funzione definita a tratti con ASCIIsvg?
marcosocio
Junior Member
Junior Member
 
Messaggio: 18 di 331
Iscritto il: 29/12/2012, 19:23
Località: Torino

Re: Come disegnare grafici

Messaggioda stan » 06/01/2013, 23:07

Specificando gli estremi degli intervalli tramite le variabili xmin e xmax. Esempio:

Codice:
xmin=-3;xmax=0; // intervallo prima funzione
plot("x-1");

xmin=0; xmax=1; // intervallo seconda funzione
plot("-x^2-1");

xmin=1;xmax=3; // intervallo terza funzione
plot("x-3");


        Internet Explorer richiede Adobe SVG Viewer per visualizzare il grafico

Avatar utente
stan
Supporto tecnico
Supporto tecnico
 
Messaggio: 865 di 1859
Iscritto il: 02/03/2006, 21:20
Località: Un luogo geometrico

Re: Come disegnare grafici

Messaggioda marcosocio » 06/01/2013, 23:12

Grazie mille!
marcosocio
Junior Member
Junior Member
 
Messaggio: 22 di 331
Iscritto il: 29/12/2012, 19:23
Località: Torino

Re: Come disegnare grafici

Messaggioda stan » 06/01/2013, 23:15

Prego. :)
Avatar utente
stan
Supporto tecnico
Supporto tecnico
 
Messaggio: 866 di 1859
Iscritto il: 02/03/2006, 21:20
Località: Un luogo geometrico

Re: Come disegnare grafici

Messaggioda Eustein » 10/06/2016, 17:25

Scusate,
sembra che Geonext richieda Java 7 per funzionare, ma i computer sono già aggiornati con Java 8, e Java 7 risult non più disponibile sul web.
Inoltre Java blocca Geogebra e l'altro programma per motivi legati alla sicurezza.
Vorrei inserire un grafico.
Qualcuno può aiutarmi?
Grazie
Distinti saluti
Massimo
Eustein
Starting Member
Starting Member
 
Messaggio: 1 di 16
Iscritto il: 07/06/2016, 20:57

Re: Come disegnare grafici

Messaggioda Eustein » 29/06/2016, 12:50

Nel frattempo sono riuscito a superare le difficoltà e ad inserire il grafico.
Ma se voglio postare un altro messaggio sullo stesso argomento (Rotazione assi spazio-tempo) e inserire un altro messaggio e un altro grafico, senza cancellare il precedente, devo rispondere a me stesso o agire in qualche altro modo?

Grazie
Saluti
Massimo
Eustein
Starting Member
Starting Member
 
Messaggio: 2 di 16
Iscritto il: 07/06/2016, 20:57


Torna a Questioni tecniche del Forum (NON di matematica)

Chi c’è in linea

Visitano il forum: Nessuno e 2 ospiti