科学・技術
ハイパーベジェ曲線の数学的美しさ
The mathematical beauty of hyperbezier curves (linebender.org)
要約
著者は、インタラクティブデザインに適した、現在のベジェ曲線よりも優れた曲線ファミリーを探求しています。その結果、Cesàro方程式で定義される新しい「ハイパーベジェ曲線」を提案しています。この曲線は、滑らかな曲率変化と高い張力領域の両方を持ち合わせ、オイラー螺旋、円弧、超楕円、双曲線、弾性曲線などの多様な形状を高い精度で近似できる可能性を示しています。
全文翻訳
ハイパーベジェ曲線の数学的美しさ
Raph Levien, 2026年8月8日
私は何十年もの間、キュービック・ベジェ曲線よりもインタラクティブデザインに適した曲線ファミリーの可能性に魅了されてきました。その探求の中で、私はベジェ曲線に対する新たな尊敬の念を抱くようになりました。特に、オイラー螺旋のような他の曲線は滑らかな曲率変化を表現するのに優れていますが、キュービック・ベジェ曲線が得意とする、曲率の大きな変化を伴う領域の表現には限界があります。ベジェ曲線の大きな強みはその汎用性です。したがって、厳密に優れた曲線ファミリーを見つけるには、そのファミリーが滑らかな曲率変化と曲率がピークになる高張力領域の両方を含む必要があるという要件が明確になります。私の博士論文の主題である多項式螺旋、またはスパイロ曲線は、この目標を達成できませんでした。かなりの探索と多くの候補の却下を経て、私は2Dベクターグラフィックデザインにおけるキュービック・ベジェ曲線に取って代わる非常に有力な候補となる曲線ファミリーの提案をここに提示します。早速ですが、この曲線ファミリーは、弧長の関数として曲率を指定するCesàro方程式によって表されます。
$$\kappa(s) = \frac{as+b}{(cs^2+ds+1)^{1.5}}$$
この曲線は、特に小さい角度ではキュービック・ベジェ曲線と驚くほど似た振る舞いをしますが、限界まで押し出された際には非常に異なる挙動を示します。全体として、より滑らかな曲率変化を持ち、曲率が単調である可能性が高いです。このファミリーには、いくつかの価値のある解析曲線が含まれており、また、幅広い他の曲線を近似するのにも適しています。このブログ投稿の残りの部分では、さまざまなコンテキストでのその振る舞いを示します。
キュービック・ベジェ曲線の近似
ハイパーベジェ曲線は、端点での小さな偏向角においてキュービック・ベジェ曲線を密接に近似します。数学的な推論を提示するよりも、実際に示します。以下は、キュービック・ベジェの制御点を対応するハイパーベジェにマッピングするインタラクティブテスターです。比較のためにベジェ曲線は灰色で表示されています。
オプション
キュービック・ベジェ
曲率
コム
より大きな角度、または制御ハンドルの「アーム長」が長くなるにつれて、キュービック・ベジェとの適合性は特に高くはありませんが、制御スキームは依然としてハイパーベジェ曲線のパラメータを設定するのに役立ちます(多項式係数を直接設定するのは直感的ではありません)。このパラメータマッピングは最初の実用的なドラフトであり、最終版ではない可能性があることに注意してください。とはいえ、インタラクティブな編集コンテキストでは、完璧なマッピングは必要ありません。望む曲線形状に到達するために制御点を調整することは常に可能です。マッピングの詳細はこのページのJavaScriptソースで見つけることができますが、基本的な原則は、アーム長が分母を設定し、次に端点の接線が一致するように分子を解くことです。
厳密な解析曲線
このファミリーに含まれる最も明白な解析曲線はオイラー螺旋であり、$c == d == 0$ の場合に明確に達成されます。オイラー螺旋は滑らかな曲率変化(最小変化曲線問題の解です)を持ち、曲率が単調です。厳密な円弧もパラメータ空間内にあり、$a == 0$ の場合です。比較すると、キュービック・ベジェ曲線は円弧を近似するだけです。パラメータ空間には、他にもいくつかの対数美的曲線(log-aesthetic curves)が潜んでおり、これは曲率が弧長のべき乗であるものを意味します。到達可能な指数は -3、-2、-1.5、および -0.5 です(あるいは、対数美的論文の慣例を使用すると、αは 1/3、1/2、2/3、および 2 です)。最後のものは円のインボリュートであり、とりわけ、それ自身の平行曲線であるという点で興味深いです。そして最初のものはオイラー螺旋の展開線です。上記で説明したパラメータマッピングは、制御点が私のオイラー螺旋平行曲線ブログ投稿の「二重放物線」上に配置された場合に、結果が厳密なオイラー螺旋になるように設計されています。
超楕円とスクワークル
キュービック・ベジェ曲線は、ある点までは超楕円(superellipse)を表現できますが、鋭い角には到達しません。その手前で追加の変曲点を発生させ始めますが、真の超楕円またはスクワークルは当然ながら凸です。ハイパーベジェ曲線は鋭い角まで到達でき、視覚的には超楕円にかなり近いです。それは信じられないほど正確ではありません(実際、中程度の指数、例えば5では、最良のキュービック・ベジェ近似の方がわずかに優れています)が、視覚的には正しいことを行います。ハイパーベジェは超楕円とは微妙に異なるスクワークルであり、どちらが良いとも悪いとも言えないと言うのがおそらく最善でしょう。
双曲線
もう一つの基本的な曲線は双曲線です。それは曲がり角で丸みを帯びていますが、曲率は減衰し、曲線は両側で線形漸近線に達します。キュービック・ベジェ曲線はこの曲線によく適合せず、その漸近的な振る舞いを示しません。しかし、ハイパーベジェ曲線はそれを自然かつ非常に高い精度で適合します。数学的な関係も評価できます。どちらの場合も、曲率は漸近的に $\kappa \approx s^{-3}$ として減衰します。さらに、Whewell方程式(下記参照)の偶対称ハイパーベジェの微小角度近似 $\sin \theta \approx \theta, \cos \theta \approx 1$ を積分すると、双曲線が正確に得られます。この密接な関係は、名前の由来の一つです。それは双曲線とベジェ曲線の融合のようなものです。ちなみに、もう一つの由来は、オイラー螺旋を含む対数美的解が超幾何関数によって表されることです。
弾性曲線
考慮すべき重要な曲線ファミリーは弾性曲線(elastica)であり、理想化された薄い柔軟な帯です。弾性曲線の背後にある数学は何百年もの歴史がありますが、より重要なのは、それが滑らかな曲線(最小エネルギー曲線問題の厳密な解として特徴付けられます)であり、張力がかかったときに大きな曲率変化を示すことができることです。私の目には、それはキュービック・ベジェ曲線とは異なり、物理的な現実に根ざしているため、より心地よく自然な曲線です。理想的にはそれをうまく近似できるはずですが、スパイロ曲線がそれができないという事実は、それに対する強力な反対意見となります。幸いなことに、私たちのハイパーベジェ曲線は比較的うまく機能します。超楕円の場合と同様に、それはかなりまともな視覚的な一致ですが、ここでも正確な近似ではありません。
いくつかの数学的特性
このセクションは、ハイパーベジェ曲線のいくつかの数学的特性の寄せ集めです。魅力的な特性は、Cesàro方程式が容易に積分でき、Whewell方程式が得られることです。
$$\theta(s) = \frac{a's+b'}{\sqrt{(cs^2+ds+1)}}$$
ここでの分子のパラメータはCesàro方程式のパラメータと同じではありません(ただし、それらは容易に導出できます)が、分母の二次多項式は同じです。もう一度積分すると(これは曲線フィッティングに特に役立つと信じています)、単純な解析方程式が得られ、三角関数との密接な関係が明らかになります。Whewell方程式のパラメータの導出は、次の積分から比較的単純に続きます。これは心地よい対称性を持っています。
$$\int \frac{as+b}{(cs^2 + 1)^{1.5}} ds = \frac{bs-a/c}{\sqrt{cs^2 + 1}} + C$$
逆方向に進むと、導関数も単純であり、同じ分母の多項式上で、今回は指数が2.5で、二次式が得られます。根を計算し、曲率の極値を特定することは、二次式を解くだけで済みます。分母は正であるため、[0, 1] の範囲内にある場合、$s = -b/a$ で最大1つの変曲点があります。これは、キュービック・ベジェ曲線が2つの変曲点を持つ可能性があるため、すべてのキュービック・ベジェ曲線を正確に近似できないことを明確に示しています。私の経験では、2つの変曲点を持つキュービック・ベジェ曲線のインスタンスはデザインではめったに使用されません(ベクトルグラフィックスのコーパスを調べてこれを定量化するのは興味深いかもしれません)。指数が1.5以外の値についても実験しました。指数が1であれば、パデ近似に似ているため魅力的で単純ですが、数値的に安定した方法で高張力曲線を表すことができないことがわかりました。指数2も検討しましたが、積分