In rete: http://www.elegio.it/svg/test/trepunticontrollo3-html.html
[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.
?
?
?
?
?
?
...
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
Sdell'elemento<path>che per ragioni mnemoniche chiamo Scorrevole, guardare http://www.elegio.it/calcolatrice/archivio-utili-201308.html#n002.