Twitter(ではなくX)を徘徊していたら、こんなツイート(ではなくポスト)を見つけました。
美しく見える角アールの処理について。
— さとうコージィ COSYDESIGN Inc. (@cosydesign) October 21, 2024
道路や線路などにも使われている「クロソイド曲線」の考え方で、4分の1の円弧と直線の繋ぎ目部分に、円弧よりも緩やかな曲線を挟んであげると、錯視による違和感が解消されます。マークやロゴタイプをデザインする際に取り入れたいテクニックです。 pic.twitter.com/wmoszgDxZf
自分はよく知らないのですが、このように緩和曲線がApple Watchのアイコン形状で採用されているのだそうです。
「クロソイド曲線」は、曲線方向に進んでいくと延長に比例して曲率が大きくなっていく曲線です。これに近似を導入すると、在来線で使われている「3次放物線」の緩和曲線になります。(このへんは道路とか鉄道とか土木のものの本を探してください。)
さてデザイン分野で使いやすい「ベジエ曲線」(つまりIllustratorのペンツール)は、クロソイド曲線を数学的に正確にトレースすることはできません。しかし、3次放物線であればベジエ曲線で正確に作ることができます。ハンドルの座標も計算して正確に求めることができます。(なぜならベジエ曲線は3次多項式のパラメータ曲線だからです。)

クロソイドとベジエ曲線がVRMのフレキシブルレール以外でこうして繋がるとは、露にも思ったことはありませんでした。身近なデザイン要素と、全然別の工学的要素が同じ数学によって繋がると面白いですね。
数学的に検討しておく事項をまとめると、次の4点です。
- クロソイドは交角θが十分小さい間は3次放物線と近似できる。
- 3次放物線の曲率は交角θが十分小さい間は2次導関数と近似できる。
- ベジエ曲線は数学的に厳密に3次放物線をトレースできる(途中で分割する必要もない)
- ベジエ曲線の端点の接線はハンドルと一致する
これらの性質をうまく使うと、Illustratorならグリッドスナップやポイントスナップを活用しながら、ペンツール、楕円ツール、はさみツールの3つのツールだけで緩和曲線と円曲線を組み合わせた隅丸形状を作ることができます。
ただし、面倒な計算は超少ない反面、1.と2.の近似が効いてるので、緩和曲線と円曲線の継目での曲率のゆがみは多少あります。このゆがみは、緩和曲線の割合をもっと短くすることで小さくすることができます。
具体的な説明は面倒くさくなったので気が向いたら書きます(ぉぃ
補遺.
ベジエ曲線のハンドル先端を、隅で重ねて作った曲線は2次のパラメータ曲線になります。曲率が連続的に変化することには変わりありませんが、今回のクロソイドや3次放物線とは曲線の種類が変わります。(詳しく検討してないが包絡線になるのか?)