ベジェ曲線

プログラム話です。

ベジェ曲線、便利ですよね。いろんな曲線が書けちゃいます。
ペイントツールとかでよく見かけるベジェ曲線は３次のベジェ曲線と言って、制御点を４か所決めると、１本の曲線が決まるというモノです。
制御点とは、Photoshopとかだと「アンカーポイント」「ハンドル」と言われているものです。
始点アンカー、始点ハンドル、終点ハンドル、終点アンカーの４点を１組とする曲線が１本の３次ベジェ曲線です。

これをいくつもつなぎ合わせて複雑な曲線を作っています。

この曲線がどのようにして作られるかは、こちらのページが分かりやすいです
https://postd.cc/bezier-curves/

3次のベジェ曲線（以下、単にベジェ曲線と呼ぶ）は、座標を媒介変数の3次関数で表したものです。

こんな式です

x = at^3 + bt^2 + ct + d

ですので、この式で表わすことのできる曲線ならばベジェ曲線で正確に書くことができます。
逆に言えば、この式で表現できない曲線をベジェ曲線で書くことはできません。

んなもん使うのか？って感じですが、身近なところでは「円」です。
実はベジェ曲線では、円を正確に表すことはできません。
ベジェ曲線の3次式をどう変形させても、円と同じ式にはならないからです。

円が無理ということは、円の一部である円弧もダメということ。
ベジェ曲線が使えるツールでは、「円」を選択するといかにもベジェ曲線で作りましたという円が出てくる事がありますが、アレはあくまでも「円の近似」であって円そのものではありません。

（あ、すみません、円という漢字がゲシュタルト崩壊してきたので以後○と書きます）

これって、デザインなど「限りなく○ぽいもの」が必要なだけだったら何の問題もないのですが、そのデータを設計図として使おうとすると大変なことになります。
ベジェ曲線で表現した○をそのまま作ってしまうと、用途によってはマトモに使えない○になってしまいます。

ちなみにベジェ曲線で作った○というのは、正しい○よりも若干膨らんだ形になります。
つまり正しい○よりも少しだけ面積が大きいということですから、ベジェ曲線の○をプリンターで出力すると、なんと正しい○よりもインクを多く使ってしまうのです！！

具体的にどのくらい違うかなどは、こちらに詳しく書かれています
https://cat-in-136.github.io/2014/03/bezier-2-diff.html

まあ、そんな正確性を要求されるような事は（ゲーム的には）まず無いので、ぜんぜん気にしなくて良いんですけどね。
ベジェ曲線って、形を表現するときは勿論ですが、現在位置から目的位置に向かって滑らかに進む物体の軌跡なんかを求めるのにもすごい役に立つんですよね。

以前テストで作ったシューティングゲームでは誘導ミサイルを動かす時に、始点アンカーを自機に、終点アンカーを敵に、その間の２つのハンドル(※)は適当に決め、そうやって求めたベジェ曲線に従ってミサイルが進むようにしていました。

※ハンドルの位置は、始点と終点における接線の傾きでだいたい決まります。
つまり自機（始点）から「どの向きに発射して」、ターゲット（終点）に「どの向きに突っ込ませたいか」です。

ちなみに…

「ある範囲（長方形）の内側を 8 の字を描くように飛ぶ物体」などを作りたい場合は、リサジュー曲線を使うと単純かつ一発できれいに飛ぶようにできます。

例えば

x = cos(2t)
y = sin(t)

の式を使って t を 0 ～ 2πに変化させると、点(x, y) は滑らかな 8 の字を描きますし、

x = cos(t)
y = sin(2t)

とすれば ∞ のような形になります。

係数を変えることで様々な形になるので、一定範囲内をぐるぐる回るようなキャラクターの軌跡を単純な数式で表したい場合は何かと重宝します

わかりやすい動画があったので貼っておきます

リサジュー曲線シミューレータ
https://www.youtube.com/watch?v=ivmVnhgf6ps