In rete

Per fare disegni SVG creati con funzioni esterne - Versione 20120723

Cerca le funzioni di definizione del disegno nel file path-esterno-0.txt

dove deve essere definita la function pilota fapath() che produce un vettore di dimensione massima 10, con le sequenze degli spostamenti usati per il disegno. Nel seguito viene spiegato come va fatta questa funzione. Si noti che il disegno non è fatto da semplici linee ma di segmenti doppi che collegano punti rappresentati da cerchietti di dimensioni specificabili...

L'area disegnabile è di 960 di larghezza ( ascissa da 0 a sinistra a 960 a destra ) per 1200 di altezza ( ordinata da 0 in alto a 1200 in basso ).

Le direttive del <path>

La libreria in JavaScript

La function fapath() deve generare un vettore i cui elementi specificano un disegno indipendente dagli altri, fino ad un massimo di 10 disegni numerati da 0 a 9.

Ogni elemento del vettore dei disegni creato con la function fapath() deve essere un vettore di tre elementi il primo dei quali costituito da una stringa che specifica il movimento assoluto del baricentro del disegno, il secondo deve essere un numero che specifica la semilarghezza dei segmenti da generare ed il terzo elemento è il vettore dei punti della spezzata.

Per semilarghezza si intende l'area del cerchietto disegnato attorno al punto specificato.

Il movimento assoluto del baricentro va indicato con una stringa di questo tipo: "M 300 500" che impone uno spostamento a destra di 300 pixel e in basso di 500 pixel.

La semilarghezza dovrebbe essere un numero abbastanza piccolo tipo 2 o 3 per evitare di fare segmenti troppo larghi ma nulla vieta di fare segmenti spessi ossia disegnare cerchietti di raggio maggiore di 15 o più...

Il vettore della spezzata deve avere ogni elemento costituito da un vettore di tre elementi, il primo specifica l'ascissa, il secondo l'ordinata ed il terzo elemento deve essere il peso da attribuire al punto nel calcolo del baricentro del disegno. Se un punto ha peso non positivo, viene ignorato e serve solo per specificare la direzione del segmento che inizia dal punto precedente.

L'ascissa, l'ordinata e il peso possono essere espressi

• come semplici numeri... ricordando che in Javascript va usato il punto e non la virgola per specificare le cifre decimale
• come stringhe. Se si tratta di un numero viene usato direttamente mentre se è una stringa , la stringa viene valutata con la function eval e viene usato il numero prodotto da questa valutazione della stringa.

Nel caso di uso di stringhe le function da usare sono quelle standard della libreria Math di Javascript ossia sin, cos, sqrt, pow etc...

Ora ha usato i seguenti dati per fare il disegno visualizzato

...

Per essere più chiari esaminiamo un caso pratico in cui vengono usate funzioni matematiche Javascript.

Come esempio di disegno si consideri il seguente che produce due triangoli:

 var duetriangoli = [ ["100*cos(20*PI/180)","100*sin(20*PI/180)",1],
                     ["100*cos(140*PI/180)","100*sin(140*PI/180)",1],
                     ["100*cos(260*PI/180)","100*sin(260*PI/180)",1],
                     ["100*cos(20*PI/180)","100*sin(20*PI/180)",0] ,
                     ["240+110*cos(25*PI/180)","110*sin(25*PI/180)",1],
                     ["240+110*cos(145*PI/180)","110*sin(145*PI/180)",1],
                     ["240+110*cos(265*PI/180)","110*sin(265*PI/180)",1],
                     ["240+110*cos(25*PI/180)","110*sin(25*PI/180)",0]
                   ];

Come esempio di function capace di usare il precedente disegno di due triangoli si consideri questo:

function fapath(){
        var ss=[];
        ss[0]=["M 600 450",3,duetriangoli];
        return ss;
        }

Dunque il baricentro del disegno 0_esimo ( il solo definito da questa fapath() ) sarà in ascissa 600 ed ordinata 400, il raggio dei cerchietti attorno ai punti sarà 3 e come vettore dei punti sarà usato il vettore duetriangoli che contiene le terne di valori per ciascun punto ossia l'ascissa, l'ordinata ed il peso...

Anche se possono non essere disponibili ossia non posti in questa stessa cartella, elenco qui un po' di file che, rinominati path-esterno-0.txt ossia nel modo richiesto qui, potrebbero venire usati per pilotare questa pagina.

• path-esterno-1.txt
• path-esterno-2.txt
• path-esterno-3.txt
• path-esterno-4.txt
• path-esterno-5.txt
• path-esterno-6.txt
• path-esterno-7.txt
• path-esterno-8.txt
• path-esterno-9.txt

La prassi consigliata è creare una cartella dedicata ad una serie di disegni in qualche modo legati tra loro concettualmente ed in questa cartella ricopiare questa pagina in modo che questa pagina possa accede al file locale path-esterno-0.txt e sia facile rinominare altri file in modo da ribattezzarli col nome richiesto da questa pagina...

