反比例に見える 2 円の解剖

接点を見つめてみる

上のループでは、左上の円がしぼんだ分だけ右下の円がふくらみ、45 フレームかけて大きさが入れ替わる。後半は逆向きに戻って一周。見つめてほしいのは 2 円が触れ合う 1 点だ — 大きさがどれだけ入れ替わっても、接点は 90 フレームのあいだ一度も動かない。

この動きの名前は「反比例」。一方が育つともう一方が痩せる、あの数学の関係に見える。反比例なら、2 つの半径を掛けた答え（積）がいつも同じ数になるはずだ。だが元の動画を測ると、そうなっていない。一定なのは足し算のほう、半径の和 — 2 円の半径は、足すと常に 81px になるように動く。キーフレームが打たれているのは左上の円の半径だけで、3 個。右下の円の半径は「81 から左上を引いた残り」で、キーは 1 個もない。

半径 1 本と引き算 1 行を書く

• 半径キーは 3 個 — 0 フレーム目 54px、45 フレーム目 27px、90 フレーム目 54px
• イージングカーブは区間ごとに 1 本、計 2 本
• 右下の半径はキーゼロ — 81 から左上を引くだけ
• 2 つの中心もキーゼロ — 固定の接点から自分の半径ぶん退く

中心の置き方がこの作りの芯だ。45° の対角線上に接点を 1 点だけ固定し、左上の円は接点から左上へ、右下の円は右下へ、それぞれ自分の半径ぶん退いた位置に中心を置く。半径が変わると中心はひとりでに滑り、2 円はどのフレームでも接点でぴったり接する — 接触を合わせるキーはどこにもない。冒頭で接点が動かなかったのは、動かないように作られているからだ。

積の式と和の式の違いは、2 円が同じ大きさになる瞬間に表れる。すれ違いは 21〜22 フレーム目、半径はどちらも 40.5px — 81 のちょうど半分だ。掛けた答えを変えずに 2 つの数を近づけると、足した合計は必ず小さくなる。だから積が一定なら、半径の合計はこの瞬間 76.6px まで落ち込むはずだ。実測の合計は、静止付近で 80.931px・すれ違いの瞬間で 80.930px — 差は 0.001px で、落ち込みはない。積の式のずれは和の式の約 95 倍大きく、ここで捨てた。

止まって見える底にキーはない

しぼみ切った底は、しばらく止まって見える。最初の計測も「ここに止めのキーがある」と言った。だがそれは、計測プログラムが直前のフレームの答えを次の答えの出発点に使い回す癖が作った、見せかけの止まりだった。癖を断って測り直すと止まりは消え、ごく浅い谷だけが残った。

確定した作りにホールドキーはない。止まって見えるのは、区間ごとに 1 本だけ置かれたイージングカーブの終わり際が長くなだらかで、目標の値にゆっくり近づいていくからだ。行きと帰りのカーブは似ているが同一ではなく、試しに 1 本を両方に使い回すと、実測とのずれは約 5 倍に広がった。

カーブの終わり際には小さな表情もある。目標をわずかに通り越してから戻って着地する形で、半径がいちばん小さくなるのは 45 ではなく 44.1 フレーム付近、いちばん大きくなるのは 88.7 フレーム付近だ。元の動画から独立に測った谷と山も 44.0 と 88.7 を指していた。

再現に必要なのは純関数ひとつ

実装は、フレーム番号を渡すと 2 円の中心と半径を返す純関数ひとつ。キーで動かすのは左上の半径だけ、右下は引き算、中心は接点から計算で決まるから、接点のずれは原理的に出ない。半径のキーを 3 個から 5 個（54→27→54→27→54）に増やせば、同じ関数のまま、ひと回りのあいだに交換が 2 往復起きる。キーとカーブと 81 と接点の数値は、このページが読み込む JavaScript に定数でそのまま入っている — ブラウザのソース表示が仕様書を兼ねる。