図形を描く系のコードでやっている計算を図解するシリーズ。
(Illustrator用のJavaScript script編)
これは基礎知識級のことなのかもしれないのですが、
私は初めて知って面白いと思ったので、
本題
1. 同じ大きさの3円の場合
同じ大きさの円を3つ適当に描いたとき、3つの円に接する円が描けます。
(3円が直線上に並んでいるときを除く。)
こんなふうに。
しくみ
3つのうち2つの円に接する円の中心は、 2円の中心から等距離の点の軌跡、 つまり2円の中心を結んだ線の垂直二等分線上にあります。
中心を結んで三角形をつくると、 各辺の垂直二等分線の交点は三角形の外心(外接円の中心)なので、 3円に接する円の中心が1点に決まるのは当然といえば当然なわけです。
仕組みが分かると詰まらない気もしますが、 ブログの性格上、スクリプトにしたものを掲載します。
円が重なってる場合はこんなふうになっちゃいますねこれ。
外側で接するとは言ってないからこれもアリか。
2. 違う大きさの3円の場合
雰囲気的には描けそうなんですが、これが思ったより難しく、
調べたらこれは「アポロニウスの問題」というものだそうで、 ネット上で色々な解法が見つけられますがどれもややこしいです。
手に負えそうな解法のひとつを参考にさせていただき、 スクリプトにしてみましたが、このシリーズに載せるには複雑になってしまいました。 内容はまた何かの機会に図解したいと思います。
Illustratorで3円に接する円を描く · GitHub
1つだけ補足すると、3円に接する円の半径を大きく(or小さく)した場合、 3円のほうの半径を同じ分だけ小さく(or大きく)すると接した状態が保たれる のだそうで(アポロニウスの問題 - Wikipedia )、スクリプトに使った解法でもこの事実を利用しています。
上の「1.」でやっていることも、三角形の外接円に接する頂点を半径0の円と 考えると、3つの円に接するケースはそれらの半径を増やしただけのことともいえます。
【おわび】前回、脚注2で円の中心と半径を簡単に求める方法として 載せたものが間違っていたため修正しました。