Qui visualizza eventualmente le funzioni più significative di questa pagina...

Come funzioni da usare nella stringa che specifica la posizione di un nodo è possibile usare la sqrt(x) ossia la radice quadrata e la funzione dell'elevamento ad una potenza anche frazionaria, ossia calcola   y = x^m   attivabile scrivendo pow(x,m). In pratica sono usabili tutte le funzioni della libreria Math di JavaScript ma se l'utente definisce una qualche sua funzione personale può usare anche quella...

Un esempio pratico di file da usare esternamente

Per maggiore chiarezza trascrivo qui il testo di un file usabile, se chiamato path-esterno-0.txt da questa pagina :

// 
//  Specifica il PATH
//  Ogni punto è caratterizzato da ascissa, ordinata e
//  peso nel calcolo del baricentro della figura.
//  Qui disegno varie figure indipendenti indicando, per
//  ognuna dove va messo il baricentro e il raggio dei cerchietti
//  che definiscono la coppia di segmenti.
//
//  Ogni disegno puo' essere fatto da punti assegnati ossia
//  numeri come faccio per la variabile nodi0
//  oppure puo' essere ottenuto tramite calcoli quando uso
//  una stringa delimitata da doppi apici.
//  Qui uso le funzioni trigonometriche del coseno ( cos) e
//  del seno ( sin ) mentre PI indica il valore di
//  pigreco ossia 3.14159265358979 ...
//
function fapath(){
        var ss=[];
        ss[0]=["M 700 480",3,nodi3];
        ss[1]=["M 500 950",12.5,nodi4];
        ss[2]=["M 250 200",3.5,duetriangoli];
        ss[3]=["M 300 600",2,nodi0];
        ss[4]=["M 300 900",4,star];
        ss[5]=["M 700 900",7,star10];
        return ss;
        }
//
// Esagoni
//
var nodi0= [ [-56,  97, 0.5], [-112, 0, 1  ], [-56, -97, 1 ],  
           [ 56, -97, 1], [ 112, 0, 1 ], [ 56,  97, 1  ], [-56,97,0.5] ];
//
// Due triangoli con coordinate calcolate:
//
var duetriangoli = [ ["100*cos(20*PI/180)","100*sin(20*PI/180)",1],
                     ["100*cos(140*PI/180)","100*sin(140*PI/180)",1],
                     ["100*cos(260*PI/180)","100*sin(260*PI/180)",1],
                     ["100*cos(20*PI/180)","100*sin(20*PI/180)",0] ,
                     ["240+110*cos(25*PI/180)","110*sin(25*PI/180)",1],
                     ["240+110*cos(145*PI/180)","110*sin(145*PI/180)",1],
                     ["240+110*cos(265*PI/180)","110*sin(265*PI/180)",1],
                     ["240+110*cos(25*PI/180)","110*sin(25*PI/180)",0]
                   ];

var nodi3= [ ["100*cos(20*PI/180)","100*sin(20*PI/180)",1],
   ["100*cos(140*PI/180)","100*sin(140*PI/180)",1],
   ["100*cos(260*PI/180)","100*sin(260*PI/180)",1],
   ["100*cos(20*PI/180)","100*sin(20*PI/180)",0] ,
   ["240+100*cos(20*PI/180)","100*sin(20*PI/180)",1],
   ["240+100*cos(140*PI/180)","100*sin(140*PI/180)",1],
   ["240+100*cos(260*PI/180)","100*sin(260*PI/180)",1],
   ["240+100*cos(20*PI/180)","100*sin(20*PI/180)",0]
 ];
//
// Così disegna un circolino...
//
var nodi4= [ [0,0,1], [0,0,1] ];
//
var stella=122;
// stella classica a 5 punte
var star=[ ["stella*cos(0)","stella*sin(0)",1],
           ["stella*cos(4*PI/5)","stella*sin(4*PI/5)",1],
           ["stella*cos(8*PI/5)","stella*sin(8*PI/5)",1],
           ["stella*cos(12*PI/5)","stella*sin(12*PI/5)",1],
           ["stella*cos(16*PI/5)","stella*sin(16*PI/5)",1],
           ["stella*cos(20*PI/5)","stella*sin(20*PI/5)",1]];
// stella decimale a dieci punte
var star10=[ ["stella*cos(0)","stella*sin(0)",1],
           ["stella*cos(3*PI/5)","stella*sin(3*PI/5)",1],
           ["stella*cos(6*PI/5)","stella*sin(6*PI/5)",1],
           ["stella*cos(9*PI/5)","stella*sin(9*PI/5)",1],
           ["stella*cos(12*PI/5)","stella*sin(12*PI/5)",1],
           ["stella*cos(15*PI/5)","stella*sin(15*PI/5)",1],
           ["stella*cos(18*PI/5)","stella*sin(18*PI/5)",1],
           ["stella*cos(21*PI/5)","stella*sin(21*PI/5)",1],
           ["stella*cos(24*PI/5)","stella*sin(24*PI/5)",1],
           ["stella*cos(27*PI/5)","stella*sin(27*PI/5)",1],
           ["stella*cos(30*PI/5)","stella*sin(30*PI/5)",1] ];
// AMEN

---

A titolo di promemoria... Elenco delle direttive del <path>

Questa pagina ne usa un sottogruppo ( A, L e M ) ma ce ne sono varie altre ..

A,a	Arco ellittico	a rx ry rot bl ds xf yf La curva arco ellittico [ A oppure a ] ha uno pseudo punto di controllo [ rx ry ] invariante rispetto al movimento assoluto o relativo, e tre parametri [ rot bl ds ] oltre al punto finale [ xf yf ]. Ricordo che il verso positivo delle ascisse è verso destra mentre il verso positivo delle ordinate è verso il basso. L'arco viene tracciato dal punto iniziale che è il punto a cui è arrivata la curva, al punto finale che va specificato come ultimo dato [ xf yf ]. Se il punto finale [ xf yf ], in base agli altri parametri fosse irraggiungibile, l'intero arco viene cambiato di scala in modo che termini esattamente nel punto finale indicato. Lo pseudo punto di controllo è la coppia di semiassi dell'ellisse e, se sono uguali, l'ellisse è un cerchio [ rx ry ]. Il primo dei tre parametri è l'angolo di rotazione degli assi dell'ellisse espresso in gradi ( sono ammessi anche valori negativi ) [ rot ]. Il secondo dei tre parametri [ bl ] specifica se l'arco deve essere breve o lungo dato che ci sono due modi di muoversi sull'ellisse ossia facendo un tragitto breve=0 oppure un tragitto lungo=1. Il terzo dei parametri [ ds ] indica se chi va direttamente dal punto di partenza al punto di arrivo, vede l'arco alla sua destra=0 oppure alla sua sinistra=1. Il punto finale [ xf yf ] è dato in modo assoluto se si è usata la maiuscola [A] oppure in modo relativo rispetto al punto di partenza se si è usata la minuscola [a]
C,c	Cubica	c xa ya xb yb xf yf La curva cubica, originariamente proposta dall'ingegnere-matematico francese Pierre Bézier (1910-1999) http://it.wikipedia.org/wiki/Pierre_B%C3%A9zier richiede due punti di controllo. Il primo punto di controllo [ xa ya ] unito al punto iniziale serve a specificare la direzione iniziale del pennino ( o della particella se immaginiamo che la curva rappresenti la traiettoria piana di una particella ). Il secondo punto di controllo [ xb yb ] unito al punto finale serve a specificare la direzione finale del pennino ( o della particella se immaginiamo che la curva rappresenti la traiettoria piana di una particella ). Il punto finale è ovviamente [ xf yf ] ed i tre punti vanno indicati in coordinate assolute quando si usa C o in coordinate relative al punto iniziale quando si usa c.
H,h	Horizzon- talmente	h xf Lo spostamento in orizzontale rischiede solo l'indicazione della nuova ascissa [ xf ] specificata in modo assolute usando la H maiuscola o in modo relativo specificando la h minuscola.
L,l	Linea	l xf yf Lo spostamento rettilineo rischiede solo l'indicazione della seconda estremità del segmento [ xf yf ] specificato in modo assoluto usando la L maiuscola o in modo relativo specificando la l minuscola.
M,m	Muovi senza scrivere	m xf yf Lo spostamento senza scrittura rischiede solo l'indicazione della nuova posizione del pennino [ xf yf ] specificato in modo assoluto usando la M maiuscola o in modo relativo specificando la m minuscola.
Q,q	Quadrica	q xa ya xf yf Disegna una curva di Bézier quadratica basata su un unico punto di controllo [ xa ya ]
S,s	Scorrevole ( cubica )	s xb yb xf yf Disegna una curva di Bézier cubica deducendo il primo punto di controllo posizionato in modo che non ci sia nessuna discontinuità della tangente della curva. Dunque [ xb yb ] corrisponde al secondo punto di controllo specificato usando il carattere C o c. Se lo spostamento precedente non era una curva di Bézier, assume che il primo punto di controllo ( in realtà non noto ) coincida con il punto iniziale.
T,t	Tangente ( quadrica )	t xf yf Disegna una curva di Bézier quadratica deducendo il primo punto di controllo posizionato in modo che non ci sia nessuna discontinuità della tangente della curva. Se lo spostamento precedente non era una curva di Bézier, assume che il primo punto di controllo ( in realtà non noto ) coincida con il punto iniziale.
V,v	Vertical- mente	v yf Lo spostamento in verticale rischiede solo l'indicazione della nuova ordinata [ yf ] specificata in modo assoluto usando la V maiuscola o in modo relativo specificando la v minuscola. Tenere presente che l'asse delle ordinate è diretto verso il basso.
Z,z	Zero sposta- mento	z Chiude la curva congiungendo il punto raggiunto con il punto iniziale.

Giampaolo Bottoni
gpbottoni@gmail.com