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...
Varie forme elementari Riquadro ed altro... L'autore...

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

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.
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 = xm   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,aArco
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,cCubica

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,hHorizzon-
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,lLinea

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,mMuovi
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,qQuadrica

q xa ya xf yf

  • Disegna una curva di BÚzier quadratica basata su un unico punto di controllo [ xa ya ]
S,sScorrevole
( 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,tTangente
( 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,vVertical-
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,zZero
sposta-
mento

z

  • Chiude la curva congiungendo il punto raggiunto con il punto iniziale.

Giampaolo Bottoni
gpbottoni@gmail.com