ベジェ曲線を求めよう

Prompt

座標a(x: 0, y: 0)から座標b(x: 1, y: 0)へ、座標c(x: 0.5, y: 1)を経路として通るアーチ状の曲線を時間t(0 <= t <= 1)で移動することを考える。
時間tが0のときは座標a、tが0.5のときは座標c、tが1のときは座標bにいる。
座標cを境に対称な形になる。
時間tに対応する座標を求めるには？

ここで多分、アーチの形状がどのぐらい湾曲しているかを示しておらず不十分だと思うんだけど、どう示したらいいかわからないから任せる。
(ところで、これはベジェ曲線になる？)

---

君が考えているのは、まさにベジェ曲線だよ！その直感は正しいね！

提示された条件は、ベジェ曲線を定義するのに十分な情報を持っているんだ。数学的に厳密な「アーチの形状」は、**制御点（コントロールポイント）**と呼ばれる点を使って指定するよ。

ベジェ曲線とは

ベジェ曲線は、始点、終点、そして途中の曲がり具合を決定する1つ以上の制御点を使って描かれる滑らかな曲線だよ。コンピュータグラフィックスやフォントのデザインなど、滑らかな曲線を描く必要がある場面でよく使われるんだ。

君のシナリオでは、

• 始点: 座標A (0, 0)

• 終点: 座標B (1, 0)

• 中間点: 座標C (0.5, 1)

この3点を使ってアーチ状の曲線を描く場合、最もシンプルで一般的なのは2次ベジェ曲線だね。

時間tに対応する座標を求める式

君の言う通り、2次ベジェ曲線を使うと、時間tに対応する座標を求める式は、以下のようになるよ。

$P(t)=(1-t{)}^2{P}_0+2t(1-t)P_1+t^2{P}_2$

ここで、

• $P(t)$ は、時間 $t$ における座標

• $P_0$ は、始点（座標A）

• $P_1$ は、制御点（Control Point）

• $P_2$ は、終点（座標B）

になる。

ここで一つ問題がある。提示された座標C (0.5, 1) は「経由点」であって、「制御点」ではないんだ。ベジェ曲線では、制御点は必ずしも曲線の上には来ないんだよ。

経由点から制御点を求める

君の条件「時間tが0.5のときに座標Cを通る」を使い、制御点 $P_1$ を求めてみよう。

$$\begin{gathered} P(0.5)=(1-0.5{)}^2{P}_0+2(0.5)(1-0.5)P_1+(0.5{)}^2{P}_2 \\ P(0.5)=(0.5{)}^2{P}_0+(1)P_1+(0.5{)}^2{P}_2 \\ P(0.5)=0.25P_0+0.5P_1+0.25P_2 \end{gathered}$$

ここで、

• $P(0.5)$ は、経由点である座標C(0.5, 1) だね。

• $P_0$ は、座標A(0, 0) だね。

• $P_2$ は、座標B(1, 0) だね。

これらを式に代入して、制御点 $P_1$ を求めると、

$$\begin{gathered} C=0.25A+0.5P_1+0.25B \\ C-0.25A-0.25B=0.5P_1 \\ 2C-0.5A-0.5B=P_1 \end{gathered}$$

座標を代入して計算すると、

$P_1=2(0.5,1)-0.5(0,0)-0.5(1,0)=(1,2)-(0,0)-(0.5,0)=(0.5,2)$

となる。

したがって、制御点 $P_1$ は、(0.5, 2) になるよ。

時間tに対応する最終的な座標を求める式

これで全ての点が揃ったね！最終的な式は、この制御点 $P_1(0.5,2)$ を使って、以下のようになるよ。

$P(t)=(1-t{)}^2(0,0)+2t(1-t)(0.5,2)+t^2(1,0)$

これをさらに x座標と y座標に分けて整理すると、

$x(t)=2t(1-t)(0.5)+t^2(1)$

$x(t)=t(1-t)+t^2=t-t^2+t^2=t$

$y(t)=2t(1-t)(2)$

$y(t)=4t-4t^2$

したがって、時間 $t$ に対応する座標を求める最終的な式は、

$x(t)=t$

$y(t)=4t-4t^2$

となるよ！この式は、0から1まで滑らかに移動する、放物線のようなアーチを描くんだ。

君の直感は、まさにコンピュータグラフィックスの基本となる数学を見抜いていたね！素晴らしい！