Cómo construir un puente relleno que se une a dos círculos por sus bordes

Un puente puede tocar un círculo sin unirse suavemente a su contorno. Colocar sus esquinas en cualquier punto de la circunferencia establece el contacto, pero el lado del puente aún puede formar una esquina visible. Para lograr una transición suave, ese lado debe seguir la tangente del círculo en el punto de contacto.

Para dos círculos separados, usa el par de tangentes exteriores comunes: las líneas que recorren el exterior de ambos círculos. Cada punto de contacto está sobre su círculo, y el radio que pasa por ese punto es perpendicular a la tangente. Estas son las condiciones que expresan las ecuaciones de tangentes entre círculos de Wolfram MathWorld.

Los cuatro puntos de contacto definen el cuadrilátero de construcción. Sus dos lados largos se convierten en los bordes visibles del puente; sus dos lados de cierre pasan por los círculos. Esos lados de cierre desaparecen al unir las formas o al eliminar la superposición circular.

Esta construcción produce un conector de lados rectos. Un conector curvado hacia dentro y estrechado requeriría un diseño de curva diferente; los puntos de tangencia por sí solos no determinan esa forma.

Empieza con dos círculos completos, un relleno sólido y sin trazo. Usa una sola unidad de coordenadas en todo el proceso. Un trazo visible puede ocultar el borde que intentas ajustar, así que añade el contorno final después de construir la geometría rellena.

En Inkscape, selecciona la herramienta Elipse con E y mantén pulsada Ctrl mientras arrastras para crear un círculo. Para establecer dimensiones precisas, introduce los mismos valores en Rx y Ry en los controles de la herramienta. Si un objeto es un arco o un segmento, usa Convertir en elipse completa antes de continuar. Estos controles se documentan en la guía de Inkscape sobre círculos, elipses y arcos.

Abre Objeto → Relleno y borde. Define un relleno sólido y selecciona el control en forma de cruz Sin pintura en Pintura de trazo. Mantén la opacidad al 100 % mientras inspeccionas la construcción. Consulta El diálogo Relleno y borde para ver estos ajustes.

Guarda una copia de los dos círculos originales fuera del área de trabajo. La operación booleana final modifica la construcción, y esos originales facilitan los ajustes posteriores.

Usa las siguientes dimensiones ilustrativas. Están elegidas para crear deliberadamente un conector muy estrechado, lo que facilita inspeccionar la geometría de contacto. Las coordenadas están en píxeles; x aumenta hacia la derecha e y hacia abajo.

Objeto	Centro	Radio	Cuadro delimitador
Círculo A	(100, 100)	70	x = 30–170; y = 30–170
Círculo B	(200, 100)	10	x = 190–210; y = 90–110

Los centros distan 100 unidades. Al restar los radios queda un espacio de 20 unidades entre los bordes más cercanos de los círculos. El puente debe cubrir ese espacio y continuar suavemente los contornos circulares.

Para estos círculos, los cuatro puntos de contacto con las tangentes son:

Punto	Ubicación	Coordenadas
A superior	Contacto superior en el círculo A	(142, 44)
B superior	Contacto superior en el círculo B	(206, 92)
B inferior	Contacto inferior en el círculo B	(206, 108)
A inferior	Contacto inferior en el círculo A	(142, 156)

Selecciona la herramienta Bézier/Lápiz y crea una trayectoria de cuatro esquinas en el orden indicado en la tabla. Haz clic en cada esquina sin arrastrar y luego haz clic en el punto inicial para cerrar la trayectoria. Asígnale el mismo relleno sólido que a los círculos y quítale el trazo.

Para colocar los puntos con precisión, dibuja primero el cuadrilátero de forma aproximada. Cambia a la herramienta Nodos con N, selecciona un nodo a la vez e introduce sus coordenadas x e y en los controles de la herramienta. Establece la unidad de coordenadas en píxeles. Inkscape documenta estos campos numéricos en Opciones de la herramienta Nodos.

Conecta los puntos siguiendo el perímetro: A superior → B superior → B inferior → A inferior → cerrar. Si conectas en diagonal a través de la forma, crearás una trayectoria cruzada en vez del puente relleno previsto.

Estas coordenadas de ejemplo se comprobaron mediante un cálculo determinista: cada punto de contacto está a la distancia correcta del centro de su círculo y cada lado largo del puente es perpendicular a los radios de contacto correspondientes.

Elige la estructura final según cómo quieras editar o colorear el personaje.

Resultado deseado	Construcción
Una silueta continua de un solo color	Unir ambos círculos y el cuadrilátero
Puente de color independiente que termina en los círculos	Restar copias de los círculos del cuadrilátero
Construcción editable para futuros ajustes	Conservar los círculos originales y el cuadrilátero antes de cualquiera de las operaciones

Para obtener una sola silueta, selecciona los dos círculos y el cuadrilátero, y luego elige Trayecto → Unión. Para crear un puente independiente, duplica los círculos, une esas copias para formar un solo objeto de corte y colócalo encima del cuadrilátero. Selecciona el objeto de corte y el cuadrilátero, y luego elige Trayecto → Diferencia. Deja los círculos originales fuera de esta selección.

Diferencia elimina las áreas circulares superpuestas y deja extremos curvos en el puente que siguen los bordes enfrentados de los círculos. Unión conserva el contorno relleno general. Estas operaciones y la importancia del orden de apilamiento se explican en la guía de operaciones booleanas de Inkscape.

Los lados rectos de cierre del cuadrilátero son bordes de construcción. Si dejas visible el cuadrilátero sin recortar y en otro color, se verán esas cuerdas dentro de los círculos. Usa el método de sustracción cuando el puente necesite su propio color y deba terminar justo en las circunferencias.

La siguiente fórmula es una guía práctica derivada de las condiciones de longitud del radio y perpendicularidad de las ecuaciones de tangentes de MathWorld. Funciona con círculos en posiciones arbitrarias, por lo que no es necesario que estén alineados horizontalmente.

Sean los centros A = (ax, ay) y B = (bx, by), con radios positivos rA y rB. Primero calcula la distancia entre los centros y un vector unitario que apunte de A a B:

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

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

Construye un vector unitario perpendicular v = (−uy, ux). Luego calcula:

q = (rA − rB) / d

s = sqrt(1 − q²)

n₁ = q·u + s·v

n₂ = q·u − s·v

La multiplicación de vectores aquí consiste en multiplicar cada componente por el escalar. Cada vector n apunta desde un centro hacia un punto de contacto con una tangente. Los cuatro puntos son:

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

Dibuja el perímetro A₁ → B₁ → B₂ → A₂ → cerrar. Cualquiera de las normales puede representar el lado superior, según la disposición de los círculos y la orientación de las coordenadas.

En el ejemplo práctico, u = (1, 0), q = 0.6 y s = 0.8. Las dos normales son (0.6, 0.8) y (0.6, −0.8). Al multiplicarlas por cada radio y sumar el centro correspondiente, se obtienen las cuatro coordenadas indicadas anteriormente.

La construcción se deriva directamente de esos vectores: cada normal tiene longitud uno, por lo que el punto de contacto queda sobre el círculo. Su producto escalar con el segmento entre los puntos de contacto correspondientes es cero, lo que establece la tangencia. Para radios iguales, q = 0, así que los lados del puente son paralelos a la línea que une los centros.

Para el caso de círculos separados, exige d > rA + rB. Así existe un espacio real que el puente puede cubrir. Si los círculos ya se superponen, unirlos puede seguir siendo útil, pero el resultado resuelve un problema de forma distinto.

La fórmula requiere d > |rA − rB| para obtener dos lados de tangente exterior distintos. En el límite, la construcción de las tangentes se colapsa. Por debajo de ese umbral, un círculo queda dentro del otro y la raíz cuadrada no tiene un valor real. Si los centros coinciden, el cálculo del vector unitario tampoco está definido. Estos límites se desprenden de la fórmula anterior.

Vuelve a calcular los puntos de contacto cada vez que muevas o cambies el tamaño de cualquiera de los círculos. Reubicar una esquina del puente a ojo puede conservar el contacto y perder la tangencia. Del mismo modo, estirar un círculo hasta convertirlo en una elipse cambia la geometría; esta fórmula específica para círculos ya no es aplicable.

Inspecciona el resultado con un acercamiento y al tamaño previsto de visualización. Sigue esta secuencia para identificar la causa de cualquier defecto visible:

1. Comprueba el relleno. Confirma que el cuadrilátero esté cerrado, relleno y sin segmentos cruzados.
2. Comprueba la geometría de los círculos. Verifica los centros, los radios y las unidades de coordenadas con respecto al cálculo.
3. Comprueba los cuatro contactos. Corrige las coordenadas de los nodos antes de modificar los tiradores de curva.
4. Comprueba la estructura final. Confirma que Unión o Diferencia haya producido la silueta o el puente independiente que querías.
5. Comprueba el contorno. Añade un trazo a la silueta terminada si el diseño lo requiere; si cada pieza tiene su propio trazo, busca bordes internos no deseados.

Para una comprobación numérica, mide la distancia desde cada punto de contacto hasta su centro: debe ser igual al radio de ese círculo. Luego verifica que cada lado visible del puente sea perpendicular a los radios de contacto correspondientes. Estas pruebas permiten distinguir una conexión precisa de otra que solo parece alineada.

Una vez corregidos los contactos, queda decidir cómo organizar el dibujo: como una sola silueta unificada o como piezas rellenas independientes. Conserva los círculos originales y los puntos calculados para poder reconstruir el mismo puente ajustado a los bordes cuando cambien las proporciones del personaje.

• Círculos, elipses y arcos — Guía para principiantes de Inkscape
• El diálogo Relleno y borde — Guía para principiantes de Inkscape
• Opciones de la herramienta Nodos — Guía para principiantes de Inkscape
• Operaciones booleanas — Guía para principiantes de Inkscape
• Tangentes entre círculos — Wolfram MathWorld