ベジェ曲線の決定版：時代を超えたアルゴリズムをさらに進化させる

コンピュータグラフィックスの定番であるベジェ曲線。その計算アルゴリズムをさらに洗練させ、より滑らかで精度の高い曲線を描くための最新アプローチについて解説します。古くからある手法にひと工夫加えるだけで、描画品質を劇的に向上させるヒントがここにあります。

最高の教材だね。実は自分もベクターエディタを作ってて、デフォルトで滑らかな曲率でシェイプを描画してコームを表示するようにしてるんだ。[1] 記事で言及されてる4種類のポイントに加えて、新しい「カーブ」ポイントっていうタイプも追加してる。同じ描画機能を持たせたフォントエディタも作ってるよ。[2] どちらもローカルストレージを使う無料の静的Webアプリで、SVGファイル（フォントエディタはOTFファイル）のインポート・エクスポートにも対応してる。[1] https://svg.a10z.co/editor [2] https://svg.a10z.co/font

他のコメントでも触れられてるけど、Raph Levienがベジェ曲線の改善についていくつか言及してるよ。Simplifying Bézier paths (2023) https://raphlinus.github.io/curves/2023/04/18/bezpath-simplify.html Parallel curves of cubic Béziers (2022) https://raphlinus.github.io/curves/2022/09/09/parallel-beziers.html Fitting cubic Bézier curves (2021) https://raphlinus.github.io/curves/2021/03/11/bezier-fitting.html

この記事のイラスト、教材として本当に貴重だ。

「線形補間（別名 lerp）は単一のコンパクトな式にまとめられる。例えば4つの制御点（A,B,C,D）の場合：γ(t)=A⋅(1−t)^3+B⋅3(1−t)^2⋅t+C⋅3(1−t)t^2+D⋅t^3。ルールはシンプルで、（1-t）の降べきの順、tの昇べきの順で、係数はパスカルの三角形のn行目から取るだけ。」ベジェ曲線の式（より正確には、N個の制御点を持つ曲線の線形方程式）とパスカルの三角形のつながりなんて意識したことなかった！素晴らしいな。記事も最高。

ベジェ曲線の編集に人生の多くの時間を費やしてきた身として、これは本当に素晴らしい内容だ。唯一の難点は、S字曲線の真ん中の不安定さで、ここは扱うのが難しそう。完全な凸あるいは非凸のパスについては制御しやすくなるけど、その境界で混沌とした状態になるというトレードオフがある。この領域で曲率の別の誤差項を組み込んで、曲率自体が小さすぎるときに曲率の導関数が連続に近くなるように保証したら解決するんじゃないかな？あと、接円半径の飽和関数を使えば、0曲率ポイントで制御点が無限大に飛ぶのを防げるかも。飽和ポイントを近くのノードからの距離の関数にすればスケール感も維持できそう。

ベジェ曲線ってセクシーで、丸みがあって、賢くて魅力的だと思う。最高だし、この内容も同じくらい素晴らしい！世界にはもっとベジェ曲線が必要だよ。

問題のある曲線っていうのは、大抵ベストプラクティスとされているルールに違反してるんだよね。- ノードを極値（上下左右）に配置する - ノードを変曲点（S字曲線の真ん中）に配置する - 可能であれば「30のルール」を守り、オフカーブノードを隣のオンカーブノードまでの距離の3分の1の位置に配置する。もしこれらを期待（あるいは強制）できれば、問題や計算はもっと簡単になるのかな？