Come costruire un ponte pieno che si raccorda ai bordi di due cerchi

Un ponte può toccare un cerchio senza raccordarsi dolcemente al suo contorno. Posizionare gli angoli in un punto qualsiasi della circonferenza garantisce il contatto, ma il lato del ponte può comunque creare uno spigolo visibile. Per ottenere una transizione morbida, quel lato deve seguire la tangente al cerchio nel punto di contatto.

Per due cerchi separati, usa la coppia di tangenti comuni esterne: le rette che corrono lungo il lato esterno di entrambi i cerchi. Ogni punto di contatto si trova sul proprio cerchio e il raggio che passa per quel punto è perpendicolare alla tangente. Queste sono le condizioni espresse nelle equazioni delle tangenti tra cerchi di Wolfram MathWorld.

I quattro punti di contatto definiscono il quadrilatero di costruzione. I suoi due lati lunghi diventano i bordi visibili del ponte; i due lati di chiusura passano attraverso i cerchi. Questi lati di chiusura scompaiono quando le forme vengono unite o quando si rimuove la parte di sovrapposizione con i cerchi.

Questa costruzione produce un connettore con lati diritti. Un connettore rientrante e strozzato richiederebbe un disegno diverso delle curve; i soli punti di tangenza non determinano quella forma.

Inizia con due cerchi completi, un riempimento pieno e nessun contorno. Usa sempre la stessa unità di misura per le coordinate. Un contorno visibile può nascondere il bordo che stai cercando di raccordare, quindi aggiungi l’eventuale contorno finale dopo aver costruito la geometria piena.

In Inkscape, seleziona lo strumento Ellisse con E, poi tieni premuto Ctrl mentre trascini per creare un cerchio. Per impostare dimensioni precise, inserisci valori uguali per Rx e Ry nei controlli dello strumento. Se un oggetto è un arco o un segmento, usa Rendi intera l’ellisse prima di procedere. Questi controlli sono descritti nella guida Inkscape su cerchi, ellissi e archi.

Apri Oggetto → Riempimento e contorno. Imposta un riempimento pieno e seleziona il controllo a forma di croce Nessuna pittura sotto Colore contorno. Mantieni l’opacità al 100% mentre esamini la costruzione. Per queste impostazioni, consulta La finestra di dialogo Riempimento e contorno.

Conserva una copia di riserva dei due cerchi originali fuori dall’area di lavoro. L’operazione booleana finale modifica la costruzione e avere gli originali facilita gli aggiustamenti successivi.

Usa le seguenti dimensioni illustrative. Creano intenzionalmente un connettore molto rastremato, così è più facile esaminare la geometria dei punti di contatto. Le coordinate sono espresse in pixel, con x crescente verso destra e y crescente verso il basso.

Oggetto	Centro	Raggio	Riquadro di delimitazione
Cerchio A	(100, 100)	70	x = 30–170; y = 30–170
Cerchio B	(200, 100)	10	x = 190–210; y = 90–110

I centri distano 100 unità. Sottraendo i raggi si ottiene uno spazio di 20 unità tra i bordi più vicini dei cerchi. Il ponte deve attraversare questo spazio raccordandosi al contempo ai contorni circolari.

Per questi cerchi, i quattro punti di contatto delle tangenti sono:

Punto	Posizione	Coordinate
A superiore	Punto di contatto superiore sul cerchio A	(142, 44)
B superiore	Punto di contatto superiore sul cerchio B	(206, 92)
B inferiore	Punto di contatto inferiore sul cerchio B	(206, 108)
A inferiore	Punto di contatto inferiore sul cerchio A	(142, 156)

Seleziona lo strumento Bézier/Penna e crea un tracciato a quattro angoli nell’ordine indicato nella tabella. Fai clic su ogni angolo senza trascinare, quindi fai clic sul punto iniziale per chiudere il tracciato. Applica lo stesso riempimento pieno dei cerchi e rimuovi il contorno.

Per posizionare i punti con precisione, disegna prima il quadrilatero in modo approssimativo. Passa allo strumento Nodo con N, seleziona un nodo alla volta e inserisci le sue coordinate x e y nei controlli dello strumento. Imposta l’unità di misura delle coordinate su pixel. Inkscape descrive questi campi numerici in Opzioni dello strumento Nodo.

Segui il perimetro quando colleghi i punti: A superiore → B superiore → B inferiore → A inferiore → chiudi. Collegando i punti diagonalmente attraverso la forma, si crea un tracciato che si incrocia anziché il ponte pieno desiderato.

Queste coordinate di esempio sono state verificate con un calcolo deterministico: ogni punto di contatto si trova alla distanza corretta dal centro del proprio cerchio e ciascun lato lungo del ponte è perpendicolare ai corrispondenti raggi nei punti di contatto.

Scegli la struttura finale in base a come vuoi modificare o colorare il personaggio.

Risultato desiderato	Costruzione
Un’unica sagoma continua di un solo colore	Unisci entrambi i cerchi e il quadrilatero
Ponte colorato separatamente, che termina in corrispondenza dei cerchi	Sottrai dal quadrilatero delle copie dei cerchi
Costruzione modificabile per eventuali aggiustamenti successivi	Conserva i cerchi originali e il quadrilatero prima di eseguire una delle due operazioni

Per ottenere un’unica sagoma, seleziona entrambi i cerchi e il quadrilatero, quindi scegli Tracciato → Unione. Per ottenere un ponte separato, duplica i cerchi, unisci le copie in un unico elemento di taglio e posiziona quest’ultimo sopra il quadrilatero. Seleziona l’elemento di taglio e il quadrilatero, quindi scegli Tracciato → Differenza. Tieni i cerchi originali fuori da questa selezione.

La Differenza rimuove le aree circolari sovrapposte, lasciando estremità curve del ponte che seguono i bordi dei cerchi rivolti verso l’interno. L’Unione mantiene il contorno pieno complessivo. Queste operazioni e l’importanza dell’ordine di sovrapposizione sono spiegate nella guida di Inkscape alle operazioni booleane.

I lati di chiusura diritti del quadrilatero sono bordi di costruzione. Se lasci visibile il quadrilatero non ritagliato con un colore diverso, le corde risultano visibili all’interno dei cerchi. Usa il procedimento di sottrazione quando il ponte deve avere un colore proprio e terminare esattamente sulle circonferenze.

La formula seguente è uno strumento decisionale derivato dalle condizioni sulla lunghezza dei raggi e sulla perpendicolarità espresse nelle equazioni delle tangenti di MathWorld. Funziona con cerchi in posizioni qualsiasi, quindi non è necessario che siano allineati orizzontalmente.

Siano i centri A = (ax, ay) e B = (bx, by), con raggi positivi rA e rB. Per prima cosa, calcola la distanza tra i centri e il vettore unitario diretto da A a B:

d = sqrt((bx − ax)² + (by − ay)²)

u = (ux, uy) = ((bx − ax) / d, (by − ay) / d)

Costruisci un vettore unitario perpendicolare v = (−uy, ux). Poi calcola:

q = (rA − rB) / d

s = sqrt(1 − q²)

n₁ = q·u + s·v

n₂ = q·u − s·v

La moltiplicazione dei vettori indica qui la moltiplicazione di ogni componente per uno scalare. Ogni vettore n punta dal centro verso un punto di contatto con una tangente. I quattro punti sono:

• A₁ = A + rA·n₁
• B₁ = B + rB·n₁
• A₂ = A + rA·n₂
• B₂ = B + rB·n₂

Disegna il perimetro A₁ → B₁ → B₂ → A₂ → chiudi. A seconda della disposizione dei cerchi e dell’orientamento delle coordinate, una delle due normali può indicare il lato superiore.

Nell’esempio svolto, u = (1, 0), q = 0,6 e s = 0,8. Le due normali sono (0,6, 0,8) e (0,6, −0,8). Moltiplicandole per ciascun raggio e sommando il centro corrispondente si ottengono le quattro coordinate elencate sopra.

La costruzione deriva direttamente da questi vettori: ogni normale ha lunghezza uno, quindi il punto di contatto si trova sul cerchio. Il prodotto scalare con il segmento tra i punti di contatto corrispondenti è zero, stabilendo la tangenza. Per raggi uguali, q = 0, quindi i lati del ponte sono paralleli alla retta che unisce i centri.

Per il caso di cerchi separati, serve che d > rA + rB. Così si ottiene uno spazio effettivo da colmare con il ponte. Se i cerchi si sovrappongono già, unirli può comunque essere utile, ma si ottiene una forma diversa.

La formula richiede d > |rA − rB| per ottenere due distinti lati tangenti esterni. In caso di uguaglianza, la costruzione delle tangenti collassa. Sotto tale soglia, un cerchio è contenuto nell’altro e la radice quadrata non ha un valore reale. Anche con centri coincidenti, il calcolo del vettore unitario non è definito. Questi limiti derivano dalla formula sopra.

Ricalcola i punti di contatto ogni volta che sposti o ridimensioni uno dei due cerchi. Riposizionare a occhio un angolo del ponte può mantenere il contatto ma far perdere la tangenza. Allo stesso modo, allungare un cerchio trasformandolo in un’ellisse modifica la geometria: questa formula specifica per i cerchi non è più applicabile.

Esamina il risultato sia con uno zoom ravvicinato sia alle dimensioni previste per la visualizzazione. Segui questa sequenza per individuare la causa di un difetto visibile:

1. Controlla il riempimento. Verifica che il quadrilatero sia chiuso e riempito e non abbia segmenti incrociati.
2. Controlla la geometria dei cerchi. Verifica centri, raggi e unità di misura delle coordinate rispetto al calcolo.
3. Controlla i quattro punti di contatto. Correggi le coordinate dei nodi prima di modificare le maniglie delle curve.
4. Controlla la struttura finale. Verifica che l’Unione o la Differenza abbiano prodotto la sagoma o il ponte separato desiderati.
5. Controlla il contorno. Aggiungi un contorno alla sagoma finale se il disegno lo prevede; se applichi contorni separati ai vari elementi, verifica che non compaiano bordi interni indesiderati.

Per una verifica numerica, misura la distanza tra ciascun punto di contatto e il centro corrispondente: deve essere uguale al raggio del cerchio. Verifica poi che ciascun lato visibile del ponte sia perpendicolare ai raggi che arrivano ai punti di contatto. Questi controlli distinguono un raccordo preciso da uno che sembra soltanto allineato.

Una volta corretti i punti di contatto, resta da scegliere come organizzare il disegno: un’unica sagoma unificata oppure elementi pieni separati. Conserva i cerchi originali e i punti calcolati: potrai ricostruire lo stesso ponte raccordato ai bordi ogni volta che cambieranno le proporzioni del personaggio.

• Cerchi, ellissi e archi — Guida per principianti di Inkscape
• La finestra di dialogo Riempimento e contorno — Guida per principianti di Inkscape
• Opzioni dello strumento Nodo — Guida per principianti di Inkscape
• Operazioni booleane — Guida per principianti di Inkscape
• Tangenti tra cerchi — Wolfram MathWorld