/*
Aggiunge immagini SVG + archi e pallini
http://www.elegio.it/svg/svg2014/
==== Aggiunta di immagini SVG al documento =====
*/
//
// Amplia dinamicamente il documento HTML aggiungendo
// varie marche svg in piu'...
//
var xsvg=[0,
"\u0020\u003csvg id='svgaggiunti"+
"'\u0020xmlns='http://www.w3.org/2000/svg'"+
"\u0020xmlns:xlink='http://www.w3.org/1999/xlink'"+
"\u0020width='500' height='250' viewBox='0 0 2000 1000'\u003e"+
"\u003ca xlink:href='http://www.elegio.it/svg' target='alato' \u003e"+
"\u003cg stroke='black' stroke-width='6' \u003e"+
"\u003cpath id='pathaggiunti"+
"'\u0020fill='#ff0000'"+
"\u0020d='M 100 100 L 1900 100 L 1900 900 Z' /\u003e"+
"\u003c/g\u003e\u003c/a\u003e\u003c/svg\u003e"];
//
// Questi sono i cognomi delle id. Ad ogni id aggiunge
// un numero di riconoscimento ossia la data di nascita.
// Se lo stesso numero di riconoscimento viene aggiunto
// varie volte ad una stessa immagine ( per esempio se
// l'immagine contiene non un solo ma vari path ) basta
// scrivere, prima o dopo il cognome, uno o piu' caratteri
// che potrei indicare come soprannome che distingue i
// membri di una stessa famiglia di path. Dunque il contatore
// sarebbe lo stesso per tutti i path della stessa immagine
// ma ogni identificatore del path sarebbe diverso
// dagli altri grazie al soprannome.
//
var xcognomesvg="svgaggiunti";
var xcognomepath="pathaggiunti";
function aggiungisvg(idove,cognomesvg,cognomepath){
var nuovo,nuovo,ora,aperta="{",chiusa="}";
var shtml,xhtml,mamma = document.getElementById(idove);
var bimbo = document.createElement("span");
//
if(arguments.length>3){
// Sostituisce alle parentesi fasulle quelle giuste:
xhtml=arguments[3];
if(xhtml.charCodeAt(0)==aperta.charCodeAt(0)
)xhtml=" "+xhtml;
shtml=cambiostringa(xhtml,aperta,"\u003c");
xsvg[1]=cambiostringa(shtml,chiusa,"\u003e");
}
shtml=cambiostringa(xsvg[1],cognomesvg,cognomesvg+xsvg[0]);
xhtml=cambiostringa(shtml,cognomepath,cognomepath+xsvg[0]);
//
bimbo.innerHTML=xhtml;
xsvg[0]++;
mamma.appendChild(bimbo);}
//
function controlloxhtml(identificatore,disegno,colore){
var obj;
obj=document.getElementById(identificatore);
obj.setAttribute("d",disegno);
obj.setAttribute("fill",colore);
}
//
function spezzostringa(st,ch){
var j,qui=0,pezzo,chl=ch.length,vs=[];
if(1>chl)return [st];
dove=st.indexOf(ch,qui);
while(dove>=qui){
pezzo=st.slice(qui,dove);
if(pezzo.length>0)vs[vs.length]=pezzo;
qui=dove+chl;
dove=st.indexOf(ch,qui);
}
pezzo=st.slice(qui);
if(pezzo.length>0)vs[vs.length]=pezzo;
return vs;
}
//
function cambiostringa(st,ch,chn){
var j,n,vs,ns="";
vs=spezzostringa(st,ch);
n=vs.length-1;
for(j=0;n>j;j++)ns+=vs[j]+chn;
ns+=vs[n];
// alert(st+"\n"+ns);
return ns;
}
//
function dividehtml(st,aperta,naper,chiusa,nchiu,segnale){
var nuova=cambiostringa(st,aperta,naper);
nuova=cambiostringa(nuova,chiusa,nchiu);
return spezzostringa(nuova,segnale);
}
//
var xdisegno1="M 10 10 L 1980 10 1980 990 10 990 Z";
var xdisegno="M 1000 600 a 300 300 0 0 0 600 0 a 300 300 0 0 0 -600 0";
var xcolore="yellow";
//
function provoaggiuntaimmagini(){
var obj=document.getElementById("contenuto1");
//
aggiungisvg("intestazione",xcognomesvg,xcognomepath);
aggiungisvg("intestazione",xcognomesvg,xcognomepath);
//
aggiungisvg("intestazione",xcognomesvg,xcognomepath,obj.innerHTML);
aggiungisvg("intestazione",xcognomesvg,xcognomepath);
aggiungisvg("intestazione",xcognomesvg,xcognomepath);
aggiungisvg("intestazione",xcognomesvg,xcognomepath);
//
controlloxhtml(xcognomepath+1,xdisegno1,xcolore);
controlloxhtml(xcognomepath+2,xdisegno,xcolore);
controlloxhtml("bis"+xcognomepath+3,xdisegno,xcolore);
controlloxhtml("bis"+xcognomepath+4,xdisegno1,xcolore);
//
}
//
/*
==== Gestione del form standard per assegnare i valori
e specificare le funzioni graficate ====
*/
//
// Variabili pubbliche di inizializzazione
//
var npunti_zz=200;
var vs_zz=[0];
var scalay_zz=1.0;
var scalax_zz=0.1
var funzione_zz="sin(x)+1";
var funzione2_zz="cos(1.3*x)-0.5";
var xmio_zz=12.5;
var continuo_zz=true;
var un_zz="";
//
var idusate=["Uso queste id",[0,
npunti_zz, vs_zz, scalay_zz, scalax_zz, funzione_zz,
funzione2_zz, xmio_zz, continuo_zz, un_zz,
"disegno_z1", "disegno2_z1", "dovecroce_z1","form_z1"]];
//
function passo_zz(qualid){
var ma,ss,un_zz;
// alert("In passo_zz");
ma=document.getElementById(idusate[qualid][10]);
xvs_zz(qualid,idusate[qualid][5]);
// alert("In passo_zz bis");
if(idusate[qualid][8]) ss=xss1_zz(idusate[qualid][2]);
else ss=xss_zz(idusate[qualid][2]);
ma.setAttribute("d",ss);
//
ma=document.getElementById(idusate[qualid][11]);
xvs_zz(qualid,idusate[qualid][6]);
if(idusate[qualid][8]) ss=xss1_zz(idusate[qualid][2]);
else ss=xss_zz(idusate[qualid][2]);
ma.setAttribute("d",ss);
//
idusate[qualid][9]=unvalore_zz(qualid);
ma=document.getElementById(idusate[qualid][12]);
un_zz=idusate[qualid][9];
ss="M "+un_zz[1]+" "+un_zz[2]+
" l 10 0 m -10 -10 l 0 20 m -10 -10 l 10 0 z"
ma.setAttribute("d",ss);
// alert("In passo_zz fine");
}
//
function unvalore_zz(qualid){
var x,j,fx,ord,asc;
with(Math){
x=idusate[qualid][7];
j=x/idusate[qualid][4];
fx=eval(idusate[qualid][5]);
ord=375-360*atan(idusate[qualid][3]*fx)/(PI/2);
asc=min(990,10+980*j/idusate[qualid][1]);
// alert("unvalore " +funzione+asc+" "+ord);
}
return [ fx,asc,ord];
}
//
// Crea il Grafico. I punti pari sono le ascisse
// e quelli dispari le ordinate. Applica alla funzione
// la trasformazione per graficare l'arcotangente della
// funzione in modo da poter scrivere anche una funzione
// che assuma valori infiniti positivi o negativi.
//
function xvs_zz(qualid,funzione){
var j,x,fx;
var vs_zz=new Array(2*idusate[qualid][1]);
with(Math){
for(j=0;idusate[qualid][1]>j;j++){
x=j*idusate[qualid][4];
fx=eval(funzione);
vs_zz[2*j+1]=375-360*atan(idusate[qualid][3]*fx)/(PI/2);
vs_zz[2*j]=10+980*j/idusate[qualid][1];
}
}
idusate[qualid][2]=vs_zz;
return 0;
}
//
// Stringa del Grafico continuo...
//
function xss1_zz(vs_zz){
var st=" ";
var j,nn=vs_zz.length-vs_zz.length%2;
st="M "+vs_zz[0]+" "+vs_zz[1]+" "
st+="Q "+vs_zz[2]+" "+vs_zz[3]+" "+
((vs_zz[4]+vs_zz[2])/2)+" "+((vs_zz[5]+vs_zz[3])/2)+" ";
for(j=4;nn>j+3;j+=2){
st+="Q "+vs_zz[j]+" "+vs_zz[j+1]+" "+
((vs_zz[j+2]+vs_zz[j])/2)+" "+((vs_zz[j+3]+vs_zz[j+1])/2)+" ";
}
st+=" ";
return st;
}
//
// Stringa del Grafico a scaletta...
//
function xss_zz(vs_zz){
var st=" ";
var j,nn=vs_zz.length-vs_zz.length%2;
st="M "+vs_zz[0]+" "+vs_zz[1]+" L "+
((vs_zz[0]+vs_zz[2])/2)+" "+vs_zz[1]+" ";
st+=" L "+((vs_zz[2]+vs_zz[0])/2)+" "+vs_zz[3]+
" L "+((vs_zz[4]+vs_zz[2])/2)+" "+vs_zz[3]+" ";
for(j=4;nn>j+2;j+=2){
st+=" L "+((vs_zz[j]+vs_zz[j-2])/2)+" "+
vs_zz[j+1]+" L "+((vs_zz[j+2]+vs_zz[j])/2)+" "+vs_zz[j+1]+" ";
}
st+=" ";
return st;
}
//
// Chiamata dal form
//
function prendo_zz(questo,qualid){
var o1,o2,o3,stato,stampo;
var listaname=document.getElementsByName(idusate[qualid][13]);
// alert("entro in prendo_zz");
o1=listaname[3];
idusate[qualid][1]=eval(o1.value);
idusate[qualid][1]=Math.round(idusate[qualid][1]);
o1=listaname[4];
idusate[qualid][4]=eval(o1.value);
o1=listaname[5];
idusate[qualid][3]=eval(o1.value);
o1=listaname[6];
idusate[qualid][7]=eval(o1.value);
o1=listaname[1];
idusate[qualid][5]=o1.value;
o1=listaname[2];
idusate[qualid][6]=o1.value;
//
// calcola la curva e imposta il path
//
passo_zz(qualid);
idusate[qualid][9]=unvalore_zz(qualid);
// tocca l'immagine SVG
o3=document.getElementById(idusate[qualid][11]);
stato=o3.style.display;
o2=listaname[7];
stampo="y1(x) = "+idusate[qualid][5]+" ;[ linea nera ]"+
String.fromCharCode(60)+"br/>Ascissa finale:"+
(idusate[qualid][1]*idusate[qualid][4])+
" ( per ottenere i valori di una funzione prendere la tangente "+
" del valore in ordinata e dividere per scalay )"+
String.fromCharCode(60)+"br/>y1("+idusate[qualid][7]+") = "+
idusate[qualid][9][0];
if(stato.length>4)stampo+=String.fromCharCode(60)+"br/>y2(x) = "+
idusate[qualid][6]+" ; [ linea blu ]";
o2.innerHTML=stampo;
//
// Cambia il colore del pulsante cliccato
//
if(!Array.isArray(questo)){
stato=questo.style.background;
if(stato.indexOf("green")>0)questo.style.background="navy";
else if(stato.indexOf("navy")>0)questo.style.background="green";
else if(stato.indexOf("magenta")>0)questo.style.background="red";
else questo.style.background="magenta";
}
//
}
//
function prolinea_zz(chetasto,qualid){
idusate[qualid][8]=!idusate[qualid][8];
if(idusate[qualid][8]) chetasto.value="-visualizzazione continua-";
else chetasto.value="-visualizzazione discontinua-";
// alert("Rifare la grafica");
prendo_zz(chetasto,qualid);
}
//
function nascondoblu_zz(qualid){
var cheid=idusate[qualid][11];
var obj=document.getElementById(cheid);
var stato=obj.style.display;
if(5>stato.length){
obj.style.display="block";
}
else {
obj.style.display="none";
}
}
/*
===== Parte nuova dedicata alla ondulata =====
*/
//
// Questa e' la funzione fondamentale. Dati tre punti
// crea un vettore di lunghezza 8 che puo' essere
// o un segmento segnalato da L o un arco di cerchio
// segnalato da una A.
//
function facerchio(B,M,C){
var bx,by,brq,cx,cy,crq,dn,ox,oy,pr=0;
bx=B[1]-M[1];
by=B[2]-M[2];
brq=bx*bx+by*by;
cx=C[1]-M[1];
cy=C[2]-M[2];
crq=cx*cx+cy*cy;
dn=2*(by*cx-bx*cy);
if(dn>=0)dn=1/(dn+1e-9);
else dn=1/(dn-1e-9);
ox=(by*crq-cy*brq)*dn;
oy=(cx*brq-bx*crq)*dn;
rr=Math.ceil(64*Math.sqrt(ox*ox+oy*oy))/64;
if(rr>1000000)return [" L ",C[1],C[2] ];
if(ox*by>oy*bx)pr=1;
return [" A ",rr,rr,0,0,pr,C[1],C[2]] }
//
// Traduce in stringa usabile dal path un vettore di 8 elementi
//
function prosvg(vet){
var j,n,ss=" ";
if(Array.isArray(vet)){ n=vet.length;
for(j=0;n>j;j++)ss+=vet[j]+" ";}
return ss;
}
//
// Questa e' la funzione di esecuzione della curva basata sugli
// archi di cerchio.
//
function fadisegno(ondulata,qualdisegno){
var j,n,nonfa,dopo,ild;
var ilpath=document.getElementById(qualdisegno);
n=ondulata.length;
ild=" M "+ondulata[1][1]+" "+ondulata[1][2]+" ";
dopo=false;
for(j=3;n>j;j+=2){
nonfa=(!Array.isArray(ondulata[j])) ||
(!Array.isArray(ondulata[j-1])) ||
(!Array.isArray(ondulata[j-2])) ;
if(!nonfa){
if(dopo){ild+=" M "+ondulata[j][1]+" "+ondulata[j][2]+" ";
dopo=false;}
else ild+=prosvg(facerchio(ondulata[j-2],
ondulata[j-1],ondulata[j]));
}
else dopo=true;
}
// ild+=" Z";
ilpath.setAttribute("d",ild);
return ild;
}
//
// Non disegna una curva ma disegna palline piu' o meno
// grandi attorno ai punti da usare per fare la curva.
//
function fapalline(ondulata,qualdisegno){
var j,n,nonfa,rr,ild;
var ilpath=document.getElementById(qualdisegno);
n=ondulata.length;
rr=3;
ild=" M "+(ondulata[1][1]-rr)+" "+ondulata[1][2]+
" a "+rr+" "+rr+" 0 0 0 "+(2*rr)+ " 0"+
" a "+rr+" "+rr+" 0 0 0 "+(-2*rr)+" 0 ";
rr+=0.75;
for(j=3;n>j;j+=2){
nonfa=(!Array.isArray(ondulata[j])) ||
(!Array.isArray(ondulata[j-1])) ||
(!Array.isArray(ondulata[j-2])) ;
if(nonfa)rr=3;
else{ild+=" M "+(ondulata[j][1]-rr)+" "+ondulata[j][2]+
" a "+rr+" "+rr+" 0 0 0 "+(2*rr)+ " 0"+
" a "+rr+" "+rr+" 0 0 0 "+(-2*rr)+" 0 ";rr+=0.5;
rr=Math.min(rr,12);
}
}
ilpath.setAttribute("d",ild);
return ild;
}
//
// === CONVENZIONE MULTIDIMENSIONALE ===
//
// Segue questa regola: ogni punto e' un vettore e, se usa gli archi
// di cerchio, usa i punti dispari come estremi dell'arco e i punti pari
// come punto interno di controllo. Come regola generale non usa mai
// l'elemento zero di un vettore e l'elemento 1 e' l'ascissa e il 2
// e' l'ordinata. Questa convenzione la uso per potere lavorare
// facilmente anche in tre o quattro dimensioni e potere
// disegnare sempre solo le prime due coordinate
//
// Funzione per convertire il vettore di punti multidimensionali
// con eventuli interruzione di punti in un vettore di coordinate
// bidimensionali senza interruzione di punti.
//
function invettorezz(multidim){
var j,k=0,n,vet=[];
n=multidim.length;
for(j=0;n>j;j++){
if(Array.isArray(multidim[j])){
vet[k]=multidim[j][1];k++;
vet[k]=multidim[j][2];k++;
}
}
return vet;
}
//
// Funzione per convertire un vettore di coordinate bidimensionali
// in un vettore di punti multidimensionali che in questo caso
// sono anche loro bidimensionali.
//
function davettorezz(vet,scala){
var j,k=1,multidim=["Puntimultidim"];
n=vet.length;
for(j=1;n>j;j+=2){
multidim[k]=[" ("+(k-1)+") ",scala*vet[j-1],scala*vet[j]];
k++;}
return multidim;
}
//
// Esempio di vettore per punti multidimensionali.
//
var ond=["Ondulata",[" 1) ",400,75],[" 2) ",775,450],[" 3) ",400,825],
[" 4) ",665,715],[" 5) ",775,450]];
//
// Per mettere a punto le funzioni di disegno dell'arco definisco
// questa funzione piuttosto balorda ma utile per mettere alla
// prova le varie opzioni.
//
function provaondulatoria(xnpassi){
var j,tt,xx,yy,npassi,incre,ond=["Ondula"];
npassi=2*Math.round(xnpassi);
// alert("Fa "+npassi+" passi");
incre=1200/(npassi/3.7);
for(j=1;npassi>j;j++){
tt=(j-1)*(Math.PI/12);
xx=20+incre*tt;
xx=Math.round(32*xx)/32;
yy=450+50*Math.exp(tt*0.07)*Math.sin(tt);
yy=Math.round(32*yy)/32;
if(j%20==0) ond[j]=" (salto) ";
else ond[j]=[" ("+(j-1)+") ",xx,yy];}
return ond;
}
//
// Usa i dati della curva blu precedentemente disegnata...
//
function riutilizza(){
var ond,vper=perturbatore(idusate[1][2]);
ond=davettorezz(vper,1.0);
fadisegno(ond,"xdisegno");
fadisegno(ond,"xdisegno_bis");
fapalline(ond,"xpalline");
}
//
function perturbatore(vet){
var j,wet=[0],fadisturbo,obj=document.getElementById("xperturbazione");
fadisturbo=eval(obj.value);
for(j=0;vet.length>j;j++){
wet[j]=vet[j]*(1+fadisturbo*Math.random()/10);}
return wet;
}
//
var d_esempio="M 100 100 a 60 60 0 0 0 120 0 a 60 60 0 0 0 -120 0" ;
//
/* */