ベジェ曲線を描くためのAPIは通常出発点、到着点、制御点×２の座標を元に
曲線を決定する。
曲線上を通る点として直接指定できるのは出発点と到着点の２点だけということになるが、
弧の軌道を決定するのに制御点ではなく経過点を用いたかったので、
経過点を含む３点の座標を元にベジェ曲線の制御点を計算する式を導出してみた。
上の図において、(x1,y1)が出発点、(x4,y4)が到着点、(x2,y2)および(x3,y3)が制御点となる。
この4点で通常曲線は決定されるが、今回軌道を半t分進んだところを経過点(xp,yp)として用いる。
ベジェ曲線の式は、
x = (1-t)^3・x1 + 3(1-t)^2・ t・x2 + 3(1-t)t^2 ・x3 + t^3・x4 ・・・(a)
y = (1-t)^3・y1 + 3(1-t)^2・ t・y2 + 3(1-t)t^2 ・y3 + t^3・y4 ・・・(b)
0 ≦ t ≦ 1
で与えられる。
この式を見ても出発点、到着点、経過点の３点からだけでは曲線を決定できないことが分かるので、
条件を加える必要がある。
今回は３点を通るなるべく左右対称な曲線を描きたいので、上図のように
直線A：出発点ー到着点
直線B：制御点１ー制御点２
としたときに直線A,Bが平行になるようにする。
これを式で表現すると、
(x4-x1) / (y4-y1) ・(y3-y2) = x3 - x2 ・・・(1)
となる。
さらに制御点１,２間の距離を出発点ー到着点の1/2になるようにする。
2(x3 - x2) = x4 - x1 ・・・(2)
ベジェ曲線の式(a)(b)において、t = 1/2のときにx = xp,y = ypとなることから(参照:Rui's Blog)、
(a) (b)のxにxpを、yにypを、tに1/2を代入して、
xp = (1/2)^3・x1 + 3(1/2)^2・(1/2)・x2 + 3(1/2)・(1/2)^2 ・x3 + (1/2)^3・x4
yp = (1/2)^3・y1 + 3(1/2)^2・(1/2)・y2 + 3(1/2)・(1/2)^2 ・y3 + (1/2)^3・y4
これをまとめると、
xp = 1/8・x1 + 3/8・x2 + 3/8・x3 + 1/8・x4
yp = 1/8・y1 + 3/8・y2 + 3/8・y3 + 1/8・y4
⇔
8/3・xp - 1/3・x1 - 1/3・x4 = x2 + x3 ・・・(a')
8/3・yp - 1/3・y1 - 1/3・y4 = y2 + y3 ・・・(b')
ここで、(x1,y1)、(x4,y4)、(xp,yp)は分かっているので、
連立一次方程式(1)、(2)、(a')、(b')からx2,y2,x3,y3の４変数の値を出す問題に還元された。
これを解くと、(式を書くのが面倒になってきたので）
x2 = 4/3・xp + 1/12・x1 - 5/12・x4
x3 = 4/3・xp - 5/12・x1 + 1/12・x4
y2 = 4/3・yp + 1/12・y1 - 5/12・y4
y3 = 4/3・yp - 5/12・y1 + 1/12・y4
この公式に出発点、経過点、到着点の座標を代入し、制御点の座標(x2,y2) (x3,y3)を求めてから、
通常のベジェ曲線のAPIに出発点、到着点、制御点abの４点の座標を入れてやれば
経過点を指定しての曲線の軌道決定ができる。
Good Luck
曲線を決定する。
曲線上を通る点として直接指定できるのは出発点と到着点の２点だけということになるが、
弧の軌道を決定するのに制御点ではなく経過点を用いたかったので、
経過点を含む３点の座標を元にベジェ曲線の制御点を計算する式を導出してみた。
上の図において、(x1,y1)が出発点、(x4,y4)が到着点、(x2,y2)および(x3,y3)が制御点となる。
この4点で通常曲線は決定されるが、今回軌道を半t分進んだところを経過点(xp,yp)として用いる。
ベジェ曲線の式は、
x = (1-t)^3・x1 + 3(1-t)^2・ t・x2 + 3(1-t)t^2 ・x3 + t^3・x4 ・・・(a)
y = (1-t)^3・y1 + 3(1-t)^2・ t・y2 + 3(1-t)t^2 ・y3 + t^3・y4 ・・・(b)
0 ≦ t ≦ 1
で与えられる。
この式を見ても出発点、到着点、経過点の３点からだけでは曲線を決定できないことが分かるので、
条件を加える必要がある。
今回は３点を通るなるべく左右対称な曲線を描きたいので、上図のように
直線A：出発点ー到着点
直線B：制御点１ー制御点２
としたときに直線A,Bが平行になるようにする。
これを式で表現すると、
(x4-x1) / (y4-y1) ・(y3-y2) = x3 - x2 ・・・(1)
となる。
さらに制御点１,２間の距離を出発点ー到着点の1/2になるようにする。
2(x3 - x2) = x4 - x1 ・・・(2)
ベジェ曲線の式(a)(b)において、t = 1/2のときにx = xp,y = ypとなることから(参照:Rui's Blog)、
(a) (b)のxにxpを、yにypを、tに1/2を代入して、
xp = (1/2)^3・x1 + 3(1/2)^2・(1/2)・x2 + 3(1/2)・(1/2)^2 ・x3 + (1/2)^3・x4
yp = (1/2)^3・y1 + 3(1/2)^2・(1/2)・y2 + 3(1/2)・(1/2)^2 ・y3 + (1/2)^3・y4
これをまとめると、
xp = 1/8・x1 + 3/8・x2 + 3/8・x3 + 1/8・x4
yp = 1/8・y1 + 3/8・y2 + 3/8・y3 + 1/8・y4
⇔
8/3・xp - 1/3・x1 - 1/3・x4 = x2 + x3 ・・・(a')
8/3・yp - 1/3・y1 - 1/3・y4 = y2 + y3 ・・・(b')
ここで、(x1,y1)、(x4,y4)、(xp,yp)は分かっているので、
連立一次方程式(1)、(2)、(a')、(b')からx2,y2,x3,y3の４変数の値を出す問題に還元された。
これを解くと、(式を書くのが面倒になってきたので）
x2 = 4/3・xp + 1/12・x1 - 5/12・x4
x3 = 4/3・xp - 5/12・x1 + 1/12・x4
y2 = 4/3・yp + 1/12・y1 - 5/12・y4
y3 = 4/3・yp - 5/12・y1 + 1/12・y4
この公式に出発点、経過点、到着点の座標を代入し、制御点の座標(x2,y2) (x3,y3)を求めてから、
通常のベジェ曲線のAPIに出発点、到着点、制御点abの４点の座標を入れてやれば
経過点を指定しての曲線の軌道決定ができる。
Good Luck