Como construir uma ponte preenchida que se encaixe nas bordas de dois círculos
Para construir uma ponte preenchida entre dois círculos, encontre os quatro pontos em que as duas tangentes externas comuns tocam os círculos e, em seguida, conecte esses pontos para formar um quadrilátero fechado. Una esse quadrilátero aos círculos para obter uma silhueta contínua ou subtraia cópias dos círculos para deixar uma ponte separada com extremidades curvas que se encaixam em suas bordas.
Este tutorial usa o Inkscape para criar um conector preciso para um personagem plano ou uma ilustração de brinquedo virtual. A construção escolhida tem lados superior e inferior retos que se unem suavemente aos círculos. Um exemplo resolvido apresenta coordenadas exatas, seguido de uma fórmula que você pode reutilizar com círculos de diferentes tamanhos e posições.
O que faz a ponte se encaixar suavemente nos dois círculos?
Uma ponte pode tocar um círculo sem se unir suavemente ao seu contorno. Posicionar seus cantos em qualquer ponto da circunferência estabelece o contato, mas o lado da ponte ainda pode criar um canto visível. Para obter uma transição suave, esse lado precisa seguir a tangente do círculo no ponto de contato.
Para dois círculos separados, use o par de tangentes externas comuns: as linhas que percorrem a parte externa dos dois círculos. Cada ponto de contato fica sobre seu círculo, e o raio que passa por esse ponto é perpendicular à tangente. Essas são as condições expressas nas equações de tangência entre círculos do Wolfram MathWorld.
Os quatro pontos de contato definem o quadrilátero da construção. Seus dois lados mais longos se tornam as bordas expostas da ponte; os dois lados de fechamento passam pelos círculos. Esses lados de fechamento desaparecem quando as formas são unidas ou quando a sobreposição circular é removida.
Essa construção produz um conector com lados retos. Um conector estreito e curvado para dentro exigiria outro desenho de curva; os pontos de tangência, por si só, não determinam essa forma.
O que você deve preparar antes de desenhar?
Comece com dois círculos completos, um preenchimento sólido e sem contorno. Use uma única unidade de coordenada em todo o processo. Um contorno visível pode encobrir o limite que você está tentando alinhar, então adicione o contorno final depois de construir a geometria preenchida.
No Inkscape, selecione a ferramenta Elipse com E e mantenha Ctrl pressionado enquanto arrasta para criar um círculo. Para definir dimensões precisas, configure valores iguais para Rx e Ry nos controles da ferramenta. Se um objeto for um arco ou segmento, use Tornar elipse completa antes de prosseguir. Esses controles estão documentados no guia do Inkscape sobre círculos, elipses e arcos.
Abra Objeto → Preenchimento e contorno. Defina um preenchimento sólido e selecione o controle em forma de cruz Sem tinta em Cor do contorno. Mantenha a opacidade em 100% enquanto inspeciona a construção. Consulte A caixa de diálogo Preenchimento e contorno para ver essas configurações.
Mantenha uma cópia extra dos dois círculos originais fora da área de trabalho. A operação booleana final altera a construção, e esses originais facilitam ajustes posteriores.
Como criar uma ponte precisa a partir de coordenadas de exemplo?
Use as dimensões ilustrativas a seguir. Elas criam deliberadamente um conector bastante afunilado, facilitando a inspeção da geometria de contato. As coordenadas estão em pixels, com x aumentando para a direita e y aumentando para baixo.
| Objeto | Centro | Raio | Caixa delimitadora |
|---|---|---|---|
| Círculo A | (100, 100) | 70 | x = 30–170; y = 30–170 |
| Círculo B | (200, 100) | 10 | x = 190–210; y = 90–110 |
Os centros estão separados por 100 unidades. Subtrair os raios deixa uma lacuna de 20 unidades entre as bordas mais próximas dos círculos. A ponte precisa cobrir essa lacuna e continuar suavemente nos contornos circulares.
Para esses círculos, os quatro pontos de contato das tangentes são:
| Ponto | Localização | Coordenadas |
|---|---|---|
| A superior | Contato superior no Círculo A | (142, 44) |
| B superior | Contato superior no Círculo B | (206, 92) |
| B inferior | Contato inferior no Círculo B | (206, 108) |
| A inferior | Contato inferior no Círculo A | (142, 156) |
Selecione a ferramenta Bézier/Caneta e crie um caminho com quatro cantos, na ordem indicada na tabela. Clique em cada canto sem arrastar e, em seguida, clique no ponto inicial para fechar o caminho. Aplique o mesmo preenchimento sólido dos círculos e remova o contorno.
Para posicionar os pontos com precisão, desenhe primeiro o quadrilátero de forma aproximada. Com a ferramenta Nós, ativada por N, selecione um nó de cada vez e insira suas coordenadas x e y nos controles da ferramenta. Defina a unidade das coordenadas como pixels. O Inkscape documenta esses campos numéricos em Opções da ferramenta Nós.
Siga o perímetro ao conectar os pontos: A superior → B superior → B inferior → A inferior → fechar. Conectá-los na diagonal, atravessando a forma, cria um caminho cruzado em vez da ponte preenchida desejada.
Essas coordenadas de exemplo foram verificadas por um cálculo determinístico: cada ponto de contato está à distância correta do centro de seu círculo, e cada lado longo da ponte é perpendicular aos respectivos raios nos pontos de contato.
Você deve unir a ponte ou mantê-la separada?
Escolha a estrutura final de acordo com a forma como deseja editar ou colorir o personagem.
| Resultado desejado | Construção |
|---|---|
| Uma silhueta contínua de uma só cor | Una os dois círculos e o quadrilátero |
| Ponte colorida separadamente, que termina nos círculos | Subtraia cópias dos círculos do quadrilátero |
| Construção editável para ajustes posteriores | Mantenha os círculos e o quadrilátero originais antes de qualquer operação |
Para criar uma única silhueta, selecione os dois círculos e o quadrilátero e escolha Caminho → União. Para criar uma ponte separada, duplique os círculos, una as duplicatas em uma única forma de corte e posicione essa forma acima do quadrilátero. Selecione a forma de corte e o quadrilátero e escolha Caminho → Diferença. Mantenha os círculos originais fora dessa seleção.
A Diferença remove as áreas circulares sobrepostas, deixando extremidades curvas na ponte que acompanham os limites voltados para ela. A União mantém o contorno preenchido geral. Essas operações e a importância da ordem de empilhamento são explicadas no guia do Inkscape sobre operações booleanas.
Os lados retos de fechamento do quadrilátero são bordas de construção. Se o quadrilátero sem recorte ficar visível em outra cor, essas cordas aparecerão dentro dos círculos. Use o processo de subtração quando a ponte precisar ter sua própria cor e terminar exatamente nas circunferências.
Como calcular os pontos de contato para outros círculos?
A fórmula a seguir é um recurso de apoio à decisão derivado das condições de comprimento do raio e perpendicularidade nas equações de tangência do MathWorld. Ela funciona para círculos em quaisquer posições, portanto não é necessário que estejam alinhados horizontalmente.
Sejam os centros A = (ax, ay) e B = (bx, by), com raios positivos rA e rB. Primeiro, calcule a distância entre os centros e um vetor unitário que aponta de A para B:
d = sqrt((bx − ax)² + (by − ay)²)
u = (ux, uy) = ((bx − ax) / d, (by − ay) / d)
Construa um vetor unitário perpendicular v = (−uy, ux). Em seguida, calcule:
q = (rA − rB) / d
s = sqrt(1 − q²)
n₁ = q·u + s·v
n₂ = q·u − s·v
A multiplicação de vetores aqui significa multiplicar cada componente pelo escalar. Cada vetor n aponta de um centro para um ponto de contato com a tangente. Os quatro pontos são:
- A₁ = A + rA·n₁
- B₁ = B + rB·n₁
- A₂ = A + rA·n₂
- B₂ = B + rB·n₂
Desenhe o perímetro A₁ → B₁ → B₂ → A₂ → fechar. Dependendo da disposição dos círculos e da orientação das coordenadas, qualquer uma das normais pode representar o lado superior.
No exemplo resolvido, u = (1, 0), q = 0.6 e s = 0.8. As duas normais são (0.6, 0.8) e (0.6, −0.8). Multiplicá-las por cada raio e somar o centro correspondente resulta nas quatro coordenadas listadas anteriormente.
A construção decorre diretamente desses vetores: cada normal tem comprimento unitário, posicionando seu ponto de contato sobre o círculo. O produto escalar entre ela e o segmento que une os pontos de contato correspondentes é zero, estabelecendo a tangência. Para raios iguais, q = 0, portanto os lados da ponte são paralelos à linha que une os centros.
Quando essa construção precisa ser ajustada?
Para o caso dos círculos separados, exija d > rA + rB. Isso garante uma lacuna real para a ponte preencher. Se os círculos já estiverem sobrepostos, uni-los ainda pode ser útil, mas o resultado tratará de um problema de forma diferente.
A fórmula em si exige d > |rA − rB| para criar dois lados distintos de tangentes externas. Na igualdade, a construção das tangentes colapsa. Abaixo desse limite, um círculo está dentro do outro e a raiz quadrada não tem valor real. Centros coincidentes também tornam indefinido o cálculo do vetor unitário. Esses limites decorrem da fórmula acima.
Recalcule os pontos de contato sempre que mover ou redimensionar qualquer um dos círculos. Reposicionar um canto da ponte a olho pode manter o contato e perder a tangência. Da mesma forma, esticar um círculo até transformá-lo em uma elipse altera a geometria; essa fórmula específica para círculos deixa de se aplicar.
Como verificar a conexão final?
Inspecione o resultado com zoom aproximado e no tamanho em que será exibido. Use a sequência a seguir para identificar a causa de um defeito visível:
- Verifique o preenchimento. Confirme se o quadrilátero está fechado e preenchido, sem segmentos cruzados.
- Verifique a geometria dos círculos. Confira os centros, os raios e as unidades das coordenadas com base no cálculo.
- Verifique os quatro pontos de contato. Corrija as coordenadas dos nós antes de alterar as alças das curvas.
- Verifique a estrutura final. Confirme se a União ou a Diferença produziu a silhueta ou a ponte separada que você queria.
- Verifique o contorno. Adicione um contorno à silhueta final, se o design exigir; inspecione as peças com contorno separado para detectar limites internos indesejados.
Para uma verificação numérica, meça a distância de cada ponto de contato até seu centro: ela deve ser igual ao raio do círculo. Em seguida, confirme que cada lado exposto da ponte é perpendicular aos respectivos raios nos pontos de contato. Esses testes diferenciam uma conexão precisa de outra que apenas parece alinhada.
Com os pontos de contato corretos, resta decidir como organizar a arte: como uma silhueta unificada ou como peças preenchidas separadas. Preserve os círculos originais e os pontos calculados para poder reconstruir a mesma ponte encaixada nas bordas sempre que as proporções do personagem mudarem.