曲線美に酔いしれる：ハイパーベジェ曲線の数理的魅力

ベジェ曲線をさらに進化させた「ハイパーベジェ曲線（Hyperbezier curves）」の数学的な美しさについて解説します。滑らかな曲線生成を追求するエンジニアやクリエイターにとって、その幾何学的な構造と計算の洗練さは非常に興味深いトピックです。

関連する話だけど、去年、仕事で作ってたアプリのためにベジェ曲線を使ってかなり特殊なUIを作る機会があったんだ。

その過程を未来の自分に向けて解説するために、どうやって実装したかをブログにまとめたよ[0]。

モバイルデベロッパーとして、単なるCRUDアプリを作る以外のことができてすごく楽しかった。

[0] https://www.krtkush.com/computer-graphics-basics-with-compose-part-1/

ベジェが普及した大きな要因のひとつはローカルサポートにあると思う。つまり、制御点を動かしたときに、同じ方向に期待通りの変化が起きるっていう点だね。「三次ベジェよりインタラクティブなデザインに適した曲線ファミリー」を探求した結果がこれっていうのは興味深い。曲率の変化という点での品質向上には向いてると思うけど、インタラクティブさという点ではそこまでかな。

すごくクールなデモだね。制御点が近づきすぎると、曲線が少し変な挙動を見せるような気がする。

もっといじってみたけど、近づいた時というより、横に負荷がかかった時かな。考えてみると、ドローソフトでこんな形状を作るのは難しいかもしれないけど、これこそ著者が気に入ってる素晴らしい螺旋の正体なんじゃないかな。

ベジェ曲線、大好きなんだよね。短大時代、初めて自分からもっと深く調べたいと思ったテーマだった。一番の思い出は、2015年製のMacbook Proで、家中の人間が寝静まった深夜に何日もかけて、ひどいp5.jsのコードを書いてはブラウザの更新ボタンを何度も連打してたこと。ある時突然、制御点から美しくてリアルな曲線が浮かび上がってきた時の感動は忘れられない。

今さっき、当時の古いリソース[0]を引っ張り出してみたんだけど、この記事がもう10年近く前だなんて信じられない。当時Google検索で出てくるどんなリソースよりも、この人の解説やアニメーションはずば抜けてたよ。

[0] https://jamie-wong.com/post/bezier-curves/

サンプルを触ってみたけど、制御点の操作は従来の三次ベジェより直感的という感じはしないな。端点付近での面倒な挙動はまだ残ってるし、ただ従来の三次ベジェのように「爆発」する傾向はなさそうだね。

著者が、コンピュータグラフィックスやCADで普及しているBスプラインやCatmull-Romスプラインといった他のスプライン曲線と比較しようとしていないのが不思議。なぜなんだろう。

Raph、こういう曲線はどうやって描画してるの？曲率や接線（だよね？）の式が与えられたとして、どこから手を付ければいいのか正確には分からないな。ペンツールのリンクには「オートポイント」について書かれてるけど、これはある種の制約付きベジェ分割みたいなもの？合ってる？あと、記事の中で数学的な部分を修正したって言ってるけど、これはペンツールとは少し違って、オートポイントは使ってないってことかな？

デモを触ってると、特定の配置で曲線が形を固定して、制御点をドラッグしても動かなくなる場所があるんだけど、これは一時的な問題か数値的な安定性の問題？それともハイパーベジェの性質？例えば、P0を左下、C1を右下、C2を左上、P3を右上にして四角形に配置し、C1を右にドラッグするとすぐロックされる。目測だけど、P0C1の長さがC2P3の約1.5倍になったあたりかな？C1をさらに右や上下に動かしても、曲線が全く変化しない広大な領域があるよ。

P/Cという命名も気になった。P[03]はポイント、C[12]は接線ベクトルに近いという意味で、ハーミット曲線のような考え方なのかな？なぜP[0123]にしなかったんだろう？

一つ言及すべき明らかな点として、ベジェがこれほど人気なのは数学がシンプルだからっていうのもあるよね？線形ステップに分解できるし、整数の指数だし、行列演算だけで計算できる。描画があまりにも簡単だ。そこに制御のしやすさ、計算の単純さ（ルートや変曲点、バウンディングボックスの計算、分割など）が加われば、普及するのも納得。ハイパーベジェは興味深いけど、用途の直感はまだ湧かない。ただ、レンダリングにはベジェより重い計算が必要そう。曲率や角度の式に割り算や平方根が含まれるからね。分割やサブディビジョンは簡単にできるのかな？

あなたは長い間、より良い曲線を追い求めているよね。ベジェのような曲線の分割と、より完璧な補間を見つけることについて、どう考えてる？もちろんトレードオフはあると思うけど、分割や近似では実用的に解決できない問題を目指しているのかな？あと、ハイパーベジェとNURBSについての見解も聞けたら嬉しい。

これ最高。

幾何学的トポロジーを見ると頭が痒くなるんだよね。関わりたくないし、絶対気が狂うと思う。

でも、あのエラスティカ（弾性曲線）がめちゃくちゃいいのは同意するよ。

すごくクールなデモだけど、従来のベジェに取って代わるというよりは、デザイナーにとっての選択肢が一つ増える、という感じかな。

エキサイティングで新しい曲線だね。ストローク処理をどう扱うのか聞いてみたい。ベジェ曲線の内側や外側のストロークは、ベジェ曲線自体では表現できないからね。ハイパーベジェだとどうなるのかな？

ベジェ曲線は物理的な物体（車）を設計するために発明されたものだけど、当時の非力なコンピュータでCADを実現するための理想化された簡略版だった。本来、CADの第一選択肢はエラスティカであるべきなんだけど、制御点が近すぎると計算が発散しやすく、制約条件に対して複数の解が存在することもあるから計算が難しいんだよね。

スパイロ曲線がそれを解決するはずだったけど、スパイロですらエラスティカを近似しきれないというのをここで読んで驚いてる。限界がどこにあるか把握してる？

ちなみに私はボートの船体を設計してるんだけど、エラスティカなら木材や合板、金属の自然な曲がり方をベジェよりはるかにうまく表現できるんだ。アマチュアの船舶設計者は、理想的な流線型と実際の建造のしやすさとの間を埋めるいいツールがなくて、最初の船体を板張りするときには、細かいけど面倒な調整がたくさんあるんだよ。