Documento di studio con probabili piccoli bachi. Funziona meglio ( settembre 2013 ) con Firefox, Chrome, Safari, Opera che con Internet Explorer almeno 10... Spero che, piano piano, almeno in futuro, certe diversità di comportamento verranno eliminate... SPERARE è GRATIS !

Librerie Javascript in : trepunticontrollo.js.txt

In rete: http://www.elegio.it/svg/test/trepunticontrollo3-html.html

Questo documento serve a mettere a punto l'algoritmo per cui è piuttosto pasticciato ma consente di farsi una idea di cosa succede usando tre archi di cerchio per rendere continua una spezzata..

Stampe ausiliarie più o meno leggibili per capire cosa è successo..

[Stampe di VERIFICA]

Anticamente disegnare con RIGA E COMPASSO era considerato non solo UTILE ma anche BELLO. Persino le ellissi non erano apprezzate molto... IL CERCHIO È LA CURVA PERFETTA ! ECCO UN MODO DI TORNARE ALL' ANTICO MA IN MODO MOLTO MODERNO...

Tre punti di controllo ed uso degli archi di cerchio

Per descrivere il moto di una particella, in meccanica classica bisogna specificare la posizione e la velocità iniziale della particella e poi integrare l'equazione di Newton per trovare la posizione e la velocità al termine di un prefissato intervallo di tempo.

Trovo quindi logico e naturale nella grafica poter specificare il vettore posizione e il vettore velocità in ciascun punto. Quello che avviene tra un istante di tempo e quello successivo può essere complicatissimo ma se gli intervalli di tempo sono abbastanza piccoli la visualizzazione non consentirà di vedere chiaramente cosa è successo in dettaglio in ogni intervallo temporale.

Ovviamente un algoritmo noto e apprezzatissimo è quello delle curve di Bézier ma qui voglio provare a usare solo archi ellittici perché le coniche sono una delle soluzioni esatte di alcuni semplici problemi gravitazionali. Poi la letteratura dedicata alle coniche è veramente enorme per cui questo lavoro potrebbe essere uno stimolo a fare di più e meglio nell'uso pratico delle coniche a livello di visualizzazione grafica.

?

?

?

?

1
Sposta la posizione del cerchiolino azzurro attorno al cerchio grande azzurro, punto di inizio della traiettoria. La direzione indicata dal cerchiolino azzurro influenza la posizione del cerchio di controllo magenta.
Sposta la posizione del cerchiolino verde attorno al cerchio grande verde, punto di fine della traiettoria. Il cerchiolino verde indica la direzione della seguente traiettoria...ma quella direzione condiziona la posizione del cerchio di controllo giallo.
Questi pulsanti servono a verificare che la curva non varia ruotando il piano di disegno.
Ci sono due possibili cerchi di controllo rossi e la scelta di quale dei due usare è un aspetto delicato dell'algoritmo.
In futuro sarebbe opportuno poter specificare, se lo si vuole, quale dei due possibili punti rossi è preferibile usare e poter controllare, segmento per segmento, la modalità di calcolo del punto di controllo rosso.

?

?

...

Qui nel seguito riporto alcuni casi interessanti su come l'algoritmo si comporta in vari casi...

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

AMEN

Per non avere problemi ad usare le curve cubiche di Bézier basta FARE MOLTO MENO FATICA ossia realizzare una semplice funzione Javascript che calcoli, applicando un qualche semplicissimo algoritmo, i punti di servizio. Dunque la curva di riferimento da cui si parte è una classica spezzata lineare e, con semplici funzioni tra un punto e l'altro della spezzata, si aggiungono i punti di servizio che servono a tracciare la stessa spezzata ma senza spigoli.

Da spezzata lineare ( polyline ) a cubica di Bézier ( path C & S )

Applico questa funzione per calcolare il punto di servizio:

// v è il punto vecchio
// c è il punto centrale 
// f è il punto futuro.
// Notare che non uso v[0],c[0] ed f[0] che possono servire per riconoscere i punti.
function pausilio(v,c,f){
    var cmf=["L",c[1]-f[1],c[2]-f[2]];
    var vmf=["L",v[1]-f[1],v[2]-f[2]];
    var ff=-0.91*(cmf[1]*vmf[1]+cmf[2]*vmf[2])/(vmf[1]*vmf[1]+vmf[2]*vmf[2]+1.e-30);
    return ['"S" ',(c[1]+ff*vmf[1]+(c[1]+f[1])/2)/2,(c[2]+ff*vmf[2]+(c[2]+f[2])/2)/2 ];
    }

Sperimento sia l'algoritmo degli archi di cerchio sia la semplice formula per scegliere i punti di servizio della cubica di Bézier usando una spezzata a casaccio :

[ [0,100,100],[1,200,300], [2,400,100],[3,700,250], [4,300,500], [5,100,700], [6,300,800], [7,450,700], [8,370,500], [9,100,450], [10,100, 400] ,[11, 200,400], [12,500,300], [13, 700,300], [14,900,350], [15, 1000,450], [16, 1000,600], [17, 900,700], [18,950, 750], [19, 1000,700], [20,1100,650], [21,1150, 500], [22, 1190,350], [23,1000,150] ]
[ [0,300,500],[0,300,500],[1,200,300], [2,400,100],[3,700,250], [4,600,500], [5,300,500], [6,200,300],[5,300,500],[4,600,500], [3,700,250],[2,400,100], [1,200,300], [0,300,500]]

[ [0,100,100],[1,200,300], [2,400,100],[3,700,250], [4,300,500], [5,100,700], [6,300,800], [7,450,700], [8,370,500], [9,100,450], [10,100, 400] ,[11, 200,400], [12,500,300], [13, 700,300], [14,900,350], [15, 1000,450], [16, 1000,600], [17, 900,700], [18,950, 750], [19, 1000,700], [20,1100,650], [21,1150, 500], [22, 1190,350], [23,1000,150] ]

Ecco cosa ottengo leggendo i dati e calcolando i punti di servizio per controllare gli archi di cerchio:

?

?

Trascrivo un risultato ottenuto usando le cubiche di Bézier, visibile anche nel caso in cui Javascript non sia attivato ( nelle email ):

Altre sperimentazioni

Sperimento con una ellisse definita per punti calcolati con una apposita semplicissima funzione Javascript. Anche qui inserisco i risultati del calcolo della cubica di Bézier, direttamente negli elementi <path> della marca <svg> :

...

?

?

Trascrivo il risultato nel caso di un calcolo usando cubiche di Bézier, visibile anche nel caso in cui Javascript non sia attivato ( nelle email ):

Ovviamente questo è solo uno degli infiniti modi di definire i punti di servizio. Comunque mi sembra che abbia il pregio di essere un modo molto semplice...

Varie info utili

Per le regole del controllo S dell'elemento <path> che per ragioni mnemoniche chiamo Scorrevole, guardare http://www.elegio.it/calcolatrice/archivio-utili-201308.html#n002.

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.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Un consiglio: sei danaroso ? ♚ + $ Usa Mathematica ! Ma se sei povero usa Maxima !