Index lavori SVG del 2014

Nuovi lavori SVG del 2014

Mi riprometto di mettere qui le cose nuove del 2014 senza però dimenticarmi di tutto quello che ho fatto negli anni precedenti.

La cartella storica radice delle attività SVG è questa:

http://www.elegio.it/svg/

Come regola di catalogazione uso l'anno ossia svg2011 svg2012 svg2013 e, naturalmente ora svg2014

Come altro tipo di ordinamento ho iniziato a raccogliere lavori nella cartella omnia per cui è possibile trovare materiale anche in :

http://www.elegio.it/omnia/sv/

http://www.elegio.it/svg/svg2014/immagini-interne-svg.html senza bisogno di usare Javascript...

http://www.elegio.it/svg/svg2014/stellagauss.html dove applico un metodo per aggiungere dinamicamente immagini SVG ad un documento. Si tratta di un accorgimento molto utile per realizzare documenti ricchi di immagini ma con pochi byte e dunque facilmente spedibili per posta elettronica.

http://www.elegio.it/svg/svg2014/archi_unastellamisteriosa.html Usare il comando a nel path non è molto facile ma si ottengono buoni risultati come mostro in questo documento...

http://www.elegio.it/svg/svg2014/ondulata.html dove mostro un metodo per realizzare non una semplice spezzata a segmenti rettilinei ma anche con archi di cerchio. Faccio anche un esempio di come attivare musiche di sottofondo cliccando su immagini SVG.

http://www.elegio.it/svg/svg2014/facile-usare-svg.html Qui punto a consentire un facile uso grafico dei dati disponibili senza dovere riempire il documento di prolisse e complicate istruzioni di grafica vettoriale SVG. Proverò a sperimentare in altri documenti le utili ( SPERO ) funzioni messe a punto in questo piccolo documento...

http://www.elegio.it/svg/svg2014/pallini_altro.html che applica il metodo di ampliamento del documento con immagini svg cercando la maggiore compatibilità possibile con i vari browser...
http://www.elegio.it/svg/svg2014/pallini_altro-esterni.html variante con uso di una libreria esterna camuffata da file html per rendere più leggibili i commenti al sorgente Javascript.
http://www.elegio.it/svg/svg2014/pallini_altro.js.html rappresenta la libreria esterna usabile da chiunque la voglia usare...

Esempi pratici: [1] [2] [3] [4] [5]

Disegna e confronta archi di parabola
Archi di parabola con libreria esterna
La libreria Javascript usata qui: http://www.elegio.it/svg/svg2014/svg-archidiparabola.js.html

http://www.elegio.it/svg/tanteparabole.html Usa gli archi di parabola ( nota genericamente come quadrica di Bézier ) per tracciare traiettorie senza vistose discontinuità e col vantaggio di potere calcolare in modo preciso e veloce la lunghezza di qualsiasi spezzone della traiettoria.

http://www.elegio.it/svg/ellisse.html Una applicazione pratica della grafica SVG ( incluso l'uso di archi di parabola ) al moto ellittico kepleriano.

Qui, per ora, per dare una qualche utilità a questa pagina, inserisco alcuni esempi utili per farsi o RIFARSI l'idea di come si fa ad usare la grafica vettoriale SVG. Notare che ho trascritto anche alcuni indirizzi utilissimi per fare o trasformare immagini in SVG.

Cosa ho scritto qui in SVG

E' un po' come era la situazione di chi avesse voluto, 30 anni fa , riutilizzare il Fortran ( non quello moderno : http://www.g95.org ... vedere anche http://www.elegio.it/fortran/ per essere certi di poterne scaricare almeno una versione ... ) scritto da studenti alle prime armi e disordinatissimi e pasticcioni ☺...

Pro memoria di una funzione Javascript utile !

Attenzione : questo testo viene automaticamente soppresso se questo documento viene stampato, dato che lo scopo principale di questo documento è la creazione di fogli di carta a quadretti. Comunque questo è anche un promemoria di come fare a fare scomparire parti volute, come ad esempio pulsanti di pilotaggio dei calcoli effettuati dinamicamente, quando si stampa un documento.

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="648" height="960"  viewBox="0 0 3240 4800"
     onload="creaipath(evt);">
     <script type="text/ecmascript"><![CDATA[
        function creaipath(evento){
            modificopapol('pentagono',1,1500);
            // alert("Ho finito di creare il path con la modificopapol");
            }
     ]]></script>
     <path fill="none" stroke="gray" stroke-width="5"
        d="M 50,25 l 
        3125,0,0,125,-3125,0,0,125,3125,0,0,125,-3125,0,0,125,
        3125,0,0,125,-3125,0,0,125,3125,0,0,125,-3125,0,0,125,
        3125,0,0,125,-3125,0,0,125,3125,0,0,125,-3125,0,0,125,
        3125,0,0,125,-3125,0,0,125,3125,0,0,125,-3125,0,0,125,
        3125,0,0,125,-3125,0,0,125,3125,0,0,125,-3125,0,0,125,
        3125,0,0,125,-3125,0,0,125,3125,0,0,125,-3125,0,0,125,
        3125,0,0,125,-3125,0,0,125,3125,0,0,125,-3125,0,0,125,
        3125,0,0,125,-3125,0,0,125,3125,0,0,125,-3125,0,0,125,
        3125,0,0,125,-3125,0,0,125,3125,0,0,125,-3125,0,0,125,
        3125,0,0,125,-3125,0,3125,0, 0,125,-3125,0,
        0,-4750,125,0,0,4750,125,0,0,-4750,125,0,0,4750,125,0,
        0,-4750,125,0,0,4750,125,0,0,-4750,125,0,0,4750,125,0,
        0,-4750,125,0,0,4750,125,0,0,-4750,125,0,0,4750,125,0,
        0,-4750,125,0,0,4750,125,0,0,-4750,125,0,0,4750,125,0,
        0,-4750,125,0,0,4750,125,0,0,-4750,125,0,0,4750,125,0,
        0,-4750,125,0,0,4750,125,0,0,-4750,125,0,0,4750,125,0,
        0,-4750,125,0,0,4750
     "/>
     <g id="pentagono">
     <path  fill="ivory" stroke="navy" stroke-width="10" fill-opacity="0.4"
       d="M 0,0 L 3240,4800">
       <desc>M 1550,2400
       m {qq=qa;qp=0;qq},0  ?? Dopo le prime definizioni
       inizio a tracciare il pentagono !!
       l {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))}
         {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))}
         ? Secondo punto !
         {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))}
         {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))}
         ? Terzo punto !
         {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))}
         {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))}
         ? Quarto punto !
         {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))}
         {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))}
         ? Quinto punto !
         {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))}
         {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))}
         ??? Ho finito !!!
     </desc>
     </path>
     <a xlink:href=
     "http://www.elegio.it/calcolatrice/archivio-utili-201308.html#n002">
     <path  fill="yellow" stroke="magenta" stroke-width="10"
       fill-opacity="0.4" d="M 0,4800 L 3240,0">
       <desc>M 1550,2400
       m {qq=qa/2;qp=0;qq},0  ?? Dopo le prime definizioni
       inizio a tracciare il pentagono !!
       l {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))}
         {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))}
         ? Secondo punto !
         {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))}
         {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))}
         ? Terzo punto !
         {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))}
         {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))}
         ? Quarto punto !
         {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))}
         {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))}
         ? Quinto punto !
         {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))}
         {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))}
         ??? Ho finito !!!
     </desc>
     </path></a>
     </g>
</svg>

La funzione utilizzata è questa:

<script type="text/javascript">
//
// Funzione Javascript per la generazione dinamica 
// del disegno di un gruppo di path e di polyline e di polygon  
// e per consentire l'inserimento di commenti ( che ovviamente vanno 
// eliminati quando il disegno viene trasferito all'attributo d dei 
// vari path o all'attributo points dei vari polyline e polygon ).
//
function modificopapol(gpapolid,ricopio){
    //
    // Elimina i commenti e valuta le stringhe ripulite 
    // dai commenti. Per applicare i risultati delle valutazioni,
    // ricopio deve essere un numero.
    //
    // Utilizza gli argomenti facoltativi come parametri usabili 
    // nel creare i disegni dei path o polyline o polygon ed il 
    // primo argomento facoltativo se non numero, attiva gli "alert" di debug.
    //
    var elobj,obj,listapapol=[0,0,0],lista,figlio,j,jj,jel,nn,mm,mf,zz,zf,
        vzf=[[],[],[]];
    //
    // Parametri vari definibili dinamicamente...
    // I primi sei qa,qb...qf, sono inizializzabili tramite gli 
    // argomenti facoltativi.
    //
    var qa=0,qb=0,qc=0,qd=0,qe=0,qf=0,qg=0,qh=0,qi=0,qj=0;
    var qk=0,ql=0,qm=0,qn=0,qo=0,qp=0,qq=0,qr=0,qs=0,qt=0;
    var qu=0,qv=0,qw=0,qx=0,qy=0,qz=0;
    var qxa=0,qxb=0,qxc=0,qxd=0,qxe=0,qxf=0,qxg=0,qxh=0,qxi=0,qxj=0;
    var qxk=0,qxl=0,qxm=0,qxn=0,qxo=0,qxp=0,qxq=0,qxr=0,qxs=0,qxt=0;
    var qxu=0,qxv=0,qxw=0,qxx=0,qxy=0,qxz=0;
    var qya=0,qyb=0,qyc=0,qyd=0,qye=0,qyf=0,qyg=0,qyh=0,qyi=0,qyj=0;
    var qyk=0,qyl=0,qym=0,qyn=0,qyo=0,qyp=0,qyq=0,qyr=0,qys=0,qyt=0;
    var qyu=0,qyv=0,qyw=0,qyx=0,qyy=0,qyz=0;
    var qza=0,qzb=0,qzc=0,qzd=0,qze=0,qzf=0,qzg=0,qzh=0,qzi=0,qzj=0;
    var qzk=0,qzl=0,qzm=0,qzn=0,qzo=0,qzp=0,qzq=0,qzr=0,qzs=0,qzt=0;
    var qzu=0,qzv=0,qzw=0,qzx=0,qzy=0,qzz=0;
    //
    //  Attivazione del debug e vari tipi di commenti da eliminare 
    //  eventualmente...
    //
    var inikommento,endkommento,dimkommento;
    var modifico,xdebug=false,debugk=[["???","!!!"],["??","!!"],["?","!"]];
    var nomielementi=[["path","d"],["polyline","points"],["polygon","points"]]
    //
    if(arguments.length>2){
       //
       // Se il primo argomento facoltativo risulta 
       // non essere un numero ma un vettore di almeno due
       // elementi,fa anche stampe di debug.
       // Se è un vettore prende il primo elemento.
       //
       xdebug=isNaN(arguments[2]);
       if(xdebug)qa=arguments[2][0];
       else if(arguments[2].length>0)qa=arguments[2][0];
       else qa=arguments[2];
       if(arguments.length>3)qb=arguments[3];
       if(arguments.length>4)qc=arguments[4];
       if(arguments.length>5)qd=arguments[5];
       if(arguments.length>6)qe=arguments[6];
       if(arguments.length>6)qf=arguments[7];
    }
    elobj=document.getElementById(gpapolid);
    for(jel=0;nomielementi.length>jel;jel++){
       listapapol[jel]=elobj.getElementsByTagName(nomielementi[jel][0]);
       lista=[];
       for(jj=0;listapapol[jel].length>jj;jj++){
          obj=listapapol[jel][jj];
          vzf[jel][jj]="Non usato";
          figlio=obj.firstChild;
          lista=obj.childNodes;
          modifico=false;
          for(j=0;lista.length>j;j++)if(lista[j].nodeName=="desc"
             ){modifico=true;figlio=lista[j];break;}
          zz=figlio.textContent;
          //
          // Cancella tutti i tipi di commenti  
          // 
          if(modifico){
             for(j=0;debugk.length>j;j++){
             inikommento=debugk[j][0];
             endkommento=debugk[j][1];
             dimkommento=endkommento.length;        
             mm=zz.indexOf(inikommento);
             if(mm>=0){
                zf="";
                nn=0;
                while(mm>=0){
                   mf=zz.indexOf(endkommento,mm);
                   if(mf>=0){zf+=zz.slice(nn,mm);
                     nn=mf+dimkommento;
                     mm=zz.indexOf(inikommento,nn);}
                   else mm=-1;
                   };
                zf+=zz.substr(nn);
                zz=zf;}
              }
             //
             // Fa la valutazione della stringa depurata 
             // dai commenti e con le parti eseguibili 
             // delimitate da parentesi graffe.
             //
             nn=0;
             mm=zz.indexOf("{");
             zf="";
             while(mm>=0){
                mf=zz.indexOf("}",mm);
                if(mf>=0){zf+=zz.slice(nn,mm);
                    with(Math){zf+=" "+eval(zz.slice(mm+1,mf))};
                    nn=mf+1;
                    mm=zz.indexOf("{",nn);}
                else mm=-1;
                };
             zf+=zz.substr(nn);
             vzf[jel][jj]=zf;
             // Se è abilitato modifica effettivamente 
             // l'elemento path o polyline o polygon. 
             if(!isNaN(ricopio))obj.setAttribute(nomielementi[jel][1],zf);
             if(xdebug) alert(nomielementi[jel][0]+"("+jj+" ) Ottiene: \n"+zf);
             }
          }
       }
       //
       // Se ricopio vale 1 o vale "fammivedere" ricopia i risultati
       // in una marca di nome "g_"+gpapolid. 
       //
       if(ricopio==1 || ricopio=="fammivedere" ){
          zz="Scrivo:";
          for(jel=0;nomielementi.length>jel;jel++){
             for(jj=0;listapapol[jel].length>jj;jj++){
                zz+="\u003cbr/\u003e"+nomielementi[jel][0]+" "+jj+
                   " :  "+vzf[jel][jj]+" "; }
             }
          obj=document.getElementById("g_"+gpapolid);
          obj.innerHTML=zz;
          }
       return vzf;
       }
//
</script>

Nuovi lavori SVG del 2014

http://www.elegio.it/svg/

http://www.elegio.it/omnia/sv/

Attenzione, sono 9 MByte : http://www.elegio.it/deposito/!REC-SVG11-20110816.pdf

Cosa ho scritto qui in SVG

Disegni SVG per creare come background un reticolo di carta millimetrata

Pro memoria di una funzione Javascript utile !

In pratica ...