円の縁に接する塗りつぶしブリッジの作り方
2つの円の間に塗りつぶしブリッジを作るには、2本の外公接線が円に接する4つの点を見つけ、それらの点をつないで閉じた四角形を作ります。その四角形を円と結合して連続したシルエットにするか、円の複製を差し引いて、円の縁に合う曲線状の端を持つ独立したブリッジを作ります。
このチュートリアルでは、Inkscapeを使って、平面的なキャラクターやバーチャルペットのイラスト向けに、正確なコネクターを作成します。ここで選ぶ方法では、上下の直線が円に滑らかにつながります。具体例では正確な座標を示し、その後、円の大きさや位置が異なる場合にも使える公式を紹介します。
ブリッジを両方の円に滑らかにつなげるには？
ブリッジは円に接していても、その輪郭に滑らかにつながっているとは限りません。円周上のどこかに角を置けば接触はしますが、ブリッジの辺に目立つ角ができることがあります。滑らかにつなげるには、その辺が接点での円の接線に沿っている必要があります。
離れた2つの円には、外公接線の組を使います。これは、2つの円の外側に沿って伸びる直線です。それぞれの接点は円周上にあり、その点を通る半径は接線と垂直になります。これらの条件は、Wolfram MathWorldの円と円の接線の方程式で示されています。
4つの接点で、この作図用の四角形が定まります。長い2辺はブリッジの露出する縁になり、閉じるための2辺は円を横切ります。図形を結合するか、円との重なりを取り除くと、この閉じる辺は消えます。
この方法で作れるのは、辺が直線のコネクターです。内側に湾曲してくびれたコネクターには別の曲線設計が必要で、接点だけではその形は決まりません。
描き始める前に何を準備する？
まず、完全な円を2つ、単色の塗りつぶし、線なしで用意します。全体を通して、同じ座標単位を使ってください。線があると合わせたい境界が見えにくくなるため、塗りつぶし形状を作った後で最後の輪郭線を追加します。
Inkscapeで楕円ツールを E キーで選び、Ctrl キーを押しながらドラッグして円を作ります。寸法を正確に指定するには、ツールコントロールで Rx と Ry に同じ値を設定します。オブジェクトが弧または扇形の場合は、作業を進める前に 楕円を全体にする を使います。これらの操作はInkscapeの円、楕円、弧のガイドで説明されています。
オブジェクト → 塗りと線 を開きます。単色で塗りつぶし、線の塗りの下にある十字形の 塗りなし コントロールを選択します。作図を確認する間は、不透明度を100%に保ちます。設定については塗りと線ダイアログを参照してください。
元の円2つの予備コピーを、作業領域の外に置いておきます。最後のブーリアン演算で作図形状が変わりますが、元の円があれば後から調整しやすくなります。
サンプル座標から正確なブリッジを作るには？
以下の例示寸法を使います。接点の形状を確認しやすいよう、意図的に細く先細りするコネクターにしています。座標の単位はピクセルで、xは右方向、yは下方向に増加します。
| オブジェクト | 中心 | 半径 | 外接矩形 |
|---|---|---|---|
| 円A | (100, 100) | 70 | x = 30–170; y = 30–170 |
| 円B | (200, 100) | 10 | x = 190–210; y = 90–110 |
中心間の距離は100単位です。半径の合計を差し引くと、円の最も近い縁どうしの間隔は20単位です。ブリッジはこの隙間をまたぎながら、円の輪郭へ滑らかにつながる必要があります。
この2つの円の接点は次の4つです。
| 点 | 位置 | 座標 |
|---|---|---|
| A上 | 円Aの上側の接点 | (142, 44) |
| B上 | 円Bの上側の接点 | (206, 92) |
| B下 | 円Bの下側の接点 | (206, 108) |
| A下 | 円Aの下側の接点 | (142, 156) |
ベジェ曲線／ペンツールを選び、表の順に4つの角を持つパスを作ります。ドラッグせずに各角をクリックし、最後に始点をクリックしてパスを閉じます。円と同じ単色で塗りつぶし、線を削除します。
正確に配置するには、まず四角形をおおよその位置に描きます。N キーでノードツールに切り替え、ノードを1つずつ選択して、ツールコントロールにx座標とy座標を入力します。座標の単位はピクセルに設定します。Inkscapeの数値入力欄についてはノードツールのオプションに説明があります。
点をつなぐときは、外周に沿って A上 → B上 → B下 → A下 → 閉じる の順にします。図形を斜めに横切るようにつなぐと、意図した塗りつぶしブリッジではなく、線が交差するパスになります。
このサンプル座標は、決定論的な計算で確認済みです。すべての接点は各円の中心から正しい距離にあり、ブリッジの長い辺は対応する接点の半径と垂直です。
ブリッジを結合するか、独立させるか？
キャラクターをどのように編集したり色分けしたりするかに合わせて、最終的な構成を選びます。
| 目的の結果 | 作成方法 |
|---|---|
| 連続した単色のシルエット | 2つの円と四角形を結合する |
| 円の位置で終わる、別の色のブリッジ | 円の複製を四角形から差し引く |
| 後で調整できる作図状態 | どちらの演算の前にも、元の円と四角形を残しておく |
単一のシルエットにするには、円2つと四角形を選択し、パス → 結合 を選びます。ブリッジを独立させるには、円を複製し、その複製を1つの切り抜き用図形に結合して、四角形より手前に配置します。切り抜き用図形と四角形を選択し、パス → 差分 を選びます。この選択に元の円を含めないでください。
差分では、重なっている円形部分が取り除かれ、向かい合う円の境界に沿った曲線状の端がブリッジに残ります。結合では、全体の塗りつぶし輪郭が保たれます。これらの操作と重なり順の重要性は、Inkscapeのブーリアン演算ガイドで説明されています。
四角形の直線の閉じ辺は作図用の辺です。切り抜いていない四角形を別の色で表示したままにすると、円の内側にその弦が見えてしまいます。ブリッジを別の色にし、円周で正確に終わらせたい場合は、差分を使ってください。
別の円の接点を計算するには？
以下の公式は、MathWorldの接線の方程式にある半径の長さと垂直条件をもとに導いた、判断の助けとなるものです。円の位置を自由に変えて使えるため、横に並べる必要はありません。
中心を A = (ax, ay)、B = (bx, by)、正の半径を rA、rB とします。まず中心間の距離と、AからBへ向かう単位ベクトルを計算します。
d = sqrt((bx − ax)² + (by − ay)²)
u = (ux, uy) = ((bx − ax) / d, (by − ay) / d)
垂直な単位ベクトル v = (−uy, ux) を作ります。次に、以下を計算します。
q = (rA − rB) / d
s = sqrt(1 − q²)
n₁ = q·u + s·v
n₂ = q·u − s·v
ここでのベクトルの乗算は、各成分にスカラーを掛けることを意味します。それぞれのベクトル n は、中心から接点へ向かいます。4つの接点は次のとおりです。
- A₁ = A + rA·n₁
- B₁ = B + rB·n₁
- A₂ = A + rA·n₂
- B₂ = B + rB·n₂
外周を A₁ → B₁ → B₂ → A₂ → 閉じる の順に描きます。円の配置や座標の向きによって、どちらの法線が上側になるかは異なります。
作成例では u = (1, 0)、q = 0.6、s = 0.8 です。2つの法線は (0.6, 0.8) と (0.6, −0.8) になります。それぞれの法線に各半径を掛け、対応する中心を加えると、先に示した4つの座標が得られます。
この作図はベクトルから直接導かれます。各法線の長さは1なので、接点は円周上にあります。対応する接点を結ぶ線分との内積は0であり、接線条件を満たします。半径が等しい場合は q = 0 となるため、ブリッジの辺は中心を結ぶ線と平行になります。
この作図で調整が必要になるのはどんなとき？
円が離れている場合は、ブリッジで埋める隙間ができるよう d > rA + rB を条件とします。円がすでに重なっている場合でも結合が役立つことはありますが、対象となるのは別の形状の問題です。
この公式で異なる2本の外接線を求めるには、d > |rA − rB| が必要です。等号の場合、接線の作図は一点に潰れます。この条件を下回ると、一方の円が他方の円の内側に入り、平方根の中身が実数でなくなります。中心が一致する場合も、単位ベクトルを計算できません。これらの限界は上記の公式から導かれます。
どちらかの円を移動または拡大縮小したら、接点を再計算してください。ブリッジの角を目分量で動かすと、接触は保てても接線条件が崩れることがあります。同様に、円を伸ばして楕円にすると形状が変わるため、この円専用の公式は使えなくなります。
完成したつながりを確認するには？
拡大表示と、実際に使用する表示サイズの両方で結果を確認します。目に見える不具合の原因は、次の手順で特定できます。
- 塗りつぶしを確認する。 四角形が閉じて塗りつぶされ、線が交差していないことを確認します。
- 円の形状を確認する。 中心、半径、座標の単位が計算と一致しているか確認します。
- 4つの接点を確認する。 曲線ハンドルを変更する前に、ノードの座標を修正します。
- 最終的な構成を確認する。 結合または差分で、意図したシルエットや独立したブリッジができているか確認します。
- 輪郭線を確認する。 デザインに必要なら、完成したシルエットに線を追加します。別々に線を付けたパーツでは、不要な内側の境界がないか確認します。
数値で確認するには、各接点から中心までの距離を測ります。その円の半径と等しくなければなりません。次に、ブリッジの露出する各辺が、接点の半径と垂直になっていることを確認します。この確認により、正確につながっているのか、見た目だけ揃っているのかを判別できます。
接点が正しくなったら、残るのはイラストの構成方法の選択です。1つにまとまったシルエットにするか、塗りつぶしたパーツに分けるかを決めます。元の円と計算した接点を残しておけば、キャラクターの比率が変わっても、同じように縁に合うブリッジを作り直せます